Open Source, 68k+ Stars on GitHub
v2.0.45 · 2026-07-04 09:14 UTC

Spec-Driven
Development
with Spec Kit

Stop vibe coding. Start building software that works. The complete beginner's guide to structured AI development, from first install to a finished HabitTracker app.

VS Code + Copilot
Hands-On Project
Beginner Friendly
Chapter 01

The Problem with Vibe Coding

Why unstructured AI coding leads to wasted tokens, broken apps, and frustrated developers.

AI coding assistants have transformed software development. Tools like GitHub Copilot can generate entire functions, suggest algorithms, and build full applications from natural language. But there's a growing problem that developers experience daily.

When you sit down with an AI assistant and start giving it instructions without a clear plan, you're vibe coding: throwing vague prompts at an AI and accepting whatever it produces. At first it feels magical. But as projects grow, things fall apart fast.

The Vibe Coding Trap

Picture this: You're two hours into a coding session. You've given 15 different instructions. The AI built something that looked perfect 45 minutes ago. Then you realize it's completely wrong. The AI lost context, contradicted earlier decisions, and built something that doesn't match your original vision. Now you're burning tokens trying to fix it.

✕ Vibe Coding

  • Random, ad-hoc prompts
  • No persistent project context
  • Contradictory AI outputs
  • Massive token waste on re-explanation
  • No quality gates or validation
  • Zero traceability from intent to code

✓ Spec-Driven Development

  • Structured, purposeful specifications
  • Persistent context the AI always references
  • Consistent, aligned output every time
  • Optimized tokens: say it once, use it always
  • Built-in analysis and consistency checks
  • Full audit trail from spec to implementation
💡 The Core Insight

The problem isn't AI. It's how we communicate with AI. Spec-Driven Development gives your AI the structured context it needs to build exactly what you want, without re-explaining everything on every prompt.

Chapter 02

The Anatomy of AI Interaction

Prompts, agents, skills, MCP servers, and pricing. Why your strategy, not GitHub's billing model, decides your cost and your results.

In 2025, GitHub announced it was moving Copilot from a subscription model built around Premium Requests to Usage-Based Billing (UBB), a pay-as-you-go model priced in AI Credits. Almost overnight, developers and companies started worrying: "Is Copilot suddenly more expensive? Are we going to blow through our budget?"

Here's the truth this chapter walks through: the pricing model isn't the real problem. It just shows you something that was already true. Under the old subscription model, wasteful AI usage was hidden behind a flat fee. Usage-based billing makes that waste visible: every prompt, every agent you call, every skill you load, every MCP server request gets turned into tokens, and tokens are what you pay for. Without a plan for how you use AI, you'll burn through your budget fast, no matter which pricing model GitHub uses.

The Anatomy of an AI Interaction

Every time you interact with an AI coding assistant, several parts work together before the model produces any output. It's easy to think of "prompting" as just typing a sentence into a chat box. In reality, by the time your request reaches the model, it usually carries a lot more with it:

1
Your Request

What you typed or spoke

2
Context Assembly

Open files, specs, memory, instructions

3
Agents / Skills / MCP

Extra tools & knowledge invoked

4
Compiled Prompt

Everything merged into one payload

5
Tokens

The unit models actually process

6
Billed Usage

What shows up on your invoice

💡 It All Becomes a Prompt

Your typed message, the files Copilot reads for context, the custom agent you called, the skill it loaded, the MCP server it queried: all of it gets combined into a single prompt sent to the model. None of these pieces are free. Everything you add to your AI's context is something you pay for, in tokens and in cost. Treating these pieces as part of a real strategy, instead of adding them without thinking, is exactly what Spec-Driven Development (SDD) helps you do, as you'll see throughout this book.

GitHub Copilot's New Pricing Model

Here's a quick, plain-language summary of what changed. GitHub Copilot originally sold flat-rate subscription tiers (Free, Pro, Pro+, Business, Enterprise) that included a bucket of Premium Requests, a rough unit that didn't line up well with the actual cost of running a model. GitHub has since moved to Usage-Based Billing, where usage is tracked in AI Credits that scale with the model and the amount of work performed, on top of (or instead of) a base subscription.

Premium Requests (legacy)

  • Flat monthly bucket of requests
  • Rough measure: a tiny fix and a huge refactor could cost the same "1 request"
  • Easy to underestimate real usage, so the cost stayed hidden
  • Hitting the cap meant a hard stop or throttling

Usage-Based Billing / AI Credits

  • Pay-as-you-go, tracked by actual model usage
  • Cost scales with tokens used, so it reflects real effort
  • Rewards efficient prompting and context management
  • Punishes vague prompts, bloated context, and unnecessary tool calls

For the full, current details on plans and pricing, check GitHub's own pages. Pricing details change over time, so always check the source rather than relying on a snapshot in a book:

⚠️ Reframe the Anxiety

Most of the worry around UBB isn't really about the pricing model. It's about how we interact with AI. Under Premium Requests, we felt free to over-prompt, over-explain, and pile on extra context, because the flat fee covered the waste. Usage-based billing removes that safety net. It didn't create the waste. It just showed us waste that was already there.

Prompt Engineering vs. Context Engineering

Two ideas matter here, and they're not the same thing:

✍️

Prompt Engineering

Writing the instruction itself: your goal, your constraints, your desired output format. It's about what you ask and how clearly you ask it.

🗂️

Context Engineering

Choosing what the model can see: which files, specs, memory, and tools you include. As models get smarter, an average prompt with good context often works better than a great prompt with poor or missing context.

In practice you need both. A great prompt with no relevant context leaves the model guessing. Rich context with a vague prompt leaves the model unfocused. And it matters either way, because the more context you load, the more tokens you spend on every single turn. Good context engineering is selective: include the two files that matter, not the whole repository.

The Prompt Engineering Template

Use this five-part structure to write prompts that are clear, focused, and consistently effective. It's the foundation of good prompt engineering, whatever context you attach to it:

🎯

# Goal

Define what you want to achieve. State the desired outcome clearly and concisely so the AI understands the end result you're aiming for.

🗂️

# Context

Provide the background information the AI needs. Include relevant constraints, existing code, project details, or domain knowledge that shapes the answer.

📋

# Instructions

Specify exactly how the AI should approach the task. List steps, rules, or requirements the response must follow.

📄

# Output (optional)

Describe the format, structure, or length of the expected response. For example: a JSON object, a numbered list, or a code block in a specific language.

🎭

# Persona (optional)

Assign the AI a role or expertise level. Framing the AI as a "senior security engineer" or "UX writer" shapes its tone, vocabulary, and perspective.

Copy-Paste Template

Save this blank template and fill in the comments for any new AI prompt. The # lines are real Markdown headings, and the <!-- ... --> lines are just guidance comments to replace with your own text:

📝 Prompt Template: Goal / Context / Instructions / Output / Persona
# Goal
<!-- Define what you want to achieve. State the desired outcome clearly and concisely so the AI understands the end result you're aiming for. -->

# Context
<!-- Provide the background information the AI needs. Include relevant constraints, existing code, project details, or domain knowledge that shapes the answer. -->

# Instructions
<!-- Specify exactly how the AI should approach the task. List steps, rules, or requirements the response must follow. -->

# Output (optional)
<!-- Describe the format, structure, or length of the expected response. For example: a JSON object, a numbered list, or a code block in a specific language. -->

# Persona (optional)
<!-- Assign the AI a role or expertise level. Framing the AI as a "senior security engineer" or "UX writer" shapes its tone, vocabulary, and perspective. -->
💡 Pro Tip

Not every prompt needs all five sections. Start with # Goal and # Instructions for simple tasks. Add # Context when the AI lacks background information. Use # Output and # Persona to fine-tune the style and format of the response.

Agents, Skills & MCP Servers: What, When, Why

Beyond raw prompts, modern AI coding tools let you extend the model with reusable building blocks. Each one is powerful, and each one adds to the context (and cost) of every interaction it's loaded into. Know what they are before reaching for them:

🤖

Agents

A configured "persona" with its own instructions, tools, and sometimes model choice, built for a recurring role (for example, a code reviewer or a release-notes writer). Best for ongoing, well-defined responsibilities you use again and again.

🧩

Skills

Focused, self-contained instructions or scripts for a specific, repeatable task (for example, "generate a memo" or "fill an expense report"). Best for narrow, procedural tasks that don't need a whole persona.

🔌

MCP Servers

External tool and data providers the model can call (databases, cloud APIs, ticketing systems). Best for giving the model real, live capabilities it doesn't have on its own, at the cost of extra tokens spent describing those tools on every turn.

Quick decision guide: reach for a skill when the task is a repeatable, narrow procedure. Reach for an agent when you need a persistent role with its own tone, tools, and judgment. Reach for an MCP server when the model needs to talk to a real external system. If a one-off prompt with good context solves it, don't reach for any of them.

⚠️ Loaded Doesn't Mean Free

Every agent, skill, and MCP server that's active in a session becomes part of the context sent with every prompt in that session, whether you use it on a given turn or not. Enabling ten MCP servers "just in case" adds cost to every request without you noticing. Use only what a given feature really needs, and turn off the rest. This is exactly the kind of decision Spec-Driven Development forces you to make on purpose, instead of by accident.

A few best practices for keeping this efficient in VS Code:

Scope custom instructions

Keep .github/copilot-instructions.md short and project-specific. It gets sent along with every request.

Enable MCP servers per project

Don't enable every MCP server globally. Configure them per workspace so unrelated projects don't pay for tools they never use.

Prefer skills over agents for one-off procedures

A skill is called on demand. An idle custom agent can still add overhead to how requests are routed and framed.

Review what's loaded from time to time

Review enabled extensions, agents, and MCP servers the same way you'd review dependencies. Remove what you no longer need.

Why Spec-Driven Development Is the Strategy

Everything above points to the same conclusion: AI doesn't fail because the model is weak, or because a pricing model changed. It fails because we hand it work without a plan. Spec-Driven Development is that plan. But SDD's value doesn't start when you open your AI assistant. It starts before you write a single prompt:

1
Requirements

Functional & non-functional

2
Architecture

Design the system, not just the feature

3
Specification

Turn decisions into a written spec

4
AI Validates & Plans

Use AI to check gaps, plan tasks

5
Small Steps

Implement one focused feature at a time

Notice what comes first: engineering the system, meaning clarifying functional and non-functional requirements, sketching architecture, understanding constraints, before AI enters the picture. Only then does AI take over, to check your thinking, plan the work, and implement it in small, focused steps rather than one giant, unfocused request. This is much cheaper, with fewer wasted tokens and fewer do-overs, and it produces much better software.

💡 The Real Lesson of Usage-Based Billing

The bill you get at the end of the month reflects your AI strategy, not just GitHub's pricing choices. Vague prompts, bloated context, and unnecessary agents, skills, and MCP servers cost real money under UBB, and they always cost real time and quality, even under a flat subscription. The rest of this book teaches you the discipline, Spec-Driven Development, that turns AI from an unpredictable expense into a reliable, efficient partner. Let's start with what SDD actually is.

Chapter 03

What is Spec-Driven Development?

Specifications become executable, directly generating working implementations rather than just guiding them.

Chapter 2 showed why prompts, context, agents, skills, and MCP servers all need a deliberate strategy, otherwise you burn tokens and budget with little to show for it. Spec-Driven Development (SDD) is that strategy, formalized. It flips the script on traditional software development: for decades, code was king, and specifications were scaffolding we discarded once the "real work" began. SDD changes this: specifications become the source of truth, directly driving AI-generated implementations.

Think of it as giving your AI assistant a detailed blueprint instead of shouting instructions from across a noisy room. The blueprint stays consistent, complete, and always available.

The Four Pillars of SDD

1

Intent First, Code Second

Define what you're building and why before thinking about how. This ensures your AI understands the goal, not just the task.

2

Specs as Source of Truth

Your spec files are the primary artifacts. Code is generated FROM specifications. When specs change, implementations follow.

3

Structured Communication

Instead of ad-hoc prompts, SDD provides a standardized language for communicating with AI agents. Every interaction builds on shared understanding.

4

Progressive Refinement

Start high-level and add detail incrementally. Each phase adds specificity, reducing ambiguity at every step.

The SDD Workflow at a Glance

1
Constitution

Project principles & rules

2
Specify

What to build & why

3
Clarify

Resolve ambiguities

4
Plan

Tech stack & architecture

5
Tasks

Actionable work items

6
Implement

AI generates code

Chapter 04

Introducing GitHub Spec Kit

An open-source toolkit with 68,000+ stars that makes Spec-Driven Development practical and accessible.

GitHub Spec Kit is the open-source toolkit that provides structure, templates, and workflow automation for SDD. It works seamlessly with VS Code, GitHub Copilot, and 15+ other AI coding agents. Install once, use on every project.

The Slash Commands

After initializing Spec Kit in your project, these slash commands become available in your AI assistant's chat. Spec Kit has six core workflow commands plus three optional enhancement commands:

Core Commands

1

/speckit.constitution

Defines the non-negotiable rules for your project: coding standards, testing requirements, accessibility, performance targets. Every other command references this file. Run once per project.

2

/speckit.specify

Creates a feature specification from your description. Describe WHAT and WHY. Auto-creates a Git branch and spec directory. Run for each new feature.

3

/speckit.plan

Generates a technical implementation plan: architecture, dependencies, data models. You provide tech stack choices. Run after spec is finalized.

4

/speckit.tasks

Breaks the plan into ordered, executable tasks with clear dependencies and acceptance criteria. Each task is focused and manageable. Run after plan is ready.

5

/speckit.taskstoissues

Converts your generated task list into GitHub Issues for team tracking and execution. Links implementation tasks directly to your project board. Optional. Great for team projects.

6

/speckit.implement

Executes all tasks to generate working code, tests, and configuration. The AI references every artifact you've built. Run when everything is approved.

Optional Enhancement Commands

+

/speckit.clarify

Asks structured, sequential questions to resolve ambiguities before planning. Catches gaps before they become expensive bugs. Run after specify, before plan.

+

/speckit.analyze

Cross-artifact consistency check. Validates that constitution, spec, plan, and tasks all align. Flags CRITICAL findings. Run after tasks, before implement.

+

/speckit.checklist

Generates custom quality checklists that validate requirements completeness, clarity, and consistency, like "unit tests for English". Helps catch vague or conflicting requirements early. Use at any stage.

Project Structure

Project Directory
my-project/ ├── .specify/ │ ├── memory/ │ │ └── constitution.md # Your project principles │ ├── scripts/ │ │ ├── create-new-feature.sh # Feature scaffolding │ │ └── setup-plan.sh # Plan automation │ └── templates/ │ ├── spec-template.md # Specification format │ ├── plan-template.md # Plan format │ └── tasks-template.md # Tasks format ├── specs/ │ └── 001-feature-name/ │ ├── spec.md # Feature specification │ ├── plan.md # Technical plan │ └── tasks.md # Task breakdown └── .github/prompts/ # Copilot agent commands
💡 Version Control Everything

All spec files are plain Markdown, so they work great with Git. Commit them alongside your code so you have a complete, auditable trail from intent to implementation. When someone asks "why was it built this way?", your spec files have the answer.

Chapter 05

Setting Up Your Environment

From zero to a working Spec Kit project in under 10 minutes.

1

Install VS Code

Download from code.visualstudio.com. Free for Windows, macOS, and Linux. We use VS Code because of its excellent Copilot integration and Agent Mode support.

2

Install GitHub Copilot

Open Extensions in VS Code, search "GitHub Copilot", install it, and sign in with your GitHub account. Critical: enable Agent Mode. Spec Kit's slash commands require it. Look for the agent toggle in the Copilot chat panel header.

3

Install the uv package manager

Spec Kit ships as a Python CLI tool distributed via uv. Install uv first:

Terminal
# macOS / Linux curl -LsSf https://astral.sh/uv/install.sh | sh # Windows (PowerShell) powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"
4

Install Spec Kit

Terminal
# Install Spec Kit globally (recommended, one-time setup) # Get the latest version tag from: github.com/github/spec-kit/releases uv tool install specify-cli --from git+https://github.com/github/spec-kit.git@vX.Y.Z # Check for updates or upgrade to the latest stable release specify self upgrade

Find the latest release tag at github.com/github/spec-kit/releases

5

Initialize Your First Project

Terminal
# Create a new project configured for GitHub Copilot specify init my-project --integration copilot # Open it in VS Code code my-project
⚠️ Important

When VS Code opens, switch Copilot to Agent Mode in the chat panel. Type /speckit and you should see all the commands in the autocomplete. If they don't appear, restart VS Code.

Chapter 06

The SDD Workflow Deep Dive

A detailed walkthrough of each phase, with examples and best practices for every command.

Phase 1: The Constitution

The constitution is the DNA of your project. It defines non-negotiable principles that every AI interaction must follow. Think of it as the "rules of the game": coding standards, testing strategy, performance targets, accessibility requirements.

📋 Example Prompt: Constitution
/speckit.constitution # Goal
Create governing principles for a modern web application.

# Context
This constitution will guide all code generation and be referenced throughout the project by every agent.

# Instructions
Define non-negotiable principles for each area below:

• Code quality: TypeScript strict mode, no any types, ESLint + Prettier
• Testing: Unit tests with Vitest, integration tests for critical paths, 80% coverage minimum
• Accessibility: WCAG 2.1 AA, semantic HTML, keyboard navigation, screen reader support
• Performance: <3s initial load, lazy loading for non-critical resources, Core Web Vitals passing
• Architecture: Feature-based folder structure, custom hooks for shared logic, no prop drilling beyond 2 levels
💡 Constitution Tips

Keep it to 8-12 clear principles. Too many create conflicts; too few leave too much ambiguity. Always review the generated constitution. The AI expands your input, and you should verify it captured your intent correctly. This is the foundation everything else builds on.

Phase 2: Specification

Describe WHAT you want to build and WHY, not HOW. Focus on features, user stories, and expected behaviors. Spec Kit auto-creates a Git branch and directory for each feature.

📝 Example Prompt: Specification
/speckit.specify # Goal
Build a habit tracking application that helps users build and maintain positive daily routines.

# Context
Individual users who want simple, private habit tracking without accounts or internet access. The app must be enjoyable to use every day, especially on mobile.

# Instructions
Allow users to create daily habits with custom names and emoji icons, track completion with a simple tap, view current and longest streaks, and see weekly/monthly progress on a visual dashboard. The app should feel motivating and be usable one-handed on mobile.

The AI will expand this into a full specification with user stories, acceptance criteria, edge cases, and constraints, all stored in specs/001-habit-tracker/spec.md. Review every section. This is your most important checkpoint.

Phase 3: Clarification

The /speckit.clarify command triggers structured Q&A that eliminates ambiguity before it becomes expensive rework. The AI asks sequential questions based on gaps it detects in your specification.

📌 When to Clarify

Skip this for very simple features. Use it for anything with user interactions, data persistence, multiple states, or business logic. The 5 minutes you spend answering questions saves hours of debugging wrong assumptions later.

Phase 4: Technical Planning

Now you define the HOW: technology stack, architecture, and dependencies. The plan is checked against your constitution for compliance.

🏗️ Example Prompt: Plan
/speckit.plan # Goal
Define the technical architecture and stack choices for the habit tracking application.

# Context
The spec is finalized. This plan translates product requirements into concrete technical decisions aligned with the constitution.

# Instructions
Use React 18 with TypeScript and Vite for the frontend. Tailwind CSS for styling. Browser localStorage for persistence, no backend needed. React Router v6 for navigation. date-fns for date calculations. framer-motion for completion animations. Keep external dependencies minimal.

Phase 5: Tasks & Analysis

Run /speckit.tasks to generate ordered, actionable work items from your plan. Each task is small enough for reliable AI execution, with clear dependencies and acceptance criteria. Then run /speckit.analyze as your quality gate. It cross-validates that all artifacts (constitution, spec, plan, and tasks) are consistent and catches any CRITICAL misalignments before a single line of code is written.

Phase 6: Implementation

Run /speckit.implement and let the AI work. It reads the constitution for principles, the spec for requirements, the plan for architecture, and executes tasks in order, generating real code, tests, and configuration files.

Traditional Process: ~12 hours

  • Write a PRD (2-3 hours)
  • Create design documents (2-3 hours)
  • Set up project structure (30 min)
  • Write technical specifications (3-4 hours)
  • Create test plans (2 hours)

SDD Process: ~17 minutes

  • /speckit.constitution (5 min)
  • /speckit.specify (5 min)
  • /speckit.plan (5 min)
  • /speckit.tasks (2 min)
  • /speckit.analyze (2 min)
  • /speckit.implement (automated)
Chapter 07

Token Optimization & Best Practices

How SDD dramatically reduces AI token consumption while producing better output.

Every AI prompt costs tokens, and tokens cost money. Vibe coding wastes tokens through repetition, context-switching, and re-explanation. SDD minimizes this by giving the AI everything it needs, structured for maximum clarity, once.

Token Consumption Comparison

Feature build (no spec)
~92% token budget
Feature build (with SDD)
~35% token budget
Bug fix (no spec)
~68% token budget
Bug fix (with SDD)
~18% token budget

* Approximate comparison based on community reports. Savings vary by project complexity.

10 Best Practices

1. Invest in the First Prompt

Your /speckit.specify prompt is the highest-leverage moment. More detail upfront = fewer corrections later = fewer tokens wasted.

2. Review Every Artifact

Don't blindly accept generated specs, plans, or tasks. Your review turns generic output into a precise specification.

3. Keep the Constitution Focused

8-12 clear principles. Too many create conflicts; too few leave ambiguity that wastes tokens on clarification.

4. Always Clarify Complex Features

5 minutes answering /speckit.clarify questions saves hours of "no, that's not what I meant" debugging loops.

5. Run /speckit.analyze After Tasks

The analysis command is your quality gate. Run it after /speckit.tasks, before /speckit.implement. It catches misalignments before a single line of code is written.

6. One Feature Per Spec

Don't specify your entire app at once. Break into features with separate specs. Smaller specs = focused tasks = reliable output.

7. Iterate on Specifications

Specs aren't final after pass one. Update them as you learn, then re-run downstream commands. SDD is iterative.

8. Commit Specs to Git

Treat spec files as first-class code. Full audit trail of decisions. New team members read specs instead of reverse-engineering code.

9. Use Descriptive Names

"001-user-auth" beats "001-feature". Clear names help navigate specs/ and make Git history meaningful.

10. Learn from Results

After /speckit.implement, review the code. Gaps between expectation and output = feedback to improve your spec writing.

Chapter 08

Project: Build a HabitTracker

A complete, hands-on walkthrough. Every prompt, every command, every decision, building a genuinely useful app.

This isn't a toy project. We're building a real HabitTracker app that you'll actually want to use daily. It tracks habits, calculates streaks, shows visual progress, and helps you build better routines. Follow along step by step, copy the prompts exactly, and you'll have a working app.

📊

HabitTracker: Project Blueprint

A daily habit tracking app that helps users build and maintain positive routines

🖥️ React 18 + TypeScript
Vite build tool
🎨 Tailwind CSS
💾 localStorage
🧭 React Router v6
📅 date-fns
framer-motion
⏱️ ~30 min to build

What We're Building

A genuinely useful app with these real-world features:

Habit Management

Create, edit, and delete habits with custom emoji icons and flexible frequency settings.

  • Custom name + emoji picker
  • Daily, weekday, or specific-day frequency
  • Category grouping (health, learning, productivity)
  • Drag-and-drop reordering
📱

Daily Tracking

One-tap completion designed for mobile-first, one-handed use. Visual feedback that feels rewarding.

  • Today view with all active habits
  • Tap to complete with animation
  • Undo within 5 seconds
  • Progress ring showing daily completion %
🔥

Streaks & Motivation

Streak tracking that motivates consistency. Visual cues that make progress tangible.

  • Current streak counter per habit
  • Personal best streak record
  • Streak milestones (7, 30, 100 days)
  • Motivational messages based on progress
📈

Progress Dashboard

Visual analytics that help users understand their patterns and celebrate wins.

  • Weekly completion heat grid
  • Monthly calendar heatmap
  • Overall completion rate
  • Best performing habits ranking
🎯

Smart Defaults

Pre-configured starter habits so new users get value immediately without setup friction.

  • Starter pack: exercise, reading, water, meditation
  • Quick-add from curated habit library
  • Sensible default frequencies
  • Skip onboarding if desired
💾

Data Persistence

All data stored locally. No accounts, no backend, no privacy concerns. Works offline.

  • localStorage with migration support
  • JSON export for backup
  • Import from backup file
  • Data schema versioning

Step-by-Step Build Guide

Step 1: Initialize the Project

Open your terminal and create the project:

Terminal
# Create the HabitTracker project with Copilot support specify init habit-tracker --integration copilot # Open in VS Code code habit-tracker # In VS Code: Open Copilot Chat → Switch to Agent Mode # Type /speckit and verify all commands appear
💡 Verify Agent Mode

In the Copilot chat panel, look for a toggle or dropdown that says "Agent" mode. The /speckit commands only appear in Agent mode. If they don't show up, restart VS Code and try again.

Step 2: Define the Constitution

This sets the rules of the game. Copy this prompt into Copilot chat:

📋 Copy this prompt exactly
/speckit.constitution # Goal Create a constitution for the HabitTracker web application defining non-negotiable development principles. # Context This is a mobile-first single-page web app for individual users to track daily habits. The constitution governs every code decision and will be referenced by all subsequent agents throughout the project. # Instructions Define clear principles for each area below: Code Quality: React with TypeScript in strict mode. No "any" types. ESLint + Prettier enforced. All components are functional with hooks. Feature-based folder structure (src/features/habits/, src/features/dashboard/, etc.). Testing: Unit tests with Vitest for all business logic (streak calculations, data persistence, date handling). Integration tests for critical user flows. Minimum 80% coverage on business logic. Styling: Tailwind CSS utility-first. Mobile-first responsive design. Custom design tokens via Tailwind config. No inline styles. Dark mode support via CSS variables. Accessibility: WCAG 2.1 AA compliance. Semantic HTML everywhere. All interactive elements keyboard navigable. Screen reader labels on all icons and buttons. Focus indicators visible. Performance: Under 3s initial load on 3G. Lazy load non-critical routes. No unnecessary re-renders, use React.memo, useMemo, useCallback where measurable. Data: Browser localStorage only. No backend, no accounts, no tracking. JSON schema versioning for data migrations. All data operations through a custom useStorage hook. Architecture: Custom hooks for all shared logic. Maximum 2 levels of prop passing, use Context beyond that. Each feature is self-contained with its own types, hooks, components, and tests.
⚠️ Review the Output

After Copilot generates the constitution, open .specify/memory/constitution.md and read it thoroughly. The AI will expand your input into detailed articles. Make sure it captured your intent, especially around testing and accessibility standards. Edit anything that doesn't match your expectations before moving on.

Step 3: Write the Specification

This is the most important prompt in the entire process. The more detail here, the better everything downstream will be. Copy this into Copilot chat:

📝 Copy this prompt exactly
/speckit.specify # Goal Build a daily habit tracker called "HabitTracker", a web app that helps users build and maintain positive daily routines through simple tracking and visual progress feedback. # Context Individual users who want to build better daily routines without complex tools. No accounts needed, all data stays on the user's device. Must work great on mobile for one-handed use and feel rewarding to use every day. # Instructions Describe the full product specification including all user-facing features, behaviors, and experience requirements. Do not include technical implementation details such as frameworks, libraries, or data storage mechanisms. == CORE FEATURES == 1. Habit Management Users can create habits with: a custom name (max 40 chars), an emoji icon (from a predefined set of ~30 common emojis), a frequency (daily, weekdays only, or specific days of the week), and an optional category (Health, Learning, Productivity, Mindfulness, Custom). Users can edit any habit's name, icon, frequency, or category. Users can delete habits with a confirmation dialog. Users can reorder habits via drag-and-drop. Maximum 20 active habits. 2. Daily Tracking View (Home Screen) Shows today's date prominently. Lists all habits that are active for today (based on frequency). Each habit shows: emoji icon, name, current streak count, and a completion toggle. Tapping/clicking the toggle marks the habit complete with a satisfying animation (scale + checkmark). Undo is available for 5 seconds after completion. A progress ring at the top shows "X of Y habits completed today". When all habits are complete, show a celebration animation. 3. Streaks Engine A streak is the count of consecutive scheduled days a habit was completed. Missing a scheduled day resets the streak to 0. The app tracks: current streak and personal best (longest) streak per habit. Streak milestones at 7 days, 30 days, 66 days (habit formation), and 100 days trigger a visual badge. Streaks only count days the habit was scheduled (weekday-only habits don't break on weekends). 4. Progress Dashboard Weekly view: 7-day grid showing completion status per habit (color-coded). Monthly view: Calendar heatmap showing daily overall completion percentage (from gray to green). Statistics: overall completion rate (last 7 / 30 / 90 days), current longest streak across all habits, total habits completed all-time, most consistent habit. Motivational message that changes based on performance. 5. Starter Habits On first launch when the user has no saved habits, offer a set of 6 starter habits the user can select from: 💪 Exercise (daily), 📚 Read 20 min (daily), 💧 Drink 8 glasses of water (daily), 🧘 Meditate (daily), 📝 Journal (daily), 🚶 10,000 steps (weekdays). User can skip and create their own, or select some starters and add custom ones. 6. Data Portability All data stays on the user's device, no accounts, no syncing, no privacy concerns. Export data to a backup file. Import data from a backup file with conflict handling. == USER EXPERIENCE REQUIREMENTS == Mobile-first: usable one-handed on a phone. Touch targets minimum 44x44px. Navigation: bottom tab bar with 3 tabs, Today, Stats, Settings. Animations: completion toggle, streak milestone, celebration. Theme: clean, modern, encouraging, not clinical. Default dark mode with light mode toggle. Empty states with helpful messages ("Add your first habit!"). Loading indicators are not required for instant operations, but error states are required for data import/export operations.

Step 4: Clarify Ambiguities

Run the clarify command. The AI will ask structured questions. Here are the ones you'll likely see and suggested answers:

🔍 Run clarification
/speckit.clarify

Q: What happens to historical data when a habit is deleted?

Answer: Keep completion history. Deleted habits move to an "archived" state so their data still shows in stats. Users can permanently delete from settings.

Q: Should the app handle timezone changes?

Answer: Use the browser's local timezone. "Today" is always based on device time. Don't handle timezone changes in v1, keep it simple.

Q: How should the emoji picker work?

Answer: A simple grid of ~30 pre-selected emojis organized by category (activities, objects, nature, food). No free-text emoji input. Fast and mobile-friendly.

Q: What's the behavior when opening the app for the first time today?

Answer: Show today's habits with all toggles unchecked. Display yesterday's completion rate as a small banner ("Yesterday: 5/6 completed!"). Focus is always on today.

Step 5: Create the Technical Plan

🏗️ Copy this prompt exactly
/speckit.plan # Goal Define the complete technical architecture for the HabitTracker application. # Context The spec and constitution are finalized. This plan translates product requirements and guiding principles into concrete technical decisions that will govern implementation. # Instructions Provide technical decisions for each area below: Build & Framework: Vite 5 with React 18 and TypeScript in strict mode. SWC for fast compilation. Styling: Tailwind CSS v3 with custom theme config for brand colors, spacing, and dark mode via class strategy. No component library, all custom components. Routing: React Router v6 with 3 routes: "/" (Today view), "/stats" (Dashboard), "/settings" (Settings). Bottom tab bar navigation component. State Management: React Context for global state (habits list, completions, settings). useReducer for complex state transitions (adding/editing/deleting habits). Custom useLocalStorage hook that handles serialization, deserialization, and migration. Date Handling: date-fns for all date operations. Helper functions: isHabitScheduledForDate(), getStreakForHabit(), getCompletionRateForPeriod(). Animations: framer-motion for completion toggle, celebration, and page transitions. CSS transitions for hover and focus states. Keep bundle impact minimal. Data Architecture: Types in src/types/. Custom hooks in src/hooks/. Features in src/features/habits/, src/features/dashboard/, src/features/settings/. Shared components in src/components/. Business logic in pure functions (easy to test). Testing: Vitest + React Testing Library. Test all streak calculation functions, storage hook, and date utility functions. Integration test for the completion flow.

Step 6: Generate Tasks

📋 Task generation
/speckit.tasks Spec Kit will generate ordered tasks like: Task 1: Scaffold Vite + React + TypeScript project Task 2: Configure Tailwind CSS with custom theme Task 3: Set up React Router with bottom tab navigation Task 4: Define TypeScript types (Habit, Completion, Settings) Task 5: Build useLocalStorage custom hook with migrations Task 6: Create HabitContext provider with useReducer Task 7: Build EmojiPicker component Task 8: Build HabitForm (create/edit) component Task 9: Build HabitCard with completion toggle Task 10: Implement TodayView page with progress ring Task 11: Build streak calculation engine (pure functions) Task 12: Create CalendarHeatmap component Task 13: Build Dashboard/Stats page Task 14: Implement Settings page (theme, export, import) Task 15: Add onboarding flow with starter habits Task 16: Add framer-motion animations Task 17: Write Vitest unit tests for business logic Task 18: Write integration tests for completion flow Task 19: Accessibility audit and fixes Task 20: Final polish and responsive testing
💡 Review the Tasks

Open specs/001-habit-tracker/tasks.md and review the generated tasks. Are they in the right order? Are dependencies clear? Are acceptance criteria specific? This is your last chance to adjust before running the analysis and implementation.

Step 7: Analyze for Consistency

Run the quality gate after tasks are generated:

🔍 Consistency check
/speckit.analyze The AI will check: • Spec alignment with constitution (testing, accessibility, etc.) • Plan consistency with spec requirements (are all features covered?) • Task coverage: do the tasks implement everything in the plan? • Conflicts between principles and technical choices Fix any CRITICAL findings before proceeding!
🚨 Don't Skip This

If the analysis finds CRITICAL issues (e.g., "spec requires drag-and-drop but plan doesn't include a DnD library"), fix them in the spec, plan, or tasks before implementing. This is the cheapest place to catch mistakes, before any code exists.

Step 8: Implement!

This is the moment. Run the implement command and let Copilot build your entire app:

🚀 Launch implementation
/speckit.implement # Goal Execute all tasks from tasks.md to build the complete HabitTracker application. # Context All artifacts are finalized and have passed the /speckit.analyze consistency check. The constitution, spec, plan, and tasks are ready. # Instructions Implement all tasks from tasks.md in sequence. For each task: 1. Read the task description and acceptance criteria 2. Apply constitution principles to all code decisions 3. Follow the architectural patterns defined in the plan 4. Generate code, tests, and configuration as specified 5. Validate the task's acceptance criteria before proceeding to the next # Output Working, tested code for each task committed incrementally. Flag any ambiguities or blockers before proceeding. 💡 You can target specific tasks or phases: • Implement a single task: /speckit.implement [task number or name] • Implement a range: /speckit.implement Tasks 1 to 5 • Implement all tasks: /speckit.implement (no argument) ⏱️ Full build will take 10–20 minutes. Let it work uninterrupted.

Step 9: Test & Verify

Terminal
# Install dependencies npm install # Start the development server npm run dev # Open in browser (usually http://localhost:5173) # Run tests npm run test # Test checklist: # ✅ Create a new habit with emoji and name # ✅ Mark a habit complete, check animation plays # ✅ Verify streak counter increments # ✅ Check the dashboard shows progress # ✅ Toggle dark/light mode # ✅ Export data → delete all → import data # ✅ Test on mobile viewport (Chrome DevTools) # ✅ Run keyboard-only navigation test

Step 10: Fix Issues (Normal!)

If something doesn't work, and it probably won't be perfect on the first try, here's the workflow:

Bug in Generated Code

Copy the error into Copilot chat. It has full context from the spec and will fix it quickly. For simple bugs, this is faster than updating the spec.

Missing Feature

Update the spec with the missing requirement. Re-run /speckit.tasks to generate a new task list, then /speckit.implement for the missing piece.

Architecture Issue

Update the plan to fix the architectural decision. Re-run tasks and implementation. The spec-driven approach means you're fixing the design, not patching symptoms.

🎉 Congratulations!

You've built a genuinely useful HabitTracker app using Spec-Driven Development. Every decision is documented in your spec files. You can iterate, add features, or hand the project to another developer, and they'll know exactly what was built and why. That's the power of SDD.

Book Updates

Release Notes

What's changed in this eBook over time: content, structure, and reading-experience updates.

Content 2026-07-03

Chapter 02 reworked: "The Anatomy of AI Interaction"

  • Retired the standalone "Prompt Engineer" chapter and folded its template into a broader Chapter 02.
  • Added "The Anatomy of an AI Interaction": how prompts, agents, skills, and MCP servers all collapse into billed tokens.
  • Added a plain-language explainer of GitHub Copilot's move from Premium Requests to Usage-Based Billing (AI Credits), with links to the official sources.
  • Added "Prompt Engineering vs. Context Engineering" and "Agents, Skills & MCP Servers" sections with decision guides and VS Code best practices.
  • Added "Why Spec-Driven Development Is the Strategy," tying requirements/architecture-first thinking back into the rest of the book.
Redesign 2026-07-03

New reading experience: sidebar navigation, search & release notes

  • Added a persistent chapter/topic sidebar so you can jump straight to any section instead of scrolling the whole book.
  • Added in-page search (press / or click the search box) with live results and jump-to-highlight.
  • Added this Release Notes section to track future content updates in plain language.
  • Simplified the top nav bar; chapter links now live in the sidebar, with quick access to Release Notes and the Spec Kit GitHub repo.
  • Book history starts here, earlier updates weren't tracked individually before this redesign.

Stop vibe coding.
Start building with intent.

Spec Kit is free, open source, and backed by a growing community of 68,000+ developers who believe that better specifications lead to better software.

Meet the Authors

About the Authors

Albert Tanure

Cross Solutions Architect at Microsoft · Docker Captain

Albert is a passionate Senior Cloud Solutions Architect at Microsoft, based in the Netherlands, where he lives with his family. Originally from Brazil, he brings a global perspective and a deep commitment to the technical community. With over 20 years of experience in application development, cloud-native technologies, containers, and software architecture, he has established himself as a trusted voice in the industry.

A former Microsoft MVP for 7 years and current Docker Captain, Albert is driven by a love for technology and sharing knowledge. He actively contributes through lectures, video content on his Code FC YouTube channel, and technical articles. He founded Tanure.io Software Development Agency and is passionate about AI-driven development workflows, exploring how agent-based systems can transform how teams build software.

linkedin.com/in/albert-tanure →

Rodrigo Moreirao

Cloud Solution Architect at Microsoft · DevSecOps & GitHub Specialist

Rodrigo is a Cloud Solution Architect at Microsoft, based in the Netherlands, where he specializes in cloud-native technologies, containers, and security. With deep expertise in Azure, AKS, GitHub, and DevSecOps practices, he helps organizations modernize their development workflows and adopt secure-by-design approaches to software delivery.

Passionate about the intersection of cloud infrastructure and developer experience, Rodrigo brings hands-on knowledge of Terraform, network automation, and container orchestration. As co-author of this ebook, he contributed his practical expertise in building modern applications with structured, AI-driven development methodologies, bridging the gap between cloud architecture and day-to-day developer productivity.

linkedin.com/in/rodrigo-moreirao →