feat: add skills management UI to settings panel (#10513)

- Add SkillsSettings, SkillItem, and CreateSkillDialog components
- Extend SkillsManager with CRUD operations
- Add skills state to ExtensionStateContext
- Implement message handlers for skills operations
- Add comprehensive tests (82 new tests, all passing)
- Add i18n translations for skills UI
- Fix Dialog component mocks in SettingsView tests
- Fix lint warnings for unused parameters

Author: Sannidhya

packages/types/src/index.ts

@@ -19,6 +19,7 @@ export * from "./message.js"
 export * from "./mode.js"
 export * from "./model.js"
 export * from "./provider-settings.js"
+export * from "./skills.js"
 export * from "./task.js"
 export * from "./todo.js"
 export * from "./telemetry.js"

packages/types/src/skills.ts

@@ -0,0 +1,11 @@
+/**
+ * Skill metadata for discovery (loaded at startup)
+ * Only name and description are required for now
+ */
+export interface SkillMetadata {
+	name: string // Required: skill identifier
+	description: string // Required: when to use this skill
+	path: string // Absolute path to SKILL.md
+	source: "global" | "project" // Where the skill was discovered
+	mode?: string // If set, skill is only available in this mode
+}

packages/types/src/vscode-extension-host.ts

@@ -18,6 +18,7 @@ import type { CloudUserInfo, CloudOrganizationMembership, OrganizationAllowList,
 import type { SerializedCustomToolDefinition } from "./custom-tool.js"
 import type { GitCommit } from "./git.js"
 import type { McpServer } from "./mcp.js"
+import type { SkillMetadata } from "./skills.js"
 import type { ModelRecord, RouterModels } from "./model.js"
 import type { OpenAiCodexRateLimitInfo } from "./providers/openai-codex-rate-limits.js"
 
@@ -97,6 +98,7 @@ export interface ExtensionMessage {
 		| "modes"
 		| "taskWithAggregatedCosts"
 		| "openAiCodexRateLimits"
+		| "skills"
 	text?: string
 	payload?: any // eslint-disable-line @typescript-eslint/no-explicit-any
 	checkpointWarning?: {
@@ -187,6 +189,7 @@ export interface ExtensionMessage {
 	stepIndex?: number // For browserSessionNavigate: the target step index to display
 	tools?: SerializedCustomToolDefinition[] // For customToolsResult
 	modes?: { slug: string; name: string }[] // For modes response
+	skills?: SkillMetadata[] // For skills response
 	aggregatedCosts?: {
 		// For taskWithAggregatedCosts response
 		totalCost: number
@@ -533,6 +536,10 @@ export interface WebviewMessage {
 		| "requestModes"
 		| "switchMode"
 		| "debugSetting"
+		| "requestSkills"
+		| "createSkill"
+		| "deleteSkill"
+		| "openSkillFile"
 	text?: string
 	editedMessageContent?: string
 	tab?: "settings" | "history" | "mcp" | "modes" | "chat" | "marketplace" | "cloud"
@@ -567,6 +574,9 @@ export interface WebviewMessage {
 	timeout?: number
 	payload?: WebViewMessagePayload
 	source?: "global" | "project"
+	skillName?: string // For skill operations (createSkill, deleteSkill, openSkillFile)
+	skillMode?: string // For skill operations (mode restriction)
+	skillDescription?: string // For createSkill (skill description)
 	requestId?: string
 	ids?: string[]
 	hasSystemPromptOverride?: boolean

src/core/webview/webviewMessageHandler.ts

@@ -2999,6 +2999,105 @@ export const webviewMessageHandler = async (
 			}
 			break
 		}
+		case "requestSkills": {
+			try {
+				const skillsManager = provider.getSkillsManager()
+				if (skillsManager) {
+					const skills = skillsManager.getSkillsMetadata()
+					await provider.postMessageToWebview({ type: "skills", skills })
+				} else {
+					await provider.postMessageToWebview({ type: "skills", skills: [] })
+				}
+			} catch (error) {
+				provider.log(`Error fetching skills: ${JSON.stringify(error, Object.getOwnPropertyNames(error), 2)}`)
+				await provider.postMessageToWebview({ type: "skills", skills: [] })
+			}
+			break
+		}
+		case "createSkill": {
+			try {
+				const skillName = message.skillName
+				const source = message.source
+				const skillDescription = message.skillDescription
+				const skillMode = message.skillMode
+
+				if (!skillName || !source || !skillDescription) {
+					throw new Error("Missing required fields: skillName, source, or skillDescription")
+				}
+
+				const skillsManager = provider.getSkillsManager()
+				if (!skillsManager) {
+					throw new Error("Skills manager not available")
+				}
+
+				const createdPath = await skillsManager.createSkill(skillName, source, skillDescription, skillMode)
+
+				// Open the created file in the editor
+				openFile(createdPath)
+
+				// Send updated skills list
+				const skills = skillsManager.getSkillsMetadata()
+				await provider.postMessageToWebview({ type: "skills", skills })
+			} catch (error) {
+				const errorMessage = error instanceof Error ? error.message : String(error)
+				provider.log(`Error creating skill: ${errorMessage}`)
+				vscode.window.showErrorMessage(`Failed to create skill: ${errorMessage}`)
+			}
+			break
+		}
+		case "deleteSkill": {
+			try {
+				const skillName = message.skillName
+				const source = message.source
+				const skillMode = message.skillMode
+
+				if (!skillName || !source) {
+					throw new Error("Missing required fields: skillName or source")
+				}
+
+				const skillsManager = provider.getSkillsManager()
+				if (!skillsManager) {
+					throw new Error("Skills manager not available")
+				}
+
+				await skillsManager.deleteSkill(skillName, source, skillMode)
+
+				// UI will handle refresh via setTimeout
+			} catch (error) {
+				const errorMessage = error instanceof Error ? error.message : String(error)
+				provider.log(`Error deleting skill: ${errorMessage}`)
+				vscode.window.showErrorMessage(`Failed to delete skill: ${errorMessage}`)
+			}
+			break
+		}
+		case "openSkillFile": {
+			try {
+				const skillName = message.skillName
+				const source = message.source
+				const skillMode = message.skillMode
+
+				if (!skillName || !source) {
+					throw new Error("Missing required fields: skillName or source")
+				}
+
+				const skillsManager = provider.getSkillsManager()
+				if (!skillsManager) {
+					throw new Error("Skills manager not available")
+				}
+
+				const skill = skillsManager.getSkill(skillName, source, skillMode)
+				if (!skill) {
+					throw new Error(`Skill "${skillName}" not found`)
+				}
+
+				openFile(skill.path)
+			} catch (error) {
+				const errorMessage = error instanceof Error ? error.message : String(error)
+				provider.log(`Error opening skill file: ${errorMessage}`)
+				vscode.window.showErrorMessage(`Failed to open skill file: ${errorMessage}`)
+			}
+			break
+		}
 		case "openCommandFile": {
 			try {
 				if (message.text) {

src/services/skills/SkillsManager.ts

@@ -1,5 +1,6 @@
 import * as fs from "fs/promises"
 import * as path from "path"
+import * as os from "os"
 import * as vscode from "vscode"
 import matter from "gray-matter"
 
@@ -239,6 +240,142 @@ export class SkillsManager {
 		}
 	}
 
+	/**
+	 * Get all skills metadata (for UI display)
+	 * Returns skills from all sources without content
+	 */
+	getSkillsMetadata(): SkillMetadata[] {
+		return Array.from(this.skills.values())
+	}
+
+	/**
+	 * Get a skill by name, source, and optionally mode
+	 */
+	getSkill(name: string, source: "global" | "project", mode?: string): SkillMetadata | undefined {
+		const skillKey = this.getSkillKey(name, source, mode)
+		return this.skills.get(skillKey)
+	}
+
+	/**
+	 * Validate skill name per agentskills.io spec
+	 * - 1-64 chars
+	 * - lowercase letters/numbers/hyphens only
+	 * - must not start/end with hyphen
+	 * - must not contain consecutive hyphens
+	 */
+	private validateSkillName(name: string): { valid: boolean; error?: string } {
+		if (name.length < 1 || name.length > 64) {
+			return { valid: false, error: `Skill name must be 1-64 characters (got ${name.length})` }
+		}
+
+		const nameFormat = /^[a-z0-9]+(?:-[a-z0-9]+)*$/
+		if (!nameFormat.test(name)) {
+			return {
+				valid: false,
+				error: "Skill name must be lowercase letters/numbers/hyphens only (no leading/trailing hyphen, no consecutive hyphens)",
+			}
+		}
+
+		return { valid: true }
+	}
+
+	/**
+	 * Create a new skill
+	 * @param name - Skill name (must be valid per agentskills.io spec)
+	 * @param source - "global" or "project"
+	 * @param description - Skill description
+	 * @param mode - Optional mode restriction (creates in skills-{mode}/ directory)
+	 * @returns Path to created SKILL.md file
+	 */
+	async createSkill(name: string, source: "global" | "project", description: string, mode?: string): Promise<string> {
+		// Validate skill name
+		const validation = this.validateSkillName(name)
+		if (!validation.valid) {
+			throw new Error(validation.error)
+		}
+
+		// Validate description
+		const trimmedDescription = description.trim()
+		if (trimmedDescription.length < 1 || trimmedDescription.length > 1024) {
+			throw new Error(`Skill description must be 1-1024 characters (got ${trimmedDescription.length})`)
+		}
+
+		// Determine base directory
+		let baseDir: string
+		if (source === "global") {
+			baseDir = getGlobalRooDirectory()
+		} else {
+			const provider = this.providerRef.deref()
+			if (!provider?.cwd) {
+				throw new Error("Cannot create project skill: no workspace folder is open")
+			}
+			baseDir = path.join(provider.cwd, ".roo")
+		}
+
+		// Determine skills directory (with optional mode suffix)
+		const skillsDirName = mode ? `skills-${mode}` : "skills"
+		const skillsDir = path.join(baseDir, skillsDirName)
+		const skillDir = path.join(skillsDir, name)
+		const skillMdPath = path.join(skillDir, "SKILL.md")
+
+		// Check if skill already exists
+		if (await fileExists(skillMdPath)) {
+			throw new Error(`Skill "${name}" already exists at ${skillMdPath}`)
+		}
+
+		// Create the skill directory
+		await fs.mkdir(skillDir, { recursive: true })
+
+		// Generate SKILL.md content with frontmatter
+		const titleName = name
+			.split("-")
+			.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+			.join(" ")
+
+		const skillContent = `---
+name: ${name}
+description: ${trimmedDescription}
+---
+
+# ${titleName}
+
+## Instructions
+
+Add your skill instructions here.
+`
+
+		// Write the SKILL.md file
+		await fs.writeFile(skillMdPath, skillContent, "utf-8")
+
+		// Refresh skills list
+		await this.discoverSkills()
+
+		return skillMdPath
+	}
+
+	/**
+	 * Delete a skill
+	 * @param name - Skill name to delete
+	 * @param source - Where the skill is located
+	 * @param mode - Optional mode (to locate in skills-{mode}/ directory)
+	 */
+	async deleteSkill(name: string, source: "global" | "project", mode?: string): Promise<void> {
+		// Find the skill
+		const skill = this.getSkill(name, source, mode)
+		if (!skill) {
+			throw new Error(`Skill "${name}" not found in ${source} ${mode ? `(mode: ${mode})` : ""}`)
+		}
+
+		// Get the skill directory (parent of SKILL.md)
+		const skillDir = path.dirname(skill.path)
+
+		// Delete the entire skill directory
+		await fs.rm(skillDir, { recursive: true, force: true })
+
+		// Refresh skills list
+		await this.discoverSkills()
+	}
+
 	/**
 	 * Get all skills directories to scan, including mode-specific directories.
 	 */