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/components/shared/SkillHubCard.tsx

@@ -0,0 +1,328 @@
+// ========================================
+// SkillHubCard Component
+// ========================================
+// Card component for displaying skills from hub with install/uninstall actions
+
+import { useState } from 'react';
+import { useIntl } from 'react-intl';
+import {
+  Download,
+  RefreshCw,
+  Check,
+  Globe,
+  Folder,
+  Tag,
+  User,
+  Clock,
+  MoreVertical,
+  Info,
+  Trash2,
+} from 'lucide-react';
+import { toast } from 'sonner';
+import { cn } from '@/lib/utils';
+import { Card } from '@/components/ui/Card';
+import { Badge } from '@/components/ui/Badge';
+import { Button } from '@/components/ui/Button';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@/components/ui/Dropdown';
+import { CliModeToggle, type CliMode } from '@/components/mcp/CliModeToggle';
+import type { RemoteSkill, LocalSkill, InstalledSkill, CliType, SkillSource } from '@/hooks/useSkillHub';
+
+// ========== Types ==========
+
+export interface SkillHubCardProps {
+  skill: RemoteSkill | LocalSkill;
+  installedInfo?: InstalledSkill;
+  source: SkillSource;
+  onInstall?: (skill: RemoteSkill | LocalSkill, cliType: CliType) => Promise<void>;
+  onUninstall?: (skill: RemoteSkill | LocalSkill, cliType: CliType) => Promise<void>;
+  onViewDetails?: (skill: RemoteSkill | LocalSkill) => void;
+  isInstalling?: boolean;
+  className?: string;
+  compact?: boolean;
+}
+
+// ========== Source Badge ==========
+
+function SkillSourceBadge({ source }: { source: SkillSource }) {
+  const { formatMessage } = useIntl();
+
+  if (source === 'remote') {
+    return (
+      <Badge variant="default" className="gap-1">
+        <Globe className="w-3 h-3" />
+        {formatMessage({ id: 'skillHub.source.remote' })}
+      </Badge>
+    );
+  }
+
+  return (
+    <Badge variant="secondary" className="gap-1">
+      <Folder className="w-3 h-3" />
+      {formatMessage({ id: 'skillHub.source.local' })}
+    </Badge>
+  );
+}
+
+// ========== Install Status Badge ==========
+
+function InstallStatusBadge({ installedInfo }: { installedInfo?: InstalledSkill }) {
+  const { formatMessage } = useIntl();
+
+  if (!installedInfo) {
+    return null;
+  }
+
+  if (installedInfo.updatesAvailable) {
+    return (
+      <Badge variant="outline" className="gap-1 text-amber-500 border-amber-500">
+        <RefreshCw className="w-3 h-3" />
+        {formatMessage({ id: 'skillHub.status.updateAvailable' })}
+      </Badge>
+    );
+  }
+
+  return (
+    <Badge variant="outline" className="gap-1 text-success border-success">
+      <Check className="w-3 h-3" />
+      {formatMessage({ id: 'skillHub.status.installed' })}
+    </Badge>
+  );
+}
+
+// ========== Main SkillHubCard Component ==========
+
+export function SkillHubCard({
+  skill,
+  installedInfo,
+  source,
+  onInstall,
+  onUninstall,
+  onViewDetails,
+  isInstalling = false,
+  className,
+  compact = false,
+}: SkillHubCardProps) {
+  const { formatMessage } = useIntl();
+  const [cliMode, setCliMode] = useState<CliMode>('claude');
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [localInstalling, setLocalInstalling] = useState(false);
+
+  const isRemote = source === 'remote';
+  const isInstalled = !!installedInfo;
+  const isLoading = isInstalling || localInstalling;
+
+  const handleInstall = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setLocalInstalling(true);
+    try {
+      await onInstall?.(skill, cliMode);
+      toast.success(formatMessage({ id: 'skillHub.install.success' }, { name: skill.name }));
+    } catch (error) {
+      toast.error(formatMessage({ id: 'skillHub.install.error' }, { error: String(error) }));
+    } finally {
+      setLocalInstalling(false);
+    }
+  };
+
+  const handleUninstall = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsMenuOpen(false);
+    try {
+      await onUninstall?.(skill, installedInfo?.installedTo || cliMode);
+      toast.success(formatMessage({ id: 'skillHub.uninstall.success' }, { name: skill.name }));
+    } catch (error) {
+      toast.error(formatMessage({ id: 'skillHub.uninstall.error' }, { error: String(error) }));
+    }
+  };
+
+  const handleViewDetails = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsMenuOpen(false);
+    onViewDetails?.(skill);
+  };
+
+  // Compact view
+  if (compact) {
+    return (
+      <div
+        className={cn(
+          'p-3 bg-card border rounded-lg',
+          'hover:shadow-md transition-all',
+          className
+        )}
+      >
+        <div className="flex items-center justify-between gap-2">
+          <div className="flex items-center gap-2 min-w-0">
+            <Download className="w-4 h-4 flex-shrink-0 text-primary" />
+            <span className="text-sm font-medium text-foreground truncate">{skill.name}</span>
+            {skill.version && (
+              <span className="text-xs text-muted-foreground">v{skill.version}</span>
+            )}
+          </div>
+          <div className="flex items-center gap-2">
+            <CliModeToggle currentMode={cliMode} onModeChange={setCliMode} />
+            <Button
+              variant={isInstalled ? 'outline' : 'default'}
+              size="sm"
+              className="h-7 px-2"
+              onClick={handleInstall}
+              disabled={isLoading}
+            >
+              {isLoading ? (
+                <RefreshCw className="w-3 h-3 animate-spin" />
+              ) : isInstalled ? (
+                <>
+                  <RefreshCw className="w-3 h-3 mr-1" />
+                  {formatMessage({ id: 'skillHub.actions.update' })}
+                </>
+              ) : (
+                <>
+                  <Download className="w-3 h-3 mr-1" />
+                  {formatMessage({ id: 'skillHub.actions.install' })}
+                </>
+              )}
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Full card view
+  return (
+    <Card
+      className={cn(
+        'p-4 hover:shadow-md transition-all hover-glow hover:border-primary/50',
+        className
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-start justify-between gap-2">
+        <div className="flex items-start gap-3 min-w-0">
+          <div className="p-2 rounded-lg flex-shrink-0 bg-primary/10">
+            <Download className="w-5 h-5 text-primary" />
+          </div>
+          <div className="min-w-0">
+            <div className="flex items-center gap-2">
+              <h3 className="text-sm font-medium text-foreground">{skill.name}</h3>
+              {skill.version && (
+                <span className="text-xs text-muted-foreground">v{skill.version}</span>
+              )}
+            </div>
+            {skill.author && (
+              <div className="flex items-center gap-1 mt-0.5 text-xs text-muted-foreground">
+                <User className="w-3 h-3" />
+                {skill.author}
+              </div>
+            )}
+          </div>
+        </div>
+        <DropdownMenu open={isMenuOpen} onOpenChange={setIsMenuOpen}>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-8 w-8 p-0"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <MoreVertical className="w-4 h-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={handleViewDetails}>
+              <Info className="w-4 h-4 mr-2" />
+              {formatMessage({ id: 'skillHub.actions.viewDetails' })}
+            </DropdownMenuItem>
+            {isInstalled && (
+              <DropdownMenuItem onClick={handleUninstall} className="text-destructive">
+                <Trash2 className="w-4 h-4 mr-2" />
+                {formatMessage({ id: 'skillHub.actions.uninstall' })}
+              </DropdownMenuItem>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      {/* Description */}
+      <p className="text-sm text-muted-foreground mt-3 line-clamp-2">
+        {skill.description}
+      </p>
+
+      {/* Tags */}
+      {skill.tags && skill.tags.length > 0 && (
+        <div className="mt-3">
+          <div className="flex items-center gap-1 text-xs text-muted-foreground mb-1">
+            <Tag className="w-3 h-3" />
+            {formatMessage({ id: 'skillHub.card.tags' })}
+          </div>
+          <div className="flex flex-wrap gap-1">
+            {skill.tags.slice(0, 4).map((tag) => (
+              <Badge key={tag} variant="outline" className="text-xs">
+                {tag}
+              </Badge>
+            ))}
+            {skill.tags.length > 4 && (
+              <Badge variant="outline" className="text-xs">
+                +{skill.tags.length - 4}
+              </Badge>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Updated date (for remote skills) */}
+      {isRemote && (skill as RemoteSkill).updatedAt && (
+        <div className="flex items-center gap-1 mt-2 text-xs text-muted-foreground">
+          <Clock className="w-3 h-3" />
+          {formatMessage(
+            { id: 'skillHub.card.updated' },
+            { date: new Date((skill as RemoteSkill).updatedAt as string).toLocaleDateString() }
+          )}
+        </div>
+      )}
+
+      {/* Footer */}
+      <div className="flex items-center justify-between mt-4 pt-3 border-t border-border">
+        <div className="flex items-center gap-2">
+          <SkillSourceBadge source={source} />
+          {skill.category && (
+            <Badge variant="outline" className="text-xs">
+              {skill.category}
+            </Badge>
+          )}
+          <InstallStatusBadge installedInfo={installedInfo} />
+        </div>
+      </div>
+
+      {/* Install section */}
+      <div className="flex items-center justify-between gap-2 mt-3">
+        <CliModeToggle currentMode={cliMode} onModeChange={setCliMode} />
+        <Button
+          variant={isInstalled ? 'outline' : 'default'}
+          size="sm"
+          onClick={handleInstall}
+          disabled={isLoading}
+        >
+          {isLoading ? (
+            <>
+              <RefreshCw className="w-4 h-4 mr-1 animate-spin" />
+              {formatMessage({ id: 'skillHub.actions.installing' })}
+            </>
+          ) : isInstalled ? (
+            <>
+              <RefreshCw className="w-4 h-4 mr-1" />
+              {formatMessage({ id: 'skillHub.actions.update' })}
+            </>
+          ) : (
+            <>
+              <Download className="w-4 h-4 mr-1" />
+              {formatMessage({ id: 'skillHub.actions.install' })}
+            </>
+          )}
+        </Button>
+      </div>
+    </Card>
+  );
+}
+
+export default SkillHubCard;

ccw/frontend/src/components/shared/index.ts

@@ -22,6 +22,9 @@ export type { SkillDetailPanelProps } from './SkillDetailPanel';
 export { SkillCreateDialog } from './SkillCreateDialog';
 export type { SkillCreateDialogProps } from './SkillCreateDialog';
 
+export { SkillHubCard } from './SkillHubCard';
+export type { SkillHubCardProps } from './SkillHubCard';
+
 export { StatCard, StatCardSkeleton } from './StatCard';
 export type { StatCardProps } from './StatCard';
 

ccw/frontend/src/hooks/index.ts

@@ -352,3 +352,32 @@ export type {
   UseUpdateRerankerConfigReturn,
   UseCcwToolsListReturn,
 } from './useCodexLens';
+
+// ========== Skill Hub ==========
+export {
+  useRemoteSkills,
+  useLocalSkills,
+  useInstalledSkills,
+  useSkillHubUpdates,
+  useInstallSkill,
+  useCacheSkill,
+  useUninstallSkill,
+  useSkillHubStats,
+  useSkillHub,
+  skillHubKeys,
+} from './useSkillHub';
+export type {
+  CliType,
+  SkillSource,
+  RemoteSkill,
+  LocalSkill,
+  InstalledSkill,
+  RemoteSkillsResponse,
+  LocalSkillsResponse,
+  InstalledSkillsResponse,
+  SkillInstallRequest,
+  SkillInstallResponse,
+  SkillCacheRequest,
+  SkillCacheResponse,
+  SkillHubStats,
+} from './useSkillHub';

ccw/frontend/src/hooks/useOrchestratorExecution.ts

@@ -5,7 +5,6 @@
 
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useExecutionMonitorStore } from '@/stores/executionMonitorStore';
-import { useSessionManagerStore } from '@/stores/sessionManagerStore';
 import { toast } from '@/stores/notificationStore';
 import { useWorkflowStore, selectProjectPath } from '@/stores/workflowStore';
 
@@ -54,7 +53,6 @@ export function useExecuteFlowInSession() {
   const projectPath = useWorkflowStore(selectProjectPath);
   const handleExecutionMessage = useExecutionMonitorStore((s) => s.handleExecutionMessage);
   const setPanelOpen = useExecutionMonitorStore((s) => s.setPanelOpen);
-  const lockSession = useSessionManagerStore((s) => s.lockSession);
 
   return useMutation({
     mutationFn: async (params: {
@@ -89,8 +87,8 @@ export function useExecuteFlowInSession() {
           },
         });
 
-        // Lock the session
-        lockSession(sessionKey, `Executing workflow: ${flowId}`, executionId);
+        // Note: Session locking is handled by backend WebSocket broadcast (CLI_SESSION_LOCKED)
+        // Frontend sessionManagerStore updates state via WebSocket message handler
 
         // Open the execution monitor panel
         setPanelOpen(true);

ccw/frontend/src/hooks/useSkillHub.ts

@@ -0,0 +1,418 @@
+// ========================================
+// Skill Hub Hooks
+// ========================================
+// React Query hooks for Skill Hub API
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+
+// ============================================================================
+// API Helper
+// ============================================================================
+
+/**
+ * Get CSRF token from cookie
+ */
+function getCsrfToken(): string | null {
+  const match = document.cookie.match(/XSRF-TOKEN=([^;]+)/);
+  return match ? decodeURIComponent(match[1]) : null;
+}
+
+/**
+ * Typed fetch wrapper with CSRF token handling
+ */
+async function fetchApi<T>(url: string, options: RequestInit = {}): Promise<T> {
+  const headers = new Headers(options.headers);
+
+  // Add CSRF token for mutating requests
+  if (options.method && ['POST', 'PUT', 'PATCH', 'DELETE'].includes(options.method)) {
+    const csrfToken = getCsrfToken();
+    if (csrfToken) {
+      headers.set('X-CSRF-Token', csrfToken);
+    }
+  }
+
+  // Set content type for JSON requests
+  if (options.body && typeof options.body === 'string') {
+    headers.set('Content-Type', 'application/json');
+  }
+
+  const response = await fetch(url, {
+    ...options,
+    headers,
+    credentials: 'same-origin',
+  });
+
+  if (!response.ok) {
+    const error: { message: string; status: number; code?: string } = {
+      message: response.statusText || 'Request failed',
+      status: response.status,
+    };
+
+    const contentType = response.headers.get('content-type');
+    if (contentType && contentType.includes('application/json')) {
+      try {
+        const body = await response.json();
+        if (body.message) error.message = body.message;
+        else if (body.error) error.message = body.error;
+        if (body.code) error.code = body.code;
+      } catch {
+        // Silently ignore JSON parse errors
+      }
+    }
+
+    throw error;
+  }
+
+  // Handle no-content responses
+  if (response.status === 204) {
+    return undefined as T;
+  }
+
+  return response.json();
+}
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type CliType = 'claude' | 'codex';
+export type SkillSource = 'remote' | 'local';
+
+export interface RemoteSkill {
+  id: string;
+  name: string;
+  description: string;
+  version: string;
+  author: string;
+  category: string;
+  tags: string[];
+  downloadUrl: string;
+  readmeUrl?: string;
+  homepage?: string;
+  license?: string;
+  updatedAt?: string;
+}
+
+export interface LocalSkill {
+  id: string;
+  name: string;
+  folderName: string;
+  description: string;
+  version: string;
+  author?: string;
+  category?: string;
+  tags?: string[];
+  path: string;
+  source: 'local';
+  updatedAt: string;
+}
+
+export interface InstalledSkill {
+  id: string;
+  name: string;
+  folderName: string;
+  version: string;
+  installedAt: string;
+  installedTo: CliType;
+  source: SkillSource;
+  originalId: string;
+  updatesAvailable?: boolean;
+  latestVersion?: string;
+}
+
+export interface RemoteSkillsResponse {
+  success: boolean;
+  data: RemoteSkill[];
+  meta: {
+    version: string;
+    updated_at: string;
+    source: 'github' | 'http' | 'local';
+  };
+  total: number;
+  timestamp: string;
+}
+
+export interface LocalSkillsResponse {
+  success: boolean;
+  data: LocalSkill[];
+  total: number;
+  timestamp: string;
+}
+
+export interface InstalledSkillsResponse {
+  success: boolean;
+  data: InstalledSkill[];
+  total: number;
+  timestamp: string;
+}
+
+export interface SkillInstallRequest {
+  skillId: string;
+  cliType: CliType;
+  source: SkillSource;
+  customName?: string;
+  downloadUrl?: string;
+}
+
+export interface SkillInstallResponse {
+  success: boolean;
+  message: string;
+  installedPath?: string;
+  error?: string;
+}
+
+export interface SkillCacheRequest {
+  skillId: string;
+  downloadUrl: string;
+}
+
+export interface SkillCacheResponse {
+  success: boolean;
+  message: string;
+  path?: string;
+  error?: string;
+}
+
+export interface SkillHubStats {
+  remoteTotal: number;
+  localTotal: number;
+  installedTotal: number;
+  updatesAvailable: number;
+  claudeInstalled: number;
+  codexInstalled: number;
+}
+
+// ============================================================================
+// Query Keys
+// ============================================================================
+
+export const skillHubKeys = {
+  all: ['skill-hub'] as const,
+  remote: () => [...skillHubKeys.all, 'remote'] as const,
+  local: () => [...skillHubKeys.all, 'local'] as const,
+  installed: (checkUpdates?: boolean) => [...skillHubKeys.all, 'installed', checkUpdates] as const,
+  updates: () => [...skillHubKeys.all, 'updates'] as const,
+  stats: () => [...skillHubKeys.all, 'stats'] as const,
+};
+
+// ============================================================================
+// Remote Skills Hook
+// ============================================================================
+
+/**
+ * Fetch remote skills from GitHub/HTTP index
+ */
+export function useRemoteSkills(enabled = true) {
+  return useQuery({
+    queryKey: skillHubKeys.remote(),
+    queryFn: () => fetchApi<RemoteSkillsResponse>('/api/skill-hub/remote'),
+    enabled,
+    staleTime: 5 * 60 * 1000, // 5 minutes
+    refetchOnWindowFocus: false,
+    select: (data) => ({
+      skills: data.data,
+      meta: data.meta,
+      total: data.total,
+    }),
+  });
+}
+
+// ============================================================================
+// Local Skills Hook
+// ============================================================================
+
+/**
+ * Fetch local shared skills
+ */
+export function useLocalSkills(enabled = true) {
+  return useQuery({
+    queryKey: skillHubKeys.local(),
+    queryFn: () => fetchApi<LocalSkillsResponse>('/api/skill-hub/local'),
+    enabled,
+    select: (data) => ({
+      skills: data.data,
+      total: data.total,
+    }),
+  });
+}
+
+// ============================================================================
+// Installed Skills Hook
+// ============================================================================
+
+/**
+ * Fetch installed skills from hub
+ */
+export function useInstalledSkills(options?: { checkUpdates?: boolean; enabled?: boolean }) {
+  const { checkUpdates = false, enabled = true } = options || {};
+
+  return useQuery({
+    queryKey: skillHubKeys.installed(checkUpdates),
+    queryFn: () => {
+      const url = checkUpdates
+        ? '/api/skill-hub/installed?checkUpdates=true'
+        : '/api/skill-hub/installed';
+      return fetchApi<InstalledSkillsResponse>(url);
+    },
+    enabled,
+    select: (data) => ({
+      skills: data.data,
+      total: data.total,
+    }),
+  });
+}
+
+// ============================================================================
+// Updates Check Hook
+// ============================================================================
+
+/**
+ * Check for available updates
+ */
+export function useSkillHubUpdates(enabled = true) {
+  return useQuery({
+    queryKey: skillHubKeys.updates(),
+    queryFn: () => fetchApi<InstalledSkillsResponse>('/api/skill-hub/updates'),
+    enabled,
+    staleTime: 60 * 1000, // 1 minute
+    select: (data) => ({
+      updates: data.data,
+      total: data.total,
+    }),
+  });
+}
+
+// ============================================================================
+// Install Skill Mutation
+// ============================================================================
+
+/**
+ * Install skill mutation
+ */
+export function useInstallSkill() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (request: SkillInstallRequest) =>
+      fetchApi<SkillInstallResponse>('/api/skill-hub/install', {
+        method: 'POST',
+        body: JSON.stringify(request),
+      }),
+    onSuccess: () => {
+      // Invalidate relevant queries
+      queryClient.invalidateQueries({ queryKey: skillHubKeys.installed() });
+      queryClient.invalidateQueries({ queryKey: skillHubKeys.updates() });
+      queryClient.invalidateQueries({ queryKey: skillHubKeys.stats() });
+    },
+  });
+}
+
+// ============================================================================
+// Cache Skill Mutation
+// ============================================================================
+
+/**
+ * Cache remote skill mutation
+ */
+export function useCacheSkill() {
+  return useMutation({
+    mutationFn: (request: SkillCacheRequest) =>
+      fetchApi<SkillCacheResponse>('/api/skill-hub/cache', {
+        method: 'POST',
+        body: JSON.stringify(request),
+      }),
+  });
+}
+
+// ============================================================================
+// Uninstall Skill Mutation
+// ============================================================================
+
+/**
+ * Uninstall skill mutation
+ */
+export function useUninstallSkill() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ skillId, cliType }: { skillId: string; cliType: CliType }) =>
+      fetchApi<{ success: boolean; message: string }>(`/api/skill-hub/installed/${skillId}`, {
+        method: 'DELETE',
+        body: JSON.stringify({ cliType }),
+      }),
+    onSuccess: () => {
+      // Invalidate relevant queries
+      queryClient.invalidateQueries({ queryKey: skillHubKeys.installed() });
+      queryClient.invalidateQueries({ queryKey: skillHubKeys.updates() });
+      queryClient.invalidateQueries({ queryKey: skillHubKeys.stats() });
+    },
+  });
+}
+
+// ============================================================================
+// Stats Hook
+// ============================================================================
+
+/**
+ * Get skill hub statistics
+ * Combines data from multiple endpoints
+ */
+export function useSkillHubStats(enabled = true) {
+  const { data: remoteData } = useRemoteSkills(enabled);
+  const { data: localData } = useLocalSkills(enabled);
+  const { data: installedData } = useInstalledSkills({ checkUpdates: true, enabled });
+
+  return useQuery({
+    queryKey: skillHubKeys.stats(),
+    queryFn: (): SkillHubStats => {
+      const installed = installedData?.skills || [];
+      const updatesAvailable = installed.filter(s => s.updatesAvailable).length;
+      const claudeInstalled = installed.filter(s => s.installedTo === 'claude').length;
+      const codexInstalled = installed.filter(s => s.installedTo === 'codex').length;
+
+      return {
+        remoteTotal: remoteData?.total || 0,
+        localTotal: localData?.total || 0,
+        installedTotal: installed.length,
+        updatesAvailable,
+        claudeInstalled,
+        codexInstalled,
+      };
+    },
+    enabled: enabled && !!remoteData && !!localData && !!installedData,
+    staleTime: 30 * 1000, // 30 seconds
+  });
+}
+
+// ============================================================================
+// Combined Hooks
+// ============================================================================
+
+/**
+ * Combined hook for all skill hub data
+ */
+export function useSkillHub(enabled = true) {
+  const remote = useRemoteSkills(enabled);
+  const local = useLocalSkills(enabled);
+  const installed = useInstalledSkills({ checkUpdates: true, enabled });
+  const stats = useSkillHubStats(enabled && remote.isSuccess && local.isSuccess && installed.isSuccess);
+
+  const isLoading = remote.isLoading || local.isLoading || installed.isLoading;
+  const isError = remote.isError || local.isError || installed.isError;
+  const isFetching = remote.isFetching || local.isFetching || installed.isFetching;
+
+  return {
+    remote,
+    local,
+    installed,
+    stats,
+    isLoading,
+    isError,
+    isFetching,
+    refetchAll: () => {
+      remote.refetch();
+      local.refetch();
+      installed.refetch();
+    },
+  };
+}

ccw/frontend/src/locales/en/index.ts

@@ -40,6 +40,7 @@ import help from './help.json';
 import cliViewer from './cli-viewer.json';
 import team from './team.json';
 import terminalDashboard from './terminal-dashboard.json';
+import skillHub from './skill-hub.json';
 
 /**
  * Flattens nested JSON object to dot-separated keys
@@ -103,4 +104,5 @@ export default {
   ...flattenMessages(cliViewer, 'cliViewer'),
   ...flattenMessages(team, 'team'),
   ...flattenMessages(terminalDashboard, 'terminalDashboard'),
+  ...flattenMessages(skillHub, 'skillHub'),
 } as Record<string, string>;

ccw/frontend/src/locales/en/navigation.json

@@ -36,7 +36,8 @@
     "explorer": "File Explorer",
     "graph": "Graph Explorer",
     "teams": "Team Execution",
-    "terminalDashboard": "Terminal Dashboard"
+    "terminalDashboard": "Terminal Dashboard",
+    "skillHub": "Skill Hub"
   },
   "sidebar": {
     "collapse": "Collapse",

ccw/frontend/src/locales/en/skill-hub.json

@@ -0,0 +1,42 @@
+{
+  "skillHub.title": "Skill Hub",
+  "skillHub.description": "Discover and install shared skills from the community",
+  "skillHub.source.remote": "Remote",
+  "skillHub.source.local": "Local",
+  "skillHub.status.installed": "Installed",
+  "skillHub.status.updateAvailable": "Update Available",
+  "skillHub.tabs.remote": "Remote",
+  "skillHub.tabs.local": "Local",
+  "skillHub.tabs.installed": "Installed",
+  "skillHub.stats.remote": "Remote Skills",
+  "skillHub.stats.remoteDesc": "Available from community",
+  "skillHub.stats.local": "Local Skills",
+  "skillHub.stats.localDesc": "Shared locally",
+  "skillHub.stats.installed": "Installed",
+  "skillHub.stats.installedDesc": "Skills in use",
+  "skillHub.stats.updates": "Updates",
+  "skillHub.stats.updatesDesc": "New versions available",
+  "skillHub.search.placeholder": "Search skills...",
+  "skillHub.filter.allCategories": "All Categories",
+  "skillHub.actions.refresh": "Refresh",
+  "skillHub.actions.install": "Install",
+  "skillHub.actions.installing": "Installing...",
+  "skillHub.actions.update": "Update",
+  "skillHub.actions.uninstall": "Uninstall",
+  "skillHub.actions.viewDetails": "View Details",
+  "skillHub.card.tags": "Tags",
+  "skillHub.card.updated": "Updated: {date}",
+  "skillHub.install.success": "Skill '{name}' installed successfully",
+  "skillHub.install.error": "Failed to install skill: {error}",
+  "skillHub.uninstall.success": "Skill '{name}' uninstalled",
+  "skillHub.uninstall.error": "Failed to uninstall skill: {error}",
+  "skillHub.refresh.success": "Skill list refreshed",
+  "skillHub.details.comingSoon": "Details view coming soon",
+  "skillHub.error.loadFailed": "Failed to load skills. Check network connection.",
+  "skillHub.empty.remote.title": "No Remote Skills",
+  "skillHub.empty.remote.description": "Remote skill repository is empty or unreachable.",
+  "skillHub.empty.local.title": "No Local Skills",
+  "skillHub.empty.local.description": "Add skills to ~/.ccw/skill-hub/local/ to share them.",
+  "skillHub.empty.installed.title": "No Installed Skills",
+  "skillHub.empty.installed.description": "Install skills from Remote or Local tabs to use them."
+}

ccw/frontend/src/locales/en/skills.json

@@ -10,7 +10,8 @@
   },
   "location": {
     "project": "Project",
-    "user": "Global"
+    "user": "Global",
+    "hub": "Hub"
   },
   "source": {
     "builtin": "Built-in",

ccw/frontend/src/locales/zh/index.ts

@@ -40,6 +40,7 @@ import help from './help.json';
 import cliViewer from './cli-viewer.json';
 import team from './team.json';
 import terminalDashboard from './terminal-dashboard.json';
+import skillHub from './skill-hub.json';
 
 /**
  * Flattens nested JSON object to dot-separated keys
@@ -103,4 +104,5 @@ export default {
   ...flattenMessages(cliViewer, 'cliViewer'),
   ...flattenMessages(team, 'team'),
   ...flattenMessages(terminalDashboard, 'terminalDashboard'),
+  ...flattenMessages(skillHub, 'skillHub'),
 } as Record<string, string>;

ccw/frontend/src/locales/zh/navigation.json

@@ -36,7 +36,8 @@
     "explorer": "文件浏览器",
     "graph": "图浏览器",
     "teams": "团队执行",
-    "terminalDashboard": "终端仪表板"
+    "terminalDashboard": "终端仪表板",
+    "skillHub": "技能中心"
   },
   "sidebar": {
     "collapse": "收起",

ccw/frontend/src/locales/zh/skill-hub.json

@@ -0,0 +1,42 @@
+{
+  "skillHub.title": "技能中心",
+  "skillHub.description": "发现并安装社区共享的技能",
+  "skillHub.source.remote": "远程",
+  "skillHub.source.local": "本地",
+  "skillHub.status.installed": "已安装",
+  "skillHub.status.updateAvailable": "有更新",
+  "skillHub.tabs.remote": "远程",
+  "skillHub.tabs.local": "本地",
+  "skillHub.tabs.installed": "已安装",
+  "skillHub.stats.remote": "远程技能",
+  "skillHub.stats.remoteDesc": "来自社区",
+  "skillHub.stats.local": "本地技能",
+  "skillHub.stats.localDesc": "本地共享",
+  "skillHub.stats.installed": "已安装",
+  "skillHub.stats.installedDesc": "使用中的技能",
+  "skillHub.stats.updates": "更新",
+  "skillHub.stats.updatesDesc": "有新版本可用",
+  "skillHub.search.placeholder": "搜索技能...",
+  "skillHub.filter.allCategories": "全部分类",
+  "skillHub.actions.refresh": "刷新",
+  "skillHub.actions.install": "安装",
+  "skillHub.actions.installing": "安装中...",
+  "skillHub.actions.update": "更新",
+  "skillHub.actions.uninstall": "卸载",
+  "skillHub.actions.viewDetails": "查看详情",
+  "skillHub.card.tags": "标签",
+  "skillHub.card.updated": "更新于: {date}",
+  "skillHub.install.success": "技能 '{name}' 安装成功",
+  "skillHub.install.error": "安装技能失败: {error}",
+  "skillHub.uninstall.success": "技能 '{name}' 已卸载",
+  "skillHub.uninstall.error": "卸载技能失败: {error}",
+  "skillHub.refresh.success": "技能列表已刷新",
+  "skillHub.details.comingSoon": "详情视图即将推出",
+  "skillHub.error.loadFailed": "加载技能失败。请检查网络连接。",
+  "skillHub.empty.remote.title": "暂无远程技能",
+  "skillHub.empty.remote.description": "远程技能仓库为空或无法访问。",
+  "skillHub.empty.local.title": "暂无本地技能",
+  "skillHub.empty.local.description": "将技能添加到 ~/.ccw/skill-hub/local/ 即可共享。",
+  "skillHub.empty.installed.title": "暂无已安装技能",
+  "skillHub.empty.installed.description": "从远程或本地标签页安装技能以使用它们。"
+}

ccw/frontend/src/locales/zh/skills.json

@@ -10,7 +10,8 @@
   },
   "location": {
     "project": "项目",
-    "user": "全局"
+    "user": "全局",
+    "hub": "仓库"
   },
   "source": {
     "builtin": "内置",

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

ccw/frontend/src/router.tsx

@@ -173,6 +173,10 @@ const routes: RouteObject[] = [
         path: 'terminal-dashboard',
         element: <TerminalDashboardPage />,
       },
+      {
+        path: 'skill-hub',
+        element: <Navigate to="/skills?tab=hub" replace />,
+      },
       // Catch-all route for 404
       {
         path: '*',
@@ -229,6 +233,7 @@ export const ROUTES = {
   GRAPH: '/graph',
   TEAMS: '/teams',
   TERMINAL_DASHBOARD: '/terminal-dashboard',
+  SKILL_HUB: '/skill-hub',
 } as const;
 
 export type RoutePath = (typeof ROUTES)[keyof typeof ROUTES];

ccw/src/cli.ts

@@ -2,7 +2,7 @@ import { Command } from 'commander';
 import { viewCommand } from './commands/view.js';
 import { serveCommand } from './commands/serve.js';
 import { stopCommand } from './commands/stop.js';
-import { installCommand } from './commands/install.js';
+import { installCommand, installSkillHubCommand } from './commands/install.js';
 import { uninstallCommand } from './commands/uninstall.js';
 import { upgradeCommand } from './commands/upgrade.js';
 import { listCommand } from './commands/list.js';
@@ -115,7 +115,21 @@ export function run(argv: string[]): void {
     .option('-m, --mode <mode>', 'Installation mode: Global or Path')
     .option('-p, --path <path>', 'Installation path (for Path mode)')
     .option('-f, --force', 'Force installation without prompts')
-    .action(installCommand);
+    .option('--skill-hub [skillId]', 'Install skill from skill-hub (use --list to see available)')
+    .option('--cli <type>', 'Target CLI for skill installation (claude or codex)', 'claude')
+    .option('--list', 'List available skills in skill-hub')
+    .action((options) => {
+      // If skill-hub option is used, route to skill hub command
+      if (options.skillHub !== undefined || options.list) {
+        return installSkillHubCommand({
+          skillId: typeof options.skillHub === 'string' ? options.skillHub : undefined,
+          cliType: options.cli,
+          list: options.list,
+        });
+      }
+      // Otherwise use normal install
+      return installCommand(options);
+    });
 
   // Uninstall command
   program

ccw/src/commands/install.ts

@@ -963,3 +963,231 @@ function getVersion(): string {
     return '1.0.0';
   }
 }
+
+// ========================================
+// Skill Hub Installation Functions
+// ========================================
+
+/**
+ * Options for skill-hub installation
+ */
+interface SkillHubInstallOptions {
+  skillId?: string;
+  cliType?: 'claude' | 'codex';
+  list?: boolean;
+}
+
+/**
+ * Skill hub index entry
+ */
+interface SkillHubEntry {
+  id: string;
+  name: string;
+  description: string;
+  version: string;
+  author: string;
+  category: string;
+  downloadUrl: string;
+}
+
+/**
+ * Get skill-hub directory path
+ */
+function getSkillHubDir(): string {
+  return join(homedir(), '.ccw', 'skill-hub');
+}
+
+/**
+ * Get local skills directory
+ */
+function getLocalSkillsDir(): string {
+  return join(getSkillHubDir(), 'local');
+}
+
+/**
+ * Parse skill frontmatter from SKILL.md content
+ */
+function parseSkillFrontmatter(content: string): {
+  name: string;
+  description: string;
+  version: string;
+} {
+  const result = { name: '', description: '', version: '1.0.0' };
+
+  if (content.startsWith('---')) {
+    const endIndex = content.indexOf('---', 3);
+    if (endIndex > 0) {
+      const frontmatter = content.substring(3, endIndex).trim();
+      const lines = frontmatter.split('\n');
+
+      for (const line of lines) {
+        const colonIndex = line.indexOf(':');
+        if (colonIndex > 0) {
+          const key = line.substring(0, colonIndex).trim().toLowerCase();
+          const value = line.substring(colonIndex + 1).trim().replace(/^["']|["']$/g, '');
+
+          if (key === 'name') result.name = value;
+          if (key === 'description') result.description = value;
+          if (key === 'version') result.version = value;
+        }
+      }
+    }
+  }
+
+  return result;
+}
+
+/**
+ * List available skills from local skill-hub
+ */
+function listLocalSkillHubSkills(): Array<{ id: string; name: string; description: string; version: string; path: string }> {
+  const result: Array<{ id: string; name: string; description: string; version: string; path: string }> = [];
+  const localDir = getLocalSkillsDir();
+
+  if (!existsSync(localDir)) {
+    return result;
+  }
+
+  try {
+    const entries = readdirSync(localDir, { withFileTypes: true });
+
+    for (const entry of entries) {
+      if (!entry.isDirectory()) continue;
+
+      const skillDir = join(localDir, entry.name);
+      const skillMdPath = join(skillDir, 'SKILL.md');
+
+      if (!existsSync(skillMdPath)) continue;
+
+      try {
+        const content = readFileSync(skillMdPath, 'utf8');
+        const parsed = parseSkillFrontmatter(content);
+
+        result.push({
+          id: `local-${entry.name}`,
+          name: parsed.name || entry.name,
+          description: parsed.description || '',
+          version: parsed.version || '1.0.0',
+          path: skillDir,
+        });
+      } catch {
+        // Skip invalid skills
+      }
+    }
+  } catch (error) {
+    console.error('Failed to list local skills:', error);
+  }
+
+  return result;
+}
+
+/**
+ * Install a skill from skill-hub to CLI skills directory
+ */
+async function installSkillFromHub(
+  skillId: string,
+  cliType: 'claude' | 'codex'
+): Promise<{ success: boolean; message: string }> {
+  // Only support local skills for now
+  if (!skillId.startsWith('local-')) {
+    return {
+      success: false,
+      message: 'Only local skills are supported in CLI. Use the web dashboard for remote skills.',
+    };
+  }
+
+  const skillName = skillId.replace('local-', '');
+  const localDir = getLocalSkillsDir();
+  const skillDir = join(localDir, skillName);
+
+  if (!existsSync(skillDir)) {
+    return { success: false, message: `Skill '${skillName}' not found in local skill-hub` };
+  }
+
+  // Get target directory
+  const cliDir = cliType === 'codex' ? '.codex' : '.claude';
+  const targetDir = join(homedir(), cliDir, 'skills', skillName);
+
+  // Check if already exists
+  if (existsSync(targetDir)) {
+    return { success: false, message: `Skill '${skillName}' already installed to ${cliType}` };
+  }
+
+  // Create target parent directory
+  const targetParent = join(homedir(), cliDir, 'skills');
+  if (!existsSync(targetParent)) {
+    mkdirSync(targetParent, { recursive: true });
+  }
+
+  // Copy skill directory
+  try {
+    cpSync(skillDir, targetDir, { recursive: true });
+    return { success: true, message: `Skill '${skillName}' installed to ${cliType}` };
+  } catch (error) {
+    return { success: false, message: `Failed to install: ${(error as Error).message}` };
+  }
+}
+
+/**
+ * Skill Hub installation command
+ */
+export async function installSkillHubCommand(options: SkillHubInstallOptions): Promise<void> {
+  const version = getVersion();
+  showHeader(version);
+
+  // List mode
+  if (options.list) {
+    const skills = listLocalSkillHubSkills();
+
+    if (skills.length === 0) {
+      info('No local skills found in skill-hub');
+      info(`Add skills to: ${getLocalSkillsDir()}`);
+      return;
+    }
+
+    info(`Found ${skills.length} local skills in skill-hub:`);
+    console.log('');
+
+    for (const skill of skills) {
+      console.log(chalk.cyan(`  ${skill.id}`));
+      console.log(chalk.gray(`    Name: ${skill.name}`));
+      console.log(chalk.gray(`    Version: ${skill.version}`));
+      if (skill.description) {
+        console.log(chalk.gray(`    Description: ${skill.description}`));
+      }
+      console.log('');
+    }
+
+    info('To install a skill:');
+    console.log(chalk.gray('  ccw install --skill-hub local-skill-name --cli claude'));
+    return;
+  }
+
+  // Install mode
+  if (options.skillId) {
+    const cliType = options.cliType || 'claude';
+
+    const spinner = createSpinner(`Installing skill '${options.skillId}' to ${cliType}...`).start();
+
+    const result = await installSkillFromHub(options.skillId, cliType as 'claude' | 'codex');
+
+    if (result.success) {
+      spinner.succeed(result.message);
+    } else {
+      spinner.fail(result.message);
+    }
+    return;
+  }
+
+  // No options - show help
+  info('Skill Hub Installation');
+  console.log('');
+  console.log(chalk.gray('Usage:'));
+  console.log(chalk.cyan('  ccw install --skill-hub --list') + chalk.gray('              List available local skills'));
+  console.log(chalk.cyan('  ccw install --skill-hub <id> --cli <type>') + chalk.gray('  Install a skill'));
+  console.log('');
+  console.log(chalk.gray('Options:'));
+  console.log(chalk.gray('  --skill-hub, --skill    Skill ID to install'));
+  console.log(chalk.gray('  --cli                   Target CLI (claude or codex, default: claude)'));
+  console.log(chalk.gray('  --list                  List available skills'));
+}

ccw/src/core/server.ts

@@ -18,6 +18,7 @@ import { handleGraphRoutes } from './routes/graph-routes.js';
 import { handleSystemRoutes } from './routes/system-routes.js';
 import { handleFilesRoutes } from './routes/files-routes.js';
 import { handleSkillsRoutes } from './routes/skills-routes.js';
+import { handleSkillHubRoutes } from './routes/skill-hub-routes.js';
 import { handleCommandsRoutes } from './routes/commands-routes.js';
 import { handleIssueRoutes } from './routes/issue-routes.js';
 import { handleDiscoveryRoutes } from './routes/discovery-routes.js';
@@ -564,6 +565,11 @@ export async function startServer(options: ServerOptions = {}): Promise<http.Ser
         if (await handleSkillsRoutes(routeContext)) return;
       }
 
+      // Skill Hub routes (/api/skill-hub*)
+      if (pathname.startsWith('/api/skill-hub')) {
+        if (await handleSkillHubRoutes(routeContext)) return;
+      }
+
       // Commands routes (/api/commands*)
       if (pathname.startsWith('/api/commands')) {
         if (await handleCommandsRoutes(routeContext)) return;

codex-lens/tests/test_cli_hybrid_search.py

@@ -20,12 +20,14 @@ class TestCLIHybridSearch:
         for mode in valid_modes:
             result = runner.invoke(app, ["search", "test", "--mode", mode])
             # Should fail due to no index, not due to invalid mode
-            assert "Invalid mode" not in result.output
+            # Note: CLI now shows deprecation warning for --mode, use --method instead
+            assert "Invalid" not in result.output or "deprecated" in result.output.lower()
 
         # Invalid mode should fail
         result = runner.invoke(app, ["search", "test", "--mode", "invalid"])
         assert result.exit_code == 1
-        assert "Invalid mode" in result.output
+        # CLI now shows "Invalid deprecated mode:" instead of "Invalid mode"
+        assert "Invalid" in result.output and "mode" in result.output.lower()
 
     def test_weights_parameter_parsing(self, runner):
         """Test --weights parameter parses and validates correctly."""
@@ -60,14 +62,12 @@ class TestCLIHybridSearch:
             pass
 
     def test_search_help_shows_modes(self, runner):
-        """Test search --help displays all available modes."""
+        """Test search --help displays all available methods."""
         result = runner.invoke(app, ["search", "--help"])
         assert result.exit_code == 0
-        assert "exact" in result.output
-        assert "fuzzy" in result.output
-        assert "hybrid" in result.output
-        assert "vector" in result.output
-        assert "RRF fusion" in result.output
+        # CLI now uses --method with: dense_rerank, fts, hybrid, cascade
+        assert "dense_rerank" in result.output or "fts" in result.output
+        assert "method" in result.output.lower()
 
     def test_migrate_command_exists(self, runner):
         """Test migrate command is registered and accessible."""