VS Code Integration

VS Code has built-in AI features (Copilot Chat, inline completions) and supports extensions like Cline, Continue, and others. Skills Playground skills work with all of these through custom instructions files and settings.

VS Code Copilot Chat

VS Code's built-in Copilot Chat supports custom instructions through the .github/copilot-instructions.md file. This is the primary way to use Skills Playground skills with VS Code's native AI features.

Create the file at your project root:

mkdir -p .github
touch .github/copilot-instructions.md

Then paste any skill's system prompt from Skills Playground into the file. See the GitHub Copilot integration guide for details.

Custom Instructions File

VS Code also supports a .vscode/settings.json file for project-specific settings, including AI behavior. You can reference instruction files or set custom prompts:

{
  "github.copilot.chat.codeGeneration.instructions": [
    { "file": ".github/copilot-instructions.md" }
  ],
  "github.copilot.chat.testGeneration.instructions": [
    { "text": "Use Vitest. Colocate tests next to source files." }
  ],
  "github.copilot.chat.reviewSelection.instructions": [
    { "text": "Check for TypeScript strict mode compliance." }
  ]
}

This gives you fine-grained control -- different instructions for code generation, testing, and code review. You can reference external files or provide inline text.

Chat Participants and Prompts

VS Code supports reusable prompt files in a .github/prompts/ directory. These act like on-demand skills:

.github/
  prompts/
    review.prompt.md     # Code review checklist
    test.prompt.md       # Test generation rules
    refactor.prompt.md   # Refactoring guidelines

Reference a prompt in Copilot Chat with #prompt:review to load its instructions for that conversation. This is similar to Claude Code's slash commands -- different skills for different tasks.

MCP Server Configuration

VS Code supports MCP (Model Context Protocol) servers through its settings. You can configure MCP servers in .vscode/settings.json to give AI tools access to databases, APIs, and other external systems:

{
  "mcp": {
    "servers": {
      "my-database": {
        "command": "npx",
        "args": ["-y", "@modelcontextprotocol/server-postgres", "postgresql://localhost/mydb"]
      },
      "filesystem": {
        "command": "npx",
        "args": ["-y", "@modelcontextprotocol/server-filesystem", "./src"]
      }
    }
  }
}

Browse the MCP Servers directory on Skills Playground to find servers for your tools and services.

AI Extensions

Beyond built-in Copilot, VS Code supports AI extensions that each have their own way of loading custom instructions:

• Cline -- Custom instructions in settings + .clinerules file
• Continue -- .continue/config.yaml with system message configuration
• Aider -- .aider.conf.yml with conventions settings
• Roo Code -- Custom instructions in settings panel

All of these accept plain-text system prompts, so any Skills Playground skill works without modification.

Tips

• Use .github/copilot-instructions.md as your baseline. It works with VS Code's native features and is the most widely supported format.
• Add prompt files for specialized tasks. Create .github/prompts/ files for code review, testing, and other workflows.
• Configure MCP servers to give AI tools access to your project's external dependencies.
• Commit settings to git. Share .vscode/settings.json and .github/ files with your team.

Browse the skills directory to find skills for your stack, or explore MCP servers to extend your AI's capabilities.