VS Code + Claude Skills Template

A portable template workspace for VS Code with Claude models, featuring skills, custom agents, MCP integration, and prompt files for consistent AI-assisted development.

---

🚀 Setup Guide

Prerequisites

• Node.js 18+ - Required for MCP servers (node --version)
• VS Code 1.107+ - Download from code.visualstudio.com
• VS Code Insiders - Required for Agent Skills (preview feature)
• GitHub Copilot - Subscription with Claude Opus 4.5 model access
• GitHub Personal Access Token - Create at github.com/settings/tokens

Step 1: Copy Template Files

# Copy to your project
cp -r .github/ your-project/.github/
cp -r .vscode/ your-project/.vscode/
cp AGENTS.md your-project/

Step 2: Install MCP Server Dependencies

# Pre-install MCP servers for faster startup (optional but recommended)
npm install -g @upstash/context7-mcp@latest
npm install -g @modelcontextprotocol/server-github
npm install -g @modelcontextprotocol/server-filesystem
npm install -g @playwright/mcp@latest
npm install -g @modelcontextprotocol/server-sequential-thinking
npm install -g @modelcontextprotocol/server-memory

Step 3: Configure GitHub Token

1. Create a token at github.com/settings/tokens
2. Select scopes: repo, read:user, read:org
3. VS Code will prompt for the token on first MCP server start

Step 4: Open in VS Code & Verify

1. Open your project in VS Code
2. Open Chat (Ctrl+Alt+I / Cmd+Alt+I)
3. Click the Tools icon and verify MCP servers are listed
4. Send this initialization message:

I'm starting a new session. Please confirm you understand:
1. You have access to custom agents: @plan, @implement, @debug, @code-reviewer
2. Skills are loaded from .github/skills/ when relevant
3. MCP servers are available: context7, github, filesystem, playwright, sequentialThinking, memory
4. Follow the coding guidelines in .github/copilot-instructions.md
5. Use TDD, create plans before implementation, verify before claiming completion

Briefly confirm your understanding and list available tools.

---

Features

Custom Agents

Agent	Purpose	When to Use
@plan	Read-only planning	Creating implementation plans, research
@implement	Full implementation with TDD	Writing code, executing plans
@debug	Systematic debugging	Investigating bugs, test failures
@code-reviewer	Code quality review	Reviewing completed work

Prompt Commands

Command	Description
/brainstorm	Start collaborative design session
/write-plan	Create detailed implementation plan
/execute-plan	Execute an existing plan with TDD
/code-review	Request thorough code review
/debug	Start systematic debugging
/test	Create tests using TDD

Agent Skills

Skills are automatically loaded when relevant:

• brainstorming: Explore requirements before implementation
• writing-plans: Create bite-sized task plans
• executing-plans: Follow plans with verification
• test-driven-development: Red-Green-Refactor cycle
• systematic-debugging: Root cause analysis
• verification-before-completion: Evidence before claims
• subagent-driven-development: Parallel task execution with reviews

Conditional Instructions

Language-specific guidelines applied automatically:

• **/*.py → Python best practices
• **/*.ts → TypeScript guidelines
• **/*.js → JavaScript standards
• **/test*/** → Testing practices

MCP Servers

Pre-configured high-impact MCP servers:

Server	Purpose	Key Capabilities
Context7	Library docs	Real-time documentation for any library
GitHub	Repository management	Issues, PRs, branches, code search
Filesystem	File operations	Read/write files, directory trees
Playwright	Browser automation	Testing, screenshots, web scraping
Sequential Thinking	Enhanced reasoning	Step-by-step problem solving
Memory	Persistent memory	Knowledge graph across sessions

Additional tools available via VS Code extensions:

• Pylance MCP - Python analysis and refactoring
• Terminal Tools - Named terminals, command management
• Microsoft Docs - Azure/Microsoft documentation

File Structure

.github/
├── copilot-instructions.md    # Base coding guidelines (always applied)
├── agents/                     # Custom agents
│   ├── plan.agent.md
│   ├── implement.agent.md
│   ├── debug.agent.md
│   └── code-reviewer.agent.md
├── skills/                     # Agent Skills (auto-loaded)
│   ├── brainstorming/SKILL.md
│   ├── writing-plans/SKILL.md
│   ├── executing-plans/SKILL.md
│   ├── test-driven-development/SKILL.md
│   └── ...
├── prompts/                    # Reusable prompts
│   ├── brainstorm.prompt.md
│   ├── write-plan.prompt.md
│   ├── execute-plan.prompt.md
│   └── ...
└── instructions/               # Conditional instructions
    ├── python.instructions.md
    ├── typescript.instructions.md
    └── ...
.vscode/
├── settings.json              # VS Code configuration
└── mcp.json                   # MCP server configuration
AGENTS.md                      # Cross-agent compatibility

Development Workflow

For New Features

1. Brainstorm → /brainstorm or @plan

   • Explore requirements
   • Design before coding

2. Plan → /write-plan

   • Create detailed implementation plan
   • Save to docs/plans/

3. Execute → /execute-plan or @implement

   • Follow plan with TDD
   • Commit after each task

4. Review → /code-review or @code-reviewer

   • Verify quality and plan alignment

For Bug Fixes

1. Debug → /debug or @debug

   • Systematic root cause analysis
   • NO fixes without understanding

2. Test → Create regression test

   • Write test that demonstrates bug
   • Verify it fails

3. Fix → Minimal fix to pass test

   • TDD Red-Green-Refactor

4. Verify → Run all tests

   • Ensure no regressions

Customization

Add Language-Specific Instructions

Create .github/instructions/<language>.instructions.md:

---
applyTo: "**/*.<ext>"
description: Language-specific guidelines
---

# Your Guidelines Here

Add Custom Prompts

Create .github/prompts/<name>.prompt.md:

---
name: my-prompt
description: What this prompt does
agent: plan # or implement, debug, code-reviewer
tools: ["search", "fetch"]
---

# Prompt Instructions

Add MCP Servers

Edit .vscode/mcp.json to add new servers.

Requirements

Requirement	Version	Notes
Node.js	18+	Required for MCP servers
VS Code	1.107+	Custom agents, MCP support
VS Code Insiders	Latest	Required for Agent Skills (preview)
GitHub Copilot	Active	With Claude Opus 4.5 model access

Research Sources

This template follows the latest 2025 best practices from:

• VS Code Copilot Customization
• Agent Skills Standard - Open standard for portable skills
• Custom Agents
• GitHub Copilot Instructions
• awesome-copilot - Community examples