@skillkit/tui 2.0.0 → 2.0.1

package/README.md

@@ -34,7 +34,7 @@ pnpm ui
 - **Animated UI** - Smooth entrance animations and transitions
 - **Browse Skills** - Explore skill repositories with search and filtering
 - **Smart Recommendations** - AI-powered skill suggestions with match scores
-- **Cross-Agent Translation** - Convert skills between 17+ agent formats
+- **Cross-Agent Translation** - Convert skills between 32 agent formats
 - **Team Collaboration** - Share and sync skills across teams
 - **Responsive Design** - Adapts to any terminal size
 

package/dist/index.d.ts

@@ -8,6 +8,9 @@ interface SkillItem {
     source?: string;
     installs?: number;
     enabled?: boolean;
+    quality?: number;
+    grade?: string;
+    warnings?: number;
 }
 interface RepoInfo {
     source: string;
@@ -111,7 +114,7 @@ interface AgentLogo {
     company: string;
 }
 /**
- * All 17 supported agents with monochromatic Unicode logos
+ * All 32 supported agents with monochromatic Unicode logos
  */
 declare const AGENT_LOGOS: Record<string, AgentLogo>;
 /**
@@ -367,13 +370,10 @@ declare function getDetectedAgents(state: AgentsState): AgentStatus[];
  */
 declare function getAgentAdapter(type: AgentType): _skillkit_agents.AgentAdapter;
 /**
- * Total number of supported agents
+ * Total number of supported agents (derived from adapters)
  */
-declare const TOTAL_AGENTS = 17;
+declare const TOTAL_AGENTS: number;
 
-/**
- * Default popular repos - can be extended via config.marketplaceSources
- */
 declare const DEFAULT_REPOS: RepoInfo[];
 /**
  * Marketplace state

package/dist/index.js

@@ -5,6 +5,7 @@ import { createRoot } from "@opentui/react";
 // src/App.tsx
 import { useState as useState15, useCallback as useCallback9, useEffect as useEffect13 } from "react";
 import { useKeyboard as useKeyboard8 } from "@opentui/react";
+import { exec } from "child_process";
 
 // src/state/types.ts
 var NAV_KEYS = {
@@ -155,6 +156,21 @@ var AGENT_LOGOS = {
   "trae": { icon: "\u25C6", name: "Trae", company: "ByteDance" },
   "antigravity": { icon: "\u229B", name: "Antigravity", company: "" },
   "clawdbot": { icon: "\u27D0", name: "Clawdbot", company: "" },
+  "cline": { icon: "\u2295", name: "Cline", company: "" },
+  "codebuddy": { icon: "\u2297", name: "CodeBuddy", company: "" },
+  "commandcode": { icon: "\u2298", name: "CommandCode", company: "" },
+  "continue": { icon: "\u229E", name: "Continue", company: "" },
+  "crush": { icon: "\u229F", name: "Crush", company: "" },
+  "factory": { icon: "\u22A0", name: "Factory", company: "" },
+  "mcpjam": { icon: "\u22A1", name: "MCPJam", company: "" },
+  "mux": { icon: "\u22A2", name: "Mux", company: "" },
+  "neovate": { icon: "\u22A3", name: "Neovate", company: "" },
+  "openhands": { icon: "\u22A4", name: "OpenHands", company: "" },
+  "pi": { icon: "\u22A5", name: "Pi", company: "" },
+  "qoder": { icon: "\u22A6", name: "Qoder", company: "" },
+  "qwen": { icon: "\u22A7", name: "Qwen", company: "Alibaba" },
+  "vercel": { icon: "\u25B2", name: "Vercel", company: "Vercel" },
+  "zencoder": { icon: "\u22A9", name: "Zencoder", company: "" },
   "universal": { icon: "\u25CF", name: "Universal", company: "" }
 };
 var symbols = {
@@ -525,7 +541,7 @@ function isNavKey(key) {
 }
 
 // src/state/skills.ts
-import { findAllSkills } from "@skillkit/core";
+import { findAllSkills, evaluateSkillDirectory, getQualityGrade } from "@skillkit/core";
 import { rmSync } from "fs";
 import { resolve, normalize } from "path";
 function createSkillsState() {
@@ -539,12 +555,18 @@ function loadSkills(agentType) {
   try {
     const searchDirs = getSearchDirs(agentType);
     const foundSkills = findAllSkills(searchDirs);
-    const skillItems = foundSkills.map((s) => ({
-      name: s.name,
-      description: s.description,
-      source: s.metadata?.source,
-      enabled: s.enabled
-    }));
+    const skillItems = foundSkills.map((s) => {
+      const quality = evaluateSkillDirectory(s.path);
+      return {
+        name: s.name,
+        description: s.description,
+        source: s.metadata?.source,
+        enabled: s.enabled,
+        quality: quality?.overall,
+        grade: quality ? getQualityGrade(quality.overall) : void 0,
+        warnings: quality?.warnings.length
+      };
+    });
     return {
       skills: skillItems,
       loading: false,
@@ -635,44 +657,59 @@ function getDetectedAgents(state) {
 function getAgentAdapter(type) {
   return getAdapter2(type);
 }
-var TOTAL_AGENTS = 17;
+var TOTAL_AGENTS = getAllAdapters().length;
 
 // src/state/marketplace.ts
 import { detectProvider, loadConfig as loadConfig3, extractFrontmatter } from "@skillkit/core";
 import { readFileSync as readFileSync2, existsSync, rmSync as rmSync2 } from "fs";
 import { join as join2 } from "path";
-var DEFAULT_REPOS = [
-  { source: "anthropics/skills", name: "Anthropic Official" },
-  { source: "vercel-labs/agent-skills", name: "Vercel Labs" },
-  { source: "expo/skills", name: "Expo / React Native" },
-  { source: "remotion-dev/skills", name: "Remotion Video" },
-  { source: "ComposioHQ/awesome-claude-skills", name: "Composio Awesome" },
-  { source: "travisvn/awesome-claude-skills", name: "Travis Awesome" },
-  { source: "mhattingpete/claude-skills-marketplace", name: "Skills Marketplace" },
-  { source: "coreyhaines31/marketingskills", name: "Marketing Skills" },
-  { source: "obra/superpowers", name: "Superpowers TDD" },
-  { source: "softaworks/agent-toolkit", name: "Softaworks Toolkit" },
-  { source: "wshobson/agents", name: "Dev Patterns" },
-  { source: "langgenius/dify", name: "Dify Frontend" },
-  { source: "trailofbits/skills", name: "Trail of Bits Security" },
-  { source: "better-auth/skills", name: "Better Auth" },
-  { source: "onmax/nuxt-skills", name: "Nuxt / Vue" },
-  { source: "hyf0/vue-skills", name: "Vue Best Practices" },
-  { source: "jezweb/claude-skills", name: "Cloudflare / TanStack" },
-  { source: "elysiajs/skills", name: "ElysiaJS / Bun" },
-  { source: "kadajett/agent-nestjs-skills", name: "NestJS" },
-  { source: "callstackincubator/agent-skills", name: "React Native" },
-  { source: "cloudai-x/threejs-skills", name: "Three.js" },
-  { source: "emalorenzo/three-agent-skills", name: "Three.js Advanced" },
-  { source: "dimillian/skills", name: "SwiftUI iOS" },
-  { source: "stripe/ai", name: "Stripe Payments" },
-  { source: "waynesutton/convexskills", name: "Convex Backend" },
-  { source: "kepano/obsidian-skills", name: "Obsidian Notes" },
-  { source: "jimliu/baoyu-skills", name: "Baoyu Tools" },
-  { source: "giuseppe-trisciuoglio/developer-kit", name: "Shadcn / Radix" },
-  { source: "openrouterteam/agent-skills", name: "OpenRouter SDK" },
-  { source: "intellectronica/agent-skills", name: "Context7" }
-];
+
+// ../../marketplace/sources.json
+var sources_default = {
+  $schema: "./sources-schema.json",
+  version: 1,
+  updatedAt: "2026-01-26",
+  description: "Curated skill repository sources - THE SINGLE SOURCE OF TRUTH",
+  sources: [
+    { source: "anthropics/skills", name: "Anthropic Official", official: true },
+    { source: "vercel-labs/agent-skills", name: "Vercel Labs", official: true },
+    { source: "expo/skills", name: "Expo / React Native", official: true },
+    { source: "remotion-dev/skills", name: "Remotion Video", official: true },
+    { source: "supabase/agent-skills", name: "Supabase", official: true },
+    { source: "stripe/ai", name: "Stripe Payments", official: true },
+    { source: "ComposioHQ/awesome-claude-skills", name: "Composio Awesome" },
+    { source: "travisvn/awesome-claude-skills", name: "Travis Awesome" },
+    { source: "mhattingpete/claude-skills-marketplace", name: "Skills Marketplace" },
+    { source: "coreyhaines31/marketingskills", name: "Marketing Skills" },
+    { source: "obra/superpowers", name: "Superpowers TDD" },
+    { source: "softaworks/agent-toolkit", name: "Softaworks Toolkit" },
+    { source: "wshobson/agents", name: "Dev Patterns" },
+    { source: "langgenius/dify", name: "Dify Frontend" },
+    { source: "trailofbits/skills", name: "Trail of Bits Security" },
+    { source: "better-auth/skills", name: "Better Auth" },
+    { source: "onmax/nuxt-skills", name: "Nuxt / Vue" },
+    { source: "hyf0/vue-skills", name: "Vue Best Practices" },
+    { source: "jezweb/claude-skills", name: "Cloudflare / TanStack" },
+    { source: "elysiajs/skills", name: "ElysiaJS / Bun" },
+    { source: "kadajett/agent-nestjs-skills", name: "NestJS" },
+    { source: "callstackincubator/agent-skills", name: "React Native" },
+    { source: "cloudai-x/threejs-skills", name: "Three.js" },
+    { source: "emalorenzo/three-agent-skills", name: "Three.js Advanced" },
+    { source: "dimillian/skills", name: "SwiftUI iOS" },
+    { source: "waynesutton/convexskills", name: "Convex Backend" },
+    { source: "kepano/obsidian-skills", name: "Obsidian Notes" },
+    { source: "jimliu/baoyu-skills", name: "Baoyu Tools" },
+    { source: "giuseppe-trisciuoglio/developer-kit", name: "Shadcn / Radix" },
+    { source: "openrouterteam/agent-skills", name: "OpenRouter SDK" },
+    { source: "intellectronica/agent-skills", name: "Context7" }
+  ]
+};
+
+// src/state/marketplace.ts
+var DEFAULT_REPOS = sources_default.sources.map((s) => ({
+  source: s.source,
+  name: s.name
+}));
 function getMarketplaceRepos() {
   try {
     const config = loadConfig3();
@@ -991,17 +1028,10 @@ function Browse({ onNavigate, cols = 80, rows = 24 }) {
         const actualIdx = startIdx + idx;
         const selected = actualIdx === selectedIndex;
         const indicator = selected ? "\u25B8" : " ";
-        const available = Math.max(0, contentWidth - repo.name.length - 6);
-        const safeSlice = Math.max(0, available - 3);
-        const displaySource = available > 0 && repo.source.length > available ? repo.source.slice(0, safeSlice) + "..." : repo.source;
-        return /* @__PURE__ */ jsxs4("box", { flexDirection: "row", children: [
-          /* @__PURE__ */ jsx4("text", { fg: terminalColors.text, children: indicator }),
-          /* @__PURE__ */ jsx4("text", { fg: selected ? terminalColors.accent : terminalColors.text, children: repo.name }),
-          /* @__PURE__ */ jsxs4("text", { fg: terminalColors.textMuted, children: [
-            " \xB7 ",
-            displaySource
-          ] })
-        ] }, repo.source);
+        const maxSourceLen = Math.max(0, contentWidth - repo.name.length - 6);
+        const displaySource = maxSourceLen > 3 && repo.source.length > maxSourceLen ? repo.source.slice(0, maxSourceLen - 3) + "..." : repo.source;
+        const line = `${indicator}${repo.name} \xB7 ${displaySource}`;
+        return /* @__PURE__ */ jsx4("text", { fg: selected ? terminalColors.accent : terminalColors.text, children: line }, repo.source);
       }) }),
       filteredRepos.length > maxVisible && /* @__PURE__ */ jsxs4("text", { fg: terminalColors.textMuted, children: [
         "\n",
@@ -1160,15 +1190,11 @@ function Installed({ onNavigate, cols = 80, rows = 24 }) {
           const selected = actualIdx === selectedIndex;
           const indicator = selected ? "\u25B8" : " ";
           const statusIcon = skill.enabled !== false ? "\u25CF" : "\u25CB";
-          const statusColor = skill.enabled !== false ? terminalColors.success : terminalColors.textMuted;
-          return /* @__PURE__ */ jsxs5("box", { flexDirection: "row", children: [
-            /* @__PURE__ */ jsx5("text", { fg: terminalColors.text, children: indicator }),
-            /* @__PURE__ */ jsxs5("text", { fg: statusColor, children: [
-              statusIcon,
-              " "
-            ] }),
-            /* @__PURE__ */ jsx5("text", { fg: selected ? terminalColors.accent : terminalColors.text, children: skill.name })
-          ] }, skill.name);
+          const qualityBadge = skill.grade ? ` [${skill.grade}]` : "";
+          const warningIndicator = skill.warnings && skill.warnings > 2 ? " \u26A0" : "";
+          const line = `${indicator}${statusIcon} ${skill.name}${qualityBadge}${warningIndicator}`;
+          const badgeColor = skill.quality !== void 0 ? skill.quality >= 80 ? terminalColors.success : skill.quality >= 60 ? terminalColors.warning : terminalColors.error : terminalColors.text;
+          return /* @__PURE__ */ jsx5("text", { fg: selected ? terminalColors.accent : badgeColor, children: line }, skill.name);
         }),
         filteredSkills.length > maxVisible && /* @__PURE__ */ jsxs5("text", { fg: terminalColors.textMuted, children: [
           "\n",
@@ -1268,22 +1294,16 @@ function Marketplace({ onNavigate, cols = 80, rows = 24 }) {
       /* @__PURE__ */ jsx6("text", { children: " " })
     ] }),
     animPhase >= 3 && /* @__PURE__ */ jsxs6("box", { flexDirection: "column", children: [
-      /* @__PURE__ */ jsxs6("box", { flexDirection: "row", children: [
-        /* @__PURE__ */ jsx6("text", { fg: terminalColors.text, children: "Featured" }),
-        /* @__PURE__ */ jsx6("text", { fg: terminalColors.textMuted, children: " \xB7 trending" })
+      /* @__PURE__ */ jsxs6("text", { fg: terminalColors.text, children: [
+        "Featured \xB7 ",
+        /* @__PURE__ */ jsx6("text", { fg: terminalColors.textMuted, children: "trending" })
       ] }),
       /* @__PURE__ */ jsx6("text", { children: " " }),
       visibleFeatured.map((item, idx) => {
         const selected = idx === selectedIndex;
         const indicator = selected ? "\u25B8" : " ";
-        return /* @__PURE__ */ jsxs6("box", { flexDirection: "row", children: [
-          /* @__PURE__ */ jsx6("text", { fg: terminalColors.text, children: indicator }),
-          /* @__PURE__ */ jsx6("text", { fg: selected ? terminalColors.accent : terminalColors.text, children: item.name }),
-          /* @__PURE__ */ jsxs6("text", { fg: terminalColors.recommend, children: [
-            " \u2605",
-            item.stars
-          ] })
-        ] }, item.source);
+        const line = `${indicator}${item.name} \u2605${item.stars}`;
+        return /* @__PURE__ */ jsx6("text", { fg: selected ? terminalColors.accent : terminalColors.text, children: line }, item.source);
       }),
       featured.length > maxVisible && /* @__PURE__ */ jsxs6("text", { fg: terminalColors.textMuted, children: [
         "\n",
@@ -1339,12 +1359,12 @@ function Recommend({ onNavigate, cols = 80, rows = 24 }) {
     return () => clearInterval(interval);
   }, [analyzing]);
   const recommendations = useMemo6(() => [
-    { name: "tdd-workflow", reason: "Based on your test files and coverage patterns", confidence: 95 },
-    { name: "react-patterns", reason: "Detected React in package.json with hooks usage", confidence: 88 },
-    { name: "typescript-strict", reason: "tsconfig.json found with strict mode disabled", confidence: 82 },
-    { name: "git-workflow", reason: ".git directory with complex branching detected", confidence: 75 },
-    { name: "api-design", reason: "REST endpoints found in your codebase", confidence: 68 },
-    { name: "docker-compose", reason: "docker-compose.yml detected for orchestration", confidence: 62 }
+    { name: "tdd-workflow", reason: "Based on your test files and coverage patterns", confidence: 95, quality: 92, grade: "A" },
+    { name: "react-patterns", reason: "Detected React in package.json with hooks usage", confidence: 88, quality: 85, grade: "B" },
+    { name: "typescript-strict", reason: "tsconfig.json found with strict mode disabled", confidence: 82, quality: 78, grade: "C" },
+    { name: "git-workflow", reason: ".git directory with complex branching detected", confidence: 75, quality: 82, grade: "B" },
+    { name: "api-design", reason: "REST endpoints found in your codebase", confidence: 68, quality: 71, grade: "C" },
+    { name: "docker-compose", reason: "docker-compose.yml detected for orchestration", confidence: 62, quality: 65, grade: "D" }
   ], []);
   const maxVisible = Math.max(3, Math.floor((rows - 10) / 2));
   const visibleRecs = recommendations.slice(0, maxVisible);
@@ -1426,6 +1446,7 @@ function Recommend({ onNavigate, cols = 80, rows = 24 }) {
       visibleRecs.map((rec, idx) => {
         const selected = idx === selectedIndex;
         const indicator = selected ? "\u25B8" : " ";
+        const qualityColor = rec.quality >= 80 ? terminalColors.success : rec.quality >= 60 ? terminalColors.warning : terminalColors.error;
         return /* @__PURE__ */ jsxs7("box", { flexDirection: "column", children: [
           /* @__PURE__ */ jsxs7("box", { flexDirection: "row", children: [
             /* @__PURE__ */ jsx7("text", { fg: terminalColors.text, children: indicator }),
@@ -1434,6 +1455,11 @@ function Recommend({ onNavigate, cols = 80, rows = 24 }) {
               " ",
               rec.confidence,
               "%"
+            ] }),
+            /* @__PURE__ */ jsxs7("text", { fg: qualityColor, children: [
+              " [",
+              rec.grade,
+              "]"
             ] })
           ] }),
           /* @__PURE__ */ jsxs7("text", { fg: terminalColors.textMuted, children: [
@@ -2271,14 +2297,16 @@ var SHORTCUTS = [
     { key: "m", desc: "Marketplace" },
     { key: "r", desc: "Recommendations" },
     { key: "i", desc: "Installed skills" },
-    { key: "s", desc: "Sync settings" }
+    { key: "s", desc: "Sync settings" },
+    { key: "f", desc: "Find skills" }
   ] },
   { section: "Actions", items: [
     { key: "t", desc: "Translate skills" },
     { key: "w", desc: "Workflows" },
     { key: "x", desc: "Execute" },
     { key: "n", desc: "Plan" },
-    { key: "y", desc: "History" }
+    { key: "v", desc: "Validate" },
+    { key: "u", desc: "Publish" }
   ] },
   { section: "Team & Config", items: [
     { key: "a", desc: "Team settings" },
@@ -2290,10 +2318,10 @@ var SHORTCUTS = [
   ] },
   { section: "Global", items: [
     { key: "/", desc: "This help screen" },
+    { key: "d", desc: "Open docs" },
     { key: "esc", desc: "Go back / Home" },
     { key: "q", desc: "Quit application" },
-    { key: "j/k", desc: "Navigate lists" },
-    { key: "enter", desc: "Select item" }
+    { key: "j/k", desc: "Navigate lists" }
   ] }
 ];
 function ShortcutSection({ section, items, isLast }) {
@@ -2354,6 +2382,11 @@ function Help({ cols = 80 }) {
 
 // src/App.tsx
 import { jsx as jsx24, jsxs as jsxs24 } from "@opentui/react/jsx-runtime";
+var DOCS_URL = "https://agenstskills.com/docs";
+function openUrl(url) {
+  const cmd = process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open";
+  exec(`${cmd} ${url}`);
+}
 function App({ onExit } = {}) {
   const [showSplash, setShowSplash] = useState15(true);
   const [screen, setScreen] = useState15("home");
@@ -2390,6 +2423,10 @@ function App({ onExit } = {}) {
       onExit ? onExit(0) : process.exit(0);
       return;
     }
+    if (key.name === "d") {
+      openUrl(DOCS_URL);
+      return;
+    }
     const targetScreen = NAV_KEYS[key.name || ""];
     if (targetScreen) {
       setScreen(targetScreen);
@@ -2678,7 +2715,7 @@ function StatusBar({
 }
 
 // src/components/SkillList.tsx
-import { Fragment as Fragment5, jsx as jsx28, jsxs as jsxs28 } from "@opentui/react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs28 } from "@opentui/react/jsx-runtime";
 function SkillList({
   skills,
   selectedIndex,
@@ -2703,28 +2740,9 @@ function SkillList({
       const pointer = isSelected ? symbols.pointer : symbols.pointerInactive;
       const fg = isSelected ? terminalColors.accent : terminalColors.text;
       const statusIcon = skill.enabled ? symbols.active : symbols.pending;
-      const statusColor = skill.enabled ? terminalColors.success : terminalColors.textMuted;
-      return /* @__PURE__ */ jsxs28("box", { flexDirection: "row", children: [
-        /* @__PURE__ */ jsx28("text", { fg, children: isSelected ? /* @__PURE__ */ jsxs28("b", { children: [
-          pointer,
-          " ",
-          skill.name
-        ] }) : /* @__PURE__ */ jsxs28(Fragment5, { children: [
-          pointer,
-          " ",
-          skill.name
-        ] }) }),
-        /* @__PURE__ */ jsxs28("text", { fg: terminalColors.textMuted, children: [
-          " ",
-          statusIcon
-        ] }),
-        skill.description && /* @__PURE__ */ jsxs28("text", { fg: terminalColors.textMuted, children: [
-          " ",
-          "- ",
-          skill.description.slice(0, 40),
-          skill.description.length > 40 ? "..." : ""
-        ] })
-      ] }, skill.name);
+      const descPart = skill.description ? ` - ${skill.description.slice(0, 40)}${skill.description.length > 40 ? "..." : ""}` : "";
+      const line = `${pointer} ${skill.name} ${statusIcon}${descPart}`;
+      return /* @__PURE__ */ jsx28("text", { fg, children: isSelected ? /* @__PURE__ */ jsx28("b", { children: line }) : line }, skill.name);
     }),
     pagination.itemsBelow > 0 && /* @__PURE__ */ jsxs28("text", { fg: terminalColors.textMuted, children: [
       symbols.arrowDown,
@@ -2777,17 +2795,28 @@ function FeatureList({ features = FEATURES2 }) {
 
 // src/index.tsx
 import { jsx as jsx31 } from "@opentui/react/jsx-runtime";
+var rootInstance = null;
 function exitTUI(code = 0) {
   try {
-    process.stdout.write("\x1B[?1049l\x1B[?25h\x1B[0m");
+    if (rootInstance) {
+      try {
+        rootInstance.unmount();
+      } catch {
+      }
+      rootInstance = null;
+    }
+    process.stdout.write("\x1B[?1049l\x1B[?25h\x1B[0m\x1B[H\x1B[2J");
   } catch {
   }
-  process.exit(code);
+  setImmediate(() => process.exit(code));
 }
 async function startTUI() {
-  const renderer = await createCliRenderer({ exitOnCtrlC: true });
-  const root = createRoot(renderer);
-  root.render(/* @__PURE__ */ jsx31(App, { onExit: exitTUI }));
+  const handleSignal = () => exitTUI(0);
+  process.on("SIGINT", handleSignal);
+  process.on("SIGTERM", handleSignal);
+  const renderer = await createCliRenderer({ exitOnCtrlC: false });
+  rootInstance = createRoot(renderer);
+  rootInstance.render(/* @__PURE__ */ jsx31(App, { onExit: exitTUI }));
   return new Promise(() => {
   });
 }