diff --git a/server/routes/commands.js b/server/routes/commands.js
index 544673495..7f62c2abc 100644
--- a/server/routes/commands.js
+++ b/server/routes/commands.js
@@ -5,12 +5,57 @@ import { fileURLToPath } from 'url';
 import os from 'os';
 import matter from 'gray-matter';
 import { CLAUDE_MODELS, CURSOR_MODELS, CODEX_MODELS } from '../../shared/modelConstants.js';
+import { loadSkillsList } from '../utils/loadSkillsList.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 const router = express.Router();
 
+const providerToAgentMap = {
+  claude: 'claude-code',
+  cursor: 'cursor',
+  codex: 'codex',
+};
+
+const skillsCache = new Map();
+
+function normalizeSkills(skills, provider, agent) {
+  return skills
+    .filter((skill) => skill && typeof skill === 'object' && typeof skill.name === 'string' && skill.name.trim().length > 0)
+    .map((skill) => ({
+      name: skill.name.startsWith('/') ? skill.name : `/${skill.name}`,
+      description: typeof skill.description === 'string' ? skill.description : '',
+      namespace: 'skills',
+      type: 'skill',
+      metadata: {
+        ...skill,
+        skillName: skill.name,
+        provider,
+        agent,
+        type: 'skill',
+      },
+    }));
+}
+
+function getSkillsForProvider({ provider = 'claude', forceReloadSkills = false }) {
+  const mappedAgent = providerToAgentMap[provider] || providerToAgentMap.claude;
+
+  if (!forceReloadSkills && skillsCache.has(mappedAgent)) {
+    return skillsCache.get(mappedAgent);
+  }
+
+  try {
+    const skills = loadSkillsList(mappedAgent);
+    const normalizedSkills = normalizeSkills(skills, provider, mappedAgent);
+    skillsCache.set(mappedAgent, normalizedSkills);
+    return normalizedSkills;
+  } catch (error) {
+    console.error('Error loading skills list:', error);
+    return [];
+  }
+}
+
 /**
  * Recursively scan directory for command files (.md)
  * @param {string} dir - Directory to scan
@@ -405,7 +450,12 @@ Custom commands can be created in:
  */
 router.post('/list', async (req, res) => {
   try {
-    const { projectPath } = req.body;
+    const {
+      projectPath,
+      provider = 'claude',
+      includeSkills = true,
+      forceReloadSkills = false,
+    } = req.body;
     const allCommands = [...builtInCommands];
 
     // Scan project-level commands (.claude/commands/)
@@ -435,10 +485,15 @@ router.post('/list', async (req, res) => {
     // Sort commands alphabetically by name
     customCommands.sort((a, b) => a.name.localeCompare(b.name));
 
+    const skills = includeSkills
+      ? getSkillsForProvider({ provider, forceReloadSkills })
+      : [];
+
     res.json({
       builtIn: builtInCommands,
       custom: customCommands,
-      count: allCommands.length
+      skills,
+      count: allCommands.length + skills.length
     });
   } catch (error) {
     console.error('Error listing commands:', error);
diff --git a/server/utils/loadSkillsList.js b/server/utils/loadSkillsList.js
new file mode 100644
index 000000000..697f1b8cc
--- /dev/null
+++ b/server/utils/loadSkillsList.js
@@ -0,0 +1,462 @@
+import matter from 'gray-matter';
+import { homedir, platform } from 'os';
+import { join } from 'path';
+import { existsSync, readdirSync, readFileSync } from 'fs'
+
+/**
+ * Configs stolen from https://github.com/vercel-labs/skills/blob/main/src/agents.ts
+ */
+function findConfigHome() {
+  switch (platform()) {
+    case "win32":
+    case "darwin":
+      return join(home, '.config');
+  }
+
+  // Use xdg-basedir (not env-paths) to match OpenCode/Amp/Goose behavior on all platforms.
+  if (process.env.XDG_CONFIG_HOME) return process.env.XDG_CONFIG_HOME
+
+  return join(home, '.config')
+}
+
+const home = homedir();
+const configHome = findConfigHome();
+const codexHome = process.env.CODEX_HOME?.trim() || join(home, '.codex');
+const claudeHome = process.env.CLAUDE_CONFIG_DIR?.trim() || join(home, '.claude');
+
+/**
+ * // from npm:skills/src/types.d.ts@AgentType
+ * @typedef {(
+ *   'claude-code' |
+ *   'codex' |
+ *   'cursor'
+ * )} AgentType
+ */
+
+const agents = {
+  // amp: {
+  //   name: 'amp',
+  //   displayName: 'Amp',
+  //   skillsDir: '.agents/skills',
+  //   globalSkillsDir: join(configHome, 'agents/skills'),
+  //   detectInstalled: async () => {
+  //     return existsSync(join(configHome, 'amp'));
+  //   },
+  // },
+  // antigravity: {
+  //   name: 'antigravity',
+  //   displayName: 'Antigravity',
+  //   skillsDir: '.agent/skills',
+  //   globalSkillsDir: join(home, '.gemini/antigravity/skills'),
+  //   detectInstalled: async () => {
+  //     return existsSync(join(home, '.gemini/antigravity'));
+  //   },
+  // },
+  // augment: {
+  //   name: 'augment',
+  //   displayName: 'Augment',
+  //   skillsDir: '.augment/skills',
+  //   globalSkillsDir: join(home, '.augment/skills'),
+  //   detectInstalled: async () => {
+  //     return existsSync(join(home, '.augment'));
+  //   },
+  // },
+  'claude-code': {
+    name: 'claude-code',
+    displayName: 'Claude Code',
+    skillsDir: '.claude/skills',
+    globalSkillsDir: join(claudeHome, 'skills'),
+    detectInstalled: async () => {
+      return existsSync(claudeHome);
+    },
+  },
+  // openclaw: {
+  //   name: 'openclaw',
+  //   displayName: 'OpenClaw',
+  //   skillsDir: 'skills',
+  //   globalSkillsDir: getOpenClawGlobalSkillsDir(),
+  //   detectInstalled: async () => {
+  //     return (
+  //       existsSync(join(home, '.openclaw')) ||
+  //       existsSync(join(home, '.clawdbot')) ||
+  //       existsSync(join(home, '.moltbot'))
+  //     );
+  //   },
+  // },
+  // cline: {
+  //   name: 'cline',
+  //   displayName: 'Cline',
+  //   skillsDir: '.agents/skills',
+  //   globalSkillsDir: join(home, '.agents', 'skills'),
+  //   detectInstalled: async () => {
+  //     return existsSync(join(home, '.cline'));
+  //   },
+  // },
+  // codebuddy: {
+  //   name: 'codebuddy',
+  //   displayName: 'CodeBuddy',
+  //   skillsDir: '.codebuddy/skills',
+  //   globalSkillsDir: join(home, '.codebuddy/skills'),
+  //   detectInstalled: async () => {
+  //     return existsSync(join(process.cwd(), '.codebuddy')) || existsSync(join(home, '.codebuddy'));
+  //   },
+  // },
+  codex: {
+    name: 'codex',
+    displayName: 'Codex',
+    skillsDir: '.agents/skills',
+    globalSkillsDir: join(codexHome, 'skills'),
+    detectInstalled: async () => {
+      return existsSync(codexHome) || existsSync('/etc/codex');
+    },
+  },
+  // 'command-code': {
+  //   name: 'command-code',
+  //   displayName: 'Command Code',
+  //   skillsDir: '.commandcode/skills',
+  //   globalSkillsDir: join(home, '.commandcode/skills'),
+  //   detectInstalled: async () => {
+  //     return existsSync(join(home, '.commandcode'));
+  //   },
+  // },
+  // continue: {
+  //   name: 'continue',
+  //   displayName: 'Continue',
+  //   skillsDir: '.continue/skills',
+  //   globalSkillsDir: join(home, '.continue/skills'),
+  //   detectInstalled: async () => {
+  //     return existsSync(join(process.cwd(), '.continue')) || existsSync(join(home, '.continue'));
+  //   },
+  // },
+  // cortex: {
+  //   name: 'cortex',
+  //   displayName: 'Cortex Code',
+  //   skillsDir: '.cortex/skills',
+  //   globalSkillsDir: join(home, '.snowflake/cortex/skills'),
+  //   detectInstalled: async () => {
+  //     return existsSync(join(home, '.snowflake/cortex'));
+  //   },
+  // },
+  // crush: {
+  //   name: 'crush',
+  //   displayName: 'Crush',
+  //   skillsDir: '.crush/skills',
+  //   globalSkillsDir: join(home, '.config/crush/skills'),
+  //   detectInstalled: async () => {
+  //     return existsSync(join(home, '.config/crush'));
+  //   },
+  // },
+  cursor: {
+    name: 'cursor',
+    displayName: 'Cursor',
+    skillsDir: '.agents/skills',
+    globalSkillsDir: join(home, '.cursor/skills'),
+    detectInstalled: async () => {
+      return existsSync(join(home, '.cursor'));
+    },
+  },
+  // droid: {
+  //   name: 'droid',
+  //   displayName: 'Droid',
+  //   skillsDir: '.factory/skills',
+  //   globalSkillsDir: join(home, '.factory/skills'),
+  //   detectInstalled: async () => {
+  //     return existsSync(join(home, '.factory'));
+  //   },
+  // },
+  // 'gemini-cli': {
+  //   name: 'gemini-cli',
+  //   displayName: 'Gemini CLI',
+  //   skillsDir: '.agents/skills',
+  //   globalSkillsDir: join(home, '.gemini/skills'),
+  //   detectInstalled: async () => {
+  //     return existsSync(join(home, '.gemini'));
+  //   },
+  // },
+  // 'github-copilot': {
+  //   name: 'github-copilot',
+  //   displayName: 'GitHub Copilot',
+  //   skillsDir: '.agents/skills',
+  //   globalSkillsDir: join(home, '.copilot/skills'),
+  //   detectInstalled: async () => {
+  //     return existsSync(join(home, '.copilot'));
+  //   },
+  // },
+  // goose: {
+  //   name: 'goose',
+  //   displayName: 'Goose',
+  //   skillsDir: '.goose/skills',
+  //   globalSkillsDir: join(configHome, 'goose/skills'),
+  //   detectInstalled: async () => {
+  //     return existsSync(join(configHome, 'goose'));
+  //   },
+  // },
+  // junie: {
+  //   name: 'junie',
+  //   displayName: 'Junie',
+  //   skillsDir: '.junie/skills',
+  //   globalSkillsDir: join(home, '.junie/skills'),
+  //   detectInstalled: async () => {
+  //     return existsSync(join(home, '.junie'));
+  //   },
+  // },
+  // 'iflow-cli': {
+  //   name: 'iflow-cli',
+  //   displayName: 'iFlow CLI',
+  //   skillsDir: '.iflow/skills',
+  //   globalSkillsDir: join(home, '.iflow/skills'),
+  //   detectInstalled: async () => {
+  //     return existsSync(join(home, '.iflow'));
+  //   },
+  // },
+  // kilo: {
+  //   name: 'kilo',
+  //   displayName: 'Kilo Code',
+  //   skillsDir: '.kilocode/skills',
+  //   globalSkillsDir: join(home, '.kilocode/skills'),
+  //   detectInstalled: async () => {
+  //     return existsSync(join(home, '.kilocode'));
+  //   },
+  // },
+  // 'kimi-cli': {
+  //   name: 'kimi-cli',
+  //   displayName: 'Kimi Code CLI',
+  //   skillsDir: '.agents/skills',
+  //   globalSkillsDir: join(home, '.config/agents/skills'),
+  //   detectInstalled: async () => {
+  //     return existsSync(join(home, '.kimi'));
+  //   },
+  // },
+  // 'kiro-cli': {
+  //   name: 'kiro-cli',
+  //   displayName: 'Kiro CLI',
+  //   skillsDir: '.kiro/skills',
+  //   globalSkillsDir: join(home, '.kiro/skills'),
+  //   detectInstalled: async () => {
+  //     return existsSync(join(home, '.kiro'));
+  //   },
+  // },
+  // kode: {
+  //   name: 'kode',
+  //   displayName: 'Kode',
+  //   skillsDir: '.kode/skills',
+  //   globalSkillsDir: join(home, '.kode/skills'),
+  //   detectInstalled: async () => {
+  //     return existsSync(join(home, '.kode'));
+  //   },
+  // },
+  // mcpjam: {
+  //   name: 'mcpjam',
+  //   displayName: 'MCPJam',
+  //   skillsDir: '.mcpjam/skills',
+  //   globalSkillsDir: join(home, '.mcpjam/skills'),
+  //   detectInstalled: async () => {
+  //     return existsSync(join(home, '.mcpjam'));
+  //   },
+  // },
+  // 'mistral-vibe': {
+  //   name: 'mistral-vibe',
+  //   displayName: 'Mistral Vibe',
+  //   skillsDir: '.vibe/skills',
+  //   globalSkillsDir: join(home, '.vibe/skills'),
+  //   detectInstalled: async () => {
+  //     return existsSync(join(home, '.vibe'));
+  //   },
+  // },
+  // mux: {
+  //   name: 'mux',
+  //   displayName: 'Mux',
+  //   skillsDir: '.mux/skills',
+  //   globalSkillsDir: join(home, '.mux/skills'),
+  //   detectInstalled: async () => {
+  //     return existsSync(join(home, '.mux'));
+  //   },
+  // },
+  // opencode: {
+  //   name: 'opencode',
+  //   displayName: 'OpenCode',
+  //   skillsDir: '.agents/skills',
+  //   globalSkillsDir: join(configHome, 'opencode/skills'),
+  //   detectInstalled: async () => {
+  //     return existsSync(join(configHome, 'opencode'));
+  //   },
+  // },
+  // openhands: {
+  //   name: 'openhands',
+  //   displayName: 'OpenHands',
+  //   skillsDir: '.openhands/skills',
+  //   globalSkillsDir: join(home, '.openhands/skills'),
+  //   detectInstalled: async () => {
+  //     return existsSync(join(home, '.openhands'));
+  //   },
+  // },
+  // pi: {
+  //   name: 'pi',
+  //   displayName: 'Pi',
+  //   skillsDir: '.pi/skills',
+  //   globalSkillsDir: join(home, '.pi/agent/skills'),
+  //   detectInstalled: async () => {
+  //     return existsSync(join(home, '.pi/agent'));
+  //   },
+  // },
+  // qoder: {
+  //   name: 'qoder',
+  //   displayName: 'Qoder',
+  //   skillsDir: '.qoder/skills',
+  //   globalSkillsDir: join(home, '.qoder/skills'),
+  //   detectInstalled: async () => {
+  //     return existsSync(join(home, '.qoder'));
+  //   },
+  // },
+  // 'qwen-code': {
+  //   name: 'qwen-code',
+  //   displayName: 'Qwen Code',
+  //   skillsDir: '.qwen/skills',
+  //   globalSkillsDir: join(home, '.qwen/skills'),
+  //   detectInstalled: async () => {
+  //     return existsSync(join(home, '.qwen'));
+  //   },
+  // },
+  // replit: {
+  //   name: 'replit',
+  //   displayName: 'Replit',
+  //   skillsDir: '.agents/skills',
+  //   globalSkillsDir: join(configHome, 'agents/skills'),
+  //   showInUniversalList: false,
+  //   detectInstalled: async () => {
+  //     return existsSync(join(process.cwd(), '.replit'));
+  //   },
+  // },
+  // roo: {
+  //   name: 'roo',
+  //   displayName: 'Roo Code',
+  //   skillsDir: '.roo/skills',
+  //   globalSkillsDir: join(home, '.roo/skills'),
+  //   detectInstalled: async () => {
+  //     return existsSync(join(home, '.roo'));
+  //   },
+  // },
+  // trae: {
+  //   name: 'trae',
+  //   displayName: 'Trae',
+  //   skillsDir: '.trae/skills',
+  //   globalSkillsDir: join(home, '.trae/skills'),
+  //   detectInstalled: async () => {
+  //     return existsSync(join(home, '.trae'));
+  //   },
+  // },
+  // 'trae-cn': {
+  //   name: 'trae-cn',
+  //   displayName: 'Trae CN',
+  //   skillsDir: '.trae/skills',
+  //   globalSkillsDir: join(home, '.trae-cn/skills'),
+  //   detectInstalled: async () => {
+  //     return existsSync(join(home, '.trae-cn'));
+  //   },
+  // },
+  // windsurf: {
+  //   name: 'windsurf',
+  //   displayName: 'Windsurf',
+  //   skillsDir: '.windsurf/skills',
+  //   globalSkillsDir: join(home, '.codeium/windsurf/skills'),
+  //   detectInstalled: async () => {
+  //     return existsSync(join(home, '.codeium/windsurf'));
+  //   },
+  // },
+  // zencoder: {
+  //   name: 'zencoder',
+  //   displayName: 'Zencoder',
+  //   skillsDir: '.zencoder/skills',
+  //   globalSkillsDir: join(home, '.zencoder/skills'),
+  //   detectInstalled: async () => {
+  //     return existsSync(join(home, '.zencoder'));
+  //   },
+  // },
+  // neovate: {
+  //   name: 'neovate',
+  //   displayName: 'Neovate',
+  //   skillsDir: '.neovate/skills',
+  //   globalSkillsDir: join(home, '.neovate/skills'),
+  //   detectInstalled: async () => {
+  //     return existsSync(join(home, '.neovate'));
+  //   },
+  // },
+  // pochi: {
+  //   name: 'pochi',
+  //   displayName: 'Pochi',
+  //   skillsDir: '.pochi/skills',
+  //   globalSkillsDir: join(home, '.pochi/skills'),
+  //   detectInstalled: async () => {
+  //     return existsSync(join(home, '.pochi'));
+  //   },
+  // },
+  // adal: {
+  //   name: 'adal',
+  //   displayName: 'AdaL',
+  //   skillsDir: '.adal/skills',
+  //   globalSkillsDir: join(home, '.adal/skills'),
+  //   detectInstalled: async () => {
+  //     return existsSync(join(home, '.adal'));
+  //   },
+  // },
+  // universal: {
+  //   name: 'universal',
+  //   displayName: 'Universal',
+  //   skillsDir: '.agents/skills',
+  //   globalSkillsDir: join(configHome, 'agents/skills'),
+  //   showInUniversalList: false,
+  //   detectInstalled: async () => false,
+  // },
+};
+
+/** @param {AgentType} agentName */
+export function loadSkillsList(agentName) {
+  const loadedSkills = [];
+
+  const agentConfig = agents[agentName];
+  if (!agentConfig) return loadedSkills;
+
+  const skillsDirs = [];
+  if (agentConfig.globalSkillsDir) skillsDirs.push(agentConfig.globalSkillsDir);
+  if (agentConfig.skillsDir) skillsDirs.push(agentConfig.skillsDir);
+
+  /**
+   * TODO: skipped
+   * Stolen from vercel-labs/skills
+   * - `skillsDir/`
+   * - `skillsDir/.curated/`
+   * - `skillsDir/.experimental/`
+   * - `skillsDir/.system/`
+   */
+  const subSkillsDir = [
+    '.',
+    // '.curated',
+    // '.experimental',
+    // '.system'
+  ];
+  for (const skillsDir of skillsDirs) {
+    for (const subDir of subSkillsDir) {
+      const fullSkillsDir = join(skillsDir, subDir);
+      if (!existsSync(fullSkillsDir)) continue;
+
+      for (const f of readdirSync(fullSkillsDir)) {
+        const skillDir = join(fullSkillsDir, f)
+        // find /SKILL.md files in skillDir
+        const skillFileMdPath = join(skillDir, 'SKILL.md');
+        if (!existsSync(skillFileMdPath)) continue;
+
+        const fileContents = readFileSync(skillFileMdPath, 'utf-8');
+        const { data } = matter(fileContents);
+        if (!data.name) continue;
+
+        // TODO: handle `.user-invocable`, `.disable-model-invocation`?
+        loadedSkills.push({
+          ...data,
+          skillDir,
+        })
+      }
+    }
+  }
+
+  return loadedSkills;
+}
diff --git a/src/components/QuickSettingsPanel.jsx b/src/components/QuickSettingsPanel.jsx
index fc69d4926..6ec9f4178 100644
--- a/src/components/QuickSettingsPanel.jsx
+++ b/src/components/QuickSettingsPanel.jsx
@@ -13,7 +13,8 @@ import {
   Sparkles,
   FileText,
   Languages,
-  GripVertical
+  GripVertical,
+  RefreshCw
 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import DarkModeToggle from './DarkModeToggle';
@@ -25,12 +26,13 @@ import LanguageSelector from './LanguageSelector';
 import { useDeviceSettings } from '../hooks/useDeviceSettings';
 
 
-const QuickSettingsPanel = () => {
+const QuickSettingsPanel = ({ provider, reloadSkillsForProvider }) => {
   const { t } = useTranslation('settings');
   const [isOpen, setIsOpen] = useState(false);
   const [whisperMode, setWhisperMode] = useState(() => {
     return localStorage.getItem('whisperMode') || 'default';
   });
+  const [isReloadingSkills, setIsReloadingSkills] = useState(false);
   const { isDarkMode } = useTheme();
 
   const { isMobile } = useDeviceSettings({ trackPWA: false });
@@ -201,6 +203,19 @@ const QuickSettingsPanel = () => {
     setIsOpen((previous) => !previous);
   };
 
+  const handleReloadSkills = async () => {
+    if (isReloadingSkills || !reloadSkillsForProvider || !provider) {
+      return;
+    }
+
+    setIsReloadingSkills(true);
+    try {
+      await reloadSkillsForProvider(provider);
+    } finally {
+      setTimeout(() => setIsReloadingSkills(false), 500);
+    }
+  };
+
   return (
     <>
       {/* Pull Tab - Combined drag handle and toggle button */}
@@ -312,6 +327,19 @@ const QuickSettingsPanel = () => {
                   className="h-4 w-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 focus:ring-2 dark:focus:ring-blue-400 bg-gray-100 dark:bg-gray-800 checked:bg-blue-600 dark:checked:bg-blue-600"
                 />
               </label>
+
+              <button
+                type="button"
+                onClick={handleReloadSkills}
+                disabled={isReloadingSkills || !provider}
+                className="flex w-full items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600 disabled:cursor-not-allowed disabled:opacity-60"
+                title={t('quickSettings.reloadSkills.title')}
+              >
+                <span className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
+                  <RefreshCw className={`h-4 w-4 text-gray-600 dark:text-gray-400 ${isReloadingSkills ? 'animate-spin' : ''}`} />
+                  {t('quickSettings.reloadSkills.label')}
+                </span>
+              </button>
             </div>
             {/* View Options */}
             <div className="space-y-2">
@@ -355,7 +383,7 @@ const QuickSettingsPanel = () => {
             {/* Whisper Dictation Settings - HIDDEN */}
             <div className="space-y-2" style={{ display: 'none' }}>
               <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">{t('quickSettings.sections.whisperDictation')}</h4>
-              
+
               <div className="space-y-2">
                 <label className="flex items-start p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
                   <input
@@ -445,4 +473,4 @@ const QuickSettingsPanel = () => {
   );
 };
 
-export default QuickSettingsPanel;
\ No newline at end of file
+export default QuickSettingsPanel;
diff --git a/src/components/chat/hooks/useChatComposerState.ts b/src/components/chat/hooks/useChatComposerState.ts
index 7f4da9603..2bac10593 100644
--- a/src/components/chat/hooks/useChatComposerState.ts
+++ b/src/components/chat/hooks/useChatComposerState.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { createElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type {
   ChangeEvent,
   ClipboardEvent,
@@ -6,6 +6,7 @@ import type {
   FormEvent,
   KeyboardEvent,
   MouseEvent,
+  ReactNode,
   SetStateAction,
   TouchEvent,
 } from 'react';
@@ -31,6 +32,9 @@ type PendingViewSession = {
   startedAt: number;
 };
 
+const isSkillCommand = (command: SlashCommand) =>
+  command.type === 'skill' || command.namespace === 'skills';
+
 interface UseChatComposerStateArgs {
   selectedProject: Project | null;
   selectedSession: ProjectSession | null;
@@ -77,6 +81,127 @@ interface CommandExecutionResult {
   hasFileIncludes?: boolean;
 }
 
+export type SkillInfo = {
+  commandName: string;
+  description?: string;
+  compatibility?: string;
+  metadata?: Record<string, unknown>;
+  argumentHint?: string;
+  allowedTools?: string[];
+};
+
+export type SkillTokenRange = {
+  start: number;
+  end: number;
+};
+
+type SkillTokenDetail = {
+  range: SkillTokenRange;
+  command: SlashCommand;
+  info: SkillInfo;
+};
+
+export type SkillInfoDialogState =
+  | { open: false }
+  | {
+      open: true;
+      mode: 'menu-mobile' | 'token-touch';
+      info: SkillInfo;
+      tokenRange?: SkillTokenRange;
+      usageText?: string;
+    };
+
+export type ActiveSkillTooltip = {
+  source: SkillTooltipSource;
+  info: SkillInfo;
+} | null;
+
+type SkillTooltipSource = 'token-hover';
+
+const extractText = (value: unknown): string | undefined => {
+  if (typeof value !== 'string') {
+    return undefined;
+  }
+  const trimmed = value.trim();
+  return trimmed.length > 0 ? trimmed : undefined;
+};
+
+const toStringArray = (value: unknown): string[] | undefined => {
+  if (!Array.isArray(value)) {
+    return undefined;
+  }
+  const normalized = value
+    .map((entry) => (typeof entry === 'string' ? entry.trim() : String(entry ?? '').trim()))
+    .filter((entry) => entry.length > 0);
+  return normalized.length > 0 ? normalized : undefined;
+};
+
+const normalizeSkillInfo = (command: SlashCommand): SkillInfo => {
+  const metadata =
+    command.metadata && typeof command.metadata === 'object' && !Array.isArray(command.metadata)
+      ? (command.metadata as Record<string, unknown>)
+      : undefined;
+
+  const description =
+    extractText(command.description) ?? extractText(metadata?.description) ?? extractText(metadata?.summary);
+  const compatibility = extractText(metadata?.compatibility) ?? extractText(metadata?.compatibleWith);
+  const argumentHint =
+    extractText(metadata?.['argument-hint']) ??
+    extractText(metadata?.argumentHint) ??
+    extractText(metadata?.args) ??
+    extractText(metadata?.usage);
+
+  const allowedTools =
+    toStringArray(metadata?.['allowed-tools']) ??
+    toStringArray(metadata?.allowedTools) ??
+    toStringArray(metadata?.tools);
+
+  return {
+    commandName: command.name,
+    description,
+    compatibility,
+    metadata,
+    argumentHint,
+    allowedTools,
+  };
+};
+
+const createSkillTokenPattern = (skillNames: string[]): RegExp | null => {
+  if (skillNames.length === 0) {
+    return null;
+  }
+
+  const sortedSkillNames = [...skillNames].sort((nameA, nameB) => nameB.length - nameA.length);
+
+  return new RegExp(
+    `(^|\\s)(${sortedSkillNames.map((name) => escapeRegExp(name)).join('|')})(?=\\s|$)`,
+    'g',
+  );
+};
+
+const findSkillTokenRanges = (value: string, skillTokenPattern: RegExp | null): SkillTokenRange[] => {
+  if (!value || !skillTokenPattern) {
+    return [];
+  }
+
+  skillTokenPattern.lastIndex = 0;
+
+  const ranges: SkillTokenRange[] = [];
+  let match = skillTokenPattern.exec(value);
+
+  while (match) {
+    const tokenText = match[2];
+    const start = match.index + (match[1]?.length || 0);
+    ranges.push({
+      start,
+      end: start + tokenText.length,
+    });
+    match = skillTokenPattern.exec(value);
+  }
+
+  return ranges;
+};
+
 const createFakeSubmitEvent = () => {
   return { preventDefault: () => undefined } as unknown as FormEvent<HTMLFormElement>;
 };
@@ -84,6 +209,58 @@ const createFakeSubmitEvent = () => {
 const isTemporarySessionId = (sessionId: string | null | undefined) =>
   Boolean(sessionId && sessionId.startsWith('new-session-'));
 
+const trimSkillTokenAroundCursor = (
+  value: string,
+  cursorPos: number,
+  fallbackSlashPosition = -1,
+): { nextInput: string; nextCursor: number } => {
+  const boundedCursor = Math.max(0, Math.min(cursorPos, value.length));
+  const beforeCursor = value.slice(0, boundedCursor);
+  const slashMatch = beforeCursor.match(/(^|\s)(\/\S*)$/);
+
+  const derivedSlashPosition = slashMatch
+    ? (slashMatch.index || 0) + slashMatch[1].length
+    : fallbackSlashPosition >= 0
+      ? fallbackSlashPosition
+      : -1;
+
+  if (derivedSlashPosition < 0 || derivedSlashPosition > value.length) {
+    return {
+      nextInput: value,
+      nextCursor: boundedCursor,
+    };
+  }
+
+  let tokenEnd = derivedSlashPosition;
+  while (tokenEnd < value.length && !/\s/.test(value[tokenEnd])) {
+    tokenEnd += 1;
+  }
+
+  if (tokenEnd <= derivedSlashPosition || value[derivedSlashPosition] !== '/') {
+    return {
+      nextInput: value,
+      nextCursor: boundedCursor,
+    };
+  }
+
+  let gapEnd = tokenEnd;
+  while (gapEnd < value.length && value[gapEnd] === ' ') {
+    gapEnd += 1;
+  }
+
+  const before = value.slice(0, derivedSlashPosition);
+  const after = value.slice(gapEnd);
+  const needsSpacer = before.length > 0 && !/\s$/.test(before) && after.length > 0 && !/^\s/.test(after);
+  const spacer = needsSpacer ? ' ' : '';
+  const nextInput = `${before}${spacer}${after}`;
+  const nextCursor = Math.min(derivedSlashPosition + spacer.length, nextInput.length);
+
+  return {
+    nextInput,
+    nextCursor,
+  };
+};
+
 export function useChatComposerState({
   selectedProject,
   selectedSession,
@@ -126,6 +303,9 @@ export function useChatComposerState({
   const [imageErrors, setImageErrors] = useState<Map<string, string>>(new Map());
   const [isTextareaExpanded, setIsTextareaExpanded] = useState(false);
   const [thinkingMode, setThinkingMode] = useState('none');
+  const [hoveredSkillTokenRange, setHoveredSkillTokenRange] = useState<SkillTokenRange | null>(null);
+  const [skillInfoDialogState, setSkillInfoDialogState] = useState<SkillInfoDialogState>({ open: false });
+  const [mobileSkillUsageText, setMobileSkillUsageText] = useState('');
 
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const inputHighlightRef = useRef<HTMLDivElement>(null);
@@ -356,6 +536,22 @@ export function useChatComposerState({
     ],
   );
 
+  const {
+    showFileDropdown,
+    filteredFiles,
+    selectedFileIndex,
+    cursorPosition,
+    renderInputWithMentions,
+    selectFile,
+    setCursorPosition,
+    handleFileMentionsKeyDown,
+  } = useFileMentions({
+    selectedProject,
+    input,
+    setInput,
+    textareaRef,
+  });
+
   const {
     slashCommands,
     slashCommandsCount,
@@ -364,33 +560,529 @@ export function useChatComposerState({
     commandQuery,
     showCommandMenu,
     selectedCommandIndex,
+    slashPosition,
     resetCommandMenuState,
     handleCommandSelect,
     handleToggleCommandMenu,
     handleCommandInputChange,
     handleCommandMenuKeyDown,
+    prefetchSkillsForProvider,
+    reloadSkillsForProvider,
   } = useSlashCommands({
     selectedProject,
+    provider,
     input,
     setInput,
     textareaRef,
     onExecuteCommand: executeCommand,
+    onCursorPositionChange: setCursorPosition,
   });
 
-  const {
-    showFileDropdown,
-    filteredFiles,
-    selectedFileIndex,
-    renderInputWithMentions,
-    selectFile,
-    setCursorPosition,
-    handleFileMentionsKeyDown,
-  } = useFileMentions({
-    selectedProject,
-    input,
-    setInput,
-    textareaRef,
-  });
+  const skillCommands = useMemo(
+    () => slashCommands.filter(isSkillCommand),
+    [slashCommands],
+  );
+
+  const skillCommandByName = useMemo(
+    () => new Map(skillCommands.map((command) => [command.name, command])),
+    [skillCommands],
+  );
+
+  const skillTokenPattern = useMemo(
+    () => createSkillTokenPattern(skillCommands.map((command) => command.name)),
+    [skillCommands],
+  );
+
+  const activeTypedSkillToken = useMemo(() => {
+    if (skillCommands.length === 0) {
+      return null;
+    }
+
+    const cursorPos = Math.max(0, Math.min(cursorPosition, input.length));
+    const beforeCursor = input.slice(0, cursorPos);
+    const afterCursor = input.slice(cursorPos);
+    const slashContextMatch = beforeCursor.match(/(^|\s)(\/\S+)(\s*)$/);
+
+    if (!slashContextMatch) {
+      return null;
+    }
+
+    const tokenStart = (slashContextMatch.index || 0) + slashContextMatch[1].length;
+    const tokenPrefix = slashContextMatch[2];
+    const spacingBeforeCursor = slashContextMatch[3] || '';
+    const tokenTail = afterCursor.match(/^\S*/)?.[0] || '';
+    const fullToken = `${tokenPrefix}${tokenTail}`;
+
+    if (!fullToken.startsWith('/')) {
+      return null;
+    }
+
+    const exactMatch = skillCommandByName.get(fullToken);
+
+    if (exactMatch) {
+      return {
+        command: exactMatch,
+        info: normalizeSkillInfo(exactMatch),
+        range: {
+          start: tokenStart,
+          end: tokenStart + exactMatch.name.length,
+        },
+        showInlineHint: true,
+        showTooltip: false,
+        hintCursorPosition: cursorPos,
+        fullToken,
+      };
+    }
+
+    const matchingCommands = skillCommands.filter((command) => command.name.startsWith(fullToken));
+
+    if (matchingCommands.length !== 1) {
+      return null;
+    }
+
+    const command = matchingCommands[0];
+
+    return {
+      command,
+      info: normalizeSkillInfo(command),
+      range: {
+        start: tokenStart,
+        end: tokenStart + command.name.length,
+      },
+      showInlineHint: true,
+      showTooltip: false,
+      hintCursorPosition: cursorPos,
+      fullToken,
+    };
+  }, [cursorPosition, input, skillCommandByName, skillCommands]);
+
+  const skillTokenDetails = useMemo<SkillTokenDetail[]>(() => {
+    const ranges = findSkillTokenRanges(input, skillTokenPattern);
+
+    return ranges
+      .map((range) => {
+        const tokenText = input.slice(range.start, range.end);
+        const command = skillCommandByName.get(tokenText);
+        if (!command) {
+          return null;
+        }
+
+        return {
+          range,
+          command,
+          info: normalizeSkillInfo(command),
+        };
+      })
+      .filter((entry): entry is SkillTokenDetail => Boolean(entry));
+  }, [input, skillCommandByName, skillTokenPattern]);
+
+  const skillTokenMap = useMemo(() => {
+    return new Map(
+      skillTokenDetails.map((detail) => [`${detail.range.start}-${detail.range.end}`, detail]),
+    );
+  }, [skillTokenDetails]);
+
+  const activeHoveredSkill = useMemo(() => {
+    if (!hoveredSkillTokenRange) {
+      return null;
+    }
+
+    return skillTokenMap.get(`${hoveredSkillTokenRange.start}-${hoveredSkillTokenRange.end}`) || null;
+  }, [hoveredSkillTokenRange, skillTokenMap]);
+
+  const inlineSkillArgumentHint =
+    activeTypedSkillToken?.showInlineHint ? activeTypedSkillToken.info.argumentHint || null : null;
+
+  const activeSkillTooltip = activeHoveredSkill
+    ? {
+        source: 'token-hover' as SkillTooltipSource,
+        info: activeHoveredSkill.info,
+      }
+    : null;
+
+  const closeSkillInfoDialog = useCallback(() => {
+    setHoveredSkillTokenRange(null);
+    setMobileSkillUsageText('');
+    setSkillInfoDialogState({ open: false });
+  }, []);
+
+  const openSkillInfoDialogFromMenu = useCallback((command: SlashCommand) => {
+    if (!command || !isSkillCommand(command)) {
+      return;
+    }
+
+    setHoveredSkillTokenRange(null);
+    setMobileSkillUsageText('');
+    setSkillInfoDialogState({
+      open: true,
+      mode: 'menu-mobile',
+      info: normalizeSkillInfo(command),
+      usageText: '',
+    });
+  }, []);
+
+  const openSkillInfoDialogFromToken = useCallback((detail: SkillTokenDetail) => {
+    setSkillInfoDialogState({
+      open: true,
+      mode: 'token-touch',
+      info: detail.info,
+      tokenRange: detail.range,
+    });
+  }, []);
+
+  const handleSkillTokenMouseEnter = useCallback((rangeKey: string) => {
+    const detail = skillTokenMap.get(rangeKey);
+    if (!detail) {
+      return;
+    }
+    setHoveredSkillTokenRange(detail.range);
+  }, [skillTokenMap]);
+
+  const handleSkillTokenMouseLeave = useCallback(() => {
+    setHoveredSkillTokenRange(null);
+  }, []);
+
+  const handleSkillTokenTouch = useCallback((rangeKey: string) => {
+    const detail = skillTokenMap.get(rangeKey);
+    if (!detail) {
+      return;
+    }
+    openSkillInfoDialogFromToken(detail);
+  }, [openSkillInfoDialogFromToken, skillTokenMap]);
+
+  const clearSkillToken = useCallback(() => {
+    const range =
+      skillInfoDialogState.open && skillInfoDialogState.mode === 'token-touch'
+        ? skillInfoDialogState.tokenRange
+        : undefined;
+
+    if (!range) {
+      setHoveredSkillTokenRange(null);
+      setMobileSkillUsageText('');
+      setSkillInfoDialogState({ open: false });
+      return;
+    }
+
+    setInput((previous) => {
+      const before = previous.slice(0, range.start);
+      const after = previous.slice(range.end);
+      const nextInput = before.endsWith(' ') && after.startsWith(' ') ? `${before}${after.slice(1)}` : `${before}${after}`;
+      inputValueRef.current = nextInput;
+
+      if (textareaRef.current) {
+        textareaRef.current.style.height = 'auto';
+        textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+        const lineHeight = parseInt(window.getComputedStyle(textareaRef.current).lineHeight);
+        setIsTextareaExpanded(textareaRef.current.scrollHeight > lineHeight * 2);
+      }
+
+      const nextPosition = Math.max(0, Math.min(range.start, nextInput.length));
+      setCursorPosition(nextPosition);
+
+      requestAnimationFrame(() => {
+        if (!textareaRef.current) {
+          return;
+        }
+        textareaRef.current.setSelectionRange(nextPosition, nextPosition);
+        textareaRef.current.focus();
+      });
+
+      return nextInput;
+    });
+
+    setHoveredSkillTokenRange(null);
+    setMobileSkillUsageText('');
+    setSkillInfoDialogState({ open: false });
+  }, [setCursorPosition, skillInfoDialogState]);
+
+  const applySkillUsageFromDialog = useCallback(() => {
+    if (!skillInfoDialogState.open || skillInfoDialogState.mode !== 'menu-mobile') {
+      return;
+    }
+
+    const skillName = skillInfoDialogState.info.commandName;
+    if (!skillName || !skillName.startsWith('/')) {
+      setMobileSkillUsageText('');
+      setSkillInfoDialogState({ open: false });
+      return;
+    }
+
+    const usageText = mobileSkillUsageText.trim();
+    const baseInput = inputValueRef.current;
+    const currentCursor = Math.max(0, Math.min(cursorPosition, baseInput.length));
+    const { nextInput: trimmedInput, nextCursor } = trimSkillTokenAroundCursor(baseInput, currentCursor, slashPosition);
+    const hasUsage = usageText.length > 0;
+    const insertion = hasUsage ? `${skillName} ${usageText}` : `${skillName}`;
+    const prefixedInput = trimmedInput.slice(0, nextCursor);
+    const suffixedInput = trimmedInput.slice(nextCursor);
+    const needsLeadingSpace = prefixedInput.length > 0 && !/\s$/.test(prefixedInput);
+    const needsTrailingSpace = suffixedInput.length > 0 && !/^\s/.test(suffixedInput);
+    const insertedText = `${needsLeadingSpace ? ' ' : ''}${insertion}${needsTrailingSpace ? ' ' : ''}`;
+    const nextValue = `${prefixedInput}${insertedText}${suffixedInput}`;
+    const caretPosition = prefixedInput.length + insertedText.length;
+
+    setInput(nextValue);
+    inputValueRef.current = nextValue;
+    setCursorPosition(caretPosition);
+    setHoveredSkillTokenRange(null);
+    setMobileSkillUsageText('');
+    setSkillInfoDialogState({ open: false });
+
+    requestAnimationFrame(() => {
+      if (!textareaRef.current) {
+        return;
+      }
+      textareaRef.current.focus();
+      textareaRef.current.setSelectionRange(caretPosition, caretPosition);
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+      const lineHeight = parseInt(window.getComputedStyle(textareaRef.current).lineHeight);
+      setIsTextareaExpanded(textareaRef.current.scrollHeight > lineHeight * 2);
+    });
+  }, [cursorPosition, mobileSkillUsageText, setCursorPosition, skillInfoDialogState, slashPosition]);
+
+  const updateSkillUsageText = useCallback((value: string) => {
+    setMobileSkillUsageText(value);
+    setSkillInfoDialogState((previous) => {
+      if (!previous.open || previous.mode !== 'menu-mobile') {
+        return previous;
+      }
+      return {
+        ...previous,
+        usageText: value,
+      };
+    });
+  }, []);
+
+  const renderInputWithSkillDecorations = useCallback(
+    (text: string): ReactNode => {
+      if (!text) {
+        return '';
+      }
+
+      const skillRanges = findSkillTokenRanges(text, skillTokenPattern);
+
+      if (skillRanges.length === 0) {
+        if (inlineSkillArgumentHint && activeTypedSkillToken) {
+          const cursor = Math.max(0, Math.min(activeTypedSkillToken.hintCursorPosition, text.length));
+          const beforeHintText = text.slice(0, cursor);
+          const afterHintText = text.slice(cursor);
+
+          return [
+            createElement('span', { key: 'skill-no-range-before' }, renderInputWithMentions(beforeHintText)),
+            createElement(
+              'span',
+              {
+                key: 'skill-inline-hint-overlay',
+                className: 'relative pointer-events-none',
+              },
+              createElement(
+                'span',
+                {
+                  key: 'skill-inline-hint-spacer',
+                  className: 'invisible whitespace-pre-wrap break-words',
+                },
+                inlineSkillArgumentHint,
+              ),
+              createElement(
+                'span',
+                {
+                  key: 'skill-inline-hint-text',
+                  className: 'absolute inset-0 text-muted-foreground/60 whitespace-pre-wrap break-words',
+                },
+                inlineSkillArgumentHint,
+              ),
+            ),
+            createElement('span', { key: 'skill-no-range-after' }, renderInputWithMentions(afterHintText)),
+          ];
+        }
+
+        return [renderInputWithMentions(text)];
+      }
+
+      let offset = 0;
+      const segments: ReactNode[] = [];
+
+      skillRanges.forEach((range, index) => {
+        if (range.start > offset) {
+          const plainSegmentStart = offset;
+          const plainSegmentEnd = range.start;
+          const plainSegmentText = text.slice(plainSegmentStart, plainSegmentEnd);
+
+          if (
+            inlineSkillArgumentHint &&
+            activeTypedSkillToken &&
+            activeTypedSkillToken.hintCursorPosition >= plainSegmentStart &&
+            activeTypedSkillToken.hintCursorPosition <= plainSegmentEnd
+          ) {
+            const splitIndex = activeTypedSkillToken.hintCursorPosition - plainSegmentStart;
+            const beforeHintText = plainSegmentText.slice(0, splitIndex);
+            const afterHintText = plainSegmentText.slice(splitIndex);
+
+            if (beforeHintText) {
+              segments.push(
+                createElement(
+                  'span',
+                  { key: `skill-text-before-hint-${index}` },
+                  renderInputWithMentions(beforeHintText),
+                ),
+              );
+            }
+
+            segments.push(
+              createElement(
+                'span',
+                {
+                  key: `skill-inline-hint-${index}`,
+                  className: 'relative pointer-events-none',
+                },
+                createElement(
+                  'span',
+                  {
+                    key: `skill-inline-hint-spacer-${index}`,
+                    className: 'invisible whitespace-pre-wrap break-words',
+                  },
+                  inlineSkillArgumentHint,
+                ),
+                createElement(
+                  'span',
+                  {
+                    key: `skill-inline-hint-text-${index}`,
+                    className: 'absolute inset-0 text-muted-foreground/60 whitespace-pre-wrap break-words',
+                  },
+                  inlineSkillArgumentHint,
+                ),
+              ),
+            );
+
+            if (afterHintText) {
+              segments.push(
+                createElement(
+                  'span',
+                  { key: `skill-text-after-hint-${index}` },
+                  renderInputWithMentions(afterHintText),
+                ),
+              );
+            }
+          } else {
+            segments.push(
+              createElement(
+                'span',
+                { key: `skill-text-${index}` },
+                renderInputWithMentions(plainSegmentText),
+              ),
+            );
+          }
+        }
+
+        const tokenText = text.slice(range.start, range.end);
+        const rangeKey = `${range.start}-${range.end}`;
+
+        segments.push(
+          createElement(
+            'span',
+            {
+              key: `skill-token-${range.start}-${range.end}`,
+              'data-skill-token': 'true',
+              'data-skill-range': rangeKey,
+              className:
+                'bg-blue-200/70 -ml-0.5 dark:bg-blue-300/40 px-0.5 rounded-md box-decoration-clone text-transparent pointer-events-auto',
+              onMouseEnter: () => handleSkillTokenMouseEnter(rangeKey),
+              onMouseLeave: handleSkillTokenMouseLeave,
+              onTouchStart: (event: TouchEvent<HTMLSpanElement>) => {
+                event.preventDefault();
+                handleSkillTokenTouch(rangeKey);
+              },
+            },
+            tokenText,
+          ),
+        );
+
+        offset = range.end;
+      });
+
+      if (offset < text.length) {
+        const tailStart = offset;
+        const tailText = text.slice(offset);
+
+        if (
+          inlineSkillArgumentHint &&
+          activeTypedSkillToken &&
+          activeTypedSkillToken.hintCursorPosition >= tailStart &&
+          activeTypedSkillToken.hintCursorPosition <= text.length
+        ) {
+          const splitIndex = activeTypedSkillToken.hintCursorPosition - tailStart;
+          const beforeHintText = tailText.slice(0, splitIndex);
+          const afterHintText = tailText.slice(splitIndex);
+
+          if (beforeHintText) {
+            segments.push(
+              createElement(
+                'span',
+                { key: 'skill-tail-before-hint' },
+                renderInputWithMentions(beforeHintText),
+              ),
+            );
+          }
+
+          segments.push(
+            createElement(
+              'span',
+              {
+                key: 'skill-inline-hint-tail',
+                className: 'relative pointer-events-none',
+              },
+              createElement(
+                'span',
+                {
+                  key: 'skill-inline-hint-tail-spacer',
+                  className: 'invisible whitespace-pre-wrap break-words',
+                },
+                inlineSkillArgumentHint,
+              ),
+              createElement(
+                'span',
+                {
+                  key: 'skill-inline-hint-tail-text',
+                  className: 'absolute inset-0 text-muted-foreground/60 whitespace-pre-wrap break-words',
+                },
+                inlineSkillArgumentHint,
+              ),
+            ),
+          );
+
+          if (afterHintText) {
+            segments.push(
+              createElement(
+                'span',
+                { key: 'skill-tail-after-hint' },
+                renderInputWithMentions(afterHintText),
+              ),
+            );
+          }
+        } else {
+          segments.push(
+            createElement(
+              'span',
+              { key: 'skill-tail' },
+              renderInputWithMentions(tailText),
+            ),
+          );
+        }
+      }
+
+      return segments;
+    },
+    [
+      activeTypedSkillToken,
+      inlineSkillArgumentHint,
+      renderInputWithMentions,
+      skillTokenPattern,
+      handleSkillTokenMouseEnter,
+      handleSkillTokenMouseLeave,
+      handleSkillTokenTouch,
+    ],
+  );
 
   const syncInputOverlayScroll = useCallback((target: HTMLTextAreaElement) => {
     if (!inputHighlightRef.current || !target) {
@@ -486,10 +1178,12 @@ export function useChatComposerState({
         const firstSpace = trimmedInput.indexOf(' ');
         const commandName = firstSpace > 0 ? trimmedInput.slice(0, firstSpace) : trimmedInput;
         const matchedCommand = slashCommands.find((cmd: SlashCommand) => cmd.name === commandName);
-        if (matchedCommand) {
+        if (matchedCommand && !isSkillCommand(matchedCommand)) {
           executeCommand(matchedCommand, trimmedInput);
           setInput('');
           inputValueRef.current = '';
+          setHoveredSkillTokenRange(null);
+          setSkillInfoDialogState({ open: false });
           setAttachedImages([]);
           setUploadingImages(new Map());
           setImageErrors(new Map());
@@ -669,6 +1363,8 @@ export function useChatComposerState({
 
       setInput('');
       inputValueRef.current = '';
+      setHoveredSkillTokenRange(null);
+      setSkillInfoDialogState({ open: false });
       resetCommandMenuState();
       setAttachedImages([]);
       setUploadingImages(new Map());
@@ -770,6 +1466,7 @@ export function useChatComposerState({
       setInput(newValue);
       inputValueRef.current = newValue;
       setCursorPosition(cursorPos);
+      setHoveredSkillTokenRange(null);
 
       if (!newValue.trim()) {
         event.target.style.height = 'auto';
@@ -783,6 +1480,15 @@ export function useChatComposerState({
     [handleCommandInputChange, resetCommandMenuState, setCursorPosition],
   );
 
+  const updateCursorAndMenus = useCallback(
+    (target: HTMLTextAreaElement) => {
+      const nextCursor = target.selectionStart;
+      setCursorPosition(nextCursor);
+      handleCommandInputChange(target.value, nextCursor);
+    },
+    [handleCommandInputChange, setCursorPosition],
+  );
+
   const handleKeyDown = useCallback(
     (event: KeyboardEvent<HTMLTextAreaElement>) => {
       if (handleCommandMenuKeyDown(event)) {
@@ -793,6 +1499,22 @@ export function useChatComposerState({
         return;
       }
 
+      if (event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'Home' || event.key === 'End') {
+        requestAnimationFrame(() => {
+          if (textareaRef.current) {
+            updateCursorAndMenus(textareaRef.current);
+          }
+        });
+      }
+
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'a') {
+        requestAnimationFrame(() => {
+          if (textareaRef.current) {
+            updateCursorAndMenus(textareaRef.current);
+          }
+        });
+      }
+
       if (event.key === 'Tab' && !showFileDropdown && !showCommandMenu) {
         event.preventDefault();
         cyclePermissionMode();
@@ -821,14 +1543,16 @@ export function useChatComposerState({
       sendByCtrlEnter,
       showCommandMenu,
       showFileDropdown,
+      textareaRef,
+      updateCursorAndMenus,
     ],
   );
 
   const handleTextareaClick = useCallback(
     (event: MouseEvent<HTMLTextAreaElement>) => {
-      setCursorPosition(event.currentTarget.selectionStart);
+      updateCursorAndMenus(event.currentTarget);
     },
-    [setCursorPosition],
+    [updateCursorAndMenus],
   );
 
   const handleTextareaInput = useCallback(
@@ -836,18 +1560,20 @@ export function useChatComposerState({
       const target = event.currentTarget;
       target.style.height = 'auto';
       target.style.height = `${target.scrollHeight}px`;
-      setCursorPosition(target.selectionStart);
+      updateCursorAndMenus(target);
       syncInputOverlayScroll(target);
 
       const lineHeight = parseInt(window.getComputedStyle(target).lineHeight);
       setIsTextareaExpanded(target.scrollHeight > lineHeight * 2);
     },
-    [setCursorPosition, syncInputOverlayScroll],
+    [syncInputOverlayScroll, updateCursorAndMenus],
   );
 
   const handleClearInput = useCallback(() => {
     setInput('');
     inputValueRef.current = '';
+    setHoveredSkillTokenRange(null);
+    setSkillInfoDialogState({ open: false });
     resetCommandMenuState();
     if (textareaRef.current) {
       textareaRef.current.style.height = 'auto';
@@ -897,6 +1623,7 @@ export function useChatComposerState({
     setInput((previousInput) => {
       const newInput = previousInput.trim() ? `${previousInput} ${text}` : text;
       inputValueRef.current = newInput;
+      setHoveredSkillTokenRange(null);
 
       setTimeout(() => {
         if (!textareaRef.current) {
@@ -983,10 +1710,20 @@ export function useChatComposerState({
     resetCommandMenuState,
     handleCommandSelect,
     handleToggleCommandMenu,
+    prefetchSkillsForProvider,
+    reloadSkillsForProvider,
     showFileDropdown,
     filteredFiles: filteredFiles as MentionableFile[],
     selectedFileIndex,
-    renderInputWithMentions,
+    activeSkillTooltip,
+    skillInfoDialogState,
+    renderInputWithSkillDecorations,
+    openSkillInfoDialogFromMenu,
+    closeSkillInfoDialog,
+    clearSkillToken,
+    mobileSkillUsageText,
+    updateSkillUsageText,
+    applySkillUsageFromDialog,
     selectFile,
     attachedImages,
     setAttachedImages,
diff --git a/src/components/chat/hooks/useFileMentions.tsx b/src/components/chat/hooks/useFileMentions.tsx
index 44450861d..60502468b 100644
--- a/src/components/chat/hooks/useFileMentions.tsx
+++ b/src/components/chat/hooks/useFileMentions.tsx
@@ -260,6 +260,7 @@ export function useFileMentions({ selectedProject, input, setInput, textareaRef
     showFileDropdown,
     filteredFiles,
     selectedFileIndex,
+    cursorPosition,
     renderInputWithMentions,
     selectFile,
     setCursorPosition,
diff --git a/src/components/chat/hooks/useSlashCommands.ts b/src/components/chat/hooks/useSlashCommands.ts
index 067cd24db..93fb192bb 100644
--- a/src/components/chat/hooks/useSlashCommands.ts
+++ b/src/components/chat/hooks/useSlashCommands.ts
@@ -3,7 +3,7 @@ import type { Dispatch, KeyboardEvent, RefObject, SetStateAction } from 'react';
 import Fuse from 'fuse.js';
 import { authenticatedFetch } from '../../../utils/api';
 import { safeLocalStorage } from '../utils/chatStorage';
-import type { Project } from '../../../types/app';
+import type { Project, SessionProvider } from '../../../types/app';
 
 const COMMAND_QUERY_DEBOUNCE_MS = 150;
 
@@ -19,16 +19,19 @@ export interface SlashCommand {
 
 interface UseSlashCommandsOptions {
   selectedProject: Project | null;
+  provider: SessionProvider;
   input: string;
   setInput: Dispatch<SetStateAction<string>>;
   textareaRef: RefObject<HTMLTextAreaElement>;
   onExecuteCommand: (command: SlashCommand, rawInput?: string) => void | Promise<void>;
+  onCursorPositionChange?: (cursorPosition: number) => void;
 }
 
-const getCommandHistoryKey = (projectName: string) => `command_history_${projectName}`;
+const getCommandHistoryKey = (projectName: string, provider: SessionProvider) =>
+  `command_history_${projectName}_${provider}`;
 
-const readCommandHistory = (projectName: string): Record<string, number> => {
-  const history = safeLocalStorage.getItem(getCommandHistoryKey(projectName));
+const readCommandHistory = (projectName: string, provider: SessionProvider): Record<string, number> => {
+  const history = safeLocalStorage.getItem(getCommandHistoryKey(projectName, provider));
   if (!history) {
     return {};
   }
@@ -41,8 +44,12 @@ const readCommandHistory = (projectName: string): Record<string, number> => {
   }
 };
 
-const saveCommandHistory = (projectName: string, history: Record<string, number>) => {
-  safeLocalStorage.setItem(getCommandHistoryKey(projectName), JSON.stringify(history));
+const saveCommandHistory = (
+  projectName: string,
+  provider: SessionProvider,
+  history: Record<string, number>,
+) => {
+  safeLocalStorage.setItem(getCommandHistoryKey(projectName, provider), JSON.stringify(history));
 };
 
 const isPromiseLike = (value: unknown): value is Promise<unknown> =>
@@ -50,10 +57,12 @@ const isPromiseLike = (value: unknown): value is Promise<unknown> =>
 
 export function useSlashCommands({
   selectedProject,
+  provider,
   input,
   setInput,
   textareaRef,
   onExecuteCommand,
+  onCursorPositionChange,
 }: UseSlashCommandsOptions) {
   const [slashCommands, setSlashCommands] = useState<SlashCommand[]>([]);
   const [filteredCommands, setFilteredCommands] = useState<SlashCommand[]>([]);
@@ -63,6 +72,9 @@ export function useSlashCommands({
   const [slashPosition, setSlashPosition] = useState(-1);
 
   const commandQueryTimerRef = useRef<number | null>(null);
+  const baseCommandsRef = useRef<SlashCommand[]>([]);
+  const skillsByProviderRef = useRef<Partial<Record<SessionProvider, SlashCommand[]>>>({});
+  const activeProviderRef = useRef<SessionProvider>(provider);
 
   const clearCommandQueryTimer = useCallback(() => {
     if (commandQueryTimerRef.current !== null) {
@@ -79,57 +91,140 @@ export function useSlashCommands({
     clearCommandQueryTimer();
   }, [clearCommandQueryTimer]);
 
-  useEffect(() => {
-    const fetchCommands = async () => {
+  const buildSortedCommands = useCallback(
+    (baseCommands: SlashCommand[], skills: SlashCommand[], targetProvider: SessionProvider) => {
+      if (!selectedProject) {
+        return [];
+      }
+
+      const allCommands = [...baseCommands, ...skills];
+      const parsedHistory = readCommandHistory(selectedProject.name, targetProvider);
+
+      return allCommands.sort((commandA, commandB) => {
+        const commandAUsage = parsedHistory[commandA.name] || 0;
+        const commandBUsage = parsedHistory[commandB.name] || 0;
+        return commandBUsage - commandAUsage;
+      });
+    },
+    [selectedProject],
+  );
+
+  const fetchAndCacheCommands = useCallback(
+    async (targetProvider: SessionProvider, forceReloadSkills = false) => {
       if (!selectedProject) {
         setSlashCommands([]);
         setFilteredCommands([]);
-        return;
+        return [] as SlashCommand[];
       }
 
-      try {
-        const response = await authenticatedFetch('/api/commands/list', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({
-            projectPath: selectedProject.path,
-          }),
-        });
+      const canUseSkillsCache =
+        !forceReloadSkills &&
+        baseCommandsRef.current.length > 0 &&
+        Array.isArray(skillsByProviderRef.current[targetProvider]);
 
-        if (!response.ok) {
-          throw new Error('Failed to fetch commands');
+      if (canUseSkillsCache) {
+        const commandsFromCache = buildSortedCommands(
+          baseCommandsRef.current,
+          skillsByProviderRef.current[targetProvider] || [],
+          targetProvider,
+        );
+        if (activeProviderRef.current === targetProvider) {
+          setSlashCommands(commandsFromCache);
         }
+        return commandsFromCache;
+      }
 
-        const data = await response.json();
-        const allCommands: SlashCommand[] = [
-          ...((data.builtIn || []) as SlashCommand[]).map((command) => ({
-            ...command,
-            type: 'built-in',
-          })),
-          ...((data.custom || []) as SlashCommand[]).map((command) => ({
-            ...command,
-            type: 'custom',
-          })),
-        ];
-
-        const parsedHistory = readCommandHistory(selectedProject.name);
-        const sortedCommands = [...allCommands].sort((commandA, commandB) => {
-          const commandAUsage = parsedHistory[commandA.name] || 0;
-          const commandBUsage = parsedHistory[commandB.name] || 0;
-          return commandBUsage - commandAUsage;
-        });
+      const response = await authenticatedFetch('/api/commands/list', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          projectPath: selectedProject.path,
+          provider: targetProvider,
+          includeSkills: true,
+          forceReloadSkills,
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch commands');
+      }
+
+      const data = await response.json();
+      const builtInCommands = ((data.builtIn || []) as SlashCommand[]).map((command) => ({
+        ...command,
+        type: 'built-in',
+      }));
+      const customCommands = ((data.custom || []) as SlashCommand[]).map((command) => ({
+        ...command,
+        type: 'custom',
+      }));
+      const skills = ((data.skills || []) as SlashCommand[]).map((command) => ({
+        ...command,
+        type: 'skill',
+      }));
 
-        setSlashCommands(sortedCommands);
+      baseCommandsRef.current = [...builtInCommands, ...customCommands];
+      skillsByProviderRef.current[targetProvider] = skills;
+
+      const mergedCommands = buildSortedCommands(baseCommandsRef.current, skills, targetProvider);
+      if (activeProviderRef.current === targetProvider) {
+        setSlashCommands(mergedCommands);
+      }
+      return mergedCommands;
+    },
+    [buildSortedCommands, selectedProject],
+  );
+
+  useEffect(() => {
+    activeProviderRef.current = provider;
+  }, [provider]);
+
+  useEffect(() => {
+    if (!selectedProject) {
+      setSlashCommands([]);
+      setFilteredCommands([]);
+      baseCommandsRef.current = [];
+      skillsByProviderRef.current = {};
+      return;
+    }
+
+    fetchAndCacheCommands(provider).catch((error) => {
+      console.error('Error fetching slash commands:', error);
+      setSlashCommands([]);
+    });
+  }, [selectedProject, provider, fetchAndCacheCommands]);
+
+  const prefetchSkillsForProvider = useCallback(
+    async (targetProvider: SessionProvider) => {
+      if (!selectedProject || skillsByProviderRef.current[targetProvider]) {
+        return;
+      }
+
+      try {
+        await fetchAndCacheCommands(targetProvider);
       } catch (error) {
-        console.error('Error fetching slash commands:', error);
-        setSlashCommands([]);
+        console.error('Error prefetching skills:', error);
+      }
+    },
+    [fetchAndCacheCommands, selectedProject],
+  );
+
+  const reloadSkillsForProvider = useCallback(
+    async (targetProvider: SessionProvider) => {
+      if (!selectedProject) {
+        return;
       }
-    };
 
-    fetchCommands();
-  }, [selectedProject]);
+      try {
+        await fetchAndCacheCommands(targetProvider, true);
+      } catch (error) {
+        console.error('Error reloading skills:', error);
+      }
+    },
+    [fetchAndCacheCommands, selectedProject],
+  );
 
   useEffect(() => {
     if (!showCommandMenu) {
@@ -173,9 +268,10 @@ export function useSlashCommands({
       return [];
     }
 
-    const parsedHistory = readCommandHistory(selectedProject.name);
+    const parsedHistory = readCommandHistory(selectedProject.name, provider);
 
     return slashCommands
+      .filter((command) => command.type !== 'skill')
       .map((command) => ({
         ...command,
         usageCount: parsedHistory[command.name] || 0,
@@ -183,32 +279,90 @@ export function useSlashCommands({
       .filter((command) => command.usageCount > 0)
       .sort((commandA, commandB) => commandB.usageCount - commandA.usageCount)
       .slice(0, 5);
-  }, [selectedProject, slashCommands]);
+  }, [selectedProject, slashCommands, provider]);
 
   const trackCommandUsage = useCallback(
     (command: SlashCommand) => {
-      if (!selectedProject) {
+      if (!selectedProject || command.type === 'skill') {
         return;
       }
 
-      const parsedHistory = readCommandHistory(selectedProject.name);
+      const parsedHistory = readCommandHistory(selectedProject.name, provider);
       parsedHistory[command.name] = (parsedHistory[command.name] || 0) + 1;
-      saveCommandHistory(selectedProject.name, parsedHistory);
+      saveCommandHistory(selectedProject.name, provider, parsedHistory);
     },
-    [selectedProject],
+    [selectedProject, provider],
   );
 
-  const selectCommandFromKeyboard = useCallback(
+  const replaceActiveSlashToken = useCallback(
     (command: SlashCommand) => {
-      const textBeforeSlash = input.slice(0, slashPosition);
-      const textAfterSlash = input.slice(slashPosition);
-      const spaceIndex = textAfterSlash.indexOf(' ');
-      const textAfterQuery = spaceIndex !== -1 ? textAfterSlash.slice(spaceIndex) : '';
-      const newInput = `${textBeforeSlash}${command.name} ${textAfterQuery}`;
+      const currentValue = textareaRef.current?.value ?? input;
+      const currentCursor = textareaRef.current?.selectionStart ?? currentValue.length;
+      const textBeforeCursor = currentValue.slice(0, currentCursor);
+      const slashMatch = textBeforeCursor.match(/(^|\s)\/(\S*)$/);
+      const derivedSlashPosition = slashMatch
+        ? (slashMatch.index || 0) + slashMatch[1].length
+        : slashPosition;
+
+      if (derivedSlashPosition < 0 || derivedSlashPosition > currentValue.length) {
+        const fallbackInput = currentValue.trim().length
+          ? `${currentValue} ${command.name} `
+          : `${command.name} `;
+        return {
+          newInput: fallbackInput,
+          newCursorPosition: fallbackInput.length,
+        };
+      }
 
+      const textBeforeSlash = currentValue.slice(0, derivedSlashPosition);
+      let tokenEnd = derivedSlashPosition;
+      while (tokenEnd < currentValue.length && !/\s/.test(currentValue[tokenEnd])) {
+        tokenEnd += 1;
+      }
+      const textAfterToken = currentValue.slice(tokenEnd);
+
+      const needsTrailingSpace = textAfterToken.length === 0 || !/^\s/.test(textAfterToken);
+      const insertedCommand = needsTrailingSpace ? `${command.name} ` : command.name;
+      const newInput = `${textBeforeSlash}${insertedCommand}${textAfterToken}`;
+      const newCursorPosition = textBeforeSlash.length + insertedCommand.length;
+
+      return {
+        newInput,
+        newCursorPosition,
+      };
+    },
+    [input, slashPosition, textareaRef],
+  );
+
+  const applySlashCommandInsertion = useCallback(
+    (command: SlashCommand) => {
+      const { newInput, newCursorPosition } = replaceActiveSlashToken(command);
       setInput(newInput);
+      onCursorPositionChange?.(newCursorPosition);
+
+      requestAnimationFrame(() => {
+        if (!textareaRef.current) {
+          return;
+        }
+        textareaRef.current.setSelectionRange(newCursorPosition, newCursorPosition);
+        if (!textareaRef.current.matches(':focus')) {
+          textareaRef.current.focus();
+        }
+      });
+    },
+    [onCursorPositionChange, replaceActiveSlashToken, setInput, textareaRef],
+  );
+
+  const selectCommandFromKeyboard = useCallback(
+    (command: SlashCommand) => {
+      trackCommandUsage(command);
+      applySlashCommandInsertion(command);
       resetCommandMenuState();
 
+      if (command.type === 'skill') {
+        return;
+      }
+
       const executionResult = onExecuteCommand(command);
       if (isPromiseLike(executionResult)) {
         executionResult.catch(() => {
@@ -216,7 +370,7 @@ export function useSlashCommands({
         });
       }
     },
-    [input, slashPosition, setInput, resetCommandMenuState, onExecuteCommand],
+    [trackCommandUsage, applySlashCommandInsertion, resetCommandMenuState, onExecuteCommand],
   );
 
   const handleCommandSelect = useCallback(
@@ -231,6 +385,13 @@ export function useSlashCommands({
       }
 
       trackCommandUsage(command);
+
+      if (command.type === 'skill') {
+        applySlashCommandInsertion(command);
+        resetCommandMenuState();
+        return;
+      }
+
       const executionResult = onExecuteCommand(command);
 
       if (isPromiseLike(executionResult)) {
@@ -244,7 +405,7 @@ export function useSlashCommands({
         resetCommandMenuState();
       }
     },
-    [selectedProject, trackCommandUsage, onExecuteCommand, resetCommandMenuState],
+    [selectedProject, trackCommandUsage, applySlashCommandInsertion, onExecuteCommand, resetCommandMenuState],
   );
 
   const handleToggleCommandMenu = useCallback(() => {
@@ -366,10 +527,13 @@ export function useSlashCommands({
     commandQuery,
     showCommandMenu,
     selectedCommandIndex,
+    slashPosition,
     resetCommandMenuState,
     handleCommandSelect,
     handleToggleCommandMenu,
     handleCommandInputChange,
     handleCommandMenuKeyDown,
+    prefetchSkillsForProvider,
+    reloadSkillsForProvider,
   };
 }
diff --git a/src/components/chat/view/ChatInterface.tsx b/src/components/chat/view/ChatInterface.tsx
index 65c9043b0..2cd0ac075 100644
--- a/src/components/chat/view/ChatInterface.tsx
+++ b/src/components/chat/view/ChatInterface.tsx
@@ -142,7 +142,15 @@ function ChatInterface({
     showFileDropdown,
     filteredFiles,
     selectedFileIndex,
-    renderInputWithMentions,
+    activeSkillTooltip,
+    skillInfoDialogState,
+    renderInputWithSkillDecorations,
+    openSkillInfoDialogFromMenu,
+    closeSkillInfoDialog,
+    clearSkillToken,
+    mobileSkillUsageText,
+    updateSkillUsageText,
+    applySkillUsageFromDialog,
     selectFile,
     attachedImages,
     setAttachedImages,
@@ -166,6 +174,8 @@ function ChatInterface({
     handleGrantToolPermission,
     handleInputFocusChange,
     isInputFocused,
+    prefetchSkillsForProvider,
+    reloadSkillsForProvider,
   } = useChatComposerState({
     selectedProject,
     selectedSession,
@@ -298,6 +308,7 @@ function ChatInterface({
           isTaskMasterInstalled={isTaskMasterInstalled}
           onShowAllTasks={onShowAllTasks}
           setInput={setInput}
+          prefetchSkillsForProvider={prefetchSkillsForProvider}
           isLoadingMoreMessages={isLoadingMoreMessages}
           hasMoreMessages={hasMoreMessages}
           totalMessages={totalMessages}
@@ -365,7 +376,15 @@ function ChatInterface({
           getInputProps={getInputProps as (...args: unknown[]) => Record<string, unknown>}
           openImagePicker={openImagePicker}
           inputHighlightRef={inputHighlightRef}
-          renderInputWithMentions={renderInputWithMentions}
+          renderInputWithSkillDecorations={renderInputWithSkillDecorations}
+          activeSkillTooltip={activeSkillTooltip}
+          skillInfoDialogState={skillInfoDialogState}
+          onOpenSkillInfoFromMenu={openSkillInfoDialogFromMenu}
+          onCloseSkillInfoDialog={closeSkillInfoDialog}
+          onClearSkillToken={clearSkillToken}
+          mobileSkillUsageText={mobileSkillUsageText}
+          onSkillUsageTextChange={updateSkillUsageText}
+          onApplySkillUsage={applySkillUsageFromDialog}
           textareaRef={textareaRef}
           input={input}
           onInputChange={handleInputChange}
@@ -392,7 +411,10 @@ function ChatInterface({
         />
       </div>
 
-      <QuickSettingsPanel />
+      <QuickSettingsPanel
+        provider={provider}
+        reloadSkillsForProvider={reloadSkillsForProvider}
+      />
     </>
   );
 }
diff --git a/src/components/chat/view/subcomponents/ChatComposer.tsx b/src/components/chat/view/subcomponents/ChatComposer.tsx
index 6ac150db7..b0947b614 100644
--- a/src/components/chat/view/subcomponents/ChatComposer.tsx
+++ b/src/components/chat/view/subcomponents/ChatComposer.tsx
@@ -4,7 +4,10 @@ import MicButton from '../../../mic-button/view/MicButton';
 import ImageAttachment from './ImageAttachment';
 import PermissionRequestsBanner from './PermissionRequestsBanner';
 import ChatInputControls from './ChatInputControls';
+import SkillInfoTooltip from './SkillInfoTooltip';
+import SkillInfoDialog from './SkillInfoDialog';
 import { useTranslation } from 'react-i18next';
+import type { ActiveSkillTooltip, SkillInfoDialogState } from '../../hooks/useChatComposerState';
 import type {
   ChangeEvent,
   ClipboardEvent,
@@ -77,7 +80,15 @@ interface ChatComposerProps {
   getInputProps: (...args: unknown[]) => Record<string, unknown>;
   openImagePicker: () => void;
   inputHighlightRef: RefObject<HTMLDivElement>;
-  renderInputWithMentions: (text: string) => ReactNode;
+  renderInputWithSkillDecorations: (text: string) => ReactNode;
+  activeSkillTooltip: ActiveSkillTooltip;
+  skillInfoDialogState: SkillInfoDialogState;
+  onOpenSkillInfoFromMenu: (command: SlashCommand) => void;
+  onCloseSkillInfoDialog: () => void;
+  onClearSkillToken: () => void;
+  mobileSkillUsageText: string;
+  onSkillUsageTextChange: (value: string) => void;
+  onApplySkillUsage: () => void;
   textareaRef: RefObject<HTMLTextAreaElement>;
   input: string;
   onInputChange: (event: ChangeEvent<HTMLTextAreaElement>) => void;
@@ -134,7 +145,15 @@ export default function ChatComposer({
   getInputProps,
   openImagePicker,
   inputHighlightRef,
-  renderInputWithMentions,
+  renderInputWithSkillDecorations,
+  activeSkillTooltip,
+  skillInfoDialogState,
+  onOpenSkillInfoFromMenu,
+  onCloseSkillInfoDialog,
+  onClearSkillToken,
+  mobileSkillUsageText,
+  onSkillUsageTextChange,
+  onApplySkillUsage,
   textareaRef,
   input,
   onInputChange,
@@ -206,6 +225,8 @@ export default function ChatComposer({
       </div>
 
       {!hasQuestionPanel && <form onSubmit={onSubmit as (event: FormEvent<HTMLFormElement>) => void} className="relative max-w-4xl mx-auto">
+        {activeSkillTooltip && <SkillInfoTooltip info={activeSkillTooltip.info} />}
+
         {isDragActive && (
           <div className="absolute inset-0 bg-primary/15 border-2 border-dashed border-primary/50 rounded-2xl flex items-center justify-center z-50">
             <div className="bg-card rounded-xl p-4 shadow-lg border border-border/30">
@@ -217,7 +238,7 @@ export default function ChatComposer({
                   d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
                 />
               </svg>
-              <p className="text-sm font-medium">Drop images here</p>
+              <p className="text-sm font-medium">{t('input.dropImagesHere')}</p>
             </div>
           </div>
         )}
@@ -269,6 +290,7 @@ export default function ChatComposer({
           commands={filteredCommands}
           selectedIndex={selectedCommandIndex}
           onSelect={onCommandSelect}
+          onViewSkillInfo={onOpenSkillInfoFromMenu}
           onClose={onCloseCommandMenu}
           position={commandMenuPosition}
           isOpen={isCommandMenuOpen}
@@ -282,9 +304,9 @@ export default function ChatComposer({
           }`}
         >
           <input {...getInputProps()} />
-          <div ref={inputHighlightRef} aria-hidden="true" className="absolute inset-0 pointer-events-none overflow-hidden rounded-2xl">
+          <div ref={inputHighlightRef} className="absolute inset-0 z-20 overflow-hidden rounded-2xl pointer-events-none">
             <div className="chat-input-placeholder block w-full pl-12 pr-20 sm:pr-40 py-1.5 sm:py-4 text-transparent text-base leading-6 whitespace-pre-wrap break-words">
-              {renderInputWithMentions(input)}
+              {renderInputWithSkillDecorations(input)}
             </div>
           </div>
 
@@ -354,6 +376,19 @@ export default function ChatComposer({
           </div>
         </div>
       </form>}
+
+      <SkillInfoDialog
+        state={{
+          ...skillInfoDialogState,
+          ...(skillInfoDialogState.open && skillInfoDialogState.mode === 'menu-mobile'
+            ? { usageText: mobileSkillUsageText }
+            : {}),
+        }}
+        onClose={onCloseSkillInfoDialog}
+        onClear={onClearSkillToken}
+        onUsageChange={onSkillUsageTextChange}
+        onUsageApply={onApplySkillUsage}
+      />
     </div>
   );
 }
diff --git a/src/components/chat/view/subcomponents/ChatMessagesPane.tsx b/src/components/chat/view/subcomponents/ChatMessagesPane.tsx
index 4ca67bd96..1412c052f 100644
--- a/src/components/chat/view/subcomponents/ChatMessagesPane.tsx
+++ b/src/components/chat/view/subcomponents/ChatMessagesPane.tsx
@@ -32,6 +32,7 @@ interface ChatMessagesPaneProps {
   isTaskMasterInstalled: boolean | null;
   onShowAllTasks?: (() => void) | null;
   setInput: Dispatch<SetStateAction<string>>;
+  prefetchSkillsForProvider: (provider: SessionProvider) => Promise<void>;
   isLoadingMoreMessages: boolean;
   hasMoreMessages: boolean;
   totalMessages: number;
@@ -78,6 +79,7 @@ export default function ChatMessagesPane({
   isTaskMasterInstalled,
   onShowAllTasks,
   setInput,
+  prefetchSkillsForProvider,
   isLoadingMoreMessages,
   hasMoreMessages,
   totalMessages,
@@ -162,6 +164,7 @@ export default function ChatMessagesPane({
           isTaskMasterInstalled={isTaskMasterInstalled}
           onShowAllTasks={onShowAllTasks}
           setInput={setInput}
+          prefetchSkillsForProvider={prefetchSkillsForProvider}
         />
       ) : (
         <>
diff --git a/src/components/chat/view/subcomponents/CommandMenu.tsx b/src/components/chat/view/subcomponents/CommandMenu.tsx
index 92a598ea5..00c0811d9 100644
--- a/src/components/chat/view/subcomponents/CommandMenu.tsx
+++ b/src/components/chat/view/subcomponents/CommandMenu.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import type { CSSProperties } from 'react';
 
 type CommandMenuCommand = {
@@ -15,6 +16,7 @@ type CommandMenuProps = {
   commands?: CommandMenuCommand[];
   selectedIndex?: number;
   onSelect?: (command: CommandMenuCommand, index: number, isHover: boolean) => void;
+  onViewSkillInfo?: (command: CommandMenuCommand) => void;
   onClose: () => void;
   position?: { top: number; left: number; bottom?: number };
   isOpen?: boolean;
@@ -31,12 +33,13 @@ const menuBaseStyle: CSSProperties = {
   transition: 'opacity 150ms ease-in-out, transform 150ms ease-in-out',
 };
 
-const namespaceLabels: Record<string, string> = {
-  frequent: 'Frequently Used',
-  builtin: 'Built-in Commands',
-  project: 'Project Commands',
-  user: 'User Commands',
-  other: 'Other Commands',
+const namespaceLabelKeys: Record<string, string> = {
+  frequent: 'commandMenu.namespace.frequent',
+  builtin: 'commandMenu.namespace.builtin',
+  project: 'commandMenu.namespace.project',
+  user: 'commandMenu.namespace.user',
+  skills: 'commandMenu.namespace.skills',
+  other: 'commandMenu.namespace.other',
 };
 
 const namespaceIcons: Record<string, string> = {
@@ -44,6 +47,7 @@ const namespaceIcons: Record<string, string> = {
   builtin: '[B]',
   project: '[P]',
   user: '[U]',
+  skills: '[S]',
   other: '[O]',
 };
 
@@ -81,11 +85,13 @@ export default function CommandMenu({
   commands = [],
   selectedIndex = -1,
   onSelect,
+  onViewSkillInfo,
   onClose,
   position = { top: 0, left: 0 },
   isOpen = false,
   frequentCommands = [],
 }: CommandMenuProps) {
+  const { t } = useTranslation('chat');
   const menuRef = useRef<HTMLDivElement | null>(null);
   const selectedItemRef = useRef<HTMLDivElement | null>(null);
   const menuPosition = getMenuPosition(position);
@@ -159,7 +165,7 @@ export default function CommandMenu({
         className="command-menu command-menu-empty border border-gray-200 bg-white text-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400"
         style={{ ...menuPosition, ...menuBaseStyle, overflowY: 'hidden', padding: '20px', opacity: 1, transform: 'translateY(0)', textAlign: 'center' }}
       >
-        No commands available
+        {t('commandMenu.noCommands')}
       </div>
     );
   }
@@ -168,7 +174,7 @@ export default function CommandMenu({
     <div
       ref={menuRef}
       role="listbox"
-      aria-label="Available commands"
+      aria-label={t('commandMenu.aria.availableCommands')}
       className="command-menu border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"
       style={{ ...menuPosition, ...menuBaseStyle, opacity: 1, transform: 'translateY(0)' }}
     >
@@ -176,7 +182,7 @@ export default function CommandMenu({
         <div key={namespace} className="command-group">
           {orderedNamespaces.length > 1 && (
             <div className="px-3 pb-1 pt-2 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
-              {namespaceLabels[namespace] || namespace}
+              {t(namespaceLabelKeys[namespace] || namespaceLabelKeys.other)}
             </div>
           )}
 
@@ -184,6 +190,7 @@ export default function CommandMenu({
             const commandKey = getCommandKey(command);
             const commandIndex = commandIndexByKey.get(commandKey) ?? -1;
             const isSelected = commandIndex === selectedIndex;
+            const isSkill = command.type === 'skill' || command.namespace === 'skills';
             return (
               <div
                 key={`${namespace}-${command.name}-${command.path || ''}`}
@@ -194,6 +201,11 @@ export default function CommandMenu({
                   isSelected ? 'bg-blue-50 dark:bg-blue-900' : 'bg-transparent'
                 }`}
                 onMouseEnter={() => onSelect && commandIndex >= 0 && onSelect(command, commandIndex, true)}
+                onTouchStart={() => {
+                  if (onSelect && commandIndex >= 0) {
+                    onSelect(command, commandIndex, true);
+                  }
+                }}
                 onClick={() => onSelect && commandIndex >= 0 && onSelect(command, commandIndex, false)}
                 onMouseDown={(event) => event.preventDefault()}
               >
@@ -213,7 +225,36 @@ export default function CommandMenu({
                     </div>
                   )}
                 </div>
-                {isSelected && <span className="ml-2 text-xs font-semibold text-blue-500 dark:text-blue-300">{'<-'}</span>}
+                <div className="ml-2 flex items-start gap-1">
+                  {isSelected && <span className="text-xs font-semibold text-blue-500 dark:text-blue-300">{'<-'}</span>}
+                  {isSkill && onViewSkillInfo && (
+                    <button
+                      type="button"
+                      className="inline-flex h-6 w-6 items-center justify-center rounded-md border border-gray-200 bg-white/90 text-gray-500 transition-colors hover:text-gray-700 dark:border-gray-600 dark:bg-gray-700/80 dark:text-gray-300 dark:hover:text-gray-100"
+                      aria-label={t('commandMenu.viewSkillInfo')}
+                      title={t('commandMenu.viewSkillInfo')}
+                      onMouseDown={(event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                      }}
+                      onClick={(event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        onViewSkillInfo(command);
+                      }}
+                      onTouchStart={(event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        onViewSkillInfo(command);
+                      }}
+                    >
+                      <svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5s8.268 2.943 9.542 7c-1.274 4.057-5.065 7-9.542 7S3.732 16.057 2.458 12z" />
+                      </svg>
+                    </button>
+                  )}
+                </div>
               </div>
             );
           })}
diff --git a/src/components/chat/view/subcomponents/ProviderSelectionEmptyState.tsx b/src/components/chat/view/subcomponents/ProviderSelectionEmptyState.tsx
index e17b9a4b6..f0a10a5a0 100644
--- a/src/components/chat/view/subcomponents/ProviderSelectionEmptyState.tsx
+++ b/src/components/chat/view/subcomponents/ProviderSelectionEmptyState.tsx
@@ -24,6 +24,7 @@ interface ProviderSelectionEmptyStateProps {
   isTaskMasterInstalled: boolean | null;
   onShowAllTasks?: (() => void) | null;
   setInput: React.Dispatch<React.SetStateAction<string>>;
+  prefetchSkillsForProvider: (provider: SessionProvider) => Promise<void>;
 }
 
 type ProviderDef = {
@@ -102,6 +103,7 @@ export default function ProviderSelectionEmptyState({
   isTaskMasterInstalled,
   onShowAllTasks,
   setInput,
+  prefetchSkillsForProvider,
 }: ProviderSelectionEmptyStateProps) {
   const { t } = useTranslation('chat');
   const nextTaskPrompt = t('tasks.nextTaskPrompt', { defaultValue: 'Start the next task' });
@@ -109,6 +111,7 @@ export default function ProviderSelectionEmptyState({
   const selectProvider = (next: SessionProvider) => {
     setProvider(next);
     localStorage.setItem('selected-provider', next);
+    void prefetchSkillsForProvider(next);
     setTimeout(() => textareaRef.current?.focus(), 100);
   };
 
diff --git a/src/components/chat/view/subcomponents/SkillInfoDialog.tsx b/src/components/chat/view/subcomponents/SkillInfoDialog.tsx
new file mode 100644
index 000000000..01316ece9
--- /dev/null
+++ b/src/components/chat/view/subcomponents/SkillInfoDialog.tsx
@@ -0,0 +1,242 @@
+import { useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+type SkillInfoDialogProps = {
+  state:
+    | { open: false }
+    | {
+        open: true;
+        mode: 'menu-mobile' | 'token-touch';
+        info: {
+          commandName: string;
+          description?: string;
+          compatibility?: string;
+          metadata?: Record<string, unknown>;
+          argumentHint?: string;
+          allowedTools?: string[];
+        };
+        usageText?: string;
+      };
+  onClose: () => void;
+  onClear?: () => void;
+  onUsageChange?: (value: string) => void;
+  onUsageApply?: () => void;
+};
+
+const formatMetadata = (metadata?: Record<string, unknown>): string | null => {
+  if (!metadata || Object.keys(metadata).length === 0) {
+    return null;
+  }
+
+  const cleaned = { ...metadata };
+  delete cleaned.description;
+  delete cleaned.compatibility;
+  delete cleaned['argument-hint'];
+  delete cleaned.argumentHint;
+  delete cleaned['allowed-tools'];
+  delete cleaned.allowedTools;
+
+  if (Object.keys(cleaned).length === 0) {
+    return null;
+  }
+
+  try {
+    return JSON.stringify(cleaned, null, 2);
+  } catch {
+    return null;
+  }
+};
+
+export default function SkillInfoDialog({
+  state,
+  onClose,
+  onClear,
+  onUsageChange,
+  onUsageApply,
+}: SkillInfoDialogProps) {
+  const { t } = useTranslation('chat');
+  const dialogRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!state.open) {
+      return;
+    }
+
+    const previouslyFocused = document.activeElement as HTMLElement | null;
+
+    const focusableSelector =
+      'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), summary:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+    const getFocusableElements = () =>
+      Array.from(dialogRef.current?.querySelectorAll<HTMLElement>(focusableSelector) ?? []);
+
+    const focusFirst = () => {
+      const focusable = getFocusableElements();
+      if (focusable.length > 0) {
+        focusable[0].focus();
+        return;
+      }
+      dialogRef.current?.focus();
+    };
+
+    focusFirst();
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+        return;
+      }
+
+      if (event.key !== 'Tab') {
+        return;
+      }
+
+      const focusable = getFocusableElements();
+      if (focusable.length === 0) {
+        event.preventDefault();
+        dialogRef.current?.focus();
+        return;
+      }
+
+      const currentIndex = focusable.indexOf(document.activeElement as HTMLElement);
+      const lastIndex = focusable.length - 1;
+
+      if (event.shiftKey) {
+        if (currentIndex <= 0) {
+          event.preventDefault();
+          focusable[lastIndex].focus();
+        }
+        return;
+      }
+
+      if (currentIndex === -1 || currentIndex >= lastIndex) {
+        event.preventDefault();
+        focusable[0].focus();
+      }
+    };
+
+    window.addEventListener('keydown', onKeyDown);
+    return () => {
+      window.removeEventListener('keydown', onKeyDown);
+      previouslyFocused?.focus?.();
+    };
+  }, [state.open, onClose]);
+
+  if (!state.open) {
+    return null;
+  }
+
+  const metadataText = formatMetadata(state.info.metadata);
+
+  return (
+    <div className={`fixed inset-0 z-[1300] flex ${state.mode === 'token-touch' ? 'items-stretch justify-stretch p-0' : 'items-center justify-center p-4'}`}>
+      <button
+        type="button"
+        className="fixed inset-0 bg-black/60 backdrop-blur-sm"
+        onClick={onClose}
+        aria-label={t('skillInfoDialog.closeAriaLabel')}
+      />
+      <div
+        ref={dialogRef}
+        tabIndex={-1}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="skill-info-dialog-title"
+        className={`relative w-full overflow-y-auto overscroll-contain bg-card shadow-2xl ${state.mode === 'token-touch' ? 'max-h-screen rounded-none border-0 p-5' : 'max-h-[min(85vh,640px)] max-w-md rounded-xl border border-border p-4'}`}
+      >
+        <h2 id="skill-info-dialog-title" className="mb-3 text-base font-semibold text-foreground">
+          {state.info.commandName}
+        </h2>
+
+        {state.info.description && (
+          <div className="mb-2 text-sm">
+            <span className="font-medium text-foreground">{t('skillInfoDialog.fields.description')} </span>
+            <span className="text-muted-foreground">{state.info.description}</span>
+          </div>
+        )}
+
+        {state.info.compatibility && (
+          <div className="mb-2 text-sm">
+            <span className="font-medium text-foreground">{t('skillInfoDialog.fields.compatibility')} </span>
+            <span className="text-muted-foreground">{state.info.compatibility}</span>
+          </div>
+        )}
+
+        {state.info.argumentHint && (
+          <div className="mb-2 text-sm">
+            <span className="font-medium text-foreground">{t('skillInfoDialog.fields.argumentHint')} </span>
+            <span className="font-mono text-muted-foreground break-words">
+              {state.info.argumentHint}
+            </span>
+          </div>
+        )}
+
+        {state.info.allowedTools && state.info.allowedTools.length > 0 && (
+          <div className="mb-2 text-sm">
+            <span className="font-medium text-foreground">{t('skillInfoDialog.fields.allowedTools')} </span>
+            <span className="text-muted-foreground">{state.info.allowedTools.join(', ')}</span>
+          </div>
+        )}
+
+        {metadataText && (
+          <details className="mb-3 rounded-md border border-border/60 bg-muted/20 p-2" open>
+            <summary className="cursor-pointer text-sm font-medium text-foreground list-none">
+              {t('skillInfoDialog.fields.metadata')}
+            </summary>
+            <pre className="mt-2 max-h-40 overflow-auto overscroll-contain rounded-md bg-muted/60 p-2 text-[11px] leading-relaxed text-muted-foreground whitespace-pre-wrap break-words">
+              {metadataText}
+            </pre>
+          </details>
+        )}
+
+        {state.mode === 'menu-mobile' && (
+          <div className="mb-3">
+            <label
+              htmlFor="skill-usage-textarea"
+              className="mb-1 block text-sm font-medium text-foreground"
+            >
+              {t('skillInfoDialog.usage.label')}
+            </label>
+            <textarea
+              id="skill-usage-textarea"
+              value={state.usageText || ''}
+              onChange={(event) => onUsageChange?.(event.target.value)}
+              placeholder={state.info?.argumentHint ?? t('skillInfoDialog.usage.placeholder')}
+              className="min-h-[84px] w-full resize-y rounded-md border border-border bg-background px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-primary/40"
+            />
+          </div>
+        )}
+
+        <div className="mt-4 flex justify-end gap-2">
+          {state.mode === 'token-touch' && onClear && (
+            <button
+              type="button"
+              onClick={onClear}
+              className="rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-1.5 text-sm text-destructive hover:bg-destructive/15"
+            >
+              {t('skillInfoDialog.actions.clear')}
+            </button>
+          )}
+
+          {state.mode === 'menu-mobile' && onUsageApply && (
+            <button
+              type="button"
+              onClick={onUsageApply}
+              className="rounded-lg border border-primary/30 bg-primary/10 px-3 py-1.5 text-sm text-primary hover:bg-primary/15"
+            >
+              {t('skillInfoDialog.actions.usage')}
+            </button>
+          )}
+
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded-lg border border-border px-3 py-1.5 text-sm text-foreground hover:bg-accent/60"
+          >
+            {t('skillInfoDialog.actions.close')}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/chat/view/subcomponents/SkillInfoTooltip.tsx b/src/components/chat/view/subcomponents/SkillInfoTooltip.tsx
new file mode 100644
index 000000000..6bfe8c2f6
--- /dev/null
+++ b/src/components/chat/view/subcomponents/SkillInfoTooltip.tsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+type SkillInfoTooltipProps = {
+  info: {
+    commandName: string;
+    description?: string;
+    compatibility?: string;
+    metadata?: Record<string, unknown>;
+    argumentHint?: string;
+    allowedTools?: string[];
+  };
+};
+
+const formatMetadata = (metadata?: Record<string, unknown>): string | null => {
+  if (!metadata || Object.keys(metadata).length === 0) {
+    return null;
+  }
+
+  const cleaned = { ...metadata };
+  delete cleaned.description;
+  delete cleaned.compatibility;
+  delete cleaned['argument-hint'];
+  delete cleaned.argumentHint;
+  delete cleaned['allowed-tools'];
+  delete cleaned.allowedTools;
+
+  if (Object.keys(cleaned).length === 0) {
+    return null;
+  }
+
+  try {
+    return JSON.stringify(cleaned, null, 2);
+  } catch {
+    return null;
+  }
+};
+
+export default function SkillInfoTooltip({ info }: SkillInfoTooltipProps) {
+  const { t } = useTranslation('chat');
+  const metadataText = formatMetadata(info.metadata);
+
+  return (
+    <div className="pointer-events-auto fixed left-1/2 top-3 z-[1200] max-h-[min(60vh,420px)] w-[min(92vw,560px)] -translate-x-1/2 overflow-y-auto overscroll-contain rounded-xl border border-border/60 bg-card/95 px-4 py-3 text-xs shadow-xl backdrop-blur-sm select-text">
+      <div className="mb-1 text-sm font-semibold text-foreground">{info.commandName}</div>
+
+      {info.description && (
+        <div className="mb-1">
+          <span className="font-medium text-foreground">{t('skillInfoDialog.fields.description')} </span>
+          <span className="text-muted-foreground">{info.description}</span>
+        </div>
+      )}
+
+      {info.compatibility && (
+        <div className="mb-1">
+          <span className="font-medium text-foreground">{t('skillInfoDialog.fields.compatibility')} </span>
+          <span className="text-muted-foreground">{info.compatibility}</span>
+        </div>
+      )}
+
+      {info.argumentHint && (
+        <div className="mb-1">
+          <span className="font-medium text-foreground">{t('skillInfoDialog.fields.argumentHint')} </span>
+          <span className="text-muted-foreground font-mono break-words">
+            {info.argumentHint}
+          </span>
+        </div>
+      )}
+
+      {info.allowedTools && info.allowedTools.length > 0 && (
+        <div className="mb-1">
+          <span className="font-medium text-foreground">{t('skillInfoDialog.fields.allowedTools')} </span>
+          <span className="text-muted-foreground">{info.allowedTools.join(', ')}</span>
+        </div>
+      )}
+
+      {metadataText && (
+        <div>
+          <div className="font-medium text-foreground mb-1">{t('skillInfoDialog.fields.metadata')}</div>
+          <pre
+            className="pointer-events-auto max-h-32 overflow-auto overscroll-contain rounded-md bg-muted/60 p-2 text-[11px] leading-relaxed text-muted-foreground whitespace-pre-wrap break-words select-text"
+            onMouseDown={(event) => event.stopPropagation()}
+            onPointerDown={(event) => event.stopPropagation()}
+          >
+            {metadataText}
+          </pre>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/i18n/locales/en/chat.json b/src/i18n/locales/en/chat.json
index dc2b31091..cc988daa0 100644
--- a/src/i18n/locales/en/chat.json
+++ b/src/i18n/locales/en/chat.json
@@ -117,6 +117,7 @@
     }
   },
   "input": {
+    "dropImagesHere": "Drop images here",
     "placeholder": "Type / for commands, @ for files, or ask {{provider}} anything...",
     "placeholderDefault": "Type your message...",
     "disabled": "Input disabled",
@@ -238,5 +239,39 @@
   },
   "tasks": {
     "nextTaskPrompt": "Start the next task"
+  },
+  "commandMenu": {
+    "noCommands": "No commands available",
+    "viewSkillInfo": "View skill info",
+    "aria": {
+      "availableCommands": "Available commands"
+    },
+    "namespace": {
+      "frequent": "Frequently Used",
+      "builtin": "Built-in Commands",
+      "project": "Project Commands",
+      "user": "User Commands",
+      "skills": "Skills",
+      "other": "Other Commands"
+    }
+  },
+  "skillInfoDialog": {
+    "closeAriaLabel": "Close skill info",
+    "fields": {
+      "description": "description:",
+      "compatibility": "compatibility:",
+      "argumentHint": "argument-hint:",
+      "allowedTools": "allowed-tools:",
+      "metadata": "metadata:"
+    },
+    "usage": {
+      "label": "usage:",
+      "placeholder": "Arguments for this skill"
+    },
+    "actions": {
+      "clear": "Clear",
+      "usage": "Usage",
+      "close": "Close"
+    }
   }
 }
\ No newline at end of file
diff --git a/src/i18n/locales/en/settings.json b/src/i18n/locales/en/settings.json
index 617008a2a..963ccd2c7 100644
--- a/src/i18n/locales/en/settings.json
+++ b/src/i18n/locales/en/settings.json
@@ -72,6 +72,12 @@
       "draggingStatus": "Dragging...",
       "toggleAndMove": "Click to toggle, drag to move"
     },
+    "reloadSkills": {
+      "label": "Reload skills",
+      "description": "Refresh provider skills",
+      "loading": "Reloading...",
+      "title": "Reload provider skills"
+    },
     "whisper": {
       "modes": {
         "default": "Default Mode",
diff --git a/src/i18n/locales/ja/chat.json b/src/i18n/locales/ja/chat.json
index 2c3dda4d6..a137cbcc7 100644
--- a/src/i18n/locales/ja/chat.json
+++ b/src/i18n/locales/ja/chat.json
@@ -98,6 +98,7 @@
     "technicalDetails": "技術的な詳細"
   },
   "input": {
+    "dropImagesHere": "ここに画像をドロップ",
     "placeholder": "/ でコマンド、@ でファイル指定、または {{provider}} に何でも聞いてください...",
     "placeholderDefault": "メッセージを入力...",
     "disabled": "入力無効",
@@ -205,5 +206,39 @@
     "runCommand": "{{projectName}}で{{command}}を実行",
     "startCli": "{{projectName}}でClaude CLIを起動しています",
     "defaultCommand": "コマンド"
+  },
+  "commandMenu": {
+    "noCommands": "利用可能なコマンドがありません",
+    "viewSkillInfo": "スキル情報を表示",
+    "aria": {
+      "availableCommands": "利用可能なコマンド"
+    },
+    "namespace": {
+      "frequent": "よく使うコマンド",
+      "builtin": "組み込みコマンド",
+      "project": "プロジェクトコマンド",
+      "user": "ユーザーコマンド",
+      "skills": "スキル",
+      "other": "その他のコマンド"
+    }
+  },
+  "skillInfoDialog": {
+    "closeAriaLabel": "スキル情報を閉じる",
+    "fields": {
+      "description": "description:",
+      "compatibility": "compatibility:",
+      "argumentHint": "argument-hint:",
+      "allowedTools": "allowed-tools:",
+      "metadata": "metadata:"
+    },
+    "usage": {
+      "label": "usage:",
+      "placeholder": "このスキルの引数"
+    },
+    "actions": {
+      "clear": "クリア",
+      "usage": "Usage",
+      "close": "閉じる"
+    }
   }
 }
diff --git a/src/i18n/locales/ja/settings.json b/src/i18n/locales/ja/settings.json
index 05b944082..3eb19592b 100644
--- a/src/i18n/locales/ja/settings.json
+++ b/src/i18n/locales/ja/settings.json
@@ -72,6 +72,12 @@
       "draggingStatus": "ドラッグ中...",
       "toggleAndMove": "クリックで切替、ドラッグで移動"
     },
+    "reloadSkills": {
+      "label": "スキルを再読み込み",
+      "description": "プロバイダーのスキルを更新",
+      "loading": "再読み込み中...",
+      "title": "プロバイダーのスキルを再読み込み"
+    },
     "whisper": {
       "modes": {
         "default": "標準モード",
diff --git a/src/i18n/locales/ko/chat.json b/src/i18n/locales/ko/chat.json
index ca66e3a95..8681ab8f1 100644
--- a/src/i18n/locales/ko/chat.json
+++ b/src/i18n/locales/ko/chat.json
@@ -99,6 +99,7 @@
     "technicalDetails": "기술 상세"
   },
   "input": {
+    "dropImagesHere": "여기에 이미지를 드롭하세요",
     "placeholder": "/를 입력하여 명령어, @를 입력하여 파일, 또는 {{provider}}에게 무엇이든 물어보세요...",
     "placeholderDefault": "메시지를 입력하세요...",
     "disabled": "입력 비활성화",
@@ -220,5 +221,39 @@
   },
   "tasks": {
     "nextTaskPrompt": "다음 작업 시작"
+  },
+  "commandMenu": {
+    "noCommands": "사용 가능한 명령어가 없습니다",
+    "viewSkillInfo": "스킬 정보 보기",
+    "aria": {
+      "availableCommands": "사용 가능한 명령어"
+    },
+    "namespace": {
+      "frequent": "자주 사용하는 명령어",
+      "builtin": "내장 명령어",
+      "project": "프로젝트 명령어",
+      "user": "사용자 명령어",
+      "skills": "스킬",
+      "other": "기타 명령어"
+    }
+  },
+  "skillInfoDialog": {
+    "closeAriaLabel": "스킬 정보 닫기",
+    "fields": {
+      "description": "description:",
+      "compatibility": "compatibility:",
+      "argumentHint": "argument-hint:",
+      "allowedTools": "allowed-tools:",
+      "metadata": "metadata:"
+    },
+    "usage": {
+      "label": "usage:",
+      "placeholder": "이 스킬에 대한 인수"
+    },
+    "actions": {
+      "clear": "Clear",
+      "usage": "Usage",
+      "close": "Close"
+    }
   }
 }
\ No newline at end of file
diff --git a/src/i18n/locales/ko/settings.json b/src/i18n/locales/ko/settings.json
index bc1074c36..418837663 100644
--- a/src/i18n/locales/ko/settings.json
+++ b/src/i18n/locales/ko/settings.json
@@ -72,6 +72,12 @@
       "draggingStatus": "드래그 중...",
       "toggleAndMove": "클릭하여 토글, 드래그하여 이동"
     },
+    "reloadSkills": {
+      "label": "스킬 다시 불러오기",
+      "description": "프로바이더 스킬 새로고침",
+      "loading": "다시 불러오는 중...",
+      "title": "프로바이더 스킬 다시 불러오기"
+    },
     "whisper": {
       "modes": {
         "default": "기본 모드",
diff --git a/src/i18n/locales/zh-CN/chat.json b/src/i18n/locales/zh-CN/chat.json
index 1fdbc462f..ff476a0ee 100644
--- a/src/i18n/locales/zh-CN/chat.json
+++ b/src/i18n/locales/zh-CN/chat.json
@@ -99,6 +99,7 @@
     "technicalDetails": "技术细节"
   },
   "input": {
+    "dropImagesHere": "将图片拖放到此处",
     "placeholder": "输入 / 调用命令，@ 选择文件，或向 {{provider}} 提问...",
     "placeholderDefault": "输入您的消息...",
     "disabled": "输入已禁用",
@@ -220,5 +221,39 @@
   },
   "tasks": {
     "nextTaskPrompt": "开始下一个任务"
+  },
+  "commandMenu": {
+    "noCommands": "没有可用命令",
+    "viewSkillInfo": "查看技能信息",
+    "aria": {
+      "availableCommands": "可用命令"
+    },
+    "namespace": {
+      "frequent": "常用命令",
+      "builtin": "内置命令",
+      "project": "项目命令",
+      "user": "用户命令",
+      "skills": "技能",
+      "other": "其他命令"
+    }
+  },
+  "skillInfoDialog": {
+    "closeAriaLabel": "关闭技能信息",
+    "fields": {
+      "description": "description:",
+      "compatibility": "compatibility:",
+      "argumentHint": "argument-hint:",
+      "allowedTools": "allowed-tools:",
+      "metadata": "metadata:"
+    },
+    "usage": {
+      "label": "usage:",
+      "placeholder": "该技能的参数"
+    },
+    "actions": {
+      "clear": "清除",
+      "usage": "用法",
+      "close": "关闭"
+    }
   }
 }
\ No newline at end of file
diff --git a/src/i18n/locales/zh-CN/settings.json b/src/i18n/locales/zh-CN/settings.json
index fc9105068..8d41eacad 100644
--- a/src/i18n/locales/zh-CN/settings.json
+++ b/src/i18n/locales/zh-CN/settings.json
@@ -72,6 +72,12 @@
       "draggingStatus": "正在拖拽...",
       "toggleAndMove": "点击切换，拖拽移动"
     },
+    "reloadSkills": {
+      "label": "重新加载技能",
+      "description": "刷新提供方技能",
+      "loading": "重新加载中...",
+      "title": "重新加载提供方技能"
+    },
     "whisper": {
       "modes": {
         "default": "默认模式",