Claude Code Spec Workflow

repository·main·Indexed 25 days ago

https://github.com/pimzino/claude-code-spec-workflow

Automated, structured workflows for Claude Code featuring spec-driven development (Requirements → Design → Tasks → Implementation) and a streamlined bug fix loop (Report → Analyze → Fix → Verify). Includes a real-time dashboard with WebSocket updates and tunnel support via Cloudflare or ngrok for external monitoring. Provides steering documents for project context and specialized slash commands for task execution and bug tracking.

Tokens
17.5K
Snippets
48
Records
133
Agent score
86%

What's inside @pimzino/claude-code-spec-workflow

  1. Follow the bug analysis workflow and template

    main

    When performing a bug analysis, follow these steps:

    1. Prerequisites: Ensure report.md exists and is complete, then load the bug report and steering documents.
    2. Investigation:
      • Code Investigation: Search the codebase, map data flow, and identify failure points.
      • Root Cause Analysis: Determine the underlying cause and why existing tests failed.
      • Solution Planning: Design a fix strategy and plan the testing approach.
    3. Documentation: Create an analysis document using the exact structure defined in .claude/templates/bug-analysis-template.md.
    4. Approval: Present the analysis and wait for explicit approval (e.g., "yes", "approved") before proceeding to the next phase.
  2. Guidelines for creating atomic tasks

    main

    When breaking down a design into tasks, follow these atomicity requirements to ensure tasks are agent-friendly and executable:

    • File Scope: Each task should touch a maximum of 1-3 related files.
    • Time Boxing: Tasks should be completable in 15-30 minutes.
    • Single Purpose: Each task must have one testable outcome.
    • Specific Files: Tasks must specify exact files to create or modify.
    • Format: Use a checkbox format with a numbered hierarchy.

    Examples of Good vs Bad Tasks:

    • BAD: Implement authentication system
    • GOOD: Create User model in models/user.py with email/password fields
    • BAD: Add user management features
    • GOOD: Add password hashing utility in utils/auth.py using bcrypt
  3. Mark a task as complete

    main

    When a task is finished, you must use the get-tasks command with the --mode complete flag to update the task status. This is a critical step in the workflow protocol.

    Protocol:

    1. Run the completion command.
    2. State clearly: "Task X has been marked as complete".
    3. Stop execution: Do not automatically proceed to the next task; wait for user instruction.
    claude-code-spec-workflow get-tasks {feature-name} {task-id} --mode complete
  4. Use tunnel feature example scripts

    main

    The examples/tunnel/ directory contains several scripts for different use cases. These scripts automatically detect if they are running from a development directory and use the appropriate method.

    Available Scripts:

    • basic-tunnel.sh: Simple tunnel without authentication (good for quick demos).
    • password-tunnel.sh: Password-protected tunnel (recommended for most use cases).
    • advanced-tunnel.sh: Full configuration example showing all available options.
    • team-standup.sh: Optimized for daily standup meetings with easy-to-share credentials.
    • client-demo.sh: Professional setup for client presentations with auto-generated passwords.

    Quick Start Instructions:

    1. Make scripts executable: chmod +x *.sh
    2. Run the script: ./password-tunnel.sh (or your chosen script)
    3. Share the displayed URL and password with viewers.
    4. Press Ctrl+C to stop the dashboard and close the tunnel.
    chmod +x *.sh
    ./password-tunnel.sh
  5. Best practices for steering documents

    main

    To ensure effective project steering, follow these guidelines:

    • Persistence: Remember that these documents are persistent and will be referenced in all future spec commands.
    • Focus: Keep each document focused on its specific domain (product.md, tech.md, or structure.md).
    • Evolution: Update steering documents regularly as the project evolves.
    • Security: Never include sensitive data such as passwords, API keys, or credentials in these documents.
  6. Configure Project Steering (Context)

    main

    Steering documents provide persistent project context (vision, tech stack, and organization) that guides all subsequent spec development and ensures consistent code generation.

    Run /spec-steering-setup to create the following files in .claude/steering/:

    • product.md: Product vision, target users, and objectives.
    • tech.md: Tech stack, frameworks, and technical constraints.
    • structure.md: File organization, naming conventions, and import patterns.
    /spec-steering-setup
  7. Execute the Bug Verification process

    main

    Follow these steps to complete the verification phase:

    1. Original Bug Testing: Reproduce the steps from report.md and verify the bug no longer occurs, including edge cases from analysis.md.
    2. Regression Testing: Test related functionality and integration points to ensure no new bugs were introduced. Run automated tests if available.
    3. Code Quality Verification: Review changes for adherence to project standards, appropriate error handling, and adequate test coverage.
    4. Create Verification Document: Use the pre-loaded bug verification template to document all test results. Do not omit any sections.
    5. Final Approval: Present results and ask: "The bug fix has been verified successfully. Is this bug resolved?" to get final confirmation.
  8. Install and setup Claude Code Spec Workflow

    main

    To use the workflow, install the package globally and then run the setup command within your target project directory. This creates the .claude/ directory structure containing commands, steering documents, templates, specs, bugs, and agents.

    Prerequisites:

    • Node.js 16.0.0 or higher
    • Claude Code installed and configured (npm install -g @anthropic-ai/claude-code)

    Installation steps:

    1. Install globally: npm i -g @pimzino/claude-code-spec-workflow
    2. Run setup in your project: claude-code-spec-workflow
    npm i -g @pimzino/claude-code-spec-workflow
    claude-code-spec-workflow
  9. Load bug templates for verification

    main

    Before starting the verification process, you must load the hierarchical context to ensure the correct verification structure and templates are available.

    Run the following command to load the bug templates:

    claude-code-spec-workflow get-template-context bug

    Additionally, you should directly read the following bug documents to understand the context:

    • .claude/bugs/{bug-name}/report.md
    • .claude/bugs/{bug-name}/analysis.md
  10. Initialize the spec-driven workflow environment

    main

    Before starting the specification phases, you must set up the directory structure and load the necessary context (steering documents and templates) to ensure the AI assistant has the correct project standards and structural guidance.

    1. Create Directory Structure: Create .claude/specs/{feature-name}/ and initialize empty requirements.md, design.md, and tasks.md files.
    2. Load Context: Use the following commands to load project standards and templates once at the beginning of the process.
    # Load steering documents (if available)
    claude-code-spec-workflow get-steering-context
    
    # Load specification templates for structure guidance
    claude-code-spec-workflow get-template-context spec