feat: Add user-facing skills management UI (#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 feature in the settings UI by expanding and refactoring the existing slash commands section.

Key implementation details:

1. Backend Services:

   • Enhanced SkillsManager with CRUD operations (createSkill, deleteSkill, getSkillsForUI, getSkillFilePath)
   • Implemented strict skill name validation following agentskills.io specification (1-64 chars, lowercase, hyphens only)
   • Added WebviewMessage types for UI-backend communication: requestSkills, createSkill, deleteSkill, openSkillFile
   • Integrated message handlers in webviewMessageHandler.ts with proper error handling

2. UI Components:

   • Created CommandsAndSkillsSettings component with a tabbed interface ("Slash Commands" | "Skills")
   • Implemented SkillsTab with Global and Workspace skills sections
   • Built SkillItem component for individual skill display with edit/delete actions
   • Added skills state management to ExtensionStateContext

3. Design decisions:

   • Reused existing slash commands UI patterns for consistency
   • Tabbed interface keeps the UI clean while accommodating both features
   • Real-time validation feedback for skill names
   • Edit button opens SKILL.md directly in VSCode editor
   • Moved SkillForUI interface to shared types to prevent circular imports

Areas for special attention:

• Message handler implementation in webviewMessageHandler.ts (skills CRUD operations starting at line 3032)
• Skill name validation logic in SkillsManager.ts (line 39-59)
• Tab state management in CommandsAndSkillsSettings.tsx
• SkillForUI interface location in src/shared/ExtensionMessage.ts

Test Procedure

Automated Tests (All Passing):

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

# UI component tests (18 tests)
cd webview-ui && npx vitest run src/components/settings/__tests__/SkillItem.spec.tsx
cd webview-ui && npx vitest run src/components/settings/__tests__/SkillsTab.spec.tsx
cd webview-ui && npx vitest run src/components/settings/__tests__/CommandsAndSkillsSettings.spec.tsx

# Regression tests (27 tests)
cd webview-ui && npx vitest run src/components/settings/__tests__/SlashCommandsSettings.spec.tsx

# TypeScript compilation
cd webview-ui && npx tsc  # No errors
cd src && npx tsc --noEmit  # No errors

Test Results:

• Total: 80 tests passing
• Backend: 35/35 ✅
• New UI: 18/18 ✅
• Regression: 27/27 ✅
• TypeScript: 0 errors ✅
• Lint: 0 warnings ✅

Manual Testing Steps:

1. Open Roo Code settings
2. Navigate to "Commands & Skills" section
3. Click "Skills" tab
4. Test creating a global skill with a valid name (e.g., "my-skill")
5. Verify validation rejects invalid names (uppercase, special chars, etc.)
6. Click edit to open SKILL.md in editor
7. Click delete and confirm deletion
8. Repeat for workspace skills (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 skills management feature (one major feature per PR).
• Self-Review: I have performed a thorough self-review of my code.
• Testing: New and updated tests have been added to cover my changes (80 tests total).
• 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

Documentation Updates

• Yes, documentation updates are required:
  • User guide for creating and managing skills via the UI
  • Explanation of Global vs Workspace skills
  • Skills naming conventions (agentskills.io spec)
  • How skills integrate with the existing SkillsManager system

Additional Notes

TypeScript Fix: The second commit fixes a circular import issue by moving the SkillForUI interface to src/shared/ExtensionMessage.ts. This prevents the webview-ui compilation from pulling in the entire SkillsManager service and its dependencies.

Get in Touch

TBD

---

Important

Introduces a skills management UI in the settings, with backend support for skill CRUD operations and validation, and updates the UI with new components and tests.

• Behavior:
  • Adds skills management UI in CommandsAndSkillsSettings.tsx with tabs for "Slash Commands" and "Skills".
  • Implements skill CRUD operations in SkillsManager.ts and integrates with webviewMessageHandler.ts.
  • Validates skill names (1-64 chars, lowercase, hyphens) in SkillsManager.ts.
• UI Components:
  • Creates SkillsTab and SkillItem components for skill display and management.
  • Updates SettingsView.tsx to include the new CommandsAndSkillsSettings component.
• Testing:
  • Adds tests for SkillsManager in SkillsManager.spec.ts.
  • Adds UI tests for CommandsAndSkillsSettings, SkillsTab, and SkillItem components.
• Misc:
  • Moves SkillForUI interface to ExtensionMessage.ts to prevent circular imports.
  • Updates i18n files for new skills management UI text.

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

[roomote]

Rooviewer   See task on Roo Cloud

No new issues found. The latest commit adds Skills UI translations for all 17 locales. All previously flagged issues have been resolved.

• SkillsTab.tsx: Frontend validation regex does not match backend validation, causing inputs like trailing/consecutive hyphens to pass frontend validation but fail on creation

Previous reviews

• e4983e5: Review #1
• f0a13a5: Review #2

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

[hannesrudolph]

@brunobergher

[brunobergher]

I'd keep skills separate form slash commands right now, and I suspect they are more complex to write, since they can include child files, scripts, additional instructions, etc.

So I'd ask to make this its own section in settings.