feat: add Skill Hub feature for managing community skills

- Implemented Skill Hub page with tabs for remote, local, and installed skills.
- Added localization support for Chinese in skill-hub.json.
- Created API routes for fetching remote skills, listing local skills, and managing installed skills.
- Developed functionality for installing and uninstalling skills from both remote and local sources.
- Introduced caching mechanism for remote skills and handling updates for installed skills.

ccw/frontend/src/pages/SkillHubPage.tsx

@@ -0,0 +1,393 @@
+// ========================================
+// SkillHubPage Component
+// ========================================
+// Shared skill repository management page
+
+import { useState, useMemo } from 'react';
+import { useIntl } from 'react-intl';
+import {
+  Globe,
+  Folder,
+  Search,
+  Filter,
+  Download,
+  RefreshCw,
+  Loader2,
+} from 'lucide-react';
+import { toast } from 'sonner';
+import { Card } from '@/components/ui/Card';
+import { Input } from '@/components/ui/Input';
+import { Button } from '@/components/ui/Button';
+import { Badge } from '@/components/ui/Badge';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/Tabs';
+import { StatCard } from '@/components/shared';
+import { SkillHubCard } from '@/components/shared/SkillHubCard';
+import {
+  useSkillHub,
+  useInstallSkill,
+  useUninstallSkill,
+  type RemoteSkill,
+  type LocalSkill,
+  type InstalledSkill,
+  type CliType,
+  type SkillSource,
+} from '@/hooks/useSkillHub';
+
+// ========== Types ==========
+
+type TabValue = 'remote' | 'local' | 'installed';
+
+// ========== Stats Cards ==========
+
+function StatsCards({
+  remoteTotal,
+  localTotal,
+  installedTotal,
+  updatesAvailable,
+  isLoading,
+}: {
+  remoteTotal: number;
+  localTotal: number;
+  installedTotal: number;
+  updatesAvailable: number;
+  isLoading: boolean;
+}) {
+  const { formatMessage } = useIntl();
+
+  if (isLoading) {
+    return (
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        {[1, 2, 3, 4].map((i) => (
+          <div key={i} className="h-20 bg-muted animate-pulse rounded-lg" />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+      <StatCard
+        title={formatMessage({ id: 'skillHub.stats.remote' })}
+        value={remoteTotal}
+        icon={Globe}
+        description={formatMessage({ id: 'skillHub.stats.remoteDesc' })}
+      />
+      <StatCard
+        title={formatMessage({ id: 'skillHub.stats.local' })}
+        value={localTotal}
+        icon={Folder}
+        description={formatMessage({ id: 'skillHub.stats.localDesc' })}
+      />
+      <StatCard
+        title={formatMessage({ id: 'skillHub.stats.installed' })}
+        value={installedTotal}
+        icon={Download}
+        description={formatMessage({ id: 'skillHub.stats.installedDesc' })}
+      />
+      <StatCard
+        title={formatMessage({ id: 'skillHub.stats.updates' })}
+        value={updatesAvailable}
+        icon={RefreshCw}
+        description={formatMessage({ id: 'skillHub.stats.updatesDesc' })}
+        variant={updatesAvailable > 0 ? 'warning' : 'default'}
+      />
+    </div>
+  );
+}
+
+// ========== Empty State ==========
+
+function EmptyState({ type }: { type: TabValue }) {
+  const { formatMessage } = useIntl();
+
+  const messages: Record<TabValue, { icon: React.ReactNode; title: string; description: string }> = {
+    remote: {
+      icon: <Globe className="w-12 h-12 text-muted-foreground" />,
+      title: formatMessage({ id: 'skillHub.empty.remote.title' }),
+      description: formatMessage({ id: 'skillHub.empty.remote.description' }),
+    },
+    local: {
+      icon: <Folder className="w-12 h-12 text-muted-foreground" />,
+      title: formatMessage({ id: 'skillHub.empty.local.title' }),
+      description: formatMessage({ id: 'skillHub.empty.local.description' }),
+    },
+    installed: {
+      icon: <Download className="w-12 h-12 text-muted-foreground" />,
+      title: formatMessage({ id: 'skillHub.empty.installed.title' }),
+      description: formatMessage({ id: 'skillHub.empty.installed.description' }),
+    },
+  };
+
+  const { icon, title, description } = messages[type];
+
+  return (
+    <div className="flex flex-col items-center justify-center py-12 text-center">
+      {icon}
+      <h3 className="mt-4 text-lg font-medium">{title}</h3>
+      <p className="mt-2 text-sm text-muted-foreground max-w-sm">{description}</p>
+    </div>
+  );
+}
+
+// ========== Main Component ==========
+
+export function SkillHubPage() {
+  const { formatMessage } = useIntl();
+  const [activeTab, setActiveTab] = useState<TabValue>('remote');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [categoryFilter, setCategoryFilter] = useState<string | null>(null);
+
+  // Fetch data
+  const {
+    remote,
+    local,
+    installed,
+    stats,
+    isLoading,
+    isError,
+    isFetching,
+    refetchAll,
+  } = useSkillHub();
+
+  // Mutations
+  const installMutation = useInstallSkill();
+  const uninstallMutation = useUninstallSkill();
+
+  // Build installed map for quick lookup
+  const installedMap = useMemo(() => {
+    const map = new Map<string, InstalledSkill>();
+    installed.data?.skills?.forEach((skill: InstalledSkill) => {
+      map.set(skill.originalId, skill);
+    });
+    return map;
+  }, [installed.data]);
+
+  // Extract unique categories
+  const categories = useMemo(() => {
+    const cats = new Set<string>();
+    remote.data?.skills?.forEach((skill: RemoteSkill) => {
+      if (skill.category) cats.add(skill.category);
+    });
+    local.data?.skills?.forEach((skill: LocalSkill) => {
+      if (skill.category) cats.add(skill.category);
+    });
+    return Array.from(cats).sort();
+  }, [remote.data, local.data]);
+
+  // Filter skills based on search and category
+  const filterSkills = <T extends RemoteSkill | LocalSkill | InstalledSkill>(skills: T[]): T[] => {
+    return skills.filter((skill) => {
+      const matchesSearch = !searchQuery ||
+        skill.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        ('description' in skill && skill.description?.toLowerCase().includes(searchQuery.toLowerCase())) ||
+        ('tags' in skill && skill.tags?.some((tag: string) => tag.toLowerCase().includes(searchQuery.toLowerCase())));
+
+      const matchesCategory = !categoryFilter || ('category' in skill && skill.category === categoryFilter);
+
+      return matchesSearch && matchesCategory;
+    });
+  };
+
+  // Get filtered skills for current tab
+  const filteredSkills = useMemo(() => {
+    if (activeTab === 'remote') {
+      return filterSkills(remote.data?.skills || []);
+    }
+    if (activeTab === 'local') {
+      return filterSkills(local.data?.skills || []);
+    }
+    // For installed tab, show the installed skills
+    return installed.data?.skills || [];
+  }, [activeTab, remote.data, local.data, installed.data, searchQuery, categoryFilter]);
+
+  // Handlers
+  const handleInstall = async (skill: RemoteSkill | LocalSkill, cliType: CliType) => {
+    const source: SkillSource = 'downloadUrl' in skill ? 'remote' : 'local';
+    await installMutation.mutateAsync({
+      skillId: skill.id,
+      cliType,
+      source,
+      downloadUrl: 'downloadUrl' in skill ? skill.downloadUrl : undefined,
+    });
+  };
+
+  const handleUninstall = async (skill: RemoteSkill | LocalSkill, cliType: CliType) => {
+    const installedInfo = installedMap.get(skill.id);
+    if (installedInfo) {
+      await uninstallMutation.mutateAsync({
+        skillId: installedInfo.id,
+        cliType,
+      });
+    }
+  };
+
+  const handleViewDetails = () => {
+    toast.info(formatMessage({ id: 'skillHub.details.comingSoon' }));
+  };
+
+  const handleRefresh = () => {
+    refetchAll();
+    toast.success(formatMessage({ id: 'skillHub.refresh.success' }));
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <div className="px-6 py-4 border-b border-border">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-2xl font-semibold text-foreground">
+              {formatMessage({ id: 'skillHub.title' })}
+            </h1>
+            <p className="text-sm text-muted-foreground mt-1">
+              {formatMessage({ id: 'skillHub.description' })}
+            </p>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleRefresh}
+            disabled={isFetching}
+          >
+            {isFetching ? (
+              <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+            ) : (
+              <RefreshCw className="w-4 h-4 mr-2" />
+            )}
+            {formatMessage({ id: 'skillHub.actions.refresh' })}
+          </Button>
+        </div>
+      </div>
+
+      {/* Stats */}
+      <div className="px-6 py-4">
+        <StatsCards
+          remoteTotal={stats.data?.remoteTotal || 0}
+          localTotal={stats.data?.localTotal || 0}
+          installedTotal={stats.data?.installedTotal || 0}
+          updatesAvailable={stats.data?.updatesAvailable || 0}
+          isLoading={isLoading}
+        />
+      </div>
+
+      {/* Error state */}
+      {isError && (
+        <div className="px-6 pb-4">
+          <Card className="flex items-center gap-2 p-4 text-destructive bg-destructive/10">
+            <RefreshCw className="w-5 h-5" />
+            <span>{formatMessage({ id: 'skillHub.error.loadFailed' })}</span>
+          </Card>
+        </div>
+      )}
+
+      {/* Tabs and filters */}
+      <div className="px-6 pb-4">
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+          <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as TabValue)}>
+            <TabsList>
+              <TabsTrigger value="remote" className="gap-1.5">
+                <Globe className="w-4 h-4" />
+                {formatMessage({ id: 'skillHub.tabs.remote' })}
+                {remote.data?.total ? (
+                  <Badge variant="secondary" className="ml-1">
+                    {remote.data.total}
+                  </Badge>
+                ) : null}
+              </TabsTrigger>
+              <TabsTrigger value="local" className="gap-1.5">
+                <Folder className="w-4 h-4" />
+                {formatMessage({ id: 'skillHub.tabs.local' })}
+                {local.data?.total ? (
+                  <Badge variant="secondary" className="ml-1">
+                    {local.data.total}
+                  </Badge>
+                ) : null}
+              </TabsTrigger>
+              <TabsTrigger value="installed" className="gap-1.5">
+                <Download className="w-4 h-4" />
+                {formatMessage({ id: 'skillHub.tabs.installed' })}
+                {installed.data?.total ? (
+                  <Badge variant="secondary" className="ml-1">
+                    {installed.data.total}
+                  </Badge>
+                ) : null}
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
+
+          <div className="flex items-center gap-2">
+            {/* Search */}
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+              <Input
+                type="text"
+                placeholder={formatMessage({ id: 'skillHub.search.placeholder' })}
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-9 w-48"
+              />
+            </div>
+
+            {/* Category filter */}
+            {categories.length > 0 && activeTab !== 'installed' && (
+              <div className="relative">
+                <Filter className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+                <select
+                  value={categoryFilter || ''}
+                  onChange={(e) => setCategoryFilter(e.target.value || null)}
+                  className="pl-9 pr-4 py-2 text-sm bg-background border rounded-md appearance-none cursor-pointer"
+                >
+                  <option value="">{formatMessage({ id: 'skillHub.filter.allCategories' })}</option>
+                  {categories.map((cat) => (
+                    <option key={cat} value={cat}>
+                      {cat}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-auto px-6 pb-6">
+        {isLoading ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {[1, 2, 3, 4, 5, 6].map((i) => (
+              <div key={i} className="h-48 bg-muted animate-pulse rounded-lg" />
+            ))}
+          </div>
+        ) : filteredSkills.length === 0 ? (
+          <EmptyState type={activeTab} />
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {filteredSkills.map((skill) => {
+              const source: SkillSource = activeTab === 'remote' ? 'remote' : 'local';
+              const installedInfo = installedMap.get(skill.id);
+              // For installed tab, get source from the installed skill info
+              const skillSource: SkillSource = activeTab === 'installed'
+                ? ('source' in skill ? (skill as InstalledSkill).source : source)
+                : source;
+
+              return (
+                <SkillHubCard
+                  key={skill.id}
+                  skill={skill as RemoteSkill | LocalSkill}
+                  installedInfo={installedInfo}
+                  source={skillSource}
+                  onInstall={handleInstall}
+                  onUninstall={handleUninstall}
+                  onViewDetails={handleViewDetails}
+                  isInstalling={installMutation.isPending}
+                />
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default SkillHubPage;

ccw/frontend/src/pages/SkillsManagerPage.tsx

@@ -23,6 +23,8 @@ import {
   AlertCircle,
   Maximize2,
   Minimize2,
+  Globe,
+  Download,
 } from 'lucide-react';
 import { useAppStore, selectIsImmersiveMode } from '@/stores/appStore';
 import { Card } from '@/components/ui/Card';
@@ -42,8 +44,19 @@ import {
   AlertDialogCancel,
 } from '@/components/ui';
 import { SkillCard, SkillDetailPanel, SkillCreateDialog } from '@/components/shared';
+import { SkillHubCard } from '@/components/shared/SkillHubCard';
 import { CliModeToggle, type CliMode } from '@/components/mcp/CliModeToggle';
 import { useSkills, useSkillMutations } from '@/hooks';
+import {
+  useSkillHub,
+  useInstallSkill,
+  useUninstallSkill,
+  type RemoteSkill,
+  type LocalSkill,
+  type InstalledSkill,
+  type CliType,
+  type SkillSource,
+} from '@/hooks/useSkillHub';
 import { fetchSkillDetail } from '@/lib/api';
 import { useWorkflowStore, selectProjectPath } from '@/stores/workflowStore';
 import type { Skill } from '@/lib/api';
@@ -121,7 +134,12 @@ export function SkillsManagerPage() {
   const [viewMode, setViewMode] = useState<'grid' | 'compact'>('grid');
   const [showDisabledSection, setShowDisabledSection] = useState(false);
   const [confirmDisable, setConfirmDisable] = useState<{ skill: Skill; enable: boolean } | null>(null);
-  const [locationFilter, setLocationFilter] = useState<'project' | 'user'>('project');
+  const [locationFilter, setLocationFilter] = useState<'project' | 'user' | 'hub'>('project');
+
+  // Skill Hub state
+  const [hubTab, setHubTab] = useState<'remote' | 'local' | 'installed'>('remote');
+  const [hubSearchQuery, setHubSearchQuery] = useState('');
+  const [hubCategoryFilter, setHubCategoryFilter] = useState<string | null>(null);
 
   // Skill create dialog state
   const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
@@ -150,13 +168,95 @@ export function SkillsManagerPage() {
       category: categoryFilter !== 'all' ? categoryFilter : undefined,
       source: sourceFilter !== 'all' ? sourceFilter as Skill['source'] : undefined,
       enabledOnly: enabledFilter === 'enabled',
-      location: locationFilter,
+      location: locationFilter === 'hub' ? undefined : locationFilter,
     },
     cliType: cliMode,
   });
 
   const { toggleSkill, isToggling } = useSkillMutations();
 
+  // Skill Hub hooks
+  const {
+    remote: remoteSkills,
+    local: localSkills,
+    installed: installedSkills,
+    stats: hubStats,
+    isLoading: isHubLoading,
+    isError: isHubError,
+    isFetching: isHubFetching,
+    refetchAll: refetchHub,
+  } = useSkillHub(locationFilter === 'hub');
+
+  const installSkillMutation = useInstallSkill();
+  const uninstallSkillMutation = useUninstallSkill();
+
+  // Build installed map for quick lookup
+  const installedMap = useMemo(() => {
+    const map = new Map<string, InstalledSkill>();
+    installedSkills.data?.skills?.forEach((skill: InstalledSkill) => {
+      map.set(skill.originalId, skill);
+    });
+    return map;
+  }, [installedSkills.data]);
+
+  // Extract unique categories from skill hub
+  const hubCategories = useMemo(() => {
+    const cats = new Set<string>();
+    remoteSkills.data?.skills?.forEach((skill: RemoteSkill) => {
+      if (skill.category) cats.add(skill.category);
+    });
+    localSkills.data?.skills?.forEach((skill: LocalSkill) => {
+      if (skill.category) cats.add(skill.category);
+    });
+    return Array.from(cats).sort();
+  }, [remoteSkills.data, localSkills.data]);
+
+  // Filter hub skills based on search and category
+  const filterHubSkills = <T extends RemoteSkill | LocalSkill | InstalledSkill>(skills: T[]): T[] => {
+    return skills.filter((skill) => {
+      const matchesSearch = !hubSearchQuery ||
+        skill.name.toLowerCase().includes(hubSearchQuery.toLowerCase()) ||
+        ('description' in skill && skill.description?.toLowerCase().includes(hubSearchQuery.toLowerCase())) ||
+        ('tags' in skill && skill.tags?.some((tag: string) => tag.toLowerCase().includes(hubSearchQuery.toLowerCase())));
+
+      const matchesCategory = !hubCategoryFilter || ('category' in skill && skill.category === hubCategoryFilter);
+
+      return matchesSearch && matchesCategory;
+    });
+  };
+
+  // Get filtered skills for current hub tab
+  const filteredHubSkills = useMemo(() => {
+    if (hubTab === 'remote') {
+      return filterHubSkills(remoteSkills.data?.skills || []);
+    }
+    if (hubTab === 'local') {
+      return filterHubSkills(localSkills.data?.skills || []);
+    }
+    return installedSkills.data?.skills || [];
+  }, [hubTab, remoteSkills.data, localSkills.data, installedSkills.data, hubSearchQuery, hubCategoryFilter]);
+
+  // Hub skill handlers
+  const handleHubInstall = async (skill: RemoteSkill | LocalSkill, cliType: CliType) => {
+    const source: SkillSource = 'downloadUrl' in skill ? 'remote' : 'local';
+    await installSkillMutation.mutateAsync({
+      skillId: skill.id,
+      cliType,
+      source,
+      downloadUrl: 'downloadUrl' in skill ? skill.downloadUrl : undefined,
+    });
+  };
+
+  const handleHubUninstall = async (skill: RemoteSkill | LocalSkill, cliType: CliType) => {
+    const installedInfo = installedMap.get(skill.id);
+    if (installedInfo) {
+      await uninstallSkillMutation.mutateAsync({
+        skillId: installedInfo.id,
+        cliType,
+      });
+    }
+  };
+
   // Filter skills based on enabled filter
   const filteredSkills = useMemo(() => {
     if (enabledFilter === 'disabled') {
@@ -275,8 +375,8 @@ export function SkillsManagerPage() {
             >
               {isImmersiveMode ? <Minimize2 className="w-4 h-4" /> : <Maximize2 className="w-4 h-4" />}
             </button>
-            <Button variant="outline" onClick={() => refetch()} disabled={isFetching}>
-              <RefreshCw className={cn('w-4 h-4 mr-2', isFetching && 'animate-spin')} />
+            <Button variant="outline" onClick={() => locationFilter === 'hub' ? refetchHub() : refetch()} disabled={isFetching || isHubFetching}>
+              <RefreshCw className={cn('w-4 h-4 mr-2', (isFetching || isHubFetching) && 'animate-spin')} />
               {formatMessage({ id: 'common.actions.refresh' })}
             </Button>
             <Button onClick={() => setIsCreateDialogOpen(true)}>
@@ -303,7 +403,7 @@ export function SkillsManagerPage() {
         {/* Location Tabs - styled like LiteTasksPage */}
         <TabsNavigation
           value={locationFilter}
-          onValueChange={(v) => setLocationFilter(v as 'project' | 'user')}
+          onValueChange={(v) => setLocationFilter(v as 'project' | 'user' | 'hub')}
           tabs={[
             {
               value: 'project',
@@ -319,163 +419,324 @@ export function SkillsManagerPage() {
               badge: <Badge variant="secondary" className="ml-2">{userSkills.length}</Badge>,
               disabled: isToggling,
             },
+            {
+              value: 'hub',
+              label: formatMessage({ id: 'skills.location.hub' }),
+              icon: <Globe className="h-4 w-4" />,
+              badge: <Badge variant="secondary" className="ml-2">{hubStats.data?.installedTotal || 0}</Badge>,
+              disabled: isToggling,
+            },
           ]}
         />
       </div>
 
       {/* Stats Cards */}
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-        <Card className="p-4">
-          <div className="flex items-center gap-2">
-            <Sparkles className="w-5 h-5 text-primary" />
-            <span className="text-2xl font-bold">{currentLocationTotalCount}</span>
-          </div>
-          <p className="text-sm text-muted-foreground mt-1">{formatMessage({ id: 'common.stats.totalSkills' })}</p>
-        </Card>
-        <Card className="p-4">
-          <div className="flex items-center gap-2">
-            <Power className="w-5 h-5 text-success" />
-            <span className="text-2xl font-bold">{currentLocationEnabledCount}</span>
-          </div>
-          <p className="text-sm text-muted-foreground mt-1">{formatMessage({ id: 'skills.state.enabled' })}</p>
-        </Card>
-        <Card className="p-4">
-          <div className="flex items-center gap-2">
-            <PowerOff className="w-5 h-5 text-muted-foreground" />
-            <span className="text-2xl font-bold">{currentLocationDisabledCount}</span>
-          </div>
-          <p className="text-sm text-muted-foreground mt-1">{formatMessage({ id: 'skills.state.disabled' })}</p>
-        </Card>
-        <Card className="p-4">
-          <div className="flex items-center gap-2">
-            <Tag className="w-5 h-5 text-info" />
-            <span className="text-2xl font-bold">{categories.length}</span>
-          </div>
-          <p className="text-sm text-muted-foreground mt-1">{formatMessage({ id: 'skills.card.category' })}</p>
-        </Card>
-      </div>
+      {locationFilter === 'hub' ? (
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <Card className="p-4">
+            <div className="flex items-center gap-2">
+              <Globe className="w-5 h-5 text-primary" />
+              <span className="text-2xl font-bold">{hubStats.data?.remoteTotal || 0}</span>
+            </div>
+            <p className="text-sm text-muted-foreground mt-1">{formatMessage({ id: 'skillHub.stats.remote' })}</p>
+          </Card>
+          <Card className="p-4">
+            <div className="flex items-center gap-2">
+              <Folder className="w-5 h-5 text-info" />
+              <span className="text-2xl font-bold">{hubStats.data?.localTotal || 0}</span>
+            </div>
+            <p className="text-sm text-muted-foreground mt-1">{formatMessage({ id: 'skillHub.stats.local' })}</p>
+          </Card>
+          <Card className="p-4">
+            <div className="flex items-center gap-2">
+              <Download className="w-5 h-5 text-success" />
+              <span className="text-2xl font-bold">{hubStats.data?.installedTotal || 0}</span>
+            </div>
+            <p className="text-sm text-muted-foreground mt-1">{formatMessage({ id: 'skillHub.stats.installed' })}</p>
+          </Card>
+          <Card className="p-4">
+            <div className="flex items-center gap-2">
+              <RefreshCw className={cn('w-5 h-5', (hubStats.data?.updatesAvailable || 0) > 0 ? 'text-amber-500' : 'text-muted-foreground')} />
+              <span className="text-2xl font-bold">{hubStats.data?.updatesAvailable || 0}</span>
+            </div>
+            <p className="text-sm text-muted-foreground mt-1">{formatMessage({ id: 'skillHub.stats.updates' })}</p>
+          </Card>
+        </div>
+      ) : (
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <Card className="p-4">
+            <div className="flex items-center gap-2">
+              <Sparkles className="w-5 h-5 text-primary" />
+              <span className="text-2xl font-bold">{currentLocationTotalCount}</span>
+            </div>
+            <p className="text-sm text-muted-foreground mt-1">{formatMessage({ id: 'common.stats.totalSkills' })}</p>
+          </Card>
+          <Card className="p-4">
+            <div className="flex items-center gap-2">
+              <Power className="w-5 h-5 text-success" />
+              <span className="text-2xl font-bold">{currentLocationEnabledCount}</span>
+            </div>
+            <p className="text-sm text-muted-foreground mt-1">{formatMessage({ id: 'skills.state.enabled' })}</p>
+          </Card>
+          <Card className="p-4">
+            <div className="flex items-center gap-2">
+              <PowerOff className="w-5 h-5 text-muted-foreground" />
+              <span className="text-2xl font-bold">{currentLocationDisabledCount}</span>
+            </div>
+            <p className="text-sm text-muted-foreground mt-1">{formatMessage({ id: 'skills.state.disabled' })}</p>
+          </Card>
+          <Card className="p-4">
+            <div className="flex items-center gap-2">
+              <Tag className="w-5 h-5 text-info" />
+              <span className="text-2xl font-bold">{categories.length}</span>
+            </div>
+            <p className="text-sm text-muted-foreground mt-1">{formatMessage({ id: 'skills.card.category' })}</p>
+          </Card>
+        </div>
+      )}
 
       {/* Filters and Search */}
-      <div className="flex flex-col sm:flex-row gap-3">
-        <div className="relative flex-1">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
-          <Input
-            placeholder={formatMessage({ id: 'skills.filters.searchPlaceholder' })}
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="pl-9"
-          />
-        </div>
-        <div className="flex gap-2">
-          <Select value={categoryFilter} onValueChange={setCategoryFilter}>
-            <SelectTrigger className="w-[140px]">
-              <SelectValue placeholder={formatMessage({ id: 'skills.card.category' })} />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">{formatMessage({ id: 'skills.filters.all' })}</SelectItem>
-              {categories.map((cat) => (
-                <SelectItem key={cat} value={cat}>{cat}</SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          <Select value={sourceFilter} onValueChange={setSourceFilter}>
-            <SelectTrigger className="w-[140px]">
-              <SelectValue placeholder={formatMessage({ id: 'skills.card.source' })} />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">{formatMessage({ id: 'skills.filters.allSources' })}</SelectItem>
-              <SelectItem value="builtin">{formatMessage({ id: 'skills.source.builtin' })}</SelectItem>
-              <SelectItem value="custom">{formatMessage({ id: 'skills.source.custom' })}</SelectItem>
-              <SelectItem value="community">{formatMessage({ id: 'skills.source.community' })}</SelectItem>
-            </SelectContent>
-          </Select>
-          <Select value={enabledFilter} onValueChange={(v) => setEnabledFilter(v as 'all' | 'enabled' | 'disabled')}>
-            <SelectTrigger className="w-[140px]">
-              <SelectValue placeholder={formatMessage({ id: 'skills.state.enabled' })} />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">{formatMessage({ id: 'skills.filters.all' })}</SelectItem>
-              <SelectItem value="enabled">{formatMessage({ id: 'skills.filters.enabled' })}</SelectItem>
-              <SelectItem value="disabled">{formatMessage({ id: 'skills.filters.disabled' })}</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-
-      {/* Quick Filters */}
-      <div className="flex flex-wrap gap-2">
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => setEnabledFilter('all')}
-          className={enabledFilter === 'all' ? 'bg-primary text-primary-foreground' : ''}
-        >
-          <Sparkles className="w-4 h-4 mr-1" />
-          {formatMessage({ id: 'skills.filters.all' })} ({currentLocationTotalCount})
-        </Button>
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => setEnabledFilter('enabled')}
-          className={enabledFilter === 'enabled' ? 'bg-primary text-primary-foreground' : ''}
-        >
-          <Power className="w-4 h-4 mr-1" />
-          {formatMessage({ id: 'skills.state.enabled' })} ({currentLocationEnabledCount})
-        </Button>
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => setEnabledFilter('disabled')}
-          className={enabledFilter === 'disabled' ? 'bg-primary text-primary-foreground' : ''}
-        >
-          <PowerOff className="w-4 h-4 mr-1" />
-          {formatMessage({ id: 'skills.state.disabled' })} ({currentLocationDisabledCount})
-        </Button>
-        <div className="flex-1" />
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => setViewMode(viewMode === 'grid' ? 'compact' : 'grid')}
-        >
-          {viewMode === 'grid' ? <List className="w-4 h-4 mr-1" /> : <Grid3x3 className="w-4 h-4 mr-1" />}
-          {formatMessage({ id: viewMode === 'grid' ? 'skills.view.compact' : 'skills.view.grid' })}
-        </Button>
-      </div>
-
-      {/* Skills Grid */}
-      <SkillGrid
-        skills={filteredSkills}
-        isLoading={isLoading}
-        onToggle={handleToggleWithConfirm}
-        onClick={handleSkillClick}
-        isToggling={isToggling || !!confirmDisable}
-        compact={viewMode === 'compact'}
-      />
-
-      {/* Disabled Skills Section */}
-      {enabledFilter === 'all' && currentLocationDisabledCount > 0 && (
-        <div className="mt-6">
-          <Button
-            variant="ghost"
-            onClick={() => setShowDisabledSection(!showDisabledSection)}
-            className="mb-4 text-muted-foreground hover:text-foreground"
-          >
-            {showDisabledSection ? <ChevronDown className="w-4 h-4 mr-2" /> : <ChevronRight className="w-4 h-4 mr-2" />}
-            <EyeOff className="w-4 h-4 mr-2" />
-            {formatMessage({ id: 'skills.disabledSkills.title' })} ({currentLocationDisabledCount})
-          </Button>
-
-          {showDisabledSection && (
-            <SkillGrid
-              skills={skills.filter((s) => !s.enabled)}
-              isLoading={false}
-              onToggle={handleToggleWithConfirm}
-              onClick={handleSkillClick}
-              isToggling={isToggling || !!confirmDisable}
-              compact={true}
+      {locationFilter === 'hub' ? (
+        <>
+          {/* Hub Sub-tabs */}
+          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+            <TabsNavigation
+              value={hubTab}
+              onValueChange={(v) => setHubTab(v as 'remote' | 'local' | 'installed')}
+              tabs={[
+                {
+                  value: 'remote',
+                  label: formatMessage({ id: 'skillHub.tabs.remote' }),
+                  icon: <Globe className="h-4 w-4" />,
+                  badge: remoteSkills.data?.total ? <Badge variant="secondary" className="ml-2">{remoteSkills.data.total}</Badge> : undefined,
+                },
+                {
+                  value: 'local',
+                  label: formatMessage({ id: 'skillHub.tabs.local' }),
+                  icon: <Folder className="h-4 w-4" />,
+                  badge: localSkills.data?.total ? <Badge variant="secondary" className="ml-2">{localSkills.data.total}</Badge> : undefined,
+                },
+                {
+                  value: 'installed',
+                  label: formatMessage({ id: 'skillHub.tabs.installed' }),
+                  icon: <Download className="h-4 w-4" />,
+                  badge: installedSkills.data?.total ? <Badge variant="secondary" className="ml-2">{installedSkills.data.total}</Badge> : undefined,
+                },
+              ]}
             />
+            <div className="flex items-center gap-2">
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+                <Input
+                  type="text"
+                  placeholder={formatMessage({ id: 'skillHub.search.placeholder' })}
+                  value={hubSearchQuery}
+                  onChange={(e) => setHubSearchQuery(e.target.value)}
+                  className="pl-9 w-48"
+                />
+              </div>
+              {hubCategories.length > 0 && hubTab !== 'installed' && (
+                <Select value={hubCategoryFilter || 'all'} onValueChange={(v) => setHubCategoryFilter(v === 'all' ? null : v)}>
+                  <SelectTrigger className="w-[140px]">
+                    <SelectValue placeholder={formatMessage({ id: 'skillHub.filter.allCategories' })} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">{formatMessage({ id: 'skillHub.filter.allCategories' })}</SelectItem>
+                    {hubCategories.map((cat) => (
+                      <SelectItem key={cat} value={cat}>{cat}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              )}
+            </div>
+          </div>
+
+          {/* Hub Error State */}
+          {isHubError && (
+            <div className="flex items-center gap-2 p-4 rounded-lg bg-destructive/10 border border-destructive/30 text-destructive">
+              <AlertCircle className="h-5 w-5 flex-shrink-0" />
+              <span>{formatMessage({ id: 'skillHub.error.loadFailed' })}</span>
+            </div>
           )}
-        </div>
+
+          {/* Hub Skills Grid */}
+          {isHubLoading ? (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {[1, 2, 3, 4, 5, 6].map((i) => (
+                <div key={i} className="h-48 bg-muted animate-pulse rounded-lg" />
+              ))}
+            </div>
+          ) : filteredHubSkills.length === 0 ? (
+            <Card className="p-8 text-center">
+              {hubTab === 'remote' ? (
+                <>
+                  <Globe className="w-12 h-12 mx-auto text-muted-foreground/50" />
+                  <h3 className="mt-4 text-lg font-medium text-foreground">{formatMessage({ id: 'skillHub.empty.remote.title' })}</h3>
+                  <p className="mt-2 text-muted-foreground">{formatMessage({ id: 'skillHub.empty.remote.description' })}</p>
+                </>
+              ) : hubTab === 'local' ? (
+                <>
+                  <Folder className="w-12 h-12 mx-auto text-muted-foreground/50" />
+                  <h3 className="mt-4 text-lg font-medium text-foreground">{formatMessage({ id: 'skillHub.empty.local.title' })}</h3>
+                  <p className="mt-2 text-muted-foreground">{formatMessage({ id: 'skillHub.empty.local.description' })}</p>
+                </>
+              ) : (
+                <>
+                  <Download className="w-12 h-12 mx-auto text-muted-foreground/50" />
+                  <h3 className="mt-4 text-lg font-medium text-foreground">{formatMessage({ id: 'skillHub.empty.installed.title' })}</h3>
+                  <p className="mt-2 text-muted-foreground">{formatMessage({ id: 'skillHub.empty.installed.description' })}</p>
+                </>
+              )}
+            </Card>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {filteredHubSkills.map((skill) => {
+                const source: SkillSource = hubTab === 'remote' ? 'remote' : 'local';
+                const installedInfo = installedMap.get(skill.id);
+                const skillSource: SkillSource = hubTab === 'installed'
+                  ? ('source' in skill ? (skill as InstalledSkill).source : source)
+                  : source;
+
+                return (
+                  <SkillHubCard
+                    key={skill.id}
+                    skill={skill as RemoteSkill | LocalSkill}
+                    installedInfo={installedInfo}
+                    source={skillSource}
+                    onInstall={handleHubInstall}
+                    onUninstall={handleHubUninstall}
+                    isInstalling={installSkillMutation.isPending}
+                  />
+                );
+              })}
+            </div>
+          )}
+        </>
+      ) : (
+        <>
+          {/* Regular Skills Filters */}
+          <div className="flex flex-col sm:flex-row gap-3">
+            <div className="relative flex-1">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+              <Input
+                placeholder={formatMessage({ id: 'skills.filters.searchPlaceholder' })}
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-9"
+              />
+            </div>
+            <div className="flex gap-2">
+              <Select value={categoryFilter} onValueChange={setCategoryFilter}>
+                <SelectTrigger className="w-[140px]">
+                  <SelectValue placeholder={formatMessage({ id: 'skills.card.category' })} />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">{formatMessage({ id: 'skills.filters.all' })}</SelectItem>
+                  {categories.map((cat) => (
+                    <SelectItem key={cat} value={cat}>{cat}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Select value={sourceFilter} onValueChange={setSourceFilter}>
+                <SelectTrigger className="w-[140px]">
+                  <SelectValue placeholder={formatMessage({ id: 'skills.card.source' })} />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">{formatMessage({ id: 'skills.filters.allSources' })}</SelectItem>
+                  <SelectItem value="builtin">{formatMessage({ id: 'skills.source.builtin' })}</SelectItem>
+                  <SelectItem value="custom">{formatMessage({ id: 'skills.source.custom' })}</SelectItem>
+                  <SelectItem value="community">{formatMessage({ id: 'skills.source.community' })}</SelectItem>
+                </SelectContent>
+              </Select>
+              <Select value={enabledFilter} onValueChange={(v) => setEnabledFilter(v as 'all' | 'enabled' | 'disabled')}>
+                <SelectTrigger className="w-[140px]">
+                  <SelectValue placeholder={formatMessage({ id: 'skills.state.enabled' })} />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">{formatMessage({ id: 'skills.filters.all' })}</SelectItem>
+                  <SelectItem value="enabled">{formatMessage({ id: 'skills.filters.enabled' })}</SelectItem>
+                  <SelectItem value="disabled">{formatMessage({ id: 'skills.filters.disabled' })}</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          {/* Quick Filters */}
+          <div className="flex flex-wrap gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setEnabledFilter('all')}
+              className={enabledFilter === 'all' ? 'bg-primary text-primary-foreground' : ''}
+            >
+              <Sparkles className="w-4 h-4 mr-1" />
+              {formatMessage({ id: 'skills.filters.all' })} ({currentLocationTotalCount})
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setEnabledFilter('enabled')}
+              className={enabledFilter === 'enabled' ? 'bg-primary text-primary-foreground' : ''}
+            >
+              <Power className="w-4 h-4 mr-1" />
+              {formatMessage({ id: 'skills.state.enabled' })} ({currentLocationEnabledCount})
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setEnabledFilter('disabled')}
+              className={enabledFilter === 'disabled' ? 'bg-primary text-primary-foreground' : ''}
+            >
+              <PowerOff className="w-4 h-4 mr-1" />
+              {formatMessage({ id: 'skills.state.disabled' })} ({currentLocationDisabledCount})
+            </Button>
+            <div className="flex-1" />
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setViewMode(viewMode === 'grid' ? 'compact' : 'grid')}
+            >
+              {viewMode === 'grid' ? <List className="w-4 h-4 mr-1" /> : <Grid3x3 className="w-4 h-4 mr-1" />}
+              {formatMessage({ id: viewMode === 'grid' ? 'skills.view.compact' : 'skills.view.grid' })}
+            </Button>
+          </div>
+
+          {/* Skills Grid */}
+          <SkillGrid
+            skills={filteredSkills}
+            isLoading={isLoading}
+            onToggle={handleToggleWithConfirm}
+            onClick={handleSkillClick}
+            isToggling={isToggling || !!confirmDisable}
+            compact={viewMode === 'compact'}
+          />
+
+          {/* Disabled Skills Section */}
+          {enabledFilter === 'all' && currentLocationDisabledCount > 0 && (
+            <div className="mt-6">
+              <Button
+                variant="ghost"
+                onClick={() => setShowDisabledSection(!showDisabledSection)}
+                className="mb-4 text-muted-foreground hover:text-foreground"
+              >
+                {showDisabledSection ? <ChevronDown className="w-4 h-4 mr-2" /> : <ChevronRight className="w-4 h-4 mr-2" />}
+                <EyeOff className="w-4 h-4 mr-2" />
+                {formatMessage({ id: 'skills.disabledSkills.title' })} ({currentLocationDisabledCount})
+              </Button>
+
+              {showDisabledSection && (
+                <SkillGrid
+                  skills={skills.filter((s) => !s.enabled)}
+                  isLoading={false}
+                  onToggle={handleToggleWithConfirm}
+                  onClick={handleSkillClick}
+                  isToggling={isToggling || !!confirmDisable}
+                  compact={true}
+                />
+              )}
+            </div>
+          )}
+        </>
       )}
 
       {/* Disable Confirmation Dialog */}

ccw/frontend/src/pages/index.ts

@@ -36,3 +36,4 @@ export { CliSessionSharePage } from './CliSessionSharePage';
 export { IssueManagerPage } from './IssueManagerPage';
 export { TeamPage } from './TeamPage';
 export { TerminalDashboardPage } from './TerminalDashboardPage';
+export { SkillHubPage } from './SkillHubPage';