feat(slash-commands): type/source indicators, skill invocation & argument hints

[Drilmo]

Summary

Enhances the "/" slash command menu with rich visual metadata, adds skills to the command list, and introduces argument hint ghost text for skills.

Features

Type badges

Each command in the dropdown shows a color-coded badge indicating its type:

• 🔵 command — built-in commands (newtask, condense, etc.)
• 🟣 mode — mode switching (code, architect, etc.)
• 🟢 workflow — workflow rules (.kilo/rules)
• 🟡 skill — installed skills (SKILL.md based)

Command	Mode
Workflow	Skill

Source labels

Non-built-in items show their origin (project, global, org) to help disambiguate items with similar names.

Type-colored input highlights

When a slash command is typed in the input field, the highlight color matches its type:

Command (blue)	Workflow (green)	Skill (amber)

Skills in "/" menu

Installed skills are now discoverable and invocable directly from the slash command dropdown. Selecting a skill reads its SKILL.md and injects the content as <explicit_instructions> (same pattern as workflows).

Argument hint ghost text

Skills with an argument-hint field in their SKILL.md frontmatter (from the Agent Skills specification) display usage hints as faded ghost text after the command. The hint disappears when the user starts typing arguments, and yields to FIM autocomplete when active.

Changed files

File	Change
src/shared/skills.ts	Add argumentHint? to SkillMetadata
src/services/skills/SkillsManager.ts	Parse argument-hint from SKILL.md frontmatter
src/core/slash-commands/kilo.ts	Add skill matching/invocation in parseKiloSlashCommands
src/core/task/Task.ts	Pass skills from SkillsManager to slash command parser
src/core/webview/webviewMessageHandler.ts	Send skills data to webview on launch
webview-ui/src/context/ExtensionStateContext.tsx	Add skills state + skillsData message handler
webview-ui/src/utils/slash-commands.ts	Add SlashCommandType, SlashCommandSource, SkillInfo, findSlashCommand(), skills parameter to all functions
webview-ui/src/components/chat/SlashCommandMenu.tsx	Type badge colors, source labels, skills in dropdown
webview-ui/src/components/chat/ChatTextArea.tsx	Type-colored highlights, argument hint rendering, skills in keyboard navigation
webview-ui/src/kilocode.css	Type-specific highlight colors + argument hint style

Test plan

• Type "/" in the chat input and verify type badges (command/mode/workflow/skill) appear with correct colors
• Verify source labels (project/global/org) appear for non-built-in items
• Verify installed skills appear in the "/" dropdown list
• Select a skill from the menu and verify it invokes correctly (SKILL.md content injected)
• Arrow-key navigation reaches all items including skills at the bottom
• Type a command and verify the input highlight matches the command type color
• Select a skill with argument-hint frontmatter and verify ghost text appears after the command
• Start typing after a skill command and verify the argument hint disappears
• Verify FIM autocomplete still works and takes priority over argument hints
• pnpm run check-types passes (22/22)
• pnpm run lint passes (18/18, 0 warnings)
• pnpm vitest run passes (515 files, 7831 tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: 6420739

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
kilo-code	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR