Add UI for agent skills #286262
Add UI for agent skills #286262
Conversation
There was a problem hiding this comment.
Pull request overview
This PR adds UI functionality for creating and managing agent skills in VS Code's chat feature. Skills are stored as SKILL.md files within subdirectories in either workspace locations (.github/skills, .claude/skills) or user home directories (~/.copilot/skills, ~/.claude/skills).
Key Changes
- Added "New Skill..." command to create new skill files with a guided workflow for selecting location and folder name
- Added "Manage Skills..." action to view, open, and create skills through a quick pick interface
- Skills follow a frontmatter-based template structure similar to other prompt files
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| src/vs/workbench/contrib/chat/browser/promptSyntax/promptFileActions.ts | Imports and registers the new manage skills action |
| src/vs/workbench/contrib/chat/browser/promptSyntax/newPromptFileActions.ts | Adds NewSkillAction class with skill creation workflow, command ID export, and action registration |
| src/vs/workbench/contrib/chat/browser/promptSyntax/manageSkillsAction.ts | New file implementing ManageSkillsAction to browse and open existing skills or create new ones |
| `name: "\${1:${trimmedFolderName}}"`, | ||
| `description: "\${2:Describe what this skill does and when to use it.}"`, |
There was a problem hiding this comment.
Inconsistent quote style in the frontmatter template. The existing templates in getDefaultContentSnippet use single quotes around field values (e.g., description: '\${1:...}'), but this skill template uses double quotes. For consistency with other prompt file templates, change the double quotes to single quotes.
| `name: "\${1:${trimmedFolderName}}"`, | |
| `description: "\${2:Describe what this skill does and when to use it.}"`, | |
| `name: '\${1:${trimmedFolderName}}'`, | |
| `description: '\${2:Describe what this skill does and when to use it.}'`, |
| `name: "\${1:${trimmedFolderName}}"`, | ||
| `description: "\${2:Describe what this skill does and when to use it.}"`, | ||
| `---`, | ||
| `\${3:Provide detailed instructions for this skill, including specific knowledge, procedures, or guidelines that Claude should follow when this skill is loaded.}`, |
There was a problem hiding this comment.
The template content references "Claude" which is a specific AI assistant product. This should use a more generic term like "the agent" or "AI" to be product-agnostic and consistent with VS Code's approach of supporting multiple AI providers.
| `\${3:Provide detailed instructions for this skill, including specific knowledge, procedures, or guidelines that Claude should follow when this skill is loaded.}`, | |
| `\${3:Provide detailed instructions for this skill, including specific knowledge, procedures, or guidelines that the agent should follow when this skill is loaded.}`, |
| Severity.Info, | ||
| localize( | ||
| 'workbench.command.skill.create.user.enable-sync-notification', | ||
| "Do you want to backup and sync your user skill files with Setting Sync?'", |
There was a problem hiding this comment.
Spelling error: There's an extra apostrophe at the end of this message. The message should end with a question mark followed by a double quote, not an apostrophe.
| "Do you want to backup and sync your user skill files with Setting Sync?'", | |
| "Do you want to backup and sync your user skill files with Setting Sync?", |
| const { folders } = workspaceContextService.getWorkspace(); | ||
| if (folders.length > 0) { | ||
| skillLocations.push({ | ||
| label: localize('skill.location.github', ".github/skills"), | ||
| path: '.github/skills', | ||
| description: localize('skill.location.github.desc', "Workspace") | ||
| }); | ||
|
|
||
| } |
There was a problem hiding this comment.
The skill location path '.claude/skills' is missing from the workspace skill locations, but it's present in DEFAULT_AGENT_SKILLS_WORKSPACE_FOLDERS. According to the configuration in promptFileLocations.ts, workspace skills can be created in both '.github/skills' and '.claude/skills'. The code should include a check for Claude skills location similar to the user home locations.
| if (selectedLocation.isUser) { | ||
| const homeDir = userDataProfileService.currentProfile.location; | ||
| baseUri = URI.joinPath(homeDir, selectedLocation.path); |
There was a problem hiding this comment.
This uses the wrong base directory for user skills. The code uses userDataProfileService.currentProfile.location, which is the profile directory, but should use the actual user home directory. The existing code in promptFilesLocator.ts uses pathService.userHome() to find skills in user home directories like ~/.copilot/skills and ~/.claude/skills. Using the profile location will create skills in the wrong place. You should inject IPathService and use await pathService.userHome() instead.
No description provided.