feat(skills): unified management architecture with SSOT and React Query

- Introduce SSOT (Single Source of Truth) at ~/.cc-switch/skills/
- Add three-app toggle support (Claude/Codex/Gemini) for each skill
- Refactor frontend to use TanStack Query hooks instead of manual state
- Add UnifiedSkillsPanel for managing installed skills with app toggles
- Add useSkills.ts with declarative data fetching hooks
- Extend skills.ts API with unified install/uninstall/toggle methods
- Support importing unmanaged skills from app directories
- Add v2→v3 database migration for new skills table structure

src/App.tsx

@@ -13,6 +13,7 @@ import {
   Wrench,
   Server,
   RefreshCw,
+  Search,
 } from "lucide-react";
 import type { Provider } from "@/types";
 import type { EnvConflict } from "@/types/env";
@@ -42,6 +43,7 @@ import UsageScriptModal from "@/components/UsageScriptModal";
 import UnifiedMcpPanel from "@/components/mcp/UnifiedMcpPanel";
 import PromptPanel from "@/components/prompts/PromptPanel";
 import { SkillsPage } from "@/components/skills/SkillsPage";
+import UnifiedSkillsPanel from "@/components/skills/UnifiedSkillsPanel";
 import { DeepLinkImportDialog } from "@/components/DeepLinkImportDialog";
 import { AgentsPanel } from "@/components/agents/AgentsPanel";
 import { UniversalProviderPanel } from "@/components/universal";
@@ -52,6 +54,7 @@ type View =
   | "settings"
   | "prompts"
   | "skills"
+  | "skillsDiscovery"
   | "mcp"
   | "agents"
   | "universal";
@@ -81,6 +84,8 @@ function App() {
   const promptPanelRef = useRef<any>(null);
   const mcpPanelRef = useRef<any>(null);
   const skillsPageRef = useRef<any>(null);
+  const [openRepoManagerOnDiscovery, setOpenRepoManagerOnDiscovery] =
+    useState(false);
   const addActionButtonClass =
     "bg-orange-500 hover:bg-orange-600 dark:bg-orange-500 dark:hover:bg-orange-600 text-white shadow-lg shadow-orange-500/30 dark:shadow-orange-500/40 rounded-full w-8 h-8";
 
@@ -106,8 +111,23 @@ function App() {
   });
   const providers = useMemo(() => data?.providers ?? {}, [data]);
   const currentProviderId = data?.currentProviderId ?? "";
-  // Skills 功能仅支持 Claude 和 Codex
-  const hasSkillsSupport = activeApp === "claude" || activeApp === "codex";
+  const hasSkillsSupport = true;
+
+  const refreshSkillsData = async () => {
+    try {
+      await queryClient.invalidateQueries({ queryKey: ["skills"] });
+      await queryClient.refetchQueries({ queryKey: ["skills"], type: "active" });
+    } catch (error) {
+      console.error("[App] Failed to refresh skills data", error);
+    }
+  };
+
+  useEffect(() => {
+    if (currentView === "skillsDiscovery" && openRepoManagerOnDiscovery) {
+      skillsPageRef.current?.openRepoManager?.();
+      setOpenRepoManagerOnDiscovery(false);
+    }
+  }, [currentView, openRepoManagerOnDiscovery]);
 
   // 🎯 使用 useProviderActions Hook 统一管理所有 Provider 操作
   const {
@@ -218,6 +238,35 @@ function App() {
     checkMigration();
   }, [t]);
 
+  // 应用启动时检查是否刚完成了 Skills 自动导入（统一管理 SSOT）
+  useEffect(() => {
+    const checkSkillsMigration = async () => {
+      try {
+        const result = await invoke<{ count: number; error?: string } | null>(
+          "get_skills_migration_result",
+        );
+        if (result?.error) {
+          toast.error(t("migration.skillsFailed"), {
+            description: t("migration.skillsFailedDescription"),
+            closeButton: true,
+          });
+          console.error("[App] Skills SSOT migration failed:", result.error);
+          return;
+        }
+        if (result && result.count > 0) {
+          toast.success(t("migration.skillsSuccess", { count: result.count }), {
+            closeButton: true,
+          });
+          await queryClient.invalidateQueries({ queryKey: ["skills"] });
+        }
+      } catch (error) {
+        console.error("[App] Failed to check skills migration result:", error);
+      }
+    };
+
+    checkSkillsMigration();
+  }, [t, queryClient]);
+
   // 切换应用时检测当前应用的环境变量冲突
   useEffect(() => {
     const checkEnvOnSwitch = async () => {
@@ -390,10 +439,16 @@ function App() {
             />
           );
         case "skills":
+          return (
+            <UnifiedSkillsPanel
+              onOpenDiscovery={() => setCurrentView("skillsDiscovery")}
+            />
+          );
+        case "skillsDiscovery":
           return (
             <SkillsPage
               ref={skillsPageRef}
-              onClose={() => setCurrentView("providers")}
+              onClose={() => setCurrentView("skills")}
               initialApp={activeApp}
             />
           );
@@ -532,7 +587,11 @@ function App() {
                 <Button
                   variant="outline"
                   size="icon"
-                  onClick={() => setCurrentView("providers")}
+                  onClick={() =>
+                    setCurrentView(
+                      currentView === "skillsDiscovery" ? "skills" : "providers",
+                    )
+                  }
                   className="mr-2 rounded-lg"
                 >
                   <ArrowLeft className="w-4 h-4" />
@@ -542,6 +601,7 @@ function App() {
                   {currentView === "prompts" &&
                     t("prompts.title", { appName: t(`apps.${activeApp}`) })}
                   {currentView === "skills" && t("skills.title")}
+                  {currentView === "skillsDiscovery" && t("skills.title")}
                   {currentView === "mcp" && t("mcp.unifiedPanel.title")}
                   {currentView === "agents" && t("agents.title")}
                   {currentView === "universal" &&
@@ -606,6 +666,40 @@ function App() {
               </Button>
             )}
             {currentView === "skills" && (
+              <>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={refreshSkillsData}
+                  className="hover:bg-black/5 dark:hover:bg-white/5"
+                >
+                  <RefreshCw className="w-4 h-4 mr-2" />
+                  {t("skills.refresh")}
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setCurrentView("skillsDiscovery")}
+                  className="hover:bg-black/5 dark:hover:bg-white/5"
+                >
+                  <Search className="w-4 h-4 mr-2" />
+                  {t("skills.discover")}
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => {
+                    setOpenRepoManagerOnDiscovery(true);
+                    setCurrentView("skillsDiscovery");
+                  }}
+                  className="hover:bg-black/5 dark:hover:bg-white/5"
+                >
+                  <Settings className="w-4 h-4 mr-2" />
+                  {t("skills.repoManager")}
+                </Button>
+              </>
+            )}
+            {currentView === "skillsDiscovery" && (
               <>
                 <Button
                   variant="ghost"

src/components/skills/RepoManager.tsx

@@ -12,13 +12,13 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Trash2, ExternalLink, Plus } from "lucide-react";
 import { settingsApi } from "@/lib/api";
-import type { Skill, SkillRepo } from "@/lib/api/skills";
+import type { DiscoverableSkill, SkillRepo } from "@/lib/api/skills";
 
 interface RepoManagerProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   repos: SkillRepo[];
-  skills: Skill[];
+  skills: DiscoverableSkill[];
   onAdd: (repo: SkillRepo) => Promise<void>;
   onRemove: (owner: string, name: string) => Promise<void>;
 }

src/components/skills/RepoManagerPanel.tsx

@@ -6,11 +6,11 @@ import { Label } from "@/components/ui/label";
 import { Trash2, ExternalLink, Plus } from "lucide-react";
 import { settingsApi } from "@/lib/api";
 import { FullScreenPanel } from "@/components/common/FullScreenPanel";
-import type { Skill, SkillRepo } from "@/lib/api/skills";
+import type { DiscoverableSkill, SkillRepo } from "@/lib/api/skills";
 
 interface RepoManagerPanelProps {
   repos: SkillRepo[];
-  skills: Skill[];
+  skills: DiscoverableSkill[];
   onAdd: (repo: SkillRepo) => Promise<void>;
   onRemove: (owner: string, name: string) => Promise<void>;
   onClose: () => void;
@@ -92,7 +92,7 @@ export function RepoManagerPanel({
       {/* 添加仓库表单 */}
       <div className="space-y-4 glass-card rounded-xl p-6">
         <h3 className="text-base font-semibold text-foreground">
-          添加技能仓库
+          {t("skills.addRepo")}
         </h3>
         <div className="space-y-4">
           <div>

src/components/skills/SkillCard.tsx

@@ -12,10 +12,12 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { ExternalLink, Download, Trash2, Loader2 } from "lucide-react";
 import { settingsApi } from "@/lib/api";
-import type { Skill } from "@/lib/api/skills";
+import type { DiscoverableSkill } from "@/lib/api/skills";
+
+type SkillCardSkill = DiscoverableSkill & { installed: boolean };
 
 interface SkillCardProps {
-  skill: Skill;
+  skill: SkillCardSkill;
   onInstall: (directory: string) => Promise<void>;
   onUninstall: (directory: string) => Promise<void>;
 }

src/components/skills/SkillsPage.tsx

@@ -1,10 +1,4 @@
-import {
-  useState,
-  useEffect,
-  useMemo,
-  forwardRef,
-  useImperativeHandle,
-} from "react";
+import { useState, useMemo, forwardRef, useImperativeHandle } from "react";
 import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -15,16 +9,20 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { RefreshCw, Search } from "lucide-react";
+import { RefreshCw, Search, ArrowLeft } from "lucide-react";
 import { toast } from "sonner";
 import { SkillCard } from "./SkillCard";
 import { RepoManagerPanel } from "./RepoManagerPanel";
 import {
-  skillsApi,
-  type Skill,
-  type SkillRepo,
+  useDiscoverableSkills,
+  useInstalledSkills,
+  useInstallSkill,
+  useSkillRepos,
+  useAddSkillRepo,
+  useRemoveSkillRepo,
   type AppType,
-} from "@/lib/api/skills";
+} from "@/hooks/useSkills";
+import type { DiscoverableSkill, SkillRepo } from "@/lib/api/skills";
 import { formatSkillError } from "@/lib/errors/skillErrorParser";
 
 interface SkillsPageProps {
@@ -37,163 +35,137 @@ export interface SkillsPageHandle {
   openRepoManager: () => void;
 }
 
+/**
+ * Skills 发现面板
+ * 用于浏览和安装来自仓库的 Skills
+ */
 export const SkillsPage = forwardRef<SkillsPageHandle, SkillsPageProps>(
-  ({ onClose: _onClose, initialApp = "claude" }, ref) => {
+  ({ onClose, initialApp = "claude" }, ref) => {
     const { t } = useTranslation();
-    const [skills, setSkills] = useState<Skill[]>([]);
-    const [repos, setRepos] = useState<SkillRepo[]>([]);
-    const [loading, setLoading] = useState(true);
     const [repoManagerOpen, setRepoManagerOpen] = useState(false);
     const [searchQuery, setSearchQuery] = useState("");
     const [filterStatus, setFilterStatus] = useState<
       "all" | "installed" | "uninstalled"
     >("all");
-    // 使用 initialApp，不允许切换
-    const selectedApp = initialApp;
 
-    const loadSkills = async (afterLoad?: (data: Skill[]) => void) => {
-      try {
-        setLoading(true);
-        const data = await skillsApi.getAll(selectedApp);
-        setSkills(data);
-        if (afterLoad) {
-          afterLoad(data);
-        }
-      } catch (error) {
-        const errorMessage =
-          error instanceof Error ? error.message : String(error);
+    // currentApp 用于安装时的默认应用
+    const currentApp = initialApp;
 
-        // 传入 "skills.loadFailed" 作为标题
-        const { title, description } = formatSkillError(
-          errorMessage,
-          t,
-          "skills.loadFailed",
-        );
+    // Queries
+    const {
+      data: discoverableSkills,
+      isLoading: loadingDiscoverable,
+      refetch: refetchDiscoverable,
+    } = useDiscoverableSkills();
+    const { data: installedSkills } = useInstalledSkills();
+    const { data: repos = [], refetch: refetchRepos } = useSkillRepos();
 
-        toast.error(title, {
-          description,
-          duration: 8000,
-        });
+    // Mutations
+    const installMutation = useInstallSkill();
+    const addRepoMutation = useAddSkillRepo();
+    const removeRepoMutation = useRemoveSkillRepo();
 
-        console.error("Load skills failed:", error);
-      } finally {
-        setLoading(false);
-      }
-    };
+    // 已安装的 directory 集合
+    const installedDirs = useMemo(() => {
+      if (!installedSkills) return new Set<string>();
+      return new Set(installedSkills.map((s) => s.directory.toLowerCase()));
+    }, [installedSkills]);
 
-    const loadRepos = async () => {
-      try {
-        const data = await skillsApi.getRepos();
-        setRepos(data);
-      } catch (error) {
-        console.error("Failed to load repos:", error);
-      }
-    };
+    type DiscoverableSkillItem = DiscoverableSkill & { installed: boolean };
 
-    useEffect(() => {
-      Promise.all([loadSkills(), loadRepos()]);
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    // 为发现列表补齐 installed 状态，供 SkillCard 使用
+    const skills: DiscoverableSkillItem[] = useMemo(() => {
+      if (!discoverableSkills) return [];
+      return discoverableSkills.map((d) => {
+        const installName =
+          d.directory.split("/").pop()?.toLowerCase() ||
+          d.directory.toLowerCase();
+        return {
+          ...d,
+          installed: installedDirs.has(installName),
+        };
+      });
+    }, [discoverableSkills, installedDirs]);
+
+    const loading = loadingDiscoverable;
 
     useImperativeHandle(ref, () => ({
-      refresh: () => loadSkills(),
+      refresh: () => {
+        refetchDiscoverable();
+        refetchRepos();
+      },
       openRepoManager: () => setRepoManagerOpen(true),
     }));
 
     const handleInstall = async (directory: string) => {
+      // 找到对应的 DiscoverableSkill
+      const skill = discoverableSkills?.find(
+        (s) =>
+          s.directory === directory ||
+          s.directory.split("/").pop() === directory,
+      );
+      if (!skill) {
+        toast.error(t("skills.notFound"));
+        return;
+      }
+
       try {
-        await skillsApi.install(directory, selectedApp);
-        toast.success(t("skills.installSuccess", { name: directory }), {
+        await installMutation.mutateAsync({
+          skill,
+          currentApp,
+        });
+        toast.success(t("skills.installSuccess", { name: skill.name }), {
           closeButton: true,
         });
-        await loadSkills();
       } catch (error) {
         const errorMessage =
           error instanceof Error ? error.message : String(error);
-
-        // 使用错误解析器格式化错误，传入 "skills.installFailed"
         const { title, description } = formatSkillError(
           errorMessage,
           t,
           "skills.installFailed",
         );
-
-        toast.error(title, {
-          description,
-          duration: 10000, // 延长显示时间让用户看清
-        });
-
-        console.error("Install skill failed:", {
-          directory,
-          error,
-          message: errorMessage,
-        });
-      }
-    };
-
-    const handleUninstall = async (directory: string) => {
-      try {
-        await skillsApi.uninstall(directory, selectedApp);
-        toast.success(t("skills.uninstallSuccess", { name: directory }), {
-          closeButton: true,
-        });
-        await loadSkills();
-      } catch (error) {
-        const errorMessage =
-          error instanceof Error ? error.message : String(error);
-
-        // 使用错误解析器格式化错误，传入 "skills.uninstallFailed"
-        const { title, description } = formatSkillError(
-          errorMessage,
-          t,
-          "skills.uninstallFailed",
-        );
-
         toast.error(title, {
           description,
           duration: 10000,
         });
+        console.error("Install skill failed:", error);
+      }
+    };
 
-        console.error("Uninstall skill failed:", {
-          directory,
-          error,
-          message: errorMessage,
+    const handleUninstall = async (_directory: string) => {
+      // 在发现面板中，不支持卸载，需要在主面板中操作
+      toast.info(t("skills.uninstallInMainPanel"));
+    };
+
+    const handleAddRepo = async (repo: SkillRepo) => {
+      try {
+        await addRepoMutation.mutateAsync(repo);
+        toast.success(
+          t("skills.repo.addSuccess", {
+            owner: repo.owner,
+            name: repo.name,
+          }),
+          { closeButton: true },
+        );
+      } catch (error) {
+        toast.error(t("common.error"), {
+          description: String(error),
         });
       }
     };
 
-    const handleAddRepo = async (repo: SkillRepo) => {
-      await skillsApi.addRepo(repo);
-
-      let repoSkillCount = 0;
-      await Promise.all([
-        loadRepos(),
-        loadSkills((data) => {
-          repoSkillCount = data.filter(
-            (skill) =>
-              skill.repoOwner === repo.owner &&
-              skill.repoName === repo.name &&
-              (skill.repoBranch || "main") === (repo.branch || "main"),
-          ).length;
-        }),
-      ]);
-
-      toast.success(
-        t("skills.repo.addSuccess", {
-          owner: repo.owner,
-          name: repo.name,
-          count: repoSkillCount,
-        }),
-        { closeButton: true },
-      );
-    };
-
     const handleRemoveRepo = async (owner: string, name: string) => {
-      await skillsApi.removeRepo(owner, name);
-      toast.success(t("skills.repo.removeSuccess", { owner, name }), {
-        closeButton: true,
-      });
-      await Promise.all([loadRepos(), loadSkills()]);
+      try {
+        await removeRepoMutation.mutateAsync({ owner, name });
+        toast.success(t("skills.repo.removeSuccess", { owner, name }), {
+          closeButton: true,
+        });
+      } catch (error) {
+        toast.error(t("common.error"), {
+          description: String(error),
+        });
+      }
     };
 
     // 过滤技能列表
@@ -222,6 +194,21 @@ export const SkillsPage = forwardRef<SkillsPageHandle, SkillsPageProps>(
 
     return (
       <div className="mx-auto max-w-[56rem] px-6 flex flex-col h-[calc(100vh-8rem)] overflow-hidden bg-background/50">
+        {/* 返回按钮 */}
+        {onClose && (
+          <div className="flex-shrink-0 py-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onClose}
+              className="gap-2"
+            >
+              <ArrowLeft size={16} />
+              {t("common.back")}
+            </Button>
+          </div>
+        )}
+
         {/* 技能网格（可滚动详情区域） */}
         <div className="flex-1 overflow-y-auto overflow-x-hidden animate-fade-in">
           <div className="py-4">

src/components/skills/UnifiedSkillsPanel.tsx

@@ -0,0 +1,436 @@
+import React, { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Sparkles, Trash2, ExternalLink, Download } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Switch } from "@/components/ui/switch";
+import {
+  useInstalledSkills,
+  useToggleSkillApp,
+  useUninstallSkill,
+  useScanUnmanagedSkills,
+  useImportSkillsFromApps,
+  type InstalledSkill,
+  type AppType,
+} from "@/hooks/useSkills";
+import { ConfirmDialog } from "@/components/ConfirmDialog";
+import { settingsApi } from "@/lib/api";
+import { toast } from "sonner";
+
+interface UnifiedSkillsPanelProps {
+  onOpenDiscovery: () => void;
+}
+
+/**
+ * 统一 Skills 管理面板
+ * v3.10.0 新架构：所有 Skills 统一管理，每个 Skill 通过开关控制应用到哪些客户端
+ */
+export interface UnifiedSkillsPanelHandle {
+  openDiscovery: () => void;
+}
+
+const UnifiedSkillsPanel = React.forwardRef<
+  UnifiedSkillsPanelHandle,
+  UnifiedSkillsPanelProps
+>(({ onOpenDiscovery }, ref) => {
+  const { t } = useTranslation();
+  const [confirmDialog, setConfirmDialog] = useState<{
+    isOpen: boolean;
+    title: string;
+    message: string;
+    onConfirm: () => void;
+  } | null>(null);
+  const [importDialogOpen, setImportDialogOpen] = useState(false);
+
+  // Queries and Mutations
+  const { data: skills, isLoading } = useInstalledSkills();
+  const toggleAppMutation = useToggleSkillApp();
+  const uninstallMutation = useUninstallSkill();
+  const { data: unmanagedSkills, refetch: scanUnmanaged } =
+    useScanUnmanagedSkills();
+  const importMutation = useImportSkillsFromApps();
+
+  // Count enabled skills per app
+  const enabledCounts = useMemo(() => {
+    const counts = { claude: 0, codex: 0, gemini: 0 };
+    if (!skills) return counts;
+    skills.forEach((skill) => {
+      if (skill.apps.claude) counts.claude++;
+      if (skill.apps.codex) counts.codex++;
+      if (skill.apps.gemini) counts.gemini++;
+    });
+    return counts;
+  }, [skills]);
+
+  const handleToggleApp = async (
+    id: string,
+    app: AppType,
+    enabled: boolean,
+  ) => {
+    try {
+      await toggleAppMutation.mutateAsync({ id, app, enabled });
+    } catch (error) {
+      toast.error(t("common.error"), {
+        description: String(error),
+      });
+    }
+  };
+
+  const handleUninstall = (skill: InstalledSkill) => {
+    setConfirmDialog({
+      isOpen: true,
+      title: t("skills.uninstall"),
+      message: t("skills.uninstallConfirm", { name: skill.name }),
+      onConfirm: async () => {
+        try {
+          await uninstallMutation.mutateAsync(skill.id);
+          setConfirmDialog(null);
+          toast.success(t("skills.uninstallSuccess", { name: skill.name }), {
+            closeButton: true,
+          });
+        } catch (error) {
+          toast.error(t("common.error"), {
+            description: String(error),
+          });
+        }
+      },
+    });
+  };
+
+  const handleOpenImport = async () => {
+    try {
+      await scanUnmanaged();
+      setImportDialogOpen(true);
+    } catch (error) {
+      toast.error(t("common.error"), {
+        description: String(error),
+      });
+    }
+  };
+
+  const handleImport = async (directories: string[]) => {
+    try {
+      const imported = await importMutation.mutateAsync(directories);
+      setImportDialogOpen(false);
+      toast.success(
+        t("skills.importSuccess", { count: imported.length }),
+        { closeButton: true },
+      );
+    } catch (error) {
+      toast.error(t("common.error"), {
+        description: String(error),
+      });
+    }
+  };
+
+  React.useImperativeHandle(ref, () => ({
+    openDiscovery: onOpenDiscovery,
+  }));
+
+  return (
+    <div className="mx-auto max-w-[56rem] px-6 flex flex-col h-[calc(100vh-8rem)] overflow-hidden">
+      {/* Info Section */}
+      <div className="flex-shrink-0 py-4 glass rounded-xl border border-white/10 mb-4 px-6">
+        <div className="text-sm text-muted-foreground">
+          {t("skills.installed", { count: skills?.length || 0 })} ·{" "}
+          {t("skills.apps.claude")}: {enabledCounts.claude} ·{" "}
+          {t("skills.apps.codex")}: {enabledCounts.codex} ·{" "}
+          {t("skills.apps.gemini")}: {enabledCounts.gemini}
+        </div>
+      </div>
+
+      {/* Content - Scrollable */}
+      <div className="flex-1 overflow-y-auto overflow-x-hidden pb-24">
+        {isLoading ? (
+          <div className="text-center py-12 text-muted-foreground">
+            {t("skills.loading")}
+          </div>
+        ) : !skills || skills.length === 0 ? (
+          <div className="text-center py-12">
+            <div className="w-16 h-16 mx-auto mb-4 bg-muted rounded-full flex items-center justify-center">
+              <Sparkles size={24} className="text-muted-foreground" />
+            </div>
+            <h3 className="text-lg font-medium text-foreground mb-2">
+              {t("skills.noInstalled")}
+            </h3>
+            <p className="text-muted-foreground text-sm mb-4">
+              {t("skills.noInstalledDescription")}
+            </p>
+            <div className="flex gap-3 justify-center">
+              <Button onClick={onOpenDiscovery} variant="default">
+                {t("skills.discover")}
+              </Button>
+              <Button onClick={handleOpenImport} variant="outline">
+                <Download size={16} className="mr-2" />
+                {t("skills.import")}
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {skills.map((skill) => (
+              <InstalledSkillListItem
+                key={skill.id}
+                skill={skill}
+                onToggleApp={handleToggleApp}
+                onUninstall={() => handleUninstall(skill)}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Confirm Dialog */}
+      {confirmDialog && (
+        <ConfirmDialog
+          isOpen={confirmDialog.isOpen}
+          title={confirmDialog.title}
+          message={confirmDialog.message}
+          onConfirm={confirmDialog.onConfirm}
+          onCancel={() => setConfirmDialog(null)}
+        />
+      )}
+
+      {/* Import Dialog */}
+      {importDialogOpen && unmanagedSkills && (
+        <ImportSkillsDialog
+          skills={unmanagedSkills}
+          onImport={handleImport}
+          onClose={() => setImportDialogOpen(false)}
+        />
+      )}
+    </div>
+  );
+});
+
+UnifiedSkillsPanel.displayName = "UnifiedSkillsPanel";
+
+/**
+ * 已安装 Skill 列表项组件
+ */
+interface InstalledSkillListItemProps {
+  skill: InstalledSkill;
+  onToggleApp: (id: string, app: AppType, enabled: boolean) => void;
+  onUninstall: () => void;
+}
+
+const InstalledSkillListItem: React.FC<InstalledSkillListItemProps> = ({
+  skill,
+  onToggleApp,
+  onUninstall,
+}) => {
+  const { t } = useTranslation();
+
+  const openDocs = async () => {
+    if (!skill.readmeUrl) return;
+    try {
+      await settingsApi.openExternal(skill.readmeUrl);
+    } catch {
+      // ignore
+    }
+  };
+
+  // 生成来源标签
+  const sourceLabel = useMemo(() => {
+    if (skill.repoOwner && skill.repoName) {
+      return `${skill.repoOwner}/${skill.repoName}`;
+    }
+    return t("skills.local");
+  }, [skill.repoOwner, skill.repoName, t]);
+
+  return (
+    <div className="group relative flex items-center gap-4 p-4 rounded-xl border border-border-default bg-muted/50 hover:bg-muted hover:border-border-default/80 hover:shadow-sm transition-all duration-300">
+      {/* 左侧：Skill 信息 */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2 mb-1">
+          <h3 className="font-medium text-foreground">{skill.name}</h3>
+          {skill.readmeUrl && (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              onClick={openDocs}
+              className="h-6 px-2"
+            >
+              <ExternalLink size={14} />
+            </Button>
+          )}
+        </div>
+        {skill.description && (
+          <p className="text-sm text-muted-foreground line-clamp-2">
+            {skill.description}
+          </p>
+        )}
+        <p className="text-xs text-muted-foreground/70 mt-1">{sourceLabel}</p>
+      </div>
+
+      {/* 中间：应用开关 */}
+      <div className="flex flex-col gap-2 flex-shrink-0 min-w-[120px]">
+        <div className="flex items-center justify-between gap-3">
+          <label
+            htmlFor={`${skill.id}-claude`}
+            className="text-sm text-foreground/80 cursor-pointer"
+          >
+            {t("skills.apps.claude")}
+          </label>
+          <Switch
+            id={`${skill.id}-claude`}
+            checked={skill.apps.claude}
+            onCheckedChange={(checked: boolean) =>
+              onToggleApp(skill.id, "claude", checked)
+            }
+          />
+        </div>
+
+        <div className="flex items-center justify-between gap-3">
+          <label
+            htmlFor={`${skill.id}-codex`}
+            className="text-sm text-foreground/80 cursor-pointer"
+          >
+            {t("skills.apps.codex")}
+          </label>
+          <Switch
+            id={`${skill.id}-codex`}
+            checked={skill.apps.codex}
+            onCheckedChange={(checked: boolean) =>
+              onToggleApp(skill.id, "codex", checked)
+            }
+          />
+        </div>
+
+        <div className="flex items-center justify-between gap-3">
+          <label
+            htmlFor={`${skill.id}-gemini`}
+            className="text-sm text-foreground/80 cursor-pointer"
+          >
+            {t("skills.apps.gemini")}
+          </label>
+          <Switch
+            id={`${skill.id}-gemini`}
+            checked={skill.apps.gemini}
+            onCheckedChange={(checked: boolean) =>
+              onToggleApp(skill.id, "gemini", checked)
+            }
+          />
+        </div>
+      </div>
+
+      {/* 右侧：删除按钮 */}
+      <div className="flex items-center gap-2 flex-shrink-0">
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onClick={onUninstall}
+          className="hover:text-red-500 hover:bg-red-100 dark:hover:text-red-400 dark:hover:bg-red-500/10"
+          title={t("skills.uninstall")}
+        >
+          <Trash2 size={16} />
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * 导入 Skills 对话框
+ */
+interface ImportSkillsDialogProps {
+  skills: Array<{
+    directory: string;
+    name: string;
+    description?: string;
+    foundIn: string[];
+  }>;
+  onImport: (directories: string[]) => void;
+  onClose: () => void;
+}
+
+const ImportSkillsDialog: React.FC<ImportSkillsDialogProps> = ({
+  skills,
+  onImport,
+  onClose,
+}) => {
+  const { t } = useTranslation();
+  const [selected, setSelected] = useState<Set<string>>(
+    new Set(skills.map((s) => s.directory)),
+  );
+
+  const toggleSelect = (directory: string) => {
+    const newSelected = new Set(selected);
+    if (newSelected.has(directory)) {
+      newSelected.delete(directory);
+    } else {
+      newSelected.add(directory);
+    }
+    setSelected(newSelected);
+  };
+
+  const handleImport = () => {
+    onImport(Array.from(selected));
+  };
+
+  if (skills.length === 0) {
+    return (
+      <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+        <div className="bg-background rounded-xl p-6 max-w-md w-full mx-4 shadow-xl">
+          <h2 className="text-lg font-semibold mb-4">{t("skills.import")}</h2>
+          <p className="text-muted-foreground mb-6">
+            {t("skills.noUnmanagedFound")}
+          </p>
+          <div className="flex justify-end">
+            <Button onClick={onClose}>{t("common.close")}</Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+      <div className="bg-background rounded-xl p-6 max-w-lg w-full mx-4 shadow-xl max-h-[80vh] flex flex-col">
+        <h2 className="text-lg font-semibold mb-2">{t("skills.import")}</h2>
+        <p className="text-sm text-muted-foreground mb-4">
+          {t("skills.importDescription")}
+        </p>
+
+        <div className="flex-1 overflow-y-auto space-y-2 mb-4">
+          {skills.map((skill) => (
+            <label
+              key={skill.directory}
+              className="flex items-start gap-3 p-3 rounded-lg border hover:bg-muted cursor-pointer"
+            >
+              <input
+                type="checkbox"
+                checked={selected.has(skill.directory)}
+                onChange={() => toggleSelect(skill.directory)}
+                className="mt-1"
+              />
+              <div className="flex-1 min-w-0">
+                <div className="font-medium">{skill.name}</div>
+                {skill.description && (
+                  <div className="text-sm text-muted-foreground line-clamp-1">
+                    {skill.description}
+                  </div>
+                )}
+                <div className="text-xs text-muted-foreground/70 mt-1">
+                  {t("skills.foundIn")}: {skill.foundIn.join(", ")}
+                </div>
+              </div>
+            </label>
+          ))}
+        </div>
+
+        <div className="flex justify-end gap-3">
+          <Button variant="outline" onClick={onClose}>
+            {t("common.cancel")}
+          </Button>
+          <Button onClick={handleImport} disabled={selected.size === 0}>
+            {t("skills.importSelected", { count: selected.size })}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UnifiedSkillsPanel;

src/hooks/useSkills.ts

@@ -0,0 +1,151 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  skillsApi,
+  type AppType,
+  type DiscoverableSkill,
+  type InstalledSkill,
+} from "@/lib/api/skills";
+
+/**
+ * 查询所有已安装的 Skills
+ */
+export function useInstalledSkills() {
+  return useQuery({
+    queryKey: ["skills", "installed"],
+    queryFn: () => skillsApi.getInstalled(),
+  });
+}
+
+/**
+ * 发现可安装的 Skills（从仓库获取）
+ */
+export function useDiscoverableSkills() {
+  return useQuery({
+    queryKey: ["skills", "discoverable"],
+    queryFn: () => skillsApi.discoverAvailable(),
+    staleTime: 5 * 60 * 1000, // 5 分钟内不重新获取
+  });
+}
+
+/**
+ * 安装 Skill
+ */
+export function useInstallSkill() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      skill,
+      currentApp,
+    }: {
+      skill: DiscoverableSkill;
+      currentApp: AppType;
+    }) => skillsApi.installUnified(skill, currentApp),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["skills", "installed"] });
+      queryClient.invalidateQueries({ queryKey: ["skills", "discoverable"] });
+    },
+  });
+}
+
+/**
+ * 卸载 Skill
+ */
+export function useUninstallSkill() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => skillsApi.uninstallUnified(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["skills", "installed"] });
+      queryClient.invalidateQueries({ queryKey: ["skills", "discoverable"] });
+    },
+  });
+}
+
+/**
+ * 切换 Skill 在特定应用的启用状态
+ */
+export function useToggleSkillApp() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      id,
+      app,
+      enabled,
+    }: {
+      id: string;
+      app: AppType;
+      enabled: boolean;
+    }) => skillsApi.toggleApp(id, app, enabled),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["skills", "installed"] });
+    },
+  });
+}
+
+/**
+ * 扫描未管理的 Skills
+ */
+export function useScanUnmanagedSkills() {
+  return useQuery({
+    queryKey: ["skills", "unmanaged"],
+    queryFn: () => skillsApi.scanUnmanaged(),
+    enabled: false, // 手动触发
+  });
+}
+
+/**
+ * 从应用目录导入 Skills
+ */
+export function useImportSkillsFromApps() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (directories: string[]) => skillsApi.importFromApps(directories),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["skills", "installed"] });
+      queryClient.invalidateQueries({ queryKey: ["skills", "unmanaged"] });
+    },
+  });
+}
+
+/**
+ * 获取仓库列表
+ */
+export function useSkillRepos() {
+  return useQuery({
+    queryKey: ["skills", "repos"],
+    queryFn: () => skillsApi.getRepos(),
+  });
+}
+
+/**
+ * 添加仓库
+ */
+export function useAddSkillRepo() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: skillsApi.addRepo,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["skills", "repos"] });
+      queryClient.invalidateQueries({ queryKey: ["skills", "discoverable"] });
+    },
+  });
+}
+
+/**
+ * 删除仓库
+ */
+export function useRemoveSkillRepo() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ owner, name }: { owner: string; name: string }) =>
+      skillsApi.removeRepo(owner, name),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["skills", "repos"] });
+      queryClient.invalidateQueries({ queryKey: ["skills", "discoverable"] });
+    },
+  });
+}
+
+// ========== 辅助类型 ==========
+
+export type { InstalledSkill, DiscoverableSkill, AppType };

src/i18n/locales/en.json

@@ -870,7 +870,25 @@
       "installed": "Installed",
       "uninstalled": "Not installed"
     },
-    "noResults": "No matching skills found"
+    "noResults": "No matching skills found",
+    "noInstalled": "No skills installed",
+    "noInstalledDescription": "Discover and install skills from repositories, or import existing skills",
+    "discover": "Discover Skills",
+    "import": "Import Existing",
+    "importDescription": "Select skills to import into CC Switch unified management",
+    "importSuccess": "Successfully imported {{count}} skills",
+    "importSelected": "Import Selected ({{count}})",
+    "noUnmanagedFound": "No skills to import found. All skills are already managed by CC Switch.",
+    "foundIn": "Found in",
+    "local": "Local",
+    "uninstallConfirm": "Are you sure you want to uninstall \"{{name}}\"? This will remove the skill from all apps.",
+    "uninstallInMainPanel": "Please uninstall skills from the main panel",
+    "notFound": "Skill not found",
+    "apps": {
+      "claude": "Claude",
+      "codex": "Codex",
+      "gemini": "Gemini"
+    }
   },
   "deeplink": {
     "confirmImport": "Confirm Import Provider",
@@ -958,7 +976,10 @@
     "clickToSelect": "Click to select icon"
   },
   "migration": {
-    "success": "Configuration migrated successfully"
+    "success": "Configuration migrated successfully",
+    "skillsSuccess": "Automatically imported {{count}} skill(s) into unified management",
+    "skillsFailed": "Failed to auto import skills",
+    "skillsFailedDescription": "Open the Skills page and click \"Import Existing\" to import manually (or restart and try again)."
   },
   "agents": {
     "title": "Agents"

src/i18n/locales/ja.json

@@ -870,7 +870,25 @@
       "installed": "インストール済み",
       "uninstalled": "未インストール"
     },
-    "noResults": "一致するスキルが見つかりませんでした"
+    "noResults": "一致するスキルが見つかりませんでした",
+    "noInstalled": "インストールされたスキルがありません",
+    "noInstalledDescription": "リポジトリからスキルを発見してインストールするか、既存のスキルをインポートしてください",
+    "discover": "スキルを発見",
+    "import": "既存をインポート",
+    "importDescription": "CC Switch 統合管理にインポートするスキルを選択してください",
+    "importSuccess": "{{count}} 件のスキルをインポートしました",
+    "importSelected": "選択をインポート ({{count}})",
+    "noUnmanagedFound": "インポートするスキルが見つかりませんでした。すべてのスキルは CC Switch で管理されています。",
+    "foundIn": "発見場所",
+    "local": "ローカル",
+    "uninstallConfirm": "「{{name}}」をアンインストールしますか？すべてのアプリからこのスキルが削除されます。",
+    "uninstallInMainPanel": "メインパネルからスキルをアンインストールしてください",
+    "notFound": "スキルが見つかりません",
+    "apps": {
+      "claude": "Claude",
+      "codex": "Codex",
+      "gemini": "Gemini"
+    }
   },
   "deeplink": {
     "confirmImport": "プロバイダーのインポートを確認",
@@ -958,7 +976,10 @@
     "clickToSelect": "クリックでアイコンを選択"
   },
   "migration": {
-    "success": "設定の移行が完了しました"
+    "success": "設定の移行が完了しました",
+    "skillsSuccess": "スキルを {{count}} 件、自動的に統合管理へインポートしました",
+    "skillsFailed": "スキルの自動インポートに失敗しました",
+    "skillsFailedDescription": "Skills 画面で「既存をインポート」をクリックして手動でインポートしてください（または再起動して再試行）。"
   },
   "agents": {
     "title": "エージェント"

src/i18n/locales/zh.json

@@ -870,7 +870,25 @@
       "installed": "已安装",
       "uninstalled": "未安装"
     },
-    "noResults": "未找到匹配的技能"
+    "noResults": "未找到匹配的技能",
+    "noInstalled": "暂无已安装的技能",
+    "noInstalledDescription": "从仓库发现并安装技能，或导入已有的技能",
+    "discover": "发现技能",
+    "import": "导入已有",
+    "importDescription": "选择要导入到 CC Switch 统一管理的技能",
+    "importSuccess": "成功导入 {{count}} 个技能",
+    "importSelected": "导入已选 ({{count}})",
+    "noUnmanagedFound": "未发现需要导入的技能。所有技能已在 CC Switch 统一管理中。",
+    "foundIn": "发现于",
+    "local": "本地",
+    "uninstallConfirm": "确定要卸载技能 \"{{name}}\" 吗？这将从所有应用中移除该技能。",
+    "uninstallInMainPanel": "请在主面板中卸载技能",
+    "notFound": "未找到技能",
+    "apps": {
+      "claude": "Claude",
+      "codex": "Codex",
+      "gemini": "Gemini"
+    }
   },
   "deeplink": {
     "confirmImport": "确认导入供应商配置",
@@ -958,7 +976,10 @@
     "clickToSelect": "点击选择图标"
   },
   "migration": {
-    "success": "配置迁移成功"
+    "success": "配置迁移成功",
+    "skillsSuccess": "已自动导入 {{count}} 个技能到统一管理",
+    "skillsFailed": "自动导入技能失败",
+    "skillsFailedDescription": "请打开 Skills 页面点击“导入已有”手动导入（或重启后再试）。"
   },
   "agents": {
     "title": "智能体"

src/lib/api/skills.ts

@@ -1,5 +1,51 @@
 import { invoke } from "@tauri-apps/api/core";
 
+// ========== 类型定义 ==========
+
+export type AppType = "claude" | "codex" | "gemini";
+
+/** Skill 应用启用状态 */
+export interface SkillApps {
+  claude: boolean;
+  codex: boolean;
+  gemini: boolean;
+}
+
+/** 已安装的 Skill（v3.10.0+ 统一结构） */
+export interface InstalledSkill {
+  id: string;
+  name: string;
+  description?: string;
+  directory: string;
+  repoOwner?: string;
+  repoName?: string;
+  repoBranch?: string;
+  readmeUrl?: string;
+  apps: SkillApps;
+  installedAt: number;
+}
+
+/** 可发现的 Skill（来自仓库） */
+export interface DiscoverableSkill {
+  key: string;
+  name: string;
+  description: string;
+  directory: string;
+  readmeUrl?: string;
+  repoOwner: string;
+  repoName: string;
+  repoBranch: string;
+}
+
+/** 未管理的 Skill（用于导入） */
+export interface UnmanagedSkill {
+  directory: string;
+  name: string;
+  description?: string;
+  foundIn: string[];
+}
+
+/** 技能对象（兼容旧 API） */
 export interface Skill {
   key: string;
   name: string;
@@ -12,6 +58,7 @@ export interface Skill {
   repoBranch?: string;
 }
 
+/** 仓库配置 */
 export interface SkillRepo {
   owner: string;
   name: string;
@@ -19,9 +66,56 @@ export interface SkillRepo {
   enabled: boolean;
 }
 
-export type AppType = "claude" | "codex" | "gemini";
+// ========== API ==========
 
 export const skillsApi = {
+  // ========== 统一管理 API (v3.10.0+) ==========
+
+  /** 获取所有已安装的 Skills */
+  async getInstalled(): Promise<InstalledSkill[]> {
+    return await invoke("get_installed_skills");
+  },
+
+  /** 安装 Skill（统一安装） */
+  async installUnified(
+    skill: DiscoverableSkill,
+    currentApp: AppType,
+  ): Promise<InstalledSkill> {
+    return await invoke("install_skill_unified", { skill, currentApp });
+  },
+
+  /** 卸载 Skill（统一卸载） */
+  async uninstallUnified(id: string): Promise<boolean> {
+    return await invoke("uninstall_skill_unified", { id });
+  },
+
+  /** 切换 Skill 的应用启用状态 */
+  async toggleApp(
+    id: string,
+    app: AppType,
+    enabled: boolean,
+  ): Promise<boolean> {
+    return await invoke("toggle_skill_app", { id, app, enabled });
+  },
+
+  /** 扫描未管理的 Skills */
+  async scanUnmanaged(): Promise<UnmanagedSkill[]> {
+    return await invoke("scan_unmanaged_skills");
+  },
+
+  /** 从应用目录导入 Skills */
+  async importFromApps(directories: string[]): Promise<InstalledSkill[]> {
+    return await invoke("import_skills_from_apps", { directories });
+  },
+
+  /** 发现可安装的 Skills（从仓库获取） */
+  async discoverAvailable(): Promise<DiscoverableSkill[]> {
+    return await invoke("discover_available_skills");
+  },
+
+  // ========== 兼容旧 API ==========
+
+  /** 获取技能列表（兼容旧 API） */
   async getAll(app: AppType = "claude"): Promise<Skill[]> {
     if (app === "claude") {
       return await invoke("get_skills");
@@ -29,6 +123,7 @@ export const skillsApi = {
     return await invoke("get_skills_for_app", { app });
   },
 
+  /** 安装技能（兼容旧 API） */
   async install(directory: string, app: AppType = "claude"): Promise<boolean> {
     if (app === "claude") {
       return await invoke("install_skill", { directory });
@@ -36,6 +131,7 @@ export const skillsApi = {
     return await invoke("install_skill_for_app", { app, directory });
   },
 
+  /** 卸载技能（兼容旧 API） */
   async uninstall(
     directory: string,
     app: AppType = "claude",
@@ -46,14 +142,19 @@ export const skillsApi = {
     return await invoke("uninstall_skill_for_app", { app, directory });
   },
 
+  // ========== 仓库管理 ==========
+
+  /** 获取仓库列表 */
   async getRepos(): Promise<SkillRepo[]> {
     return await invoke("get_skill_repos");
   },
 
+  /** 添加仓库 */
   async addRepo(repo: SkillRepo): Promise<boolean> {
     return await invoke("add_skill_repo", { repo });
   },
 
+  /** 删除仓库 */
   async removeRepo(owner: string, name: string): Promise<boolean> {
     return await invoke("remove_skill_repo", { owner, name });
   },