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

This PR introduces a skills management UI to the settings panel, with backend support for CRUD operations and validation, new UI components, and extensive testing and localization updates.

• Behavior:
  • Adds skills management UI to settings panel, separate from slash commands.
  • Implements CRUD operations for skills in SkillsManager.
  • Validates skill names per agentskills.io specification.
  • Adds WebviewMessage types for skill operations in vscode-extension-host.ts.
• UI Components:
  • Adds SkillsSettings.tsx, SkillItem.tsx, and CreateSkillDialog.tsx for UI.
  • Integrates skills state into ExtensionStateContext.
  • Adds skills tab to SettingsView.
• Tests:
  • Adds tests for skills management in skillsMessageHandler.spec.ts, SkillsManager.spec.ts, and UI components.
• Localization:
  • Updates localization files for skills management in multiple languages.

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

[roomote]

Rooviewer   See task on Roo Cloud

Review of commit dda3b71: All issues remain resolved. The cleanup to remove unrelated mergeWorktree references is correct and introduces no new issues.

• skillsMessageHandler.ts: Now correctly sends updated skills list after deletion (lines 92-94)
• CreateSkillDialog.tsx: Frontend validation now uses shared validateSkillName from @roo-code/types (line 2, 49-55)

Previous reviews

• 1a2cae6: Review #1
• 6afe465: Review #2
• cdc6574: Review #3
• e204702: Review #4
• 320bf26: Review #5
• 761f7c4: Review #6
• e55d690: Review #7
• 1be4424: Review #8
• 06ff5f4: Review #9

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

[daniel-lxs]

Bruno is going to review the UI and UX before we can merge it.

[mrubens]

Is this unrelated / can we remove?

[mrubens]

@roomote remove references to mergeWorktreeResult

[roomote]

Fixaroo   See task on Roo Cloud

Removed unrelated mergeWorktreeResult and mergeWorktree references from the types file. All checks passed.

_{View commit | Revert commit}