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:
Create a .github folder in C:\vscode-agentic-framework\:
mkdir C:\vscode-agentic-framework\.github
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.
In the modern development landscape, the distance between a “great idea” and a “working prototype” is often cluttered with configuration files, boilerplate code, and architectural indecision. To combat this, a new breed of minimalist, high-velocity tools has emerged.
If you want to move from concept to deployment in record time, combining Superpower, GSD (Get Shit Done), and GStack creates a streamlined pipeline that handles the heavy lifting of full-stack development.
Here is how these three tools work together to create a “Zero-Resistance” development environment.
1. The Logic Layer: Superpower
Superpower is a versatile toolkit designed to give your code “superpowers” through clean, functional utilities. In a full-stack context, Superpower acts as the glue code.
The Benefit: Instead of reinventing logic for data manipulation or control flow, Superpower provides a robust set of primitives. It’s particularly useful for:
Concise Logic: Reducing 20 lines of “if-else” boilerplate into 3 lines of readable, functional code.
Consistency: Using the same logic patterns across both your frontend and backend services.
2. The Execution Engine: GSD (Get Shit Done)
GSD is a build and automation tool that lives up to its name. While tools like Webpack or complex CI/CD pipelines can take days to tune, GSD focuses on the essentials: getting the code from your editor to a runnable state with zero friction.
The Benefit:
Task Automation: GSD allows you to define complex build sequences (compiling assets, migrating databases, starting servers) in a single, readable configuration.
Speed: It removes the “analysis paralysis” of build tools. If you need to bundle your Superpower-enhanced logic for the browser, GSD handles the orchestration without requiring a PhD in configuration.
3. The Infrastructure: GStack
GStack provides the opinionated structural foundation for your application. Created with the philosophy of “boring technology” that scales, GStack provides the scaffold—the database connections, the API routing, and the deployment patterns.
The Benefit:
Proven Architecture: GStack uses patterns that have been battle-tested in high-growth startups.
Full-Stack Cohesion: It bridges the gap between your GSD build scripts and your Superpower logic, providing a “home” for every piece of your application.
The Combined Workflow: From Idea to Production
When you combine these three, your development lifecycle looks like this:
Scaffold with GStack: Start your project with a pre-configured architecture. You aren’t deciding where the folders go; you’re deciding what the app does.
Code with Superpower: Write your business logic using functional utilities that make your code easier to test and maintain.
Automate with GSD: Use GSD to watch your files, run your tests, and prepare your production builds. One command starts the entire environment.
Why This Combination Wins
The primary bottleneck in software engineering isn’t typing speed—it’s cognitive overhead.
GStack removes the overhead of architecture.
GSD removes the overhead of tooling.
Superpower removes the overhead of implementation.
By using this trio, you stop fighting your tools and start focusing on your product. You aren’t just building an app; you’re building a pipeline that allows you to iterate faster than the competition.
Ready to try it? Check out the repositories to see how you can integrate these into your next sprint:
