SpecKit Companion

A VSCode extension that brings spec-driven development to AI coding assistants using GitHub SpecKit.

Features

Spec-Driven Development with GitHub SpecKit

• SpecKit Integration: Full integration with GitHub's SpecKit for spec-driven development
• Visual Workflow Editor: Review and edit spec documents (spec.md, plan.md, tasks.md) with a custom editor
• Progress Tracking: Visual phase indicators showing workflow progress

Setup Assistance

• CLI Detection: Automatically detects if SpecKit CLI is installed
• Install Prompts: Prompts to install SpecKit CLI if not detected
• Workspace Initialization: Suggests initializing SpecKit when CLI is installed but workspace isn't set up
• Upgrade Commands: One-click upgrades for CLI, project files, or both via Command Palette

AI Coding Assistant Companion Features

• Steering Management: Browse and manage steering files (CLAUDE.md, GEMINI.md, copilot-instructions.md)
• Agent Explorer: View and manage custom agents at user and project levels
• MCP Servers: View configured Model Context Protocol servers
• Hooks Management: View and manage Claude Code hooks (Claude only)
• Extension Updates: Automatic update notifications when new versions are available

Supported AI Providers

SpecKit Companion works with multiple AI coding assistants:

Feature	Claude Code	GitHub Copilot CLI	Gemini CLI
Steering File	CLAUDE.md	.github/copilot-instructions.md	GEMINI.md
Steering Path	.claude/steering/	.github/instructions/*.instructions.md	Hierarchical GEMINI.md
Agents	.claude/agents/*.md	.github/agents/*.agent.md	Limited support
Hooks	.claude/settings.json	Not supported	Not supported
MCP Servers	.claude/settings.json	~/.copilot/mcp-config.json	~/.gemini/settings.json
CLI Command	claude	ghcs / gh copilot	gemini

Configure your preferred provider in VS Code settings: speckit.aiProvider

How It Works

SpecKit Companion provides a visual interface for spec-driven development:

1. Specs View

Browse and manage your feature specifications. Each spec folder contains:

• spec.md - Requirements and user stories
• plan.md - Technical design document
• tasks.md - Implementation checklist with progress tracking

2. Visual Workflow Editor

The workflow editor guides you through the three phases of spec-driven development. Each phase has dedicated actions and content sections.

Phase 1: Spec

Define your feature requirements with user stories and acceptance scenarios.

Actions:

• Clarify - Ask SpecKit to identify ambiguities and ask clarifying questions
• Edit Source - Open the raw markdown file for direct editing
• Regenerate - Re-run the spec generation with updated input
• Approve & Next Phase - Mark the spec as approved and proceed to planning

Phase 2: Plan

Create the technical implementation plan based on approved requirements.

Tabs (generated by SpecKit):

• Research - Background research and analysis
• Plan - Core implementation strategy
• Data Model - Database/state structure definitions
• Quickstart - Getting started guide for implementation

Actions:

• Checklist - Generate a custom checklist for the feature (SpecKit command)
• Edit Source - Open the raw markdown file for direct editing
• Regenerate - Re-run the plan generation
• Approve & Next Phase - Mark the plan as approved and proceed to tasks

Phase 3: Tasks

Implementation checklist with trackable tasks organized by user story.

Content sections:

• Format - Task ID conventions with parallel execution markers and story grouping
• Path Conventions - Project structure and file location references
• Phases - Tasks grouped into implementation phases with progress tracking

Actions:

• Analyze - Run cross-artifact consistency and quality analysis (SpecKit command)
• Edit Source - Open the raw markdown file for direct editing
• Regenerate - Re-run task generation
• Approve & Next Phase - Mark the tasks as approved and complete the workflow

3. Other Views

The extension provides additional views for managing AI assistant configurations:

Agents View

Browse custom AI agents defined in:

• .claude/agents/ (Claude Code)
• .github/agents/ (GitHub Copilot)

Steering View

Manage AI guidance files based on your selected provider:

• Global Rule - User-level instructions (e.g., ~/.claude/CLAUDE.md, ~/.gemini/GEMINI.md)
• Project Rule - Project-specific instructions (e.g., ./CLAUDE.md, ./GEMINI.md, .github/copilot-instructions.md)

MCP Servers View

See configured Model Context Protocol servers for external tool integrations.

Hooks View (Claude Code only)

View automation hooks that run on events like pre-commit, post-save, etc.

Prerequisites

1. AI Coding Assistant (at least one):

   • Claude Code - Full feature support
   • GitHub Copilot CLI - Steering, agents, MCP
   • Gemini CLI - Steering, MCP

2. SpecKit CLI: Install via uv:

   uv tool install specify-cli --from git+https://github.com/github/spec-kit.git

Installation

From VSIX file

Download the latest .vsix file from releases, then:

# VSCode
code --install-extension speckit-companion-{version}.vsix

# Cursor
cursor --install-extension speckit-companion-{version}.vsix

Platform Support

Platform	Support	Notes
macOS	Yes	Fully supported
Linux	Yes	Fully supported
Windows WSL	Yes	Supported
Windows	No	Not supported

Usage

Quick Start

1. Click the SpecKit icon in the activity bar
2. If SpecKit CLI is not installed, follow the prompts to install it
3. Initialize SpecKit in your workspace with specify init <project-name>
4. Create and manage specs from the SPECS view

SpecKit Workflow

1. Spec: Define requirements for your feature
2. Plan: Create technical design after spec approval
3. Tasks: Generate implementation tasks from the plan
4. Implementation: Execute tasks one by one

Steering Documents

Create project-specific AI guidance:

• Click the sparkle icon to create custom steering documents
• Initialize steering with code style, architecture, and testing guidelines
• Documents are stored in .claude/steering/

Available Commands

Access these commands via the Command Palette (Cmd+Shift+P / Ctrl+Shift+P):

Command	Description
SpecKit: Install SpecKit CLI	Install SpecKit CLI using uv
SpecKit: Upgrade CLI	Upgrade SpecKit CLI to latest version
SpecKit: Upgrade Project Files	Update project's SpecKit configuration
SpecKit: Upgrade All (CLI + Project)	Upgrade both CLI and project files
SpecKit: Check for Updates	Check for new extension versions

Configuration

Settings are stored in .claude/settings/speckit-settings.json:

{
  "paths": {
    "specs": "specs",
    "steering": ".claude/steering",
    "settings": ".claude/settings"
  },
  "views": {
    "specs": { "visible": true },
    "steering": { "visible": true },
    "mcp": { "visible": true },
    "hooks": { "visible": true },
    "settings": { "visible": false }
  }
}

Workspace Structure

your-project/
├── specs/                    # Feature specifications (SpecKit format)
│   └── {spec-name}/
│       ├── spec.md           # Requirements/specification
│       ├── plan.md           # Technical design
│       └── tasks.md          # Implementation steps
├── .claude/
│   ├── commands/             # SpecKit slash commands
│   │   └── speckit.*.md
│   ├── steering/             # AI guidance documents
│   │   └── *.md
│   └── settings/
│       └── speckit-settings.json

Development

Setup

git clone <repo-url>
cd speckit-companion

npm install
npm run compile

Running

1. Open the project in VSCode
2. Press F5 to launch Extension Development Host

Building

npm run package
# Output: speckit-companion-{version}.vsix

Acknowledgments

This project builds started from all the amazing work at https://github.com/notdp/kiro-for-cc

License

MIT License