claudeup 3.15.0 → 3.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claudeup",
-  "version": "3.15.0",
+  "version": "3.16.0",
   "description": "TUI tool for managing Claude Code plugins, MCPs, and configuration",
   "type": "module",
   "main": "src/main.tsx",

package/src/data/skill-repos.js

@@ -5,6 +5,7 @@ export const RECOMMENDED_SKILLS = [
         skillPath: "skills/find-skills",
         description: "Discover and install new skills from the ecosystem",
         category: "search",
+        stars: 12000,
     },
     {
         name: "React Best Practices",
@@ -12,6 +13,7 @@ export const RECOMMENDED_SKILLS = [
         skillPath: "skills/react-best-practices",
         description: "Modern React patterns and Vercel deployment guidelines",
         category: "frontend",
+        stars: 24000,
     },
     {
         name: "Web Design Guidelines",
@@ -19,6 +21,7 @@ export const RECOMMENDED_SKILLS = [
         skillPath: "skills/web-design-guidelines",
         description: "UI/UX design principles and web standards",
         category: "design",
+        stars: 24000,
     },
     {
         name: "Remotion Best Practices",
@@ -26,6 +29,7 @@ export const RECOMMENDED_SKILLS = [
         skillPath: "skills/remotion-best-practices",
         description: "Programmatic video creation with Remotion",
         category: "media",
+        stars: 2400,
     },
     {
         name: "UI/UX Pro Max",
@@ -33,6 +37,7 @@ export const RECOMMENDED_SKILLS = [
         skillPath: "skills_en/ui-ux-pro-max",
         description: "50 styles, 21 palettes, 50 font pairings, 9 stacks. Covers React, Next.js, Vue, Svelte, SwiftUI, Flutter, Tailwind, shadcn/ui",
         category: "design",
+        stars: 109,
     },
     {
         name: "ElevenLabs TTS",
@@ -40,6 +45,7 @@ export const RECOMMENDED_SKILLS = [
         skillPath: "skills/elevenlabs-tts",
         description: "Text-to-speech with ElevenLabs API integration",
         category: "media",
+        stars: 206,
     },
     {
         name: "Audit Website",
@@ -47,6 +53,7 @@ export const RECOMMENDED_SKILLS = [
         skillPath: "skills/audit-website",
         description: "Security and quality auditing for web applications",
         category: "security",
+        stars: 67,
     },
     {
         name: "Systematic Debugging",
@@ -54,6 +61,7 @@ export const RECOMMENDED_SKILLS = [
         skillPath: "skills/systematic-debugging",
         description: "Structured debugging methodology with root cause analysis",
         category: "debugging",
+        stars: 113000,
     },
     {
         name: "shadcn/ui",
@@ -61,6 +69,7 @@ export const RECOMMENDED_SKILLS = [
         skillPath: "packages/shadcn",
         description: "shadcn/ui component library patterns and usage",
         category: "frontend",
+        stars: 111000,
     },
     {
         name: "Neon Postgres",
@@ -68,6 +77,7 @@ export const RECOMMENDED_SKILLS = [
         skillPath: "skills/neon-postgres",
         description: "Neon serverless Postgres setup and best practices",
         category: "database",
+        stars: 42,
     },
     {
         name: "Neon Serverless",
@@ -75,6 +85,7 @@ export const RECOMMENDED_SKILLS = [
         skillPath: "skills/neon-serverless",
         description: "Serverless database patterns with Neon",
         category: "database",
+        stars: 81,
     },
 ];
 export const DEFAULT_SKILL_REPOS = [

package/src/data/skill-repos.ts

@@ -6,6 +6,7 @@ export interface RecommendedSkill {
 	skillPath: string;
 	description: string;
 	category: string;
+	stars?: number; // fallback when GitHub API is rate-limited
 }
 
 export const RECOMMENDED_SKILLS: RecommendedSkill[] = [
@@ -15,6 +16,7 @@ export const RECOMMENDED_SKILLS: RecommendedSkill[] = [
 		skillPath: "skills/find-skills",
 		description: "Discover and install new skills from the ecosystem",
 		category: "search",
+		stars: 12000,
 	},
 	{
 		name: "React Best Practices",
@@ -22,6 +24,7 @@ export const RECOMMENDED_SKILLS: RecommendedSkill[] = [
 		skillPath: "skills/react-best-practices",
 		description: "Modern React patterns and Vercel deployment guidelines",
 		category: "frontend",
+		stars: 24000,
 	},
 	{
 		name: "Web Design Guidelines",
@@ -29,6 +32,7 @@ export const RECOMMENDED_SKILLS: RecommendedSkill[] = [
 		skillPath: "skills/web-design-guidelines",
 		description: "UI/UX design principles and web standards",
 		category: "design",
+		stars: 24000,
 	},
 	{
 		name: "Remotion Best Practices",
@@ -36,6 +40,7 @@ export const RECOMMENDED_SKILLS: RecommendedSkill[] = [
 		skillPath: "skills/remotion-best-practices",
 		description: "Programmatic video creation with Remotion",
 		category: "media",
+		stars: 2400,
 	},
 	{
 		name: "UI/UX Pro Max",
@@ -43,6 +48,7 @@ export const RECOMMENDED_SKILLS: RecommendedSkill[] = [
 		skillPath: "skills_en/ui-ux-pro-max",
 		description: "50 styles, 21 palettes, 50 font pairings, 9 stacks. Covers React, Next.js, Vue, Svelte, SwiftUI, Flutter, Tailwind, shadcn/ui",
 		category: "design",
+		stars: 109,
 	},
 	{
 		name: "ElevenLabs TTS",
@@ -50,6 +56,7 @@ export const RECOMMENDED_SKILLS: RecommendedSkill[] = [
 		skillPath: "skills/elevenlabs-tts",
 		description: "Text-to-speech with ElevenLabs API integration",
 		category: "media",
+		stars: 206,
 	},
 	{
 		name: "Audit Website",
@@ -57,6 +64,7 @@ export const RECOMMENDED_SKILLS: RecommendedSkill[] = [
 		skillPath: "skills/audit-website",
 		description: "Security and quality auditing for web applications",
 		category: "security",
+		stars: 67,
 	},
 	{
 		name: "Systematic Debugging",
@@ -64,6 +72,7 @@ export const RECOMMENDED_SKILLS: RecommendedSkill[] = [
 		skillPath: "skills/systematic-debugging",
 		description: "Structured debugging methodology with root cause analysis",
 		category: "debugging",
+		stars: 113000,
 	},
 	{
 		name: "shadcn/ui",
@@ -71,6 +80,7 @@ export const RECOMMENDED_SKILLS: RecommendedSkill[] = [
 		skillPath: "packages/shadcn",
 		description: "shadcn/ui component library patterns and usage",
 		category: "frontend",
+		stars: 111000,
 	},
 	{
 		name: "Neon Postgres",
@@ -78,6 +88,7 @@ export const RECOMMENDED_SKILLS: RecommendedSkill[] = [
 		skillPath: "skills/neon-postgres",
 		description: "Neon serverless Postgres setup and best practices",
 		category: "database",
+		stars: 42,
 	},
 	{
 		name: "Neon Serverless",
@@ -85,6 +96,7 @@ export const RECOMMENDED_SKILLS: RecommendedSkill[] = [
 		skillPath: "skills/neon-serverless",
 		description: "Serverless database patterns with Neon",
 		category: "database",
+		stars: 81,
 	},
 ];
 

package/src/services/skills-manager.js

@@ -202,28 +202,55 @@ export async function fetchAvailableSkills(_repos, projectPath) {
     // 2. Fetch popular skills from Firebase API
     const popular = await fetchPopularSkills(30);
     const popularSkills = popular.map((s) => markInstalled({ ...s, isRecommended: false }));
-    // 3. Enrich recommended skills with GitHub repo stars
-    //    Fetch stars for each unique repo (typically ~7 repos, parallel)
+    // 3. Enrich recommended skills with GitHub repo stars (cached to disk)
+    const starsCachePath = path.join(os.homedir(), ".claude", "skill-stars-cache.json");
+    let starsCache = {};
+    try {
+        starsCache = await fs.readJson(starsCachePath);
+    }
+    catch { /* no cache yet */ }
     const uniqueRepos = [...new Set(recommendedSkills.map((s) => s.source.repo))];
     const repoStars = new Map();
-    try {
-        const starResults = await Promise.allSettled(uniqueRepos.map(async (repo) => {
+    const cacheMaxAge = 24 * 60 * 60 * 1000; // 24 hours
+    let cacheUpdated = false;
+    for (const repo of uniqueRepos) {
+        const cached = starsCache[repo];
+        if (cached && Date.now() - new Date(cached.fetchedAt).getTime() < cacheMaxAge) {
+            repoStars.set(repo, cached.stars);
+            continue;
+        }
+        // Try fetching from GitHub (may be rate limited)
+        try {
             const res = await fetch(`https://api.github.com/repos/${repo}`, {
                 headers: { Accept: "application/vnd.github+json" },
                 signal: AbortSignal.timeout(5000),
             });
-            if (!res.ok)
-                return;
-            const data = (await res.json());
-            if (data.stargazers_count)
-                repoStars.set(repo, data.stargazers_count);
-        }));
+            if (res.ok) {
+                const data = (await res.json());
+                if (data.stargazers_count) {
+                    repoStars.set(repo, data.stargazers_count);
+                    starsCache[repo] = { stars: data.stargazers_count, fetchedAt: new Date().toISOString() };
+                    cacheUpdated = true;
+                }
+            }
+            else if (cached) {
+                // Rate limited but have stale cache — use it
+                repoStars.set(repo, cached.stars);
+            }
+        }
+        catch {
+            if (cached)
+                repoStars.set(repo, cached.stars);
+        }
     }
-    catch {
-        // Non-fatal — stars are cosmetic
+    if (cacheUpdated) {
+        try {
+            await fs.writeJson(starsCachePath, starsCache);
+        }
+        catch { /* ignore */ }
     }
     for (const rec of recommendedSkills) {
-        rec.stars = repoStars.get(rec.source.repo) || undefined;
+        rec.stars = repoStars.get(rec.source.repo) || rec.stars || undefined;
     }
     // 4. Combine: recommended first, then popular (dedup by name)
     const seen = new Set(recommendedSkills.map((s) => s.name));

package/src/services/skills-manager.ts

@@ -271,27 +271,49 @@ export async function fetchAvailableSkills(
 	const popular = await fetchPopularSkills(30);
 	const popularSkills = popular.map((s) => markInstalled({ ...s, isRecommended: false }));
 
-	// 3. Enrich recommended skills with GitHub repo stars
-	//    Fetch stars for each unique repo (typically ~7 repos, parallel)
+	// 3. Enrich recommended skills with GitHub repo stars (cached to disk)
+	const starsCachePath = path.join(os.homedir(), ".claude", "skill-stars-cache.json");
+	let starsCache: Record<string, { stars: number; fetchedAt: string }> = {};
+	try { starsCache = await fs.readJson(starsCachePath); } catch { /* no cache yet */ }
+
 	const uniqueRepos = [...new Set(recommendedSkills.map((s) => s.source.repo))];
 	const repoStars = new Map<string, number>();
-	try {
-		const starResults = await Promise.allSettled(
-			uniqueRepos.map(async (repo) => {
-				const res = await fetch(`https://api.github.com/repos/${repo}`, {
-					headers: { Accept: "application/vnd.github+json" },
-					signal: AbortSignal.timeout(5000),
-				});
-				if (!res.ok) return;
+	const cacheMaxAge = 24 * 60 * 60 * 1000; // 24 hours
+	let cacheUpdated = false;
+
+	for (const repo of uniqueRepos) {
+		const cached = starsCache[repo];
+		if (cached && Date.now() - new Date(cached.fetchedAt).getTime() < cacheMaxAge) {
+			repoStars.set(repo, cached.stars);
+			continue;
+		}
+		// Try fetching from GitHub (may be rate limited)
+		try {
+			const res = await fetch(`https://api.github.com/repos/${repo}`, {
+				headers: { Accept: "application/vnd.github+json" },
+				signal: AbortSignal.timeout(5000),
+			});
+			if (res.ok) {
 				const data = (await res.json()) as { stargazers_count?: number };
-				if (data.stargazers_count) repoStars.set(repo, data.stargazers_count);
-			}),
-		);
-	} catch {
-		// Non-fatal — stars are cosmetic
+				if (data.stargazers_count) {
+					repoStars.set(repo, data.stargazers_count);
+					starsCache[repo] = { stars: data.stargazers_count, fetchedAt: new Date().toISOString() };
+					cacheUpdated = true;
+				}
+			} else if (cached) {
+				// Rate limited but have stale cache — use it
+				repoStars.set(repo, cached.stars);
+			}
+		} catch {
+			if (cached) repoStars.set(repo, cached.stars);
+		}
+	}
+	if (cacheUpdated) {
+		try { await fs.writeJson(starsCachePath, starsCache); } catch { /* ignore */ }
 	}
+
 	for (const rec of recommendedSkills) {
-		rec.stars = repoStars.get(rec.source.repo) || undefined;
+		rec.stars = repoStars.get(rec.source.repo) || rec.stars || undefined;
 	}
 
 	// 4. Combine: recommended first, then popular (dedup by name)

package/src/ui/adapters/skillsAdapter.js

@@ -81,18 +81,19 @@ export function buildSkillBrowserItems({ recommended, popular, installed, search
         }
         return items;
     }
-    // ── POPULAR (default, no search query) ──
-    if (popular.length > 0) {
+    // ── POPULAR (default, no search query) — only skills with meaningful stars ──
+    const popularWithStars = popular.filter((s) => (s.stars ?? 0) >= 5);
+    if (popularWithStars.length > 0) {
         items.push({
             id: "cat:popular",
             kind: "category",
             label: "Popular",
             title: "Popular",
             categoryKey: "popular",
-            count: popular.length,
+            count: popularWithStars.length,
             tone: "teal",
         });
-        for (const skill of popular) {
+        for (const skill of popularWithStars) {
             items.push({
                 id: `skill:${skill.id}`,
                 kind: "skill",

package/src/ui/adapters/skillsAdapter.ts

@@ -134,18 +134,19 @@ export function buildSkillBrowserItems({
     return items;
   }
 
-  // ── POPULAR (default, no search query) ──
-  if (popular.length > 0) {
+  // ── POPULAR (default, no search query) — only skills with meaningful stars ──
+  const popularWithStars = popular.filter((s) => (s.stars ?? 0) >= 5);
+  if (popularWithStars.length > 0) {
     items.push({
       id: "cat:popular",
       kind: "category",
       label: "Popular",
       title: "Popular",
       categoryKey: "popular",
-      count: popular.length,
+      count: popularWithStars.length,
       tone: "teal",
     });
-    for (const skill of popular) {
+    for (const skill of popularWithStars) {
       items.push({
         id: `skill:${skill.id}`,
         kind: "skill",

package/src/ui/renderers/skillRenderers.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
-import { SelectableRow, ListCategoryRow, ScopeSquares, ScopeDetail, ActionHints, MetaText, KeyValueLine, DetailSection, } from "../components/primitives/index.js";
+import { SelectableRow, ListCategoryRow, ScopeSquares, MetaText, KeyValueLine, DetailSection, } from "../components/primitives/index.js";
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 function formatStars(stars) {
     if (!stars)
@@ -26,36 +26,29 @@ const categoryRenderer = {
     },
 };
 // ─── Skill renderer ───────────────────────────────────────────────────────────
+const MAX_SKILL_NAME_LEN = 35;
+function truncateName(name) {
+    return name.length > MAX_SKILL_NAME_LEN
+        ? name.slice(0, MAX_SKILL_NAME_LEN - 1) + "\u2026"
+        : name;
+}
 const skillRenderer = {
     renderRow: ({ item, isSelected }) => {
         const { skill } = item;
         const hasUser = skill.installedScope === "user";
         const hasProject = skill.installedScope === "project";
         const starsStr = formatStars(skill.stars);
-        return (_jsxs(SelectableRow, { selected: isSelected, indent: 1, children: [_jsx(ScopeSquares, { user: hasUser, project: hasProject, selected: isSelected }), _jsx("span", { children: " " }), _jsx("span", { fg: isSelected ? "white" : skill.installed ? "white" : "gray", children: skill.name }), skill.hasUpdate ? _jsx(MetaText, { text: " \u2B06", tone: "warning" }) : null, starsStr ? _jsx(MetaText, { text: `  ${starsStr}`, tone: "warning" }) : null] }));
+        const displayName = truncateName(skill.name);
+        return (_jsxs(SelectableRow, { selected: isSelected, indent: 1, children: [_jsx(ScopeSquares, { user: hasUser, project: hasProject, selected: isSelected }), _jsx("span", { children: " " }), _jsx("span", { fg: isSelected ? "white" : skill.installed ? "white" : "gray", children: displayName }), skill.hasUpdate ? _jsx(MetaText, { text: " \u2B06", tone: "warning" }) : null, starsStr ? _jsx(MetaText, { text: `  ${starsStr}`, tone: "warning" }) : null] }));
     },
     renderDetail: ({ item }) => {
         const { skill } = item;
         const fm = skill.frontmatter;
         const description = fm?.description || skill.description || "Loading...";
         const starsStr = formatStars(skill.stars);
-        return (_jsxs("box", { flexDirection: "column", children: [_jsxs("text", { fg: "cyan", children: [_jsx("strong", { children: skill.name }), starsStr ? _jsxs("span", { fg: "yellow", children: ["  ", starsStr] }) : null] }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "white", children: description }) }), fm?.category ? (_jsx(KeyValueLine, { label: "Category", value: _jsx("span", { fg: "cyan", children: fm.category }) })) : null, fm?.author ? (_jsx(KeyValueLine, { label: "Author", value: _jsx("span", { children: fm.author }) })) : null, fm?.version ? (_jsx(KeyValueLine, { label: "Version", value: _jsx("span", { children: fm.version }) })) : null, fm?.tags && fm.tags.length > 0 ? (_jsx(KeyValueLine, { label: "Tags", value: _jsx("span", { children: fm.tags.join(", ") }) })) : null, _jsxs(DetailSection, { children: [_jsxs("text", { children: [_jsx("span", { fg: "gray", children: "Source    " }), _jsx("span", { fg: "#5c9aff", children: skill.source.repo })] }), _jsxs("text", { children: [_jsx("span", { fg: "gray", children: "          " }), _jsx("span", { fg: "gray", children: skill.repoPath })] })] }), skill.installed && skill.installedScope && (_jsxs(DetailSection, { children: [_jsx("text", { children: "─".repeat(24) }), _jsx(ScopeDetail, { scopes: {
-                                user: skill.installedScope === "user",
-                                project: skill.installedScope === "project",
-                            }, paths: {
-                                user: "~/.claude/skills/",
-                                project: ".claude/skills/",
-                            } })] })), skill.hasUpdate && (_jsx("box", { marginTop: 1, children: _jsxs("text", { bg: "yellow", fg: "black", children: [" ", "UPDATE AVAILABLE", " "] }) })), _jsx(ActionHints, { hints: skill.installed
-                        ? [
-                            { key: "d", label: "Uninstall", tone: "danger" },
-                            { key: "u/p", label: "Reinstall in user/project scope" },
-                            { key: "o", label: "Open in browser" },
-                        ]
-                        : [
-                            { key: "u", label: "Install in user scope", tone: "primary" },
-                            { key: "p", label: "Install in project scope", tone: "primary" },
-                            { key: "o", label: "Open in browser" },
-                        ] })] }));
+        return (_jsxs("box", { flexDirection: "column", children: [_jsxs("text", { fg: "cyan", children: [_jsx("strong", { children: skill.name }), starsStr ? _jsxs("span", { fg: "yellow", children: ["  ", starsStr] }) : null] }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "white", children: description }) }), fm?.category ? (_jsx(KeyValueLine, { label: "Category", value: _jsx("span", { fg: "cyan", children: fm.category }) })) : null, fm?.author ? (_jsx(KeyValueLine, { label: "Author", value: _jsx("span", { children: fm.author }) })) : null, fm?.version ? (_jsx(KeyValueLine, { label: "Version", value: _jsx("span", { children: fm.version }) })) : null, fm?.tags && fm.tags.length > 0 ? (_jsx(KeyValueLine, { label: "Tags", value: _jsx("span", { children: fm.tags.join(", ") }) })) : null, _jsxs(DetailSection, { children: [_jsxs("text", { children: [_jsx("span", { fg: "gray", children: "Source    " }), _jsx("span", { fg: "#5c9aff", children: skill.source.repo })] }), _jsxs("text", { children: [_jsx("span", { fg: "gray", children: "          " }), _jsx("span", { fg: "gray", children: skill.repoPath })] })] }), _jsxs(DetailSection, { children: [_jsx("text", { children: "─".repeat(24) }), _jsx("text", { children: _jsx("strong", { children: "Scopes:" }) }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsxs("text", { children: [_jsx("span", { bg: "cyan", fg: "black", children: " u " }), _jsx("span", { fg: skill.installedScope === "user" ? "cyan" : "gray", children: skill.installedScope === "user" ? " ● " : " ○ " }), _jsx("span", { fg: "cyan", children: "User" }), _jsx("span", { fg: "gray", children: " ~/.claude/skills/" })] }), _jsxs("text", { children: [_jsx("span", { bg: "green", fg: "black", children: " p " }), _jsx("span", { fg: skill.installedScope === "project" ? "green" : "gray", children: skill.installedScope === "project" ? " ● " : " ○ " }), _jsx("span", { fg: "green", children: "Project" }), _jsx("span", { fg: "gray", children: " .claude/skills/" })] })] })] }), skill.hasUpdate && (_jsx("box", { marginTop: 1, children: _jsx("text", { bg: "yellow", fg: "black", children: " UPDATE AVAILABLE " }) })), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "gray", children: skill.installed
+                            ? "Press u/p to toggle scope"
+                            : "Press u/p to install" }) }), _jsx("box", { children: _jsxs("text", { children: [_jsx("span", { bg: "#555555", fg: "white", children: " o " }), _jsx("span", { fg: "gray", children: " Open in browser" })] }) })] }));
     },
 };
 // ─── Registry ─────────────────────────────────────────────────────────────────

package/src/ui/renderers/skillRenderers.tsx

@@ -62,19 +62,28 @@ const categoryRenderer: ItemRenderer<SkillCategoryItem> = {
 
 // ─── Skill renderer ───────────────────────────────────────────────────────────
 
+const MAX_SKILL_NAME_LEN = 35;
+
+function truncateName(name: string): string {
+  return name.length > MAX_SKILL_NAME_LEN
+    ? name.slice(0, MAX_SKILL_NAME_LEN - 1) + "\u2026"
+    : name;
+}
+
 const skillRenderer: ItemRenderer<SkillSkillItem> = {
   renderRow: ({ item, isSelected }) => {
     const { skill } = item;
     const hasUser = skill.installedScope === "user";
     const hasProject = skill.installedScope === "project";
     const starsStr = formatStars(skill.stars);
+    const displayName = truncateName(skill.name);
 
     return (
       <SelectableRow selected={isSelected} indent={1}>
         <ScopeSquares user={hasUser} project={hasProject} selected={isSelected} />
         <span> </span>
         <span fg={isSelected ? "white" : skill.installed ? "white" : "gray"}>
-          {skill.name}
+          {displayName}
         </span>
         {skill.hasUpdate ? <MetaText text=" ⬆" tone="warning" /> : null}
         {starsStr ? <MetaText text={`  ${starsStr}`} tone="warning" /> : null}
@@ -129,46 +138,48 @@ const skillRenderer: ItemRenderer<SkillSkillItem> = {
           </text>
         </DetailSection>
 
-        {skill.installed && skill.installedScope && (
-          <DetailSection>
-            <text>{"─".repeat(24)}</text>
-            <ScopeDetail
-              scopes={{
-                user: skill.installedScope === "user",
-                project: skill.installedScope === "project",
-              }}
-              paths={{
-                user: "~/.claude/skills/",
-                project: ".claude/skills/",
-              }}
-            />
-          </DetailSection>
-        )}
+        <DetailSection>
+          <text>{"─".repeat(24)}</text>
+          <text><strong>Scopes:</strong></text>
+          <box marginTop={1} flexDirection="column">
+            <text>
+              <span bg="cyan" fg="black"> u </span>
+              <span fg={skill.installedScope === "user" ? "cyan" : "gray"}>
+                {skill.installedScope === "user" ? " ● " : " ○ "}
+              </span>
+              <span fg="cyan">User</span>
+              <span fg="gray"> ~/.claude/skills/</span>
+            </text>
+            <text>
+              <span bg="green" fg="black"> p </span>
+              <span fg={skill.installedScope === "project" ? "green" : "gray"}>
+                {skill.installedScope === "project" ? " ● " : " ○ "}
+              </span>
+              <span fg="green">Project</span>
+              <span fg="gray"> .claude/skills/</span>
+            </text>
+          </box>
+        </DetailSection>
 
         {skill.hasUpdate && (
           <box marginTop={1}>
-            <text bg="yellow" fg="black">
-              {" "}
-              UPDATE AVAILABLE{" "}
-            </text>
+            <text bg="yellow" fg="black"> UPDATE AVAILABLE </text>
           </box>
         )}
 
-        <ActionHints
-          hints={
-            skill.installed
-              ? [
-                  { key: "d", label: "Uninstall", tone: "danger" },
-                  { key: "u/p", label: "Reinstall in user/project scope" },
-                  { key: "o", label: "Open in browser" },
-                ]
-              : [
-                  { key: "u", label: "Install in user scope", tone: "primary" },
-                  { key: "p", label: "Install in project scope", tone: "primary" },
-                  { key: "o", label: "Open in browser" },
-                ]
-          }
-        />
+        <box marginTop={1}>
+          <text fg="gray">
+            {skill.installed
+              ? "Press u/p to toggle scope"
+              : "Press u/p to install"}
+          </text>
+        </box>
+        <box>
+          <text>
+            <span bg="#555555" fg="white"> o </span>
+            <span fg="gray"> Open in browser</span>
+          </text>
+        </box>
       </box>
     );
   },

package/src/ui/screens/SkillsScreen.js

@@ -138,7 +138,7 @@ export function SkillsScreen() {
                 installedScope: isProj ? "project" : isUser ? "user" : null,
                 hasUpdate: false,
                 isRecommended: true,
-                stars: undefined,
+                stars: r.stars,
             };
         });
     }, [installedFromDisk]);
@@ -148,7 +148,10 @@ export function SkillsScreen() {
         const fetched = skillsState.skills.data.filter((s) => s.isRecommended);
         return staticRecommended.map((staticSkill) => {
             const match = fetched.find((f) => f.source.repo === staticSkill.source.repo && f.name === staticSkill.name);
-            return match || staticSkill;
+            if (!match)
+                return staticSkill;
+            // Merge: prefer fetched data but keep static stars as fallback
+            return { ...staticSkill, ...match, stars: match.stars || staticSkill.stars };
         });
     }, [staticRecommended, skillsState.skills]);
     const installedSkills = useMemo(() => {
@@ -323,9 +326,6 @@ export function SkillsScreen() {
             else
                 handleInstall("project");
         }
-        else if (event.name === "d" && selectedSkill?.installed) {
-            handleUninstall();
-        }
         else if (event.name === "r") {
             fetchData();
         }

package/src/ui/screens/SkillsScreen.tsx

@@ -161,7 +161,7 @@ export function SkillsScreen() {
         installedScope: isProj ? "project" : isUser ? "user" : null,
         hasUpdate: false,
         isRecommended: true,
-        stars: undefined,
+        stars: r.stars,
       };
     });
   }, [installedFromDisk]);
@@ -173,7 +173,9 @@ export function SkillsScreen() {
       const match = fetched.find(
         (f) => f.source.repo === staticSkill.source.repo && f.name === staticSkill.name,
       );
-      return match || staticSkill;
+      if (!match) return staticSkill;
+      // Merge: prefer fetched data but keep static stars as fallback
+      return { ...staticSkill, ...match, stars: match.stars || staticSkill.stars };
     });
   }, [staticRecommended, skillsState.skills]);
 
@@ -365,8 +367,6 @@ export function SkillsScreen() {
     } else if (event.name === "p" && selectedSkill) {
       if (selectedSkill.installed && selectedSkill.installedScope === "project") handleUninstall();
       else handleInstall("project");
-    } else if (event.name === "d" && selectedSkill?.installed) {
-      handleUninstall();
     } else if (event.name === "r") {
       fetchData();
     } else if (event.name === "o" && selectedSkill) {