🚀 Setting Up Addy Osmani’s agent-skills in VS Code with GitHub Copilot on Windows

If you are looking to bring agentic workflows and structured AI engineering to your local development environment, Addy Osmani's agent-skills project is a fantastic place to start.

In this guide, we will walk through setting up agent-skills step-by-step on Windows inside VS Code with GitHub Copilot, enabling you to run specialized commands for specification, planning, building, testing, and shipping code.

---

📋 Prerequisites & Tools

Before diving in, make sure you have:

• 💻 Windows OS with Git installed.
• 🛠️ VS Code configured with the GitHub Copilot and GitHub Copilot Chat extensions.

---

🛠️ Step 1: Clone the agent-skills Repository 📥

First, pull down the official agent-skills repository to your local machine:

# Create or navigate to your source directory
cd C:\Github-repo\

# Clone the agent-skills repository
git clone https://github.com/addyosmani/agent-skills.git

---

📁 Step 2: Create Your Target Workspace 🏗️

Next, create a new directory for the workspace or project where you plan to build with Copilot:

# Create your new project folder
mkdir C:\vscode-agentic-framework
cd C:\vscode-agentic-framework

---

⚙️ Step 3: Copy the Agentic Framework into .github/ 📂

To allow GitHub Copilot to recognize your agent skills and commands in VS Code, create a .github directory inside your project folder and copy the core skill files into it:

1. Create a .github folder in C:\vscode-agentic-framework\:

mkdir C:\vscode-agentic-framework\.github

2. Copy the following folders and files from C:\Github-repo\agent-skills\ into C:\vscode-agentic-framework\.github\:

• 🤖 agents/
• 📝 AGENTS.md
• ⚡ commands/
• 📖 docs/
• 🧪 evals/
• 🪝 hooks/
• 📚 references/
• 📜 scripts/
• 🛠️ skills/

---

📄 Step 4: Add Your Product Requirements 📝

Agentic workflows rely on clear context. Create a dedicated documents directory in your project root to hold your product specification or requirements:

# Create a documents folder
mkdir C:\vscode-agentic-framework\documents

Place your requirements file (e.g., product_requirement.txt or prd.txt) inside C:\vscode-agentic-framework\documents\.

---

🚀 Step 5: Execute the Agentic Workflow Sequentially

Once your workspace context is in place, open C:\vscode-agentic-framework in VS Code. You can now leverage Copilot Chat to execute the standard lifecycle commands sequentially.

📊 Agentic Workflow Commands

Action	Command	Key Principle	File Reference Context
1. Define what to build	/spec	Spec before code	@file:spec.toml @file:prd.txt
2. Plan how to build it	/plan	Small, atomic tasks	@file:planning.toml
3. Build incrementally	/build	One slice at a time	@file:build.toml
4. Prove it works	/test	Tests are proof	@file:test.toml
5. Review before merge	/review	Improve code health	@file:review.toml
6. Audit performance	/webperf	Measure before you optimize	@file:webperf.toml
7. Simplify the code	/code-simplify	Clarity over cleverness	@file:code-simplify.toml
8. Ship to production	/ship	Faster is safer	@file:ship.toml

---

💡 Best Practices

• 🎯 Keep tasks focused: Never skip straight to /build without running /spec and /plan first.
• 🔁 Iterate in slices: Run small validation loops (/build ➔ /test ➔ /review) before finalizing features.
• 📌 Maintain explicit context: Always reference your relevant TOML configurations and PRD files using Copilot's @file attachment mechanism.

Happy building! 🎉