What is the GitHub Copilot Agent Toolkit?
The GitHub Copilot Agent Toolkit is an opinionated framework that pairs a production-ready Next.js demo app with curated GitHub Copilot agents and reusable skills. It speeds up modern frontend development by providing structured workflows, best practices, and consistent patterns for React, Next.js, Zustand, and shadcn/ui.Quick Start
Get up and running in minutes with the demo app
Agent Workflow
Learn the 3-phase spec-driven development process
Skills
Explore reusable skills for React, Next.js, and more
Architecture
Understand the framework’s design and conventions
Key Features
3-Phase Agent Workflow
Structured Requirements → Plan → Task workflow for spec-driven delivery with clear phase boundaries
Reusable Skills
Curated GitHub Copilot skills for React, Next.js, Zustand, shadcn/ui, and more
Demo Next.js App
Production-ready Next.js App Router application showcasing best practices
Decoupled State Management
Zustand state management with the decoupled actions pattern for better performance
Component Composition
shadcn/ui component library built on Base UI primitives with Tailwind CSS
Quality Tooling
Automated linting and formatting with oxlint/oxfmt, TypeScript strict mode
Tech Stack
The framework is built on modern, production-ready technologies:- Framework: Next.js (App Router) for server-side rendering and routing
- Runtime: Bun for fast package management and native APIs
- UI: shadcn/ui components built on Base UI primitives
- Styling: Tailwind CSS for utility-first styling
- State: Zustand with decoupled actions pattern
- Linting: oxlint and oxfmt for fast, Rust-powered code quality
- Types: TypeScript with strict mode enabled
How It Works
The toolkit provides three main components:1. Agent Workflow
A 3-phase agent system guides you from feature idea to implementation:- 📋 Requirements — Defines clear, testable feature requirements with acceptance criteria
- 📝 Plan — Converts approved requirements into technical design and architecture
- ✅ Task — Breaks approved design into actionable implementation tasks
2. Reusable Skills
Skills guide GitHub Copilot on best practices for specific technologies:- react-best-practices — React composition patterns and hooks
- next-best-practices — Next.js App Router patterns and performance
- zustand — Client-side state management with decoupled actions
- ui-components — shadcn/ui component usage and composition
- vercel-composition-patterns — Component composition strategies
- web-project-conventions — File structure and naming conventions
3. Demo Web App
A working Next.js application underweb/ demonstrates the patterns in action:
- Clean feature-based directory structure
- Server and client component boundaries
- Zustand stores with decoupled actions
- shadcn/ui component composition
- Tailwind CSS styling conventions
Why Use This Framework?
Consistent Development Patterns
Consistent Development Patterns
The toolkit enforces consistent conventions for components, features, and state management. This keeps your codebase maintainable and makes code reviews faster.
Spec-Driven Development
Spec-Driven Development
The 3-phase agent workflow ensures requirements, design, and implementation stay aligned. Each phase produces a reviewable artifact before moving to the next phase.
AI-Assisted Productivity
AI-Assisted Productivity
GitHub Copilot skills provide context-aware guidance for React, Next.js, and Zustand. The agents help you gather requirements, plan architecture, and break down tasks without losing focus.
Production-Ready Patterns
Production-Ready Patterns
The demo app showcases real-world patterns for server components, client state, UI composition, and performance optimization. Use it as a reference or starting point.
What You’ll Build
With this toolkit, you can:- Generate features faster using the 3-phase agent workflow
- Maintain consistent code quality with curated skills and conventions
- Scale your Next.js app with proven patterns for components and state
- Leverage AI effectively with context-aware GitHub Copilot guidance
Next Steps
Quick Start
Follow the Quick Start guide to run the demo app and explore the toolkit
Learn the Agent Workflow
Read the Agent Workflow overview to understand the 3-phase process
Explore Skills
Browse the Skills documentation to see what’s available
Study the Demo App
Review the Web App setup to understand the codebase structure