feat: User-facing skills management UI in settings

[SannidhyaSah]

Feature Request

Is your feature request related to a problem?

Currently, the Roo Code extension has a SkillsManager service that can discover and load skills from the file system, but there's no user interface for managing these skills. Users need to manually create skill directories and SKILL.md files using the file system, which is not user-friendly.

Describe the solution you'd like

Implement a user-facing skills management feature in the settings UI that allows users to:

1. View all available skills (both global and workspace-level)
2. Create new skills with proper validation
3. Edit existing skills (opens SKILL.md in VSCode)
4. Delete skills they no longer need
5. Distinguish between global skills (~/.roo/skills/) and workspace skills (project/.roo/skills/)

The UI should be integrated with the existing slash commands section, creating a unified interface for managing both slash commands and skills.

Describe alternatives you've considered

• Keeping the current file-system-only approach (not user-friendly)
• Creating a separate settings section for skills (less efficient use of UI space)

Additional context

The existing SkillsManager service already provides the foundation for discovering and loading skills. The implementation needs to:

• Add CRUD operations to SkillsManager
• Create message types for UI-backend communication
• Build UI components following the patterns used in the slash commands section
• Ensure strict skill name validation per agentskills.io specification

Acceptance Criteria

• Users can view all global and workspace skills in the settings UI
• Users can create new skills with real-time name validation
• Users can edit skills (opens SKILL.md in VSCode editor)
• Users can delete skills with confirmation dialog
• Skills section is integrated with slash commands in a unified interface
• All changes have comprehensive test coverage
• No regressions in existing slash commands functionality

[roomote]

I've analyzed this issue and here's my proposed implementation plan:

Overview

Implement a user-facing skills management UI in the settings, following the established patterns from the slash commands section.

Implementation Plan

1. Extend SkillsManager Service (src/services/skills/SkillsManager.ts)

Add CRUD operations to the existing SkillsManager:

• createSkill(name: string, description: string, source: 'global' | 'project'): Create a new skill directory with SKILL.md
• deleteSkill(name: string, source: 'global' | 'project'): Delete a skill directory
• openSkillInEditor(name: string, source: 'global' | 'project'): Open SKILL.md in VSCode editor
• Add skill name validation method following agentskills.io spec (1-64 chars, lowercase letters/numbers/hyphens)

2. Add Message Types (src/shared/WebviewMessage.ts)

Add new message types for UI-backend communication:

• requestSkills: Fetch all skills
• createSkill: Create a new skill
• deleteSkill: Delete an existing skill
• openSkillFile: Open skill's SKILL.md in editor

3. Add Message Handlers (src/core/webview/webviewMessageHandler.ts)

Implement handlers for the new message types, following the pattern used for commands:

• requestSkills: Use SkillsManager.getAllSkills() and post response
• createSkill: Create skill directory/SKILL.md and open in editor
• deleteSkill: Remove skill directory
• openSkillFile: Open SKILL.md in VSCode

4. Create SkillsSettings UI Component (webview-ui/src/components/settings/SkillsSettings.tsx)

Follow SlashCommandsSettings pattern:

• Section header with icon (using Lightbulb or similar icon from lucide-react)
• Description with documentation link
• Separate sections for Global Skills and Workspace Skills
• SkillItem component for each skill (name, description, edit/delete actions)
• Input field for creating new skills with real-time name validation
• Delete confirmation dialog (using AlertDialog pattern)

5. Create SkillItem Component (webview-ui/src/components/settings/SkillItem.tsx)

Display individual skill with:

• Skill name and description
• Source badge (global/project/mode-specific)
• Edit button (opens SKILL.md in editor)
• Delete button (with confirmation for non-built-in)

6. Update ExtensionStateContext (webview-ui/src/context/ExtensionStateContext.tsx)

Add skills state to track available skills in the UI.

7. Add i18n Translations

Add translation keys for:

• Section headers and descriptions
• Button labels
• Validation error messages
• Delete confirmation dialog text

8. Integrate with Settings Tab (webview-ui/src/components/settings/SettingsView.tsx)

Add a 'skills' tab (or combine with slashCommands in a unified 'customizations' section).

9. Write Comprehensive Tests

• Unit tests for SkillsManager CRUD operations
• Unit tests for SkillsSettings component
• Integration tests for message handling

Key Considerations

• Validation: Real-time skill name validation per agentskills.io spec
• Mode-specific skills: Display mode badge for skills in skills-{mode}/ directories
• Override resolution: Show which skill takes precedence when duplicates exist
• No regressions: Ensure existing slash commands functionality remains intact

This approach mirrors the slash commands implementation while adding skill-specific features like frontmatter validation and mode-specific display.

Please mention @roomote in a comment saying that you approve this plan, and I'll proceed with the implementation.