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/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;