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

[SannidhyaSah]

Related GitHub Issue

Closes: #10513

Roo Code Task Context (Optional)

No Roo Code task context for this PR

Description

This PR implements a comprehensive user-facing skills management UI in the settings panel, modeled after the existing slash commands interface. Unlike the previous implementation which used a tabbed approach, this version provides a dedicated "Skills" section in the settings sidebar with seamless coexistence alongside slash commands.

Key implementation details:

1. Backend Services:

   • Extended SkillsManager with CRUD methods: getSkillsMetadata(), getSkill(), createSkill(), deleteSkill()
   • Implemented strict agentskills.io specification validation (lowercase, hyphens, 1-64 chars, no leading/trailing/consecutive hyphens)
   • Added WebviewMessage types: requestSkills, createSkill, deleteSkill, openSkillFile
   • Integrated message handlers in webviewMessageHandler.ts with error handling and file operations

2. UI Components:

   • Created SkillsSettings.tsx - Main container with Global/Project sections
   • Built SkillItem.tsx - Individual skill display with edit/delete actions and mode badges
   • Implemented CreateSkillDialog.tsx - Modal dialog with real-time validation
   • Added skills state to ExtensionStateContext following the commands pattern
   • Integrated new Skills tab in SettingsView with Zap icon

3. Design decisions:

   • Separated skills into dedicated settings section (not tabbed with commands)
   • Mode-specific skills show visual badges (e.g., "Mode: code")
   • Edit button opens SKILL.md directly in VSCode editor
   • Real-time form validation with user-friendly error messages
   • Delete confirmation dialogs prevent accidental deletions
   • Empty states guide users when no skills exist

Areas for special attention:

• Message handler implementation in webviewMessageHandler.ts (lines 3007-3090)
• Skill validation logic in SkillsManager.ts (lines 277-294)
• Dialog component mocks in SettingsView test files (required to fix test failures)
• Skills state management flow through ExtensionStateContext

Test Procedure

Automated Tests (All Passing - 6,488 total):

# Full monorepo test suite
pnpm test

# Backend tests (34 tests)
cd src && npx vitest run services/skills/__tests__/SkillsManager.spec.ts

# UI component tests (48 tests)
cd webview-ui && npx vitest run src/components/settings/__tests__/SkillItem.spec.tsx
cd webview-ui && npx vitest run src/components/settings/__tests__/SkillsSettings.spec.tsx
cd webview-ui && npx vitest run src/components/settings/__tests__/CreateSkillDialog.spec.tsx

# Integration/regression tests
cd webview-ui && npx vitest run src/components/settings/__tests__/SettingsView.spec.tsx
cd webview-ui && npx vitest run src/components/settings/__tests__/SettingsView.change-detection.spec.tsx
cd webview-ui && npx vitest run src/components/settings/__tests__/SettingsView.unsaved-changes.spec.tsx

Test Results:

Tasks:    10 successful, 10 total
Time:     1m17.347s

roo-cline:test:     Test Files  377 passed | 4 skipped (381)
roo-cline:test:          Tests  5355 passed | 49 skipped (5404)

webview-ui:test:    Test Files  112 passed (112)
webview-ui:test:         Tests  1133 passed | 8 skipped (1141)

• Total: 6,488 tests passing ✅
• New skills tests: 82 tests ✅
• Regression tests: All existing tests pass ✅
• TypeScript: 0 errors ✅

Manual Testing Steps:

1. Open Roo Code settings panel
2. Navigate to "Skills" section in the sidebar
3. Verify Global Skills and Project Skills sections display
4. Click "Add Skill" button
5. Test creating a skill:
   • Enter valid name (e.g., "my-skill-name")
   • Enter description (e.g., "Test skill for validation")
   • Select source (Global/Project)
   • Optionally select mode
   • Click "Create"
6. Verify validation:
   • Try uppercase letters (should show error)
   • Try special characters (should show error)
   • Try > 64 characters (should show error)
   • Verify description length limits
7. Click edit icon to open SKILL.md in editor
8. Click delete icon, confirm deletion in dialog
9. Verify skills persist after reloading settings
10. Test workspace skills (only when workspace is open)

Pre-Submission Checklist

• Issue Linked: This PR is linked to an approved GitHub Issue (feat: User-facing skills management UI in settings #10513).
• Scope: My changes are focused on the linked issue (skills management UI).
• Self-Review: I have performed a thorough self-review of my code.
• Testing: New and updated tests have been added to cover my changes (82 new tests, all passing).
• Documentation Impact: I have considered if my changes require documentation updates (see "Documentation Updates" section below).
• Contribution Guidelines: I have read and agree to the Contributor Guidelines.

Screenshots / Videos

Skills Settings UI showing Global and Project sections:

Documentation Updates

• Yes, documentation updates are required:
  • User guide for creating and managing skills via the Settings UI
  • Explanation of Global vs Project skills scope and behavior
  • Skills naming conventions per agentskills.io specification
  • How to create mode-specific skills
  • Integration with existing SkillsManager system
  • Skills discovery and override resolution (project > global, mode-specific > generic)

Additional Notes

Implementation Differences from Previous PR:

• This implementation creates a dedicated "Skills" section in the sidebar instead of tabbing with slash commands
• Uses separate SkillsSettings, SkillItem, and CreateSkillDialog components
• Skills and commands maintain complete independence while coexisting seamlessly
• Test fixes for Dialog component mocks were required in 3 SettingsView test files

Get in Touch

TBD

---

Important

Adds a skills management UI to the settings panel with backend support for CRUD operations, validation, and extensive test coverage.

• Behavior:
  • Adds skills management UI to settings panel, separate from slash commands.
  • Supports CRUD operations for skills via SkillsManager with methods like getSkillsMetadata(), createSkill(), deleteSkill().
  • Implements validation for skill names and descriptions.
  • Integrates new WebviewMessage types for skills operations in webviewMessageHandler.ts.
• UI Components:
  • Introduces SkillsSettings.tsx, SkillItem.tsx, and CreateSkillDialog.tsx for managing skills.
  • Adds skills state to ExtensionStateContext.
  • Includes real-time validation and user-friendly error messages.
• Testing:
  • Adds 82 new tests for skills management, all passing.
  • Updates existing tests to accommodate new dialog components.
• Misc:
  • Updates i18n files for skills-related translations.

^{This description was created by for 761f7c4. You can customize this summary. It will automatically update as commits are pushed.}

[roomote]

Rooviewer   See task on Roo Cloud

Review of commit 761f7c4: All previously flagged issues remain resolved. The new commit adds i18n translations for skills UI in all 17 supported languages.

• webviewMessageHandler.ts: Now correctly sends updated skills list after deletion
• CreateSkillDialog.tsx: Frontend validation regex now matches backend validation

Previous reviews

• e55d690: Review #1
• 1be4424: Review #2
• 06ff5f4: Review #3

_{Mention @roomote in a comment to request specific changes to this pull request or fix all unresolved issues.}