claudeup 4.5.4 → 4.6.0

package/src/ui/screens/SkillsScreen.js

@@ -7,13 +7,13 @@ 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 { fetchAvailableSkills, fetchSkillFrontmatter, installSkill, uninstallSkill, } from "../../services/skills-manager.js";
+import { fetchAvailableSkills, fetchSkillFrontmatter, fetchSkillSetSkills, installSkill, uninstallSkill, } from "../../services/skills-manager.js";
 import { searchSkills } from "../../services/skillsmp-client.js";
-import { DEFAULT_SKILL_REPOS, RECOMMENDED_SKILLS } from "../../data/skill-repos.js";
+import { DEFAULT_SKILL_REPOS, RECOMMENDED_SKILLS, RECOMMENDED_SKILL_SETS, classifyStarReliability } from "../../data/skill-repos.js";
 import { buildSkillBrowserItems } from "../adapters/skillsAdapter.js";
 import { renderSkillRow, renderSkillDetail } from "../renderers/skillRenderers.js";
+import { ScrollableList } from "../components/ScrollableList.js";
 export function SkillsScreen() {
     const { state, dispatch } = useApp();
     const { skills: skillsState } = state;
@@ -81,6 +81,7 @@ export function SkillsScreen() {
                         installedScope: null,
                         hasUpdate: false,
                         stars: r.stars,
+                        starReliability: classifyStarReliability(r.repo || "unknown", r.stars),
                     };
                 });
                 searchCacheRef.current.set(query, mapped);
@@ -120,6 +121,106 @@ export function SkillsScreen() {
     useEffect(() => {
         scanDisk();
     }, [scanDisk, state.dataRefreshVersion]);
+    // ── Skill Sets state ──────────────────────────────────────────────────────
+    const [skillSets, setSkillSets] = useState(() => RECOMMENDED_SKILL_SETS.map((rs) => ({
+        id: rs.repo,
+        name: rs.name,
+        description: rs.description,
+        repo: rs.repo,
+        icon: rs.icon,
+        stars: rs.stars,
+        skills: [],
+        loaded: false,
+        loading: false,
+    })));
+    const [expandedSets, setExpandedSets] = useState(new Set());
+    // Re-mark installed status on child skills when disk state changes
+    useEffect(() => {
+        setSkillSets((prev) => prev.map((set) => {
+            if (!set.loaded)
+                return set;
+            const updatedSkills = set.skills.map((skill) => {
+                const slug = skill.name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+                const isUser = installedFromDisk.user.has(slug) || installedFromDisk.user.has(skill.name);
+                const isProj = installedFromDisk.project.has(slug) || installedFromDisk.project.has(skill.name);
+                return {
+                    ...skill,
+                    installed: isUser || isProj,
+                    installedScope: isProj ? "project" : isUser ? "user" : null,
+                };
+            });
+            return { ...set, skills: updatedSkills };
+        }));
+    }, [installedFromDisk]);
+    const handleToggleSet = useCallback(async (setId) => {
+        const isExpanded = expandedSets.has(setId);
+        const newExpanded = new Set(expandedSets);
+        if (isExpanded) {
+            newExpanded.delete(setId);
+        }
+        else {
+            newExpanded.add(setId);
+        }
+        setExpandedSets(newExpanded);
+        // Fetch skills on first expand
+        const set = skillSets.find((s) => s.id === setId);
+        if (!isExpanded && set && !set.loaded && !set.loading) {
+            setSkillSets((prev) => prev.map((s) => (s.id === setId ? { ...s, loading: true } : s)));
+            try {
+                const skills = await fetchSkillSetSkills(set.repo, state.projectPath);
+                setSkillSets((prev) => prev.map((s) => s.id === setId
+                    ? { ...s, skills, loaded: true, loading: false, error: undefined }
+                    : s));
+            }
+            catch (error) {
+                setSkillSets((prev) => prev.map((s) => s.id === setId
+                    ? {
+                        ...s,
+                        loading: false,
+                        error: error instanceof Error ? error.message : String(error),
+                    }
+                    : s));
+            }
+        }
+    }, [expandedSets, skillSets, state.projectPath]);
+    // Status bar message (auto-clears)
+    const [statusMsg, setStatusMsg] = useState(null);
+    const statusTimerRef = useRef(null);
+    const showStatus = useCallback((text, tone = "success") => {
+        setStatusMsg({ text, tone });
+        if (statusTimerRef.current)
+            clearTimeout(statusTimerRef.current);
+        statusTimerRef.current = setTimeout(() => setStatusMsg(null), 3000);
+    }, []);
+    const handleInstallAllFromSet = useCallback(async (setId, scope) => {
+        const set = skillSets.find((s) => s.id === setId);
+        if (!set || !set.loaded)
+            return;
+        const toInstall = set.skills.filter((s) => !s.installed);
+        if (toInstall.length === 0) {
+            showStatus(`All ${set.name} skills already installed`);
+            return;
+        }
+        showStatus(`Installing ${toInstall.length} skills from ${set.name}...`);
+        let installed = 0;
+        let failed = 0;
+        for (const skill of toInstall) {
+            try {
+                await installSkill(skill, scope, state.projectPath);
+                installed++;
+            }
+            catch {
+                failed++;
+            }
+        }
+        await scanDisk();
+        if (failed > 0) {
+            showStatus(`Installed ${installed}/${toInstall.length} (${failed} failed)`, "error");
+        }
+        else {
+            showStatus(`Installed ${installed} skills from ${set.name} to ${scope}`);
+        }
+    }, [skillSets, state.projectPath, scanDisk, showStatus]);
     // ── Derived data ──────────────────────────────────────────────────────────
     const staticRecommended = useMemo(() => {
         return RECOMMENDED_SKILLS.map((r) => {
@@ -139,6 +240,7 @@ export function SkillsScreen() {
                 hasUpdate: false,
                 isRecommended: true,
                 stars: r.stars,
+                starReliability: classifyStarReliability(r.repo, r.stars),
             };
         });
     }, [installedFromDisk]);
@@ -202,6 +304,8 @@ export function SkillsScreen() {
         searchResults,
         query: skillsState.searchQuery,
         isSearchLoading,
+        skillSets,
+        expandedSets,
     }), [
         mergedRecommended,
         popularSkills,
@@ -209,40 +313,47 @@ export function SkillsScreen() {
         searchResults,
         skillsState.searchQuery,
         isSearchLoading,
+        skillSets,
+        expandedSets,
     ]);
     // Auto-correct selection if it lands on a category header (e.g. initial load, reset)
     useEffect(() => {
         const item = allItems[skillsState.selectedIndex];
         if (item && item.kind === "category") {
-            const firstSkill = allItems.findIndex((i) => i.kind === "skill");
-            if (firstSkill >= 0)
-                dispatch({ type: "SKILLS_SELECT", index: firstSkill });
+            const firstSelectable = allItems.findIndex((i) => i.kind === "skill" || i.kind === "skillset");
+            if (firstSelectable >= 0)
+                dispatch({ type: "SKILLS_SELECT", index: firstSelectable });
         }
     }, [allItems, skillsState.selectedIndex, dispatch]);
     const selectedItem = allItems[skillsState.selectedIndex];
     const selectedSkill = selectedItem?.kind === "skill" ? selectedItem.skill : undefined;
+    const selectedSet = selectedItem?.kind === "skillset" ? selectedItem.skillSet : undefined;
     // ── Lazy-load frontmatter for selected skill ───────────────────────────────
+    // Check if selected skill belongs to a skill set (lives in local state, not reducer)
+    const isSkillSetChild = selectedSkill
+        ? skillSets.some((s) => s.loaded && s.skills.some((sk) => sk.id === selectedSkill.id))
+        : false;
     useEffect(() => {
         if (!selectedSkill || selectedSkill.frontmatter)
             return;
         fetchSkillFrontmatter(selectedSkill).then((fm) => {
-            dispatch({
-                type: "SKILLS_UPDATE_ITEM",
-                name: selectedSkill.name,
-                updates: { frontmatter: fm },
-            });
+            if (isSkillSetChild) {
+                // Update the local skillSets state
+                setSkillSets((prev) => prev.map((set) => ({
+                    ...set,
+                    skills: set.skills.map((sk) => sk.id === selectedSkill.id ? { ...sk, frontmatter: fm } : sk),
+                })));
+            }
+            else {
+                dispatch({
+                    type: "SKILLS_UPDATE_ITEM",
+                    name: selectedSkill.name,
+                    updates: { frontmatter: fm },
+                });
+            }
         }).catch(() => { });
-    }, [selectedSkill?.id, dispatch]);
+    }, [selectedSkill?.id, isSkillSetChild, dispatch]);
     // ── Action handlers ───────────────────────────────────────────────────────
-    // Status bar message (auto-clears)
-    const [statusMsg, setStatusMsg] = useState(null);
-    const statusTimerRef = useRef(null);
-    const showStatus = useCallback((text, tone = "success") => {
-        setStatusMsg({ text, tone });
-        if (statusTimerRef.current)
-            clearTimeout(statusTimerRef.current);
-        statusTimerRef.current = setTimeout(() => setStatusMsg(null), 3000);
-    }, []);
     const handleInstall = useCallback(async (scope) => {
         if (!selectedSkill)
             return;
@@ -320,6 +431,10 @@ export function SkillsScreen() {
                 dispatch({ type: "SET_SEARCHING", isSearching: false });
                 return;
             }
+            if (selectedSet) {
+                handleToggleSet(selectedSet.id);
+                return;
+            }
             if (selectedSkill && !selectedSkill.installed) {
                 handleInstall("project");
             }
@@ -327,19 +442,31 @@ export function SkillsScreen() {
         }
         // Action keys only when NOT actively typing in search
         if (!isSearchActive) {
-            if (event.name === "u" && selectedSkill) {
-                if (selectedSkill.installed && selectedSkill.installedScope === "user")
-                    handleUninstall();
-                else
-                    handleInstall("user");
-                return;
+            if (event.name === "u") {
+                if (selectedSet) {
+                    handleInstallAllFromSet(selectedSet.id, "user");
+                    return;
+                }
+                if (selectedSkill) {
+                    if (selectedSkill.installed && selectedSkill.installedScope === "user")
+                        handleUninstall();
+                    else
+                        handleInstall("user");
+                    return;
+                }
             }
-            else if (event.name === "p" && selectedSkill) {
-                if (selectedSkill.installed && selectedSkill.installedScope === "project")
-                    handleUninstall();
-                else
-                    handleInstall("project");
-                return;
+            else if (event.name === "p") {
+                if (selectedSet) {
+                    handleInstallAllFromSet(selectedSet.id, "project");
+                    return;
+                }
+                if (selectedSkill) {
+                    if (selectedSkill.installed && selectedSkill.installedScope === "project")
+                        handleUninstall();
+                    else
+                        handleInstall("project");
+                    return;
+                }
             }
         }
         if (isSearchActive) {
@@ -358,11 +485,9 @@ export function SkillsScreen() {
         if (event.name === "r") {
             fetchData();
         }
-        else if (event.name === "o" && selectedSkill) {
-            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}`;
+        else if (event.name === "o" && (selectedSkill || selectedSet)) {
+            if (selectedSet) {
+                const url = `https://github.com/${selectedSet.repo}`;
                 import("node:child_process").then(({ execSync: exec }) => {
                     try {
                         exec(`open "${url}"`);
@@ -370,6 +495,19 @@ export function SkillsScreen() {
                     catch { /* ignore */ }
                 });
             }
+            else if (selectedSkill) {
+                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 */ }
+                    });
+                }
+            }
         }
         else if (event.name === "/") {
             dispatch({ type: "SET_SEARCHING", isSearching: true });
@@ -389,6 +527,6 @@ export function SkillsScreen() {
             }
             : undefined, footerHints: isSearchActive
             ? "type to filter │ Enter:done │ Esc:clear"
-            : "u:user │ p:project │ o:open │ /:search", listPanel: _jsxs("box", { flexDirection: "column", children: [_jsx(ScrollableList, { items: allItems, selectedIndex: skillsState.selectedIndex, renderItem: renderSkillRow, 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: renderSkillDetail(selectedItem) }));
+            : "u:user │ p:project │ o:open │ /:search", listPanel: _jsxs("box", { flexDirection: "column", children: [_jsx(ScrollableList, { items: allItems, selectedIndex: skillsState.selectedIndex, renderItem: renderSkillRow, maxHeight: dimensions.listPanelHeight, getKey: (item, index) => `${index}:${item.id}` }), !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: renderSkillDetail(selectedItem) }));
 }
 export default SkillsScreen;

package/src/ui/screens/SkillsScreen.tsx

@@ -6,19 +6,22 @@ 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 {
   fetchAvailableSkills,
   fetchSkillFrontmatter,
+  fetchSkillSetSkills,
   installSkill,
   uninstallSkill,
 } from "../../services/skills-manager.js";
 import { searchSkills } from "../../services/skillsmp-client.js";
-import { DEFAULT_SKILL_REPOS, RECOMMENDED_SKILLS } from "../../data/skill-repos.js";
-import type { SkillInfo, SkillSource } from "../../types/index.js";
+import { DEFAULT_SKILL_REPOS, RECOMMENDED_SKILLS, RECOMMENDED_SKILL_SETS, classifyStarReliability } from "../../data/skill-repos.js";
+import type { SkillInfo, SkillSetInfo, SkillSource } from "../../types/index.js";
 import { buildSkillBrowserItems } from "../adapters/skillsAdapter.js";
+import type { SkillBrowserItem } from "../adapters/skillsAdapter.js";
 import { renderSkillRow, renderSkillDetail } from "../renderers/skillRenderers.js";
+import { ScrollableList } from "../components/ScrollableList.js";
 
 export function SkillsScreen() {
   const { state, dispatch } = useApp();
@@ -99,6 +102,7 @@ export function SkillsScreen() {
             installedScope: null,
             hasUpdate: false,
             stars: r.stars,
+            starReliability: classifyStarReliability(r.repo || "unknown", r.stars),
           };
         });
         searchCacheRef.current.set(query, mapped);
@@ -143,6 +147,128 @@ export function SkillsScreen() {
     scanDisk();
   }, [scanDisk, state.dataRefreshVersion]);
 
+  // ── Skill Sets state ──────────────────────────────────────────────────────
+
+  const [skillSets, setSkillSets] = useState<SkillSetInfo[]>(() =>
+    RECOMMENDED_SKILL_SETS.map((rs) => ({
+      id: rs.repo,
+      name: rs.name,
+      description: rs.description,
+      repo: rs.repo,
+      icon: rs.icon,
+      stars: rs.stars,
+      skills: [],
+      loaded: false,
+      loading: false,
+    })),
+  );
+  const [expandedSets, setExpandedSets] = useState<Set<string>>(new Set());
+
+  // Re-mark installed status on child skills when disk state changes
+  useEffect(() => {
+    setSkillSets((prev) =>
+      prev.map((set) => {
+        if (!set.loaded) return set;
+        const updatedSkills = set.skills.map((skill) => {
+          const slug = skill.name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+          const isUser = installedFromDisk.user.has(slug) || installedFromDisk.user.has(skill.name);
+          const isProj = installedFromDisk.project.has(slug) || installedFromDisk.project.has(skill.name);
+          return {
+            ...skill,
+            installed: isUser || isProj,
+            installedScope: isProj ? "project" as const : isUser ? "user" as const : null,
+          };
+        });
+        return { ...set, skills: updatedSkills };
+      }),
+    );
+  }, [installedFromDisk]);
+
+  const handleToggleSet = useCallback(
+    async (setId: string) => {
+      const isExpanded = expandedSets.has(setId);
+      const newExpanded = new Set(expandedSets);
+      if (isExpanded) {
+        newExpanded.delete(setId);
+      } else {
+        newExpanded.add(setId);
+      }
+      setExpandedSets(newExpanded);
+
+      // Fetch skills on first expand
+      const set = skillSets.find((s) => s.id === setId);
+      if (!isExpanded && set && !set.loaded && !set.loading) {
+        setSkillSets((prev) =>
+          prev.map((s) => (s.id === setId ? { ...s, loading: true } : s)),
+        );
+        try {
+          const skills = await fetchSkillSetSkills(set.repo, state.projectPath);
+          setSkillSets((prev) =>
+            prev.map((s) =>
+              s.id === setId
+                ? { ...s, skills, loaded: true, loading: false, error: undefined }
+                : s,
+            ),
+          );
+        } catch (error) {
+          setSkillSets((prev) =>
+            prev.map((s) =>
+              s.id === setId
+                ? {
+                    ...s,
+                    loading: false,
+                    error: error instanceof Error ? error.message : String(error),
+                  }
+                : s,
+            ),
+          );
+        }
+      }
+    },
+    [expandedSets, skillSets, state.projectPath],
+  );
+
+  // Status bar message (auto-clears)
+  const [statusMsg, setStatusMsg] = useState<{ text: string; tone: "success" | "error" } | null>(null);
+  const statusTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const showStatus = useCallback((text: string, tone: "success" | "error" = "success") => {
+    setStatusMsg({ text, tone });
+    if (statusTimerRef.current) clearTimeout(statusTimerRef.current);
+    statusTimerRef.current = setTimeout(() => setStatusMsg(null), 3000);
+  }, []);
+
+  const handleInstallAllFromSet = useCallback(
+    async (setId: string, scope: "user" | "project") => {
+      const set = skillSets.find((s) => s.id === setId);
+      if (!set || !set.loaded) return;
+
+      const toInstall = set.skills.filter((s) => !s.installed);
+      if (toInstall.length === 0) {
+        showStatus(`All ${set.name} skills already installed`);
+        return;
+      }
+
+      showStatus(`Installing ${toInstall.length} skills from ${set.name}...`);
+      let installed = 0;
+      let failed = 0;
+      for (const skill of toInstall) {
+        try {
+          await installSkill(skill, scope, state.projectPath);
+          installed++;
+        } catch {
+          failed++;
+        }
+      }
+      await scanDisk();
+      if (failed > 0) {
+        showStatus(`Installed ${installed}/${toInstall.length} (${failed} failed)`, "error");
+      } else {
+        showStatus(`Installed ${installed} skills from ${set.name} to ${scope}`);
+      }
+    },
+    [skillSets, state.projectPath, scanDisk, showStatus],
+  );
+
   // ── Derived data ──────────────────────────────────────────────────────────
 
   const staticRecommended = useMemo((): SkillInfo[] => {
@@ -163,6 +289,7 @@ export function SkillsScreen() {
         hasUpdate: false,
         isRecommended: true,
         stars: r.stars,
+        starReliability: classifyStarReliability(r.repo, r.stars),
       };
     });
   }, [installedFromDisk]);
@@ -231,6 +358,8 @@ export function SkillsScreen() {
         searchResults,
         query: skillsState.searchQuery,
         isSearchLoading,
+        skillSets,
+        expandedSets,
       }),
     [
       mergedRecommended,
@@ -239,6 +368,8 @@ export function SkillsScreen() {
       searchResults,
       skillsState.searchQuery,
       isSearchLoading,
+      skillSets,
+      expandedSets,
     ],
   );
 
@@ -246,39 +377,49 @@ export function SkillsScreen() {
   useEffect(() => {
     const item = allItems[skillsState.selectedIndex];
     if (item && item.kind === "category") {
-      const firstSkill = allItems.findIndex((i) => i.kind === "skill");
-      if (firstSkill >= 0) dispatch({ type: "SKILLS_SELECT", index: firstSkill });
+      const firstSelectable = allItems.findIndex((i) => i.kind === "skill" || i.kind === "skillset");
+      if (firstSelectable >= 0) dispatch({ type: "SKILLS_SELECT", index: firstSelectable });
     }
   }, [allItems, skillsState.selectedIndex, dispatch]);
 
-  const selectedItem = allItems[skillsState.selectedIndex];
+  const selectedItem: SkillBrowserItem | undefined = allItems[skillsState.selectedIndex];
   const selectedSkill =
     selectedItem?.kind === "skill" ? selectedItem.skill : undefined;
+  const selectedSet =
+    selectedItem?.kind === "skillset" ? selectedItem.skillSet : undefined;
 
   // ── Lazy-load frontmatter for selected skill ───────────────────────────────
 
+  // Check if selected skill belongs to a skill set (lives in local state, not reducer)
+  const isSkillSetChild = selectedSkill
+    ? skillSets.some((s) => s.loaded && s.skills.some((sk) => sk.id === selectedSkill.id))
+    : false;
+
   useEffect(() => {
     if (!selectedSkill || selectedSkill.frontmatter) return;
     fetchSkillFrontmatter(selectedSkill).then((fm) => {
-      dispatch({
-        type: "SKILLS_UPDATE_ITEM",
-        name: selectedSkill.name,
-        updates: { frontmatter: fm },
-      });
+      if (isSkillSetChild) {
+        // Update the local skillSets state
+        setSkillSets((prev) =>
+          prev.map((set) => ({
+            ...set,
+            skills: set.skills.map((sk) =>
+              sk.id === selectedSkill.id ? { ...sk, frontmatter: fm } : sk,
+            ),
+          })),
+        );
+      } else {
+        dispatch({
+          type: "SKILLS_UPDATE_ITEM",
+          name: selectedSkill.name,
+          updates: { frontmatter: fm },
+        });
+      }
     }).catch(() => {});
-  }, [selectedSkill?.id, dispatch]);
+  }, [selectedSkill?.id, isSkillSetChild, dispatch]);
 
   // ── Action handlers ───────────────────────────────────────────────────────
 
-  // Status bar message (auto-clears)
-  const [statusMsg, setStatusMsg] = useState<{ text: string; tone: "success" | "error" } | null>(null);
-  const statusTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const showStatus = useCallback((text: string, tone: "success" | "error" = "success") => {
-    setStatusMsg({ text, tone });
-    if (statusTimerRef.current) clearTimeout(statusTimerRef.current);
-    statusTimerRef.current = setTimeout(() => setStatusMsg(null), 3000);
-  }, []);
-
   const handleInstall = useCallback(async (scope: "user" | "project") => {
     if (!selectedSkill) return;
     try {
@@ -352,6 +493,10 @@ export function SkillsScreen() {
         dispatch({ type: "SET_SEARCHING", isSearching: false });
         return;
       }
+      if (selectedSet) {
+        handleToggleSet(selectedSet.id);
+        return;
+      }
       if (selectedSkill && !selectedSkill.installed) {
         handleInstall("project");
       }
@@ -360,14 +505,26 @@ export function SkillsScreen() {
 
     // Action keys only when NOT actively typing in search
     if (!isSearchActive) {
-      if (event.name === "u" && selectedSkill) {
-        if (selectedSkill.installed && selectedSkill.installedScope === "user") handleUninstall();
-        else handleInstall("user");
-        return;
-      } else if (event.name === "p" && selectedSkill) {
-        if (selectedSkill.installed && selectedSkill.installedScope === "project") handleUninstall();
-        else handleInstall("project");
-        return;
+      if (event.name === "u") {
+        if (selectedSet) {
+          handleInstallAllFromSet(selectedSet.id, "user");
+          return;
+        }
+        if (selectedSkill) {
+          if (selectedSkill.installed && selectedSkill.installedScope === "user") handleUninstall();
+          else handleInstall("user");
+          return;
+        }
+      } else if (event.name === "p") {
+        if (selectedSet) {
+          handleInstallAllFromSet(selectedSet.id, "project");
+          return;
+        }
+        if (selectedSkill) {
+          if (selectedSkill.installed && selectedSkill.installedScope === "project") handleUninstall();
+          else handleInstall("project");
+          return;
+        }
       }
     }
 
@@ -387,14 +544,21 @@ export function SkillsScreen() {
 
     if (event.name === "r") {
       fetchData();
-    } else if (event.name === "o" && selectedSkill) {
-      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}`;
+    } else if (event.name === "o" && (selectedSkill || selectedSet)) {
+      if (selectedSet) {
+        const url = `https://github.com/${selectedSet.repo}`;
         import("node:child_process").then(({ execSync: exec }) => {
           try { exec(`open "${url}"`); } catch { /* ignore */ }
         });
+      } else if (selectedSkill) {
+        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 */ }
+          });
+        }
       }
     } else if (event.name === "/") {
       dispatch({ type: "SET_SEARCHING", isSearching: true });
@@ -454,6 +618,7 @@ export function SkillsScreen() {
             selectedIndex={skillsState.selectedIndex}
             renderItem={renderSkillRow}
             maxHeight={dimensions.listPanelHeight}
+            getKey={(item, index) => `${index}:${item.id}`}
           />
           {!query && skillsState.skills.status === "loading" && (
             <box marginTop={2} paddingLeft={2}>