Add Spec-kit to VS Code as VS Code Extension #59
Description
Spec-kit VS Code Extension - Detailed Requirements
Overview
This document outlines the detailed requirements for developing a VS Code extension that integrates GitHub's Spec-kit toolkit, bringing Spec-Driven Development capabilities directly into the VS Code editor environment.
Repository: [github/spec-kit](https://github.com/github/spec-kit)
Core Requirements
1. Project Initialization Integration
Requirement: Implement Spec-kit: Initialize Project command in VS Code command palette that replicates specify init <project_name> functionality with GUI wizard for AI agent selection (Claude Code, GitHub Copilot, Gemini CLI).
Details:
- Command palette integration for seamless project setup
- Interactive wizard interface for project configuration
- Support for all three AI agents: Claude Code, GitHub Copilot, and Gemini CLI
- Option to initialize in current directory or create new project folder
- Automatic detection and validation of AI agent installations
2. Spec-Driven Development Commands
Requirement: Integrate /specify, /plan, and /tasks commands as native VS Code commands accessible through command palette, allowing users to create specifications, define technical plans, and generate actionable task lists without leaving the editor.
Details:
- Native command palette integration for all three core commands
- Rich text input interfaces for command parameters
- Real-time validation and feedback during command execution
- Seamless handoff between specification, planning, and task generation phases
- Integration with AI agents for command processing
3. Intelligent File Management
Requirement: Automatically create and organize spec directories (specs/, templates/, memory/, scripts/) with proper file structure, template instantiation, and workspace configuration following spec-kit's established patterns.
Details:
- Automatic creation of spec-kit directory structure
- Template file management and instantiation
- Workspace configuration for optimal spec-kit workflow
- File watching and synchronization with spec-kit conventions
- Integration with VS Code's file explorer for easy navigation
4. AI Agent Communication Layer
Requirement: Build abstraction layer to communicate with configured AI coding agents, handle authentication, send commands, receive responses, and display results within VS Code interface with proper error handling.
Details:
- Unified API for multiple AI agent integrations
- Secure authentication and session management
- Command queuing and response handling
- Error detection, reporting, and recovery mechanisms
- Status indicators and progress feedback in VS Code UI
5. Specification File Enhancement
Requirement: Provide syntax highlighting, auto-completion, and validation for spec-kit's markdown templates (spec.md, plan.md, tasks.md) with schema validation against spec-kit's expected structure.
Details:
- Custom syntax highlighting for spec-kit markdown files
- Intelligent auto-completion for spec-kit commands and structures
- Real-time validation against spec-kit schemas
- Error highlighting and correction suggestions
- Integration with VS Code's language server features
6. Template and Script Integration
Requirement: Bundle spec-kit's core templates (CLAUDE-template.md, plan-template.md, spec-template.md, tasks-template.md) and shell scripts within the extension for seamless project bootstrapping.
Details:
- Embedded template management system
- Script execution capabilities within VS Code environment
- Template customization and organization support
- Version synchronization with upstream spec-kit repository
- Template validation and integrity checking
7. Development Phase Visualization
Requirement: Create UI components to visualize and track the three development phases (0-to-1 Development, Creative Exploration, Iterative Enhancement) with progress indicators and phase-specific guidance.
Details:
- Visual phase tracking dashboard
- Progress indicators for each development phase
- Phase-specific guidance and best practices
- Transition management between phases
- Historical phase tracking and analytics
8. Git Workflow Integration
Requirement: Automatically handle branch creation for new features (e.g., 001-create-feature), integrate with VS Code's source control for spec versioning, and optionally create pull requests with detailed descriptions.
Details:
- Automatic feature branch creation following spec-kit naming conventions
- Integration with VS Code's built-in Git functionality
- Spec versioning and change tracking
- Pull request generation with spec-driven descriptions
- Branch management for parallel development workflows
9. Preview and Editing Interface
Requirement: Implement custom webview panels for rich spec editing with live preview, allowing users to see rendered specifications alongside the markdown source with real-time validation feedback.
Details:
- Split-pane editor with source and preview modes
- Real-time markdown rendering with spec-kit styling
- Live validation feedback and error highlighting
- Interactive editing features for complex spec structures
- Export and sharing capabilities for rendered specifications
10. Configuration and Settings Management
Requirement: Provide VS Code settings panel for configuring AI agent preferences, template customization, project defaults, and integration with spec-kit's constitution.md and organizational constraints.
Details:
- Comprehensive settings panel for all extension options
- AI agent configuration and preference management
- Template customization and organizational branding
- Project default settings and workspace preferences
- Constitution.md integration for organizational compliance
Technical Specifications
Supported Platforms
- VS Code Desktop (Windows, macOS, Linux)
- VS Code Web (future consideration)
Dependencies
- Node.js runtime for extension execution
- Git integration for version control
- AI agent CLIs (Claude Code, GitHub Copilot, Gemini CLI)
- Python 3.11+ for spec-kit compatibility
Performance Requirements
- Fast command execution (< 2 seconds for local operations)
- Efficient file watching and synchronization
- Minimal impact on VS Code startup time
- Responsive UI interactions
Success Criteria
MVP (Minimum Viable Product)
- Successfully initialize spec-kit projects from VS Code
- Execute all three core commands (
/specify,/plan,/tasks) - Proper file organization and template management
- Basic AI agent integration with at least one supported agent
Enhanced Features
- Rich editing and preview capabilities
- Complete Git workflow integration
- Comprehensive settings and configuration management
- Visual phase tracking and progress indicators