feat: Add user-facing skills management UI (#10513) #10517

SannidhyaSah · 2026-01-07T15:26:22Z

Related GitHub Issue

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:

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
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
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:

Open Roo Code settings
Navigate to "Commands & Skills" section
Click "Skills" tab
Test creating a global skill with a valid name (e.g., "my-skill")
Verify validation rejects invalid names (uppercase, special chars, etc.)
Click edit to open SKILL.md in editor
Click delete and confirm deletion
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

Add user-facing skills management UI with backend CRUD operations and new UI components for skill management.

Backend Services:
- Enhance SkillsManager with CRUD operations: createSkill, deleteSkill, getSkillsForUI, getSkillFilePath.
- Implement skill name validation in SkillsManager.ts (lines 39-59).
- Add WebviewMessage types for UI-backend communication in webviewMessageHandler.ts (lines 3032+).
UI Components:
- Create CommandsAndSkillsSettings component with tabs for "Slash Commands" and "Skills".
- Implement SkillsTab with sections for Global and Workspace skills.
- Add SkillItem component for skill display with edit/delete actions.
Design Decisions:
- Reuse existing UI patterns for consistency.
- Provide real-time validation feedback for skill names.
- Edit button opens SKILL.md in VSCode editor.
- Move SkillForUI interface to shared types to prevent circular imports.

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

roomote · 2026-01-07T15:26:51Z

Rooviewer Follow along on Roo Cloud

Critical TypeScript compilation errors found. The skills state management was removed during the circular import fix but never restored, breaking the entire Skills UI at both compile-time and runtime.

SkillsTab.tsx: Frontend validation regex does not match backend validation, causing inputs like trailing/consecutive hyphens to pass frontend validation but fail on creation
SkillsTab.tsx: TypeScript compilation fails - skills property doesn't exist in ExtensionStateContextType, skills message types missing from WebviewMessage/ExtensionMessage unions, and no message handler for skills updates

Previous reviews

846ffde: Review #1

3944bdd: Review #2

e4983e5: Review #3

f0a13a5: Review #4

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

webview-ui/src/components/settings/SkillsTab.tsx

hannesrudolph · 2026-01-08T02:26:29Z

@brunobergher

brunobergher · 2026-01-08T20:30:03Z

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.

roomote · 2026-01-19T20:52:51Z

Updated PR to address feedback from @brunobergher:

Changes made:

✅ Separated Skills into standalone settings section (no longer tabbed with slash commands)
✅ Restored SlashCommandsSettings to original state
✅ Created new SkillsSettings component
✅ Updated SettingsView to show both sections separately in sidebar
✅ Fixed all i18n files across 18 locales
✅ Removed CommandsAndSkillsSettings component
✅ All tests passing (42/42 ✓)
✅ TypeScript and linting clean

Skills now appears as its own section in the settings sidebar, separate from Slash Commands, as requested.

Implements a comprehensive skills management feature in the settings UI by expanding the existing slash commands section into a unified 'Commands & Skills' interface. - Add CRUD operations to SkillsManager (create, delete, getSkillsForUI, getSkillFilePath) - Implement skill name validation (agentskills.io spec compliance) - Add WebviewMessage types: requestSkills, createSkill, deleteSkill, openSkillFile - Add ExtensionMessage type for skills state updates - Implement message handlers for skills CRUD operations - Create CommandsAndSkillsSettings component with tabbed interface - Create SkillsTab component with Global/Workspace sections - Create SkillItem component for individual skill display - Add skills state management to ExtensionStateContext - Add i18n translations for skills UI - Update SettingsView to use new unified component - 35 backend tests for SkillsManager (all passing) - 18 UI tests for new components (all passing) - 27 regression tests for existing functionality (all passing) Total: 80 tests passing

…port Moving the SkillForUI interface definition from SkillsManager.ts to shared/ExtensionMessage.ts prevents the webview-ui TypeScript compilation from pulling in the entire SkillsManager service and its dependencies, which was triggering strict mode checks on unrelated files.

The frontend validation regex now matches the backend exactly: - Prevents trailing hyphens (e.g., 'skill-' is now invalid) - Prevents consecutive hyphens (e.g., 'skill--name' is now invalid) - Prevents leading hyphens (already prevented) - Requires starting with letter or number This ensures users get immediate feedback for invalid names before attempting to create a skill.

Added translations for the new Skills UI feature to all locale files: - ca, de, es, fr, hi, id, it, ja, ko, nl, pl, pt-BR, ru, tr, vi, zh-CN, zh-TW Translations include: - Section titles (Commands & Skills, tabs) - Skill labels (Global/Workspace Skills) - Placeholders and validation messages - Delete dialog strings Verified with scripts/find-missing-translations.js - all checks pass.

- Moved Skills from tabbed interface to standalone settings section - Restored SlashCommandsSettings to original non-tabbed state - Created new SkillsSettings component wrapping SkillsTab - Updated SettingsView to include both sections separately - Updated all i18n translations (18 locales) for new section structure - Removed CommandsAndSkillsSettings component and its tests - Added SkillsSettings test suite - All tests passing (42/42) Addresses feedback from Bruno Bergher requesting Skills be separated from slash commands into their own section due to complexity differences.

roomote · 2026-01-20T03:47:11Z

webview-ui/src/components/settings/SkillsTab.tsx

+
+export const SkillsTab: React.FC = () => {
+	const { t } = useAppTranslation()
+	const { skills, cwd } = useExtensionState()


The skills property doesn't exist in ExtensionStateContextType, causing TypeScript compilation to fail with "Property 'skills' does not exist on type 'ExtensionStateContextType'". The skills state management was removed in commit d97c018 to fix circular imports but was never added back. Additionally, the message types "requestSkills", "createSkill", "deleteSkill", and "openSkillFile" are not in the WebviewMessage type union, and there's no "skills" message type in ExtensionMessage type union or skills property in the ExtensionMessage interface. The ExtensionStateContext also lacks a message handler for the "skills" message. This breaks the entire Skills UI functionality at both compile-time and runtime.

_{Fix it with Roo Code or mention @roomote and request a fix.}

SannidhyaSah requested review from cte, jr and mrubens as code owners January 7, 2026 15:26

github-project-automation bot added this to Roo Code Roadmap and Roo Code Roadmap Jan 7, 2026

github-project-automation bot moved this to Triage in Roo Code Roadmap Jan 7, 2026

github-project-automation bot moved this to New in Roo Code Roadmap Jan 7, 2026

dosubot bot added size:XXL This PR changes 1000+ lines, ignoring generated files. Enhancement New feature or request labels Jan 7, 2026

roomote bot reviewed Jan 7, 2026

View reviewed changes

webview-ui/src/components/settings/SkillsTab.tsx Show resolved Hide resolved

hannesrudolph added the Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. label Jan 7, 2026

roomote bot approved these changes Jan 7, 2026

View reviewed changes

hannesrudolph moved this from Triage to PR [Needs Review] in Roo Code Roadmap Jan 8, 2026

hannesrudolph added PR - Needs Review and removed Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. labels Jan 8, 2026

hannesrudolph moved this from PR [Needs Review] to PR [Needs Prelim Review] in Roo Code Roadmap Jan 12, 2026

hannesrudolph added PR - Needs Preliminary Review and removed PR - Needs Review labels Jan 12, 2026

roomote bot approved these changes Jan 19, 2026

View reviewed changes

Sannidhya and others added 5 commits January 20, 2026 08:48

SannidhyaSah force-pushed the feature/skills-management-ui branch from 846ffde to 4baea98 Compare January 20, 2026 03:28

SannidhyaSah closed this Jan 20, 2026

github-project-automation bot moved this from PR [Needs Prelim Review] to Done in Roo Code Roadmap Jan 20, 2026

github-project-automation bot moved this from New to Done in Roo Code Roadmap Jan 20, 2026

SannidhyaSah deleted the feature/skills-management-ui branch January 20, 2026 03:45

roomote bot reviewed Jan 20, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add user-facing skills management UI (#10513) #10517

feat: Add user-facing skills management UI (#10513) #10517

Uh oh!

SannidhyaSah commented Jan 7, 2026 •

edited by ellipsis-dev bot

Loading

Uh oh!

roomote bot commented Jan 7, 2026 •

edited

Loading

Uh oh!

Uh oh!

hannesrudolph commented Jan 8, 2026

Uh oh!

brunobergher commented Jan 8, 2026

Uh oh!

roomote bot commented Jan 19, 2026

Uh oh!

roomote bot Jan 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

feat: Add user-facing skills management UI (#10513) #10517

feat: Add user-facing skills management UI (#10513) #10517

Uh oh!

Conversation

SannidhyaSah commented Jan 7, 2026 • edited by ellipsis-dev bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related GitHub Issue

Roo Code Task Context (Optional)

Description

Test Procedure

Pre-Submission Checklist

Screenshots / Videos

Documentation Updates

Additional Notes

Get in Touch

Uh oh!

roomote bot commented Jan 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

hannesrudolph commented Jan 8, 2026

Uh oh!

brunobergher commented Jan 8, 2026

Uh oh!

roomote bot commented Jan 19, 2026

Uh oh!

roomote bot Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

SannidhyaSah commented Jan 7, 2026 •

edited by ellipsis-dev bot

Loading

roomote bot commented Jan 7, 2026 •

edited

Loading