claudeup 3.12.0 → 3.14.0

package/package.json

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

package/src/services/skills-manager.js

@@ -164,9 +164,11 @@ export async function fetchPopularSkills(limit = 30) {
 export async function fetchAvailableSkills(_repos, projectPath) {
     const userInstalled = await getInstalledSkillNames("user");
     const projectInstalled = await getInstalledSkillNames("project", projectPath);
+    const slugify = (name) => name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
     const markInstalled = (skill) => {
-        const isUserInstalled = userInstalled.has(skill.name);
-        const isProjInstalled = projectInstalled.has(skill.name);
+        const slug = slugify(skill.name);
+        const isUserInstalled = userInstalled.has(slug) || userInstalled.has(skill.name);
+        const isProjInstalled = projectInstalled.has(slug) || projectInstalled.has(skill.name);
         const installed = isUserInstalled || isProjInstalled;
         const installedScope = isProjInstalled
             ? "project"
@@ -256,16 +258,25 @@ export async function installSkill(skill, scope, projectPath) {
     if (!content) {
         throw new Error(`Failed to fetch skill: SKILL.md not found in ${repo}/${repoPath}`);
     }
+    // Use slug for directory name — display names can have slashes/spaces
+    const dirName = skill.name
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-|-$/g, "");
     const installDir = scope === "user"
-        ? path.join(getUserSkillsDir(), skill.name)
-        : path.join(getProjectSkillsDir(projectPath), skill.name);
+        ? path.join(getUserSkillsDir(), dirName)
+        : path.join(getProjectSkillsDir(projectPath), dirName);
     await fs.ensureDir(installDir);
     await fs.writeFile(path.join(installDir, "SKILL.md"), content, "utf8");
 }
 export async function uninstallSkill(skillName, scope, projectPath) {
+    const dirName = skillName
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-|-$/g, "");
     const installDir = scope === "user"
-        ? path.join(getUserSkillsDir(), skillName)
-        : path.join(getProjectSkillsDir(projectPath), skillName);
+        ? path.join(getUserSkillsDir(), dirName)
+        : path.join(getProjectSkillsDir(projectPath), dirName);
     const skillMdPath = path.join(installDir, "SKILL.md");
     if (await fs.pathExists(skillMdPath)) {
         await fs.remove(skillMdPath);

package/src/services/skills-manager.ts

@@ -228,9 +228,13 @@ export async function fetchAvailableSkills(
 	const userInstalled = await getInstalledSkillNames("user");
 	const projectInstalled = await getInstalledSkillNames("project", projectPath);
 
+	const slugify = (name: string) =>
+		name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+
 	const markInstalled = (skill: SkillInfo): SkillInfo => {
-		const isUserInstalled = userInstalled.has(skill.name);
-		const isProjInstalled = projectInstalled.has(skill.name);
+		const slug = slugify(skill.name);
+		const isUserInstalled = userInstalled.has(slug) || userInstalled.has(skill.name);
+		const isProjInstalled = projectInstalled.has(slug) || projectInstalled.has(skill.name);
 		const installed = isUserInstalled || isProjInstalled;
 		const installedScope: "user" | "project" | null = isProjInstalled
 			? "project"
@@ -334,10 +338,16 @@ export async function installSkill(
 		);
 	}
 
+	// Use slug for directory name — display names can have slashes/spaces
+	const dirName = skill.name
+		.toLowerCase()
+		.replace(/[^a-z0-9]+/g, "-")
+		.replace(/^-|-$/g, "");
+
 	const installDir =
 		scope === "user"
-			? path.join(getUserSkillsDir(), skill.name)
-			: path.join(getProjectSkillsDir(projectPath), skill.name);
+			? path.join(getUserSkillsDir(), dirName)
+			: path.join(getProjectSkillsDir(projectPath), dirName);
 
 	await fs.ensureDir(installDir);
 	await fs.writeFile(path.join(installDir, "SKILL.md"), content, "utf8");
@@ -348,10 +358,15 @@ export async function uninstallSkill(
 	scope: "user" | "project",
 	projectPath?: string,
 ): Promise<void> {
+	const dirName = skillName
+		.toLowerCase()
+		.replace(/[^a-z0-9]+/g, "-")
+		.replace(/^-|-$/g, "");
+
 	const installDir =
 		scope === "user"
-			? path.join(getUserSkillsDir(), skillName)
-			: path.join(getProjectSkillsDir(projectPath), skillName);
+			? path.join(getUserSkillsDir(), dirName)
+			: path.join(getProjectSkillsDir(projectPath), dirName);
 
 	const skillMdPath = path.join(installDir, "SKILL.md");
 

package/src/ui/components/ScopeIndicator.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "@opentui/react/jsx-runtime";
+/**
+ * Scope indicator for list items.
+ * Shows colored letter badges when installed, empty space when not.
+ *
+ * Installed in user+project:  u p
+ * Installed in project only:    p
+ * Not installed:              (3 spaces)
+ *
+ * Colors match the detail panel: cyan=user, green=project, yellow=local
+ */
+export function scopeIndicatorText(user, project, local) {
+    const segments = [
+        user
+            ? { char: "u", bg: "cyan", fg: "black" }
+            : { char: " ", bg: "", fg: "" },
+        project
+            ? { char: "p", bg: "green", fg: "black" }
+            : { char: " ", bg: "", fg: "" },
+        local
+            ? { char: "l", bg: "yellow", fg: "black" }
+            : { char: " ", bg: "", fg: "" },
+    ];
+    const text = segments.map((s) => s.char).join("");
+    return { text, segments };
+}
+export function ScopeIndicator({ user, project, local }) {
+    const { segments } = scopeIndicatorText(user, project, local);
+    return (_jsx("text", { children: segments.map((s, i) => s.bg ? (_jsx("span", { bg: s.bg, fg: s.fg, children: s.char }, i)) : (_jsx("span", { children: " " }, i))) }));
+}

package/src/ui/components/ScopeIndicator.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+
+/**
+ * Scope indicator for list items.
+ * Shows colored letter badges when installed, empty space when not.
+ *
+ * Installed in user+project:  u p
+ * Installed in project only:    p
+ * Not installed:              (3 spaces)
+ *
+ * Colors match the detail panel: cyan=user, green=project, yellow=local
+ */
+
+export function scopeIndicatorText(
+	user?: boolean,
+	project?: boolean,
+	local?: boolean,
+): { text: string; segments: Array<{ char: string; bg: string; fg: string }> } {
+	const segments: Array<{ char: string; bg: string; fg: string }> = [
+		user
+			? { char: "u", bg: "cyan", fg: "black" }
+			: { char: " ", bg: "", fg: "" },
+		project
+			? { char: "p", bg: "green", fg: "black" }
+			: { char: " ", bg: "", fg: "" },
+		local
+			? { char: "l", bg: "yellow", fg: "black" }
+			: { char: " ", bg: "", fg: "" },
+	];
+
+	const text = segments.map((s) => s.char).join("");
+	return { text, segments };
+}
+
+interface ScopeIndicatorProps {
+	user?: boolean;
+	project?: boolean;
+	local?: boolean;
+}
+
+export function ScopeIndicator({ user, project, local }: ScopeIndicatorProps) {
+	const { segments } = scopeIndicatorText(user, project, local);
+
+	return (
+		<text>
+			{segments.map((s, i) =>
+				s.bg ? (
+					<span key={i} bg={s.bg} fg={s.fg}>
+						{s.char}
+					</span>
+				) : (
+					<span key={i}> </span>
+				),
+			)}
+		</text>
+	);
+}

package/src/ui/screens/PluginsScreen.js

@@ -111,15 +111,15 @@ export function PluginsScreen() {
                 if (communityPlugins.length > 0) {
                     const communityVirtualMp = {
                         name: COMMUNITY_VIRTUAL_MARKETPLACE,
-                        displayName: "Community",
+                        displayName: "Anthropic Official — 3rd Party",
                         source: marketplace.source,
-                        description: "Third-party plugins from the community",
+                        description: "Third-party plugins in the Anthropic Official marketplace",
                     };
                     const communityCollapsed = collapsed.has(COMMUNITY_VIRTUAL_MARKETPLACE);
                     items.push({
                         id: `mp:${COMMUNITY_VIRTUAL_MARKETPLACE}`,
                         type: "category",
-                        label: "Community",
+                        label: "Anthropic Official — 3rd Party",
                         marketplace: communityVirtualMp,
                         marketplaceEnabled: true,
                         pluginCount: communityPlugins.length,
@@ -708,9 +708,10 @@ export function PluginsScreen() {
             installedVersion &&
             latestVersion !== "0.0.0" &&
             installedVersion !== latestVersion;
-        // Determine action: if installed in this scope → uninstall
-        // If installed anywhere else but not this scope → uninstall from detected scope
-        // Otherwise → install
+        // Determine action for THIS scope:
+        // - installed in this scope + has update → update
+        // - installed in this scope → uninstall from this scope
+        // - not installed in this scope → install to this scope
         let action;
         if (isInstalledInScope && hasUpdateInScope) {
             action = "update";
@@ -718,12 +719,8 @@ export function PluginsScreen() {
         else if (isInstalledInScope) {
             action = "uninstall";
         }
-        else if (!isInstalledAnywhere) {
-            action = "install";
-        }
         else {
-            // Installed in a different scope — uninstall from the scope it's actually in
-            action = "uninstall";
+            action = "install";
         }
         const actionLabel = action === "update"
             ? `Updating ${scopeLabel}`
@@ -883,17 +880,12 @@ export function PluginsScreen() {
         }
         if (item.type === "plugin" && item.plugin) {
             const plugin = item.plugin;
-            let statusIcon = "○";
-            let statusColor = "gray";
             const isAnyScope = plugin.userScope?.enabled || plugin.projectScope?.enabled || plugin.localScope?.enabled;
-            if (plugin.isOrphaned) {
-                statusIcon = "x";
-                statusColor = "red";
-            }
-            else if (isAnyScope) {
-                statusIcon = "●";
-                statusColor = "green";
-            }
+            // Build scope parts for colored rendering
+            const hasUser = plugin.userScope?.enabled;
+            const hasProject = plugin.projectScope?.enabled;
+            const hasLocal = plugin.localScope?.enabled;
+            const hasAnyScope = hasUser || hasProject || hasLocal;
             // Build version string
             let versionStr = "";
             if (plugin.isOrphaned) {
@@ -909,19 +901,17 @@ export function PluginsScreen() {
             const matches = item._matches;
             const segments = matches ? highlightMatches(plugin.name, matches) : null;
             if (isSelected) {
-                const displayText = `   ${statusIcon} ${plugin.name}${versionStr} `;
-                return (_jsx("text", { bg: "magenta", fg: "white", children: displayText }));
+                return (_jsxs("text", { bg: "magenta", fg: "white", children: [" ", _jsx("span", { children: hasUser ? "■" : "□" }), _jsx("span", { children: hasProject ? "■" : "□" }), _jsx("span", { children: hasLocal ? "■" : "□" }), " ", plugin.name, versionStr, " "] }));
             }
-            // For non-selected, render with colors
             const displayName = segments
                 ? segments.map((seg) => seg.text).join("")
                 : plugin.name;
             if (plugin.isOrphaned) {
                 const ver = plugin.installedVersion && plugin.installedVersion !== "0.0.0"
                     ? ` v${plugin.installedVersion}` : "";
-                return (_jsxs("text", { children: [_jsxs("span", { fg: "red", children: ["   ", statusIcon, " "] }), _jsx("span", { fg: "gray", children: displayName }), ver && _jsx("span", { fg: "yellow", children: ver }), _jsx("span", { fg: "red", children: " deprecated" })] }));
+                return (_jsxs("text", { children: [_jsx("span", { fg: "red", children: " \u25A0\u25A0\u25A0 " }), _jsx("span", { fg: "gray", children: displayName }), ver && _jsx("span", { fg: "yellow", children: ver }), _jsx("span", { fg: "red", children: " deprecated" })] }));
             }
-            return (_jsxs("text", { children: [_jsxs("span", { fg: statusColor, children: ["   ", statusIcon, " "] }), _jsx("span", { children: displayName }), _jsx("span", { fg: plugin.hasUpdate ? "yellow" : "gray", children: versionStr })] }));
+            return (_jsxs("text", { children: [_jsx("span", { children: " " }), _jsx("span", { fg: hasUser ? "cyan" : "#333333", children: "\u25A0" }), _jsx("span", { fg: hasProject ? "green" : "#333333", children: "\u25A0" }), _jsx("span", { fg: hasLocal ? "yellow" : "#333333", children: "\u25A0" }), _jsx("span", { children: " " }), _jsx("span", { fg: hasAnyScope ? "white" : "gray", children: displayName }), _jsx("span", { fg: plugin.hasUpdate ? "yellow" : "gray", children: versionStr })] }));
         }
         return _jsx("text", { fg: "gray", children: item.label });
     };

package/src/ui/screens/PluginsScreen.tsx

@@ -6,6 +6,7 @@ import { ScreenLayout } from "../components/layout/index.js";
 import { CategoryHeader } from "../components/CategoryHeader.js";
 import { ScrollableList } from "../components/ScrollableList.js";
 import { EmptyFilterState } from "../components/EmptyFilterState.js";
+import { scopeIndicatorText } from "../components/ScopeIndicator.js";
 import { fuzzyFilter, highlightMatches } from "../../utils/fuzzy-search.js";
 import { getAllMarketplaces } from "../../data/marketplaces.js";
 import {
@@ -171,15 +172,15 @@ export function PluginsScreen() {
 				if (communityPlugins.length > 0) {
 					const communityVirtualMp: Marketplace = {
 						name: COMMUNITY_VIRTUAL_MARKETPLACE,
-						displayName: "Community",
+						displayName: "Anthropic Official — 3rd Party",
 						source: marketplace.source,
-						description: "Third-party plugins from the community",
+						description: "Third-party plugins in the Anthropic Official marketplace",
 					};
 					const communityCollapsed = collapsed.has(COMMUNITY_VIRTUAL_MARKETPLACE);
 					items.push({
 						id: `mp:${COMMUNITY_VIRTUAL_MARKETPLACE}`,
 						type: "category",
-						label: "Community",
+						label: "Anthropic Official — 3rd Party",
 						marketplace: communityVirtualMp,
 						marketplaceEnabled: true,
 						pluginCount: communityPlugins.length,
@@ -897,19 +898,17 @@ export function PluginsScreen() {
 			latestVersion !== "0.0.0" &&
 			installedVersion !== latestVersion;
 
-		// Determine action: if installed in this scope → uninstall
-		// If installed anywhere else but not this scope → uninstall from detected scope
-		// Otherwise → install
+		// Determine action for THIS scope:
+		// - installed in this scope + has update → update
+		// - installed in this scope → uninstall from this scope
+		// - not installed in this scope → install to this scope
 		let action: "update" | "install" | "uninstall";
 		if (isInstalledInScope && hasUpdateInScope) {
 			action = "update";
 		} else if (isInstalledInScope) {
 			action = "uninstall";
-		} else if (!isInstalledAnywhere) {
-			action = "install";
 		} else {
-			// Installed in a different scope — uninstall from the scope it's actually in
-			action = "uninstall";
+			action = "install";
 		}
 
 		const actionLabel =
@@ -1139,17 +1138,13 @@ export function PluginsScreen() {
 
 		if (item.type === "plugin" && item.plugin) {
 			const plugin = item.plugin;
-			let statusIcon = "○";
-			let statusColor = "gray";
-
 			const isAnyScope = plugin.userScope?.enabled || plugin.projectScope?.enabled || plugin.localScope?.enabled;
-			if (plugin.isOrphaned) {
-				statusIcon = "x";
-				statusColor = "red";
-			} else if (isAnyScope) {
-				statusIcon = "●";
-				statusColor = "green";
-			}
+
+			// Build scope parts for colored rendering
+			const hasUser = plugin.userScope?.enabled;
+			const hasProject = plugin.projectScope?.enabled;
+			const hasLocal = plugin.localScope?.enabled;
+			const hasAnyScope = hasUser || hasProject || hasLocal;
 
 			// Build version string
 			let versionStr = "";
@@ -1167,15 +1162,17 @@ export function PluginsScreen() {
 			const segments = matches ? highlightMatches(plugin.name, matches) : null;
 
 			if (isSelected) {
-				const displayText = `   ${statusIcon} ${plugin.name}${versionStr} `;
 				return (
 					<text bg="magenta" fg="white">
-						{displayText}
+						{" "}
+						<span>{hasUser ? "■" : "□"}</span>
+						<span>{hasProject ? "■" : "□"}</span>
+						<span>{hasLocal ? "■" : "□"}</span>
+						{" "}{plugin.name}{versionStr}{" "}
 					</text>
 				);
 			}
 
-			// For non-selected, render with colors
 			const displayName = segments
 				? segments.map((seg) => seg.text).join("")
 				: plugin.name;
@@ -1185,7 +1182,7 @@ export function PluginsScreen() {
 					? ` v${plugin.installedVersion}` : "";
 				return (
 					<text>
-						<span fg="red">{"   "}{statusIcon} </span>
+						<span fg="red"> ■■■ </span>
 						<span fg="gray">{displayName}</span>
 						{ver && <span fg="yellow">{ver}</span>}
 						<span fg="red"> deprecated</span>
@@ -1195,11 +1192,12 @@ export function PluginsScreen() {
 
 			return (
 				<text>
-					<span fg={statusColor}>
-						{"   "}
-						{statusIcon}{" "}
-					</span>
-					<span>{displayName}</span>
+					<span> </span>
+					<span fg={hasUser ? "cyan" : "#333333"}>■</span>
+					<span fg={hasProject ? "green" : "#333333"}>■</span>
+					<span fg={hasLocal ? "yellow" : "#333333"}>■</span>
+					<span> </span>
+					<span fg={hasAnyScope ? "white" : "gray"}>{displayName}</span>
 					<span fg={plugin.hasUpdate ? "yellow" : "gray"}>{versionStr}</span>
 				</text>
 			);

package/src/ui/screens/SkillsScreen.js

@@ -1,5 +1,8 @@
 import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
 import { useEffect, useCallback, useMemo, useState, useRef } from "react";
+import os from "node:os";
+import path from "node:path";
+import fs from "fs-extra";
 import { useApp, useModal } from "../state/AppContext.js";
 import { useDimensions } from "../state/DimensionsContext.js";
 import { useKeyboard } from "../hooks/useKeyboard.js";
@@ -103,23 +106,53 @@ export function SkillsScreen() {
                 clearTimeout(searchTimerRef.current);
         };
     }, [skillsState.searchQuery]);
+    // Scan installed skills from disk (instant, no API)
+    const [installedFromDisk, setInstalledFromDisk] = useState({ user: new Set(), project: new Set() });
+    useEffect(() => {
+        async function scanDisk() {
+            const user = new Set();
+            const project = new Set();
+            const userDir = path.join(os.homedir(), ".claude", "skills");
+            const projDir = path.join(state.projectPath || process.cwd(), ".claude", "skills");
+            for (const [dir, set] of [[userDir, user], [projDir, project]]) {
+                try {
+                    if (await fs.pathExists(dir)) {
+                        const entries = await fs.readdir(dir);
+                        for (const e of entries) {
+                            if (await fs.pathExists(path.join(dir, e, "SKILL.md")))
+                                set.add(e);
+                        }
+                    }
+                }
+                catch { /* ignore */ }
+            }
+            setInstalledFromDisk({ user, project });
+        }
+        scanDisk();
+    }, [state.projectPath, state.dataRefreshVersion]);
     // Static recommended skills — always available, no API needed
+    // Enriched with disk-based install status immediately
     const staticRecommended = useMemo(() => {
-        return RECOMMENDED_SKILLS.map((r) => ({
-            id: `rec:${r.repo}/${r.skillPath}`,
-            name: r.name,
-            description: r.description,
-            source: { label: r.repo, repo: r.repo, skillsPath: "" },
-            repoPath: `${r.skillPath}/SKILL.md`,
-            gitBlobSha: "",
-            frontmatter: null,
-            installed: false,
-            installedScope: null,
-            hasUpdate: false,
-            isRecommended: true,
-            stars: undefined,
-        }));
-    }, []);
+        return RECOMMENDED_SKILLS.map((r) => {
+            const slug = r.name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+            const isUser = installedFromDisk.user.has(slug) || installedFromDisk.user.has(r.name);
+            const isProj = installedFromDisk.project.has(slug) || installedFromDisk.project.has(r.name);
+            return {
+                id: `rec:${r.repo}/${r.skillPath}`,
+                name: r.name,
+                description: r.description,
+                source: { label: r.repo, repo: r.repo, skillsPath: "" },
+                repoPath: `${r.skillPath}/SKILL.md`,
+                gitBlobSha: "",
+                frontmatter: null,
+                installed: isUser || isProj,
+                installedScope: isProj ? "project" : isUser ? "user" : null,
+                hasUpdate: false,
+                isRecommended: true,
+                stars: undefined,
+            };
+        });
+    }, [installedFromDisk]);
     // Merge static recommended with fetched data (to get install status + stars)
     const mergedRecommended = useMemo(() => {
         if (skillsState.skills.status !== "success")
@@ -131,10 +164,58 @@ export function SkillsScreen() {
             return match || staticSkill;
         });
     }, [staticRecommended, skillsState.skills]);
-    // Build list: recommended always shown, then search results or popular
+    // Build installed skills list from disk (always available)
+    const installedSkills = useMemo(() => {
+        const all = [];
+        for (const [scope, names] of [
+            ["user", installedFromDisk.user],
+            ["project", installedFromDisk.project],
+        ]) {
+            for (const name of names) {
+                // Skip if already in the list (avoid dupes)
+                if (all.some((s) => s.name === name))
+                    continue;
+                all.push({
+                    id: `installed:${scope}/${name}`,
+                    name,
+                    description: "",
+                    source: { label: "local", repo: "local", skillsPath: "" },
+                    repoPath: "",
+                    gitBlobSha: "",
+                    frontmatter: null,
+                    installed: true,
+                    installedScope: scope,
+                    hasUpdate: false,
+                    stars: undefined,
+                });
+            }
+        }
+        return all;
+    }, [installedFromDisk]);
+    // Build list: installed first, then recommended, then search/popular
     const allItems = useMemo(() => {
         const query = skillsState.searchQuery.toLowerCase();
         const items = [];
+        // ── INSTALLED: always shown at top (if any) ──
+        const installedFiltered = query
+            ? installedSkills.filter((s) => s.name.toLowerCase().includes(query))
+            : installedSkills;
+        if (installedFiltered.length > 0) {
+            items.push({
+                id: "cat:installed",
+                type: "category",
+                label: `Installed (${installedFiltered.length})`,
+                categoryKey: "installed",
+            });
+            for (const skill of installedFiltered) {
+                items.push({
+                    id: `skill:${skill.id}`,
+                    type: "skill",
+                    label: skill.name,
+                    skill,
+                });
+            }
+        }
         // ── RECOMMENDED: always shown, filtered when searching ──
         const filteredRec = query
             ? mergedRecommended.filter((s) => s.name.toLowerCase().includes(query) ||
@@ -229,21 +310,15 @@ export function SkillsScreen() {
         try {
             await installSkill(selectedSkill, scope, state.projectPath);
             modal.hideModal();
-            dispatch({
-                type: "SKILLS_UPDATE_ITEM",
-                name: selectedSkill.name,
-                updates: {
-                    installed: true,
-                    installedScope: scope,
-                },
-            });
+            // Refetch to pick up install status for all skills including recommended
+            await fetchData();
             await modal.message("Installed", `${selectedSkill.name} installed to ${scope === "user" ? "~/.claude/skills/" : ".claude/skills/"}`, "success");
         }
         catch (error) {
             modal.hideModal();
             await modal.message("Error", `Failed to install: ${error}`, "error");
         }
-    }, [selectedSkill, state.projectPath, dispatch, modal]);
+    }, [selectedSkill, state.projectPath, dispatch, modal, fetchData]);
     // Uninstall handler
     const handleUninstall = useCallback(async () => {
         if (!selectedSkill || !selectedSkill.installed)
@@ -258,21 +333,15 @@ export function SkillsScreen() {
         try {
             await uninstallSkill(selectedSkill.name, scope, state.projectPath);
             modal.hideModal();
-            dispatch({
-                type: "SKILLS_UPDATE_ITEM",
-                name: selectedSkill.name,
-                updates: {
-                    installed: false,
-                    installedScope: null,
-                },
-            });
+            // Refetch to pick up uninstall status
+            await fetchData();
             await modal.message("Uninstalled", `${selectedSkill.name} removed.`, "success");
         }
         catch (error) {
             modal.hideModal();
             await modal.message("Error", `Failed to uninstall: ${error}`, "error");
         }
-    }, [selectedSkill, state.projectPath, dispatch, modal]);
+    }, [selectedSkill, state.projectPath, dispatch, modal, fetchData]);
     // Keyboard handling — same pattern as PluginsScreen
     useKeyboard((event) => {
         if (state.modal)
@@ -357,6 +426,20 @@ export function SkillsScreen() {
         else if (event.name === "r") {
             fetchData();
         }
+        else if (event.name === "o" && selectedSkill) {
+            // Open in browser
+            const repo = selectedSkill.source.repo;
+            const repoPath = selectedSkill.repoPath?.replace("/SKILL.md", "") || "";
+            if (repo && repo !== "local") {
+                const url = `https://github.com/${repo}/tree/main/${repoPath}`;
+                import("node:child_process").then(({ execSync: exec }) => {
+                    try {
+                        exec(`open "${url}"`);
+                    }
+                    catch { /* ignore */ }
+                });
+            }
+        }
         // "/" to enter search mode
         else if (event.name === "/") {
             dispatch({ type: "SET_SEARCHING", isSearching: true });
@@ -365,8 +448,9 @@ export function SkillsScreen() {
     const renderListItem = (item, _idx, isSelected) => {
         if (item.type === "category") {
             const isRec = item.categoryKey === "recommended";
-            const bgColor = isRec ? "green" : "cyan";
-            const star = isRec ? "★ " : "";
+            const isInstalled = item.categoryKey === "installed";
+            const bgColor = isInstalled ? "#7e57c2" : isRec ? "#2e7d32" : "#00695c";
+            const star = isRec ? "★ " : isInstalled ? "● " : "";
             if (isSelected) {
                 return (_jsx("text", { bg: "magenta", fg: "white", children: _jsxs("strong", { children: [" ", star, item.label, " "] }) }));
             }
@@ -374,14 +458,14 @@ export function SkillsScreen() {
         }
         if (item.type === "skill" && item.skill) {
             const skill = item.skill;
-            const indicator = skill.installed ? "●" : "○";
-            const indicatorColor = skill.installed ? "cyan" : "gray";
-            const scopeTag = skill.installedScope === "user" ? "u" : skill.installedScope === "project" ? "p" : "";
             const starsStr = formatStars(skill.stars);
+            const hasUser = skill.installedScope === "user";
+            const hasProject = skill.installedScope === "project";
+            const nameColor = skill.installed ? "white" : "gray";
             if (isSelected) {
-                return (_jsxs("text", { bg: "magenta", fg: "white", children: [" ", indicator, " ", skill.name, skill.hasUpdate ? " ⬆" : "", scopeTag ? ` [${scopeTag}]` : "", starsStr ? `  ${starsStr}` : "", " "] }));
+                return (_jsxs("text", { bg: "magenta", fg: "white", children: [" ", _jsx("span", { children: hasUser ? "■" : "□" }), _jsx("span", { children: hasProject ? "■" : "□" }), " ", skill.name, skill.hasUpdate ? " ⬆" : "", starsStr ? `  ${starsStr}` : "", " "] }));
             }
-            return (_jsxs("text", { children: [_jsxs("span", { fg: indicatorColor, children: [" ", indicator, " "] }), _jsx("span", { fg: "white", children: skill.name }), skill.hasUpdate && _jsx("span", { fg: "yellow", children: " \u2B06" }), scopeTag && (_jsxs("span", { fg: scopeTag === "u" ? "cyan" : "green", children: [" [", scopeTag, "]"] })), starsStr && (_jsxs("span", { fg: "yellow", children: ["  ", starsStr] }))] }));
+            return (_jsxs("text", { children: [_jsx("span", { children: " " }), _jsx("span", { fg: hasUser ? "cyan" : "#333333", children: "\u25A0" }), _jsx("span", { fg: hasProject ? "green" : "#333333", children: "\u25A0" }), _jsx("span", { children: " " }), _jsx("span", { fg: nameColor, children: skill.name }), skill.hasUpdate && _jsx("span", { fg: "yellow", children: " \u2B06" }), starsStr && (_jsxs("span", { fg: "yellow", children: ["  ", starsStr] }))] }));
         }
         return _jsx("text", { fg: "gray", children: item.label });
     };
@@ -425,6 +509,6 @@ export function SkillsScreen() {
             }
             : undefined, footerHints: isSearchActive
             ? "type to filter │ Enter:done │ Esc:clear"
-            : "u:user │ p:project │ d:uninstall │ /:search", listPanel: _jsxs("box", { flexDirection: "column", children: [_jsx(ScrollableList, { items: selectableItems, selectedIndex: skillsState.selectedIndex, renderItem: renderListItem, maxHeight: dimensions.listPanelHeight }), !query && skillsState.skills.status === "loading" && (_jsx("box", { marginTop: 2, paddingLeft: 2, children: _jsx("text", { fg: "yellow", children: "Loading popular skills..." }) })), query.length >= 2 && isSearchLoading && (_jsx("box", { marginTop: 2, paddingLeft: 2, children: _jsxs("text", { fg: "yellow", children: ["Searching for \"", skillsState.searchQuery, "\"..."] }) })), query.length >= 2 && !isSearchLoading && searchResults.length === 0 && (_jsx(EmptyFilterState, { query: skillsState.searchQuery, entityName: "skills" }))] }), detailPanel: renderDetail() }));
+            : "u:user │ p:project │ o:open │ /:search", listPanel: _jsxs("box", { flexDirection: "column", children: [_jsx(ScrollableList, { items: selectableItems, selectedIndex: skillsState.selectedIndex, renderItem: renderListItem, maxHeight: dimensions.listPanelHeight }), !query && skillsState.skills.status === "loading" && (_jsx("box", { marginTop: 2, paddingLeft: 2, children: _jsx("text", { fg: "yellow", children: "Loading popular skills..." }) })), query.length >= 2 && isSearchLoading && (_jsx("box", { marginTop: 2, paddingLeft: 2, children: _jsxs("text", { fg: "yellow", children: ["Searching for \"", skillsState.searchQuery, "\"..."] }) })), query.length >= 2 && !isSearchLoading && searchResults.length === 0 && (_jsx(EmptyFilterState, { query: skillsState.searchQuery, entityName: "skills" }))] }), detailPanel: renderDetail() }));
 }
 export default SkillsScreen;

package/src/ui/screens/SkillsScreen.tsx

@@ -1,10 +1,14 @@
 import React, { useEffect, useCallback, useMemo, useState, useRef } from "react";
+import os from "node:os";
+import path from "node:path";
+import fs from "fs-extra";
 import { useApp, useModal } from "../state/AppContext.js";
 import { useDimensions } from "../state/DimensionsContext.js";
 import { useKeyboard } from "../hooks/useKeyboard.js";
 import { ScreenLayout } from "../components/layout/index.js";
 import { ScrollableList } from "../components/ScrollableList.js";
 import { EmptyFilterState } from "../components/EmptyFilterState.js";
+import { scopeIndicatorText } from "../components/ScopeIndicator.js";
 import {
 	fetchAvailableSkills,
 	fetchSkillFrontmatter,
@@ -124,23 +128,56 @@ export function SkillsScreen() {
 		};
 	}, [skillsState.searchQuery]);
 
+	// Scan installed skills from disk (instant, no API)
+	const [installedFromDisk, setInstalledFromDisk] = useState<{
+		user: Set<string>;
+		project: Set<string>;
+	}>({ user: new Set(), project: new Set() });
+
+	useEffect(() => {
+		async function scanDisk() {
+			const user = new Set<string>();
+			const project = new Set<string>();
+			const userDir = path.join(os.homedir(), ".claude", "skills");
+			const projDir = path.join(state.projectPath || process.cwd(), ".claude", "skills");
+			for (const [dir, set] of [[userDir, user], [projDir, project]] as const) {
+				try {
+					if (await fs.pathExists(dir)) {
+						const entries = await fs.readdir(dir);
+						for (const e of entries) {
+							if (await fs.pathExists(path.join(dir, e, "SKILL.md"))) set.add(e);
+						}
+					}
+				} catch { /* ignore */ }
+			}
+			setInstalledFromDisk({ user, project });
+		}
+		scanDisk();
+	}, [state.projectPath, state.dataRefreshVersion]);
+
 	// Static recommended skills — always available, no API needed
+	// Enriched with disk-based install status immediately
 	const staticRecommended = useMemo((): SkillInfo[] => {
-		return RECOMMENDED_SKILLS.map((r) => ({
-			id: `rec:${r.repo}/${r.skillPath}`,
-			name: r.name,
-			description: r.description,
-			source: { label: r.repo, repo: r.repo, skillsPath: "" },
-			repoPath: `${r.skillPath}/SKILL.md`,
-			gitBlobSha: "",
-			frontmatter: null,
-			installed: false,
-			installedScope: null,
-			hasUpdate: false,
-			isRecommended: true,
-			stars: undefined,
-		}));
-	}, []);
+		return RECOMMENDED_SKILLS.map((r) => {
+			const slug = r.name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+			const isUser = installedFromDisk.user.has(slug) || installedFromDisk.user.has(r.name);
+			const isProj = installedFromDisk.project.has(slug) || installedFromDisk.project.has(r.name);
+			return {
+				id: `rec:${r.repo}/${r.skillPath}`,
+				name: r.name,
+				description: r.description,
+				source: { label: r.repo, repo: r.repo, skillsPath: "" },
+				repoPath: `${r.skillPath}/SKILL.md`,
+				gitBlobSha: "",
+				frontmatter: null,
+				installed: isUser || isProj,
+				installedScope: isProj ? "project" : isUser ? "user" : null,
+				hasUpdate: false,
+				isRecommended: true,
+				stars: undefined,
+			};
+		});
+	}, [installedFromDisk]);
 
 	// Merge static recommended with fetched data (to get install status + stars)
 	const mergedRecommended = useMemo((): SkillInfo[] => {
@@ -155,11 +192,61 @@ export function SkillsScreen() {
 		});
 	}, [staticRecommended, skillsState.skills]);
 
-	// Build list: recommended always shown, then search results or popular
+	// Build installed skills list from disk (always available)
+	const installedSkills = useMemo((): SkillInfo[] => {
+		const all: SkillInfo[] = [];
+		for (const [scope, names] of [
+			["user", installedFromDisk.user],
+			["project", installedFromDisk.project],
+		] as const) {
+			for (const name of names) {
+				// Skip if already in the list (avoid dupes)
+				if (all.some((s) => s.name === name)) continue;
+				all.push({
+					id: `installed:${scope}/${name}`,
+					name,
+					description: "",
+					source: { label: "local", repo: "local", skillsPath: "" },
+					repoPath: "",
+					gitBlobSha: "",
+					frontmatter: null,
+					installed: true,
+					installedScope: scope,
+					hasUpdate: false,
+					stars: undefined,
+				});
+			}
+		}
+		return all;
+	}, [installedFromDisk]);
+
+	// Build list: installed first, then recommended, then search/popular
 	const allItems = useMemo((): SkillListItem[] => {
 		const query = skillsState.searchQuery.toLowerCase();
 		const items: SkillListItem[] = [];
 
+		// ── INSTALLED: always shown at top (if any) ──
+		const installedFiltered = query
+			? installedSkills.filter((s) => s.name.toLowerCase().includes(query))
+			: installedSkills;
+
+		if (installedFiltered.length > 0) {
+			items.push({
+				id: "cat:installed",
+				type: "category",
+				label: `Installed (${installedFiltered.length})`,
+				categoryKey: "installed",
+			});
+			for (const skill of installedFiltered) {
+				items.push({
+					id: `skill:${skill.id}`,
+					type: "skill",
+					label: skill.name,
+					skill,
+				});
+			}
+		}
+
 		// ── RECOMMENDED: always shown, filtered when searching ──
 		const filteredRec = query
 			? mergedRecommended.filter(
@@ -271,14 +358,8 @@ export function SkillsScreen() {
 		try {
 			await installSkill(selectedSkill, scope, state.projectPath);
 			modal.hideModal();
-			dispatch({
-				type: "SKILLS_UPDATE_ITEM",
-				name: selectedSkill.name,
-				updates: {
-					installed: true,
-					installedScope: scope,
-				},
-			});
+			// Refetch to pick up install status for all skills including recommended
+			await fetchData();
 			await modal.message(
 				"Installed",
 				`${selectedSkill.name} installed to ${scope === "user" ? "~/.claude/skills/" : ".claude/skills/"}`,
@@ -288,7 +369,7 @@ export function SkillsScreen() {
 			modal.hideModal();
 			await modal.message("Error", `Failed to install: ${error}`, "error");
 		}
-	}, [selectedSkill, state.projectPath, dispatch, modal]);
+	}, [selectedSkill, state.projectPath, dispatch, modal, fetchData]);
 
 	// Uninstall handler
 	const handleUninstall = useCallback(async () => {
@@ -307,20 +388,14 @@ export function SkillsScreen() {
 		try {
 			await uninstallSkill(selectedSkill.name, scope, state.projectPath);
 			modal.hideModal();
-			dispatch({
-				type: "SKILLS_UPDATE_ITEM",
-				name: selectedSkill.name,
-				updates: {
-					installed: false,
-					installedScope: null,
-				},
-			});
+			// Refetch to pick up uninstall status
+			await fetchData();
 			await modal.message("Uninstalled", `${selectedSkill.name} removed.`, "success");
 		} catch (error) {
 			modal.hideModal();
 			await modal.message("Error", `Failed to uninstall: ${error}`, "error");
 		}
-	}, [selectedSkill, state.projectPath, dispatch, modal]);
+	}, [selectedSkill, state.projectPath, dispatch, modal, fetchData]);
 
 	// Keyboard handling — same pattern as PluginsScreen
 	useKeyboard((event) => {
@@ -404,6 +479,16 @@ export function SkillsScreen() {
 			handleUninstall();
 		} else if (event.name === "r") {
 			fetchData();
+		} else if (event.name === "o" && selectedSkill) {
+			// Open in browser
+			const repo = selectedSkill.source.repo;
+			const repoPath = selectedSkill.repoPath?.replace("/SKILL.md", "") || "";
+			if (repo && repo !== "local") {
+				const url = `https://github.com/${repo}/tree/main/${repoPath}`;
+				import("node:child_process").then(({ execSync: exec }) => {
+					try { exec(`open "${url}"`); } catch { /* ignore */ }
+				});
+			}
 		}
 		// "/" to enter search mode
 		else if (event.name === "/") {
@@ -418,8 +503,9 @@ export function SkillsScreen() {
 	) => {
 		if (item.type === "category") {
 			const isRec = item.categoryKey === "recommended";
-			const bgColor = isRec ? "green" : "cyan";
-			const star = isRec ? "★ " : "";
+			const isInstalled = item.categoryKey === "installed";
+			const bgColor = isInstalled ? "#7e57c2" : isRec ? "#2e7d32" : "#00695c";
+			const star = isRec ? "★ " : isInstalled ? "● " : "";
 
 			if (isSelected) {
 				return (
@@ -437,27 +523,30 @@ export function SkillsScreen() {
 
 		if (item.type === "skill" && item.skill) {
 			const skill = item.skill;
-			const indicator = skill.installed ? "●" : "○";
-			const indicatorColor = skill.installed ? "cyan" : "gray";
-			const scopeTag = skill.installedScope === "user" ? "u" : skill.installedScope === "project" ? "p" : "";
 			const starsStr = formatStars(skill.stars);
+			const hasUser = skill.installedScope === "user";
+			const hasProject = skill.installedScope === "project";
+			const nameColor = skill.installed ? "white" : "gray";
 
 			if (isSelected) {
 				return (
 					<text bg="magenta" fg="white">
-						{" "}{indicator} {skill.name}{skill.hasUpdate ? " ⬆" : ""}{scopeTag ? ` [${scopeTag}]` : ""}{starsStr ? `  ${starsStr}` : ""}{" "}
+						{" "}
+						<span>{hasUser ? "■" : "□"}</span>
+						<span>{hasProject ? "■" : "□"}</span>
+						{" "}{skill.name}{skill.hasUpdate ? " ⬆" : ""}{starsStr ? `  ${starsStr}` : ""}{" "}
 					</text>
 				);
 			}
 
 			return (
 				<text>
-					<span fg={indicatorColor}> {indicator} </span>
-					<span fg="white">{skill.name}</span>
+					<span> </span>
+					<span fg={hasUser ? "cyan" : "#333333"}>■</span>
+					<span fg={hasProject ? "green" : "#333333"}>■</span>
+					<span> </span>
+					<span fg={nameColor}>{skill.name}</span>
 					{skill.hasUpdate && <span fg="yellow"> ⬆</span>}
-					{scopeTag && (
-						<span fg={scopeTag === "u" ? "cyan" : "green"}> [{scopeTag}]</span>
-					)}
 					{starsStr && (
 						<span fg="yellow">{"  "}{starsStr}</span>
 					)}
@@ -694,7 +783,7 @@ export function SkillsScreen() {
 			}
 			footerHints={isSearchActive
 				? "type to filter │ Enter:done │ Esc:clear"
-				: "u:user │ p:project │ d:uninstall │ /:search"
+				: "u:user │ p:project │ o:open │ /:search"
 			}
 			listPanel={
 				<box flexDirection="column">