### Basic Workflow Example

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/README.md

Illustrates a typical workflow: installing the CLI, setting up the project, creating steering documents, generating a feature spec, executing tasks, and monitoring status. This sequence is recommended for new feature development.

```bash
# 1. Install globally (one time)
npm install -g @pimzino/claude-code-spec-workflow

# 2. Setup project (one time)
cd my-project
claude-code-spec-workflow

# 3. Create steering documents (recommended)
claude
/spec-steering-setup

# 4. Create feature spec
/spec-create user-authentication "Secure login system"

# 5. Execute tasks
/spec-execute 1 user-authentication

# 6. Monitor progress
/spec-status user-authentication
```

--------------------------------

### Client Demo Tunnel Example

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/examples/tunnel/README.md

A professional setup for client presentations that includes auto-generated passwords.

```bash
./client-demo.sh
```

--------------------------------

### Run Spec Steering Setup

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/commands/spec-steering-setup.md

Execute the command to initiate the steering document setup process.

```bash
/spec-steering-setup
```

--------------------------------

### Example Usage of spec-create Command

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/commands/spec-create.md

Use this command to start the specification creation process for a new feature. Provide the feature name and a brief description.

```bash
/spec-create user-authentication "Allow users to sign up and log in securely"
```

--------------------------------

### Basic CLI Setup

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/README.md

Performs a basic setup of the command-line tool. This command can be run without arguments for default configuration.

```bash
# Basic setup
claude-code-spec-workflow

# Advanced options
claude-code-spec-workflow --project /path --force --yes
```

--------------------------------

### Setup Multiple Projects

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/README.md

Automate the setup process for multiple projects using a loop. The --yes flag bypasses confirmation prompts.

```bash
for dir in project1 project2 project3; do
  npx @pimzino/claude-code-spec-workflow --project $dir --yes
done
```

--------------------------------

### Install and Verify CLI Tool

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/README.md

Installs the command-line interface globally and verifies the installation by checking the version. This is a prerequisite for using the workflow.

```bash
# Install globally (recommended)
npm install -g @pimzino/claude-code-spec-workflow

# Verify installation
claude-code-spec-workflow --version
```

--------------------------------

### Example Bug Create Command

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/commands/bug-create.md

An example of how to use the `/bug-create` command with a specific bug name and description.

```bash
/bug-create login-timeout "Users getting logged out too quickly"
```

--------------------------------

### Application Directory Structure Example

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/templates/structure-template.md

An example of a typical directory structure for an application, including source code, assets, configuration, scripts, and tests.

```bash
project-root/
├── [src/app/lib]           # Main source code
├── [assets/resources]      # Static resources
├── [config/settings]       # Configuration
├── [scripts/tools]         # Build/utility scripts
└── [tests/spec]            # Test files
```

--------------------------------

### Install Tunnel Providers

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/docs/tunnel-feature.md

Install necessary providers for creating tunnels. Cloudflare and ngrok are supported.

```bash
npm install -g cloudflared  # For Cloudflare
npm install -g ngrok        # For ngrok
```

--------------------------------

### Example Task Execution

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/commands/spec-execute.md

Examples of how to use the `/spec-execute` command with a task ID and feature name.

```bash
/spec-execute 1 user-authentication
```

```bash
/spec-execute 2.1 user-authentication
```

--------------------------------

### Library/Package Directory Structure Example

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/templates/structure-template.md

An example of a typical directory structure for a library or package, including source, tests, documentation, and build output.

```bash
project-root/
├── src/                    # Source code
├── tests/                  # Test files  
├── docs/                   # Documentation
├── examples/               # Usage examples
└── [build/dist/out]        # Build output
```

--------------------------------

### Advanced Tunnel Configuration Example

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/examples/tunnel/README.md

Demonstrates the full range of available options for tunnel configuration.

```bash
./advanced-tunnel.sh
```

--------------------------------

### Setup Claude Code Spec Workflow

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/README.md

Initialize the workflow in the current or a specific directory. Options include forcing overwrites, skipping prompts, and testing the setup.

```bash
# Setup in current directory
npx @pimzino/claude-code-spec-workflow
```

```bash
# Setup in specific directory
npx @pimzino/claude-code-spec-workflow --project /path/to/project
```

```bash
# Force overwrite existing files
npx @pimzino/claude-code-spec-workflow --force
```

```bash
# Skip confirmation prompts
npx @pimzino/claude-code-spec-workflow --yes
```

```bash
# Test the setup
npx @pimzino/claude-code-spec-workflow test
```

--------------------------------

### Start Dashboard with Full Tunnel Configuration

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/docs/tunnel-feature.md

Demonstrates starting the dashboard with a tunnel, password protection, a specific provider, a custom port, and automatically opening the browser. Adjust values as needed.

```bash
claude-spec-dashboard \
  --tunnel \
  --tunnel-password "securePass123" \
  --tunnel-provider cloudflare \
  --port 8080 \
  --open
```

--------------------------------

### Install and Use Workflow Command

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/README.md

If you encounter a 'Command not found' error, install the package globally using npm. After installation, you can use the workflow command.

```bash
# Install globally first
npm install -g @pimzino/claude-code-spec-workflow

# Then use the command
claude-code-spec-workflow
```

--------------------------------

### Dashboard Subsystem Structure Example

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/templates/structure-template.md

An example structure for organizing a dashboard subsystem, separating backend, frontend, shared components, and public assets.

```bash
src/
└── dashboard/          # Self-contained dashboard subsystem
    ├── server/        # Backend server components
    ├── client/        # Frontend assets
    ├── shared/        # Shared types/utilities
    └── public/        # Static assets
```

--------------------------------

### Start Dashboard with Tunnel (Default Settings)

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/docs/tunnel-feature.md

Starts the dashboard with the tunnel feature enabled using default configurations. This is the most basic way to initiate a shareable tunnel.

```bash
claude-spec-dashboard --tunnel
```

--------------------------------

### Example Spec Status Output Format

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/commands/spec-status.md

This is an example of the detailed output format for a specific spec, showing its phase, progress through different stages, and the next recommended action.

```text
Spec: user-authentication
Phase: Implementation
Progress: Requirements ✅ | Design ✅ | Tasks ✅
Implementation: 3/8 tasks complete
Next: Execute task 4 - "Implement password validation"
```

--------------------------------

### Troubleshoot Permission Errors

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/README.md

If setup fails due to permission errors, try running the command with different directory permissions or specifying a project directory with appropriate access.

```bash
npx @pimzino/claude-code-spec-workflow --project ~/my-project
```

--------------------------------

### Install Claude Code

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/README.md

Before using Claude Code features, ensure it is installed globally. This command installs the necessary package.

```bash
npm install -g @anthropic-ai/claude-code
```

--------------------------------

### Start Dashboard with Tunnel

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/docs/tunnel-feature.md

Use this command to start the dashboard and create a temporary HTTPS tunnel for external sharing. The output will provide the local dashboard URL and the shareable tunnel URL.

```bash
npx -p @pimzino/claude-code-spec-workflow claude-spec-dashboard --tunnel
```

--------------------------------

### Initialize Claude Code Spec Workflow in Project

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/README.md

Run the setup command in your project directory to initialize the workflow. This sets up the necessary .claude/ structure and configuration files.

```bash
claude-code-spec-workflow
```

--------------------------------

### Run Project Tests

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/README.md

Execute tests for the project in a temporary directory. This command verifies the project's setup and functionality.

```bash
npx @pimzino/claude-code-spec-workflow test
```

--------------------------------

### Troubleshoot Command Not Found

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/README.md

If the command is not found after installation, ensure you are using the correct package name. This is a common issue after NPX installation.

```bash
npx @pimzino/claude-code-spec-workflow
```

--------------------------------

### Password-Protected Tunnel Example

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/examples/tunnel/README.md

Recommended for most use cases, this script sets up a password-protected tunnel for enhanced security.

```bash
./password-tunnel.sh
```

--------------------------------

### Load Requirements Template (Windows)

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/commands/spec-create.md

On Windows, use this command to load the requirements template from the specified path. Ensure the path is correct for your project setup.

```bash
claude-code-spec-workflow get-content "C:\path\to\project\.claude\templates\requirements-template.md"
```

--------------------------------

### Bug Fix Workflow Example

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/README.md

Demonstrates the workflow for addressing bugs: creating a bug report, analyzing it, implementing a fix, and verifying the solution. This is used for addressing issues in existing code.

```bash
/bug-create login-timeout "Users logged out too quickly"
/bug-analyze
/bug-fix
/bug-verify
```

--------------------------------

### Start Dashboard with Tunnel Password

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/docs/tunnel-feature.md

Securely share the dashboard by starting it with a password. This is useful for controlled reviews or demos.

```bash
claude-spec-dashboard --tunnel --tunnel-password "ReviewMeeting2024"
```

--------------------------------

### Spec Create Command Usage

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/commands/spec-create.md

Use this command to start creating a new feature specification. Provide the feature name and an optional description.

```bash
/spec-create <feature-name> [description]
```

--------------------------------

### Team Standup Tunnel Example

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/examples/tunnel/README.md

Optimized for daily standup meetings, providing easy-to-share credentials.

```bash
./team-standup.sh
```

--------------------------------

### Start Dashboard with Tunnel and Alternate Port

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/docs/tunnel-feature.md

Run the dashboard with tunneling enabled, specifying an alternate port if the default is in use.

```bash
claude-spec-dashboard --port 8080 --tunnel
```

--------------------------------

### Load Steering Context

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/commands/bug-fix.md

Load steering documents to ensure adherence to project conventions and patterns before starting the implementation.

```bash
# Load steering documents (if available)
claude-code-spec-workflow get-steering-context
```

--------------------------------

### Start Dashboard with Tunnel and Open Browser

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/docs/tunnel-feature.md

Launch the dashboard with tunneling enabled and automatically open the default web browser to the tunnel URL. Ideal for client demos.

```bash
claude-spec-dashboard --tunnel --open
```

--------------------------------

### Install Claude Code Spec Workflow Globally

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/README.md

Install the workflow package globally using npm. This command makes the workflow CLI tool available system-wide.

```bash
npm i -g @pimzino/claude-code-spec-workflow
```

--------------------------------

### Start Dashboard with ngrok Tunnel Provider

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/docs/tunnel-feature.md

Explicitly sets 'ngrok' as the tunnel provider. Ensure your ngrok authentication token is configured if using this option.

```bash
claude-spec-dashboard --tunnel --tunnel-provider ngrok
```

--------------------------------

### Load Requirements Template (macOS/Linux)

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/commands/spec-create.md

On macOS or Linux, use this command to load the requirements template from the specified path. Ensure the path is correct for your project setup.

```bash
claude-code-spec-workflow get-content "/path/to/project/.claude/templates/requirements-template.md"
```

--------------------------------

### Programmatic Dashboard Start with Tunnel

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/docs/tunnel-feature.md

Start the dashboard programmatically using JavaScript, enabling the tunnel feature with custom port, password, and provider.

```javascript
import { startDashboard } from '@pimzino/claude-code-spec-workflow';

const server = await startDashboard({
  port: 3000,
  tunnel: {
    enabled: true,
    password: 'secret123',
    provider: 'cloudflare'
  }
});

console.log(`Tunnel URL: ${server.tunnelUrl}`);
```

--------------------------------

### Basic Tunnel Example

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/examples/tunnel/README.md

A simple tunnel without authentication, suitable for quick demos or internal sharing.

```bash
./basic-tunnel.sh
```

--------------------------------

### Get Requirements Context Content

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/agents/spec-design-validator.md

Use this script to load the requirements file for validation. Ensure the feature-name is correctly substituted.

```bash
# Windows: claude-code-spec-workflow get-content "C:\path\to\project\.claude\specs\{feature-name}\requirements.md"
```

```bash
# macOS/Linux: claude-code-spec-workflow get-content "/path/to/project/.claude/specs/{feature-name}/requirements.md"
```

--------------------------------

### Start Dashboard with Tunnel

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/README.md

Initiate the dashboard with a secure tunnel to share externally. Supports password protection and provider selection.

```bash
# Start dashboard with tunnel
npx -p @pimzino/claude-code-spec-workflow claude-spec-dashboard --tunnel
```

```bash
# With password protection
npx -p @pimzino/claude-code-spec-workflow claude-spec-dashboard --tunnel --tunnel-password mySecret123
```

```bash
# Choose specific provider
npx -p @pimzino/claude-code-spec-workflow claude-spec-dashboard --tunnel --tunnel-provider cloudflare
```

--------------------------------

### Get Content Script

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/commands/spec-create.md

Use this script to read content from a specified file path. It supports both Windows and macOS/Linux paths.

```bash
# Windows:
claude-code-spec-workflow get-content "C:\path\to\project\.claude\specs\{feature-name}\requirements.md"
```

```bash
# macOS/Linux:
claude-code-spec-workflow get-content "/path/to/project/.claude/specs/{feature-name}/requirements.md"
```

--------------------------------

### Bug Create Command Usage

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/commands/bug-create.md

Use this command to start a new bug fix workflow. Provide a bug name and an optional description.

```bash
/bug-create <bug-name> [description]
```

--------------------------------

### Bug Status Output Format

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/commands/bug-status.md

This is an example of the output format when viewing the status of a specific bug fix. It includes the bug name, current phase, progress across different stages, a status description, and next recommended actions.

```text
Bug: login-timeout
Phase: Fix Implementation
Progress: Report ✅ | Analysis ✅ | Fix 🔄 | Verification ⏳
Status: Implementing fix for session timeout issue
Next: Complete implementation and verify fix works
```

--------------------------------

### Run Claude Spec Dashboard

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/README.md

Execute the real-time dashboard for live progress tracking and Git integration. Requires the package to be installed.

```bash
npx -p @pimzino/claude-code-spec-workflow claude-spec-dashboard
```

--------------------------------

### Spec List Output Format

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/commands/spec-list.md

This is an example of the output format for the spec-list command. It displays feature name, current phase, completion status, last modified date, and a brief description.

```text
📋 Project Specs Overview

1. user-authentication (Complete)
   Phase: Implementation (7/8 tasks)
   Last updated: 2025-01-15

2. data-export (In Progress)
   Phase: Design
   Last updated: 2025-01-14

3. notification-system (Planning)
   Phase: Requirements
   Last updated: 2025-01-13
```

--------------------------------

### Troubleshoot npx Permission Denied

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/docs/tunnel-feature.md

If you encounter a 'Permission denied' error when using npx, try the '--yes' flag with '@latest' to ensure the latest version is fetched and executed. Alternatively, install the package globally.

```bash
# Use npx with --yes flag and @latest
npx --yes -p @pimzino/claude-code-spec-workflow@latest claude-spec-dashboard --tunnel

# Alternative: Install globally first
npm install -g @pimzino/claude-code-spec-workflow
claude-spec-dashboard --tunnel
```

--------------------------------

### Set ngrok Auth Token

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/docs/tunnel-feature.md

Configure your ngrok authentication token to use the ngrok tunnel provider. Sign up at ngrok.com to get a token.

```bash
ngrok config add-authtoken YOUR_AUTH_TOKEN
```

--------------------------------

### Start Dashboard with Specific Tunnel Provider

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/docs/tunnel-feature.md

Specifies the tunnel provider to use, either 'cloudflare' (default) or 'ngrok'. This command explicitly sets Cloudflare as the provider.

```bash
claude-spec-dashboard --tunnel --tunnel-provider cloudflare
```

--------------------------------

### Get Design Template Content

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/agents/spec-design-validator.md

Use this script to load the design template file for validation. Specify the correct path for your operating system.

```bash
# Windows:
claude-code-spec-workflow get-content "C:\path\to\project\.claude\templates\design-template.md"
```

```bash
# macOS/Linux:
claude-code-spec-workflow get-content "/path/to/project/.claude/templates/design-template.md"
```

--------------------------------

### Start Dashboard with Tunnel and Password

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/docs/tunnel-feature.md

Enables tunnel access with password protection. Replace 'mySecret123' with your desired password to secure the shared dashboard.

```bash
claude-spec-dashboard --tunnel --tunnel-password "mySecret123"
```

--------------------------------

### Load Requirements Template

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/agents/spec-requirements-validator.md

Use this command to load the requirements template for comparison. Specify the correct path for your operating system.

```bash
# Windows:
claude-code-spec-workflow get-content "C:\path\to\project\.claude\templates\requirements-template.md"
```

```bash
# macOS/Linux:
claude-code-spec-workflow get-content "/path/to/project/.claude/templates/requirements-template.md"
```

--------------------------------

### TypeScript Frontend Build and Development Commands

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/README.md

Collection of npm scripts for building, type-checking, and running the frontend development server. Includes commands for development, production builds, and watch mode.

```bash
# TypeScript compilation and bundling
npm run build:frontend:dev   # Build frontend for development
npm run build:frontend:prod  # Build frontend for production (minified)
npm run watch:frontend       # Watch mode with auto-rebuild
npm run typecheck:frontend   # Type checking only (no output)
npm run typecheck           # Check both backend and frontend types

# Development workflow  
npm run dev:dashboard       # Start dashboard with hot reload (frontend + backend)
npm run dev:dashboard:backend-only  # Start only backend (for frontend debugging)

# Full build process
npm run build              # Complete build: TypeScript + frontend + static files
npm run lint               # Lint TypeScript files with auto-fix
npm run format             # Format code with Prettier
```

--------------------------------

### Load Steering Documents

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/commands/bug-analyze.md

Use these commands to load steering documents for technical and structural guidance during bug analysis. Ensure the paths are correct for your operating system.

```bash
# Windows:
claude-code-spec-workflow get-content "C:\path\to\project\.claude\steering\tech.md"
claude-code-spec-workflow get-content "C:\path\to\project\.claude\steering\structure.md"
```

```bash
# macOS/Linux:
claude-code-spec-workflow get-content "/path/to/project/.claude/steering/tech.md"
claude-code-spec-workflow get-content "/path/to/project/.claude/steering/structure.md"
```

--------------------------------

### Load Steering and Specification Context

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/agents/spec-task-executor.md

Use these commands as a fallback to load steering documents or all specification documents if context is not provided directly in task instructions.

```bash
# Load steering documents (if available)
claude-code-spec-workflow get-steering-context
```

```bash
# Load all specification documents
claude-code-spec-workflow get-spec-context {feature-name}
```

--------------------------------

### Execute Spec List Command

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/commands/spec-list.md

Use this command to display a comprehensive list of all specs in the project. It scans the `.claude/specs/` directory and checks for required files.

```bash
/spec-list
```

--------------------------------

### Create New Feature Spec

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/README.md

Initiate a new feature development workflow. This command starts the process from requirements gathering to task breakdown.

```bash
/spec-create feature-name "Description"
```

--------------------------------

### Load All Specification Documents

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/README.md

Use this command to load all specification documents at once for context sharing, optionally specifying a feature name. The output is formatted markdown containing requirements.md, design.md, and tasks.md.

```bash
claude-code-spec-workflow get-spec-context feature-name
```

--------------------------------

### Load Tasks Template

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/commands/spec-create.md

Use this command to load the tasks template. Ensure you use the correct path for your operating system.

```bash
# Windows:
claude-code-spec-workflow get-content "C:\path\to\project\.claude\templates\tasks-template.md"
```

```bash
# macOS/Linux:
claude-code-spec-workflow get-content "/path/to/project/.claude/templates/tasks-template.md"
```

--------------------------------

### Configure Dashboard and Tunnel

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/README.md

Launch the dashboard with advanced tunnel configurations, including password, provider, port, and auto-open options.

```bash
# Basic dashboard
npx -p @pimzino/claude-code-spec-workflow claude-spec-dashboard
```

```bash
# Dashboard with tunnel (share externally)
npx -p @pimzino/claude-code-spec-workflow claude-spec-dashboard --tunnel
```

```bash
# Full tunnel configuration
npx -p @pimzino/claude-code-spec-workflow claude-spec-dashboard \
  --tunnel \
  --tunnel-password mySecret123 \
  --tunnel-provider cloudflare \
  --port 3000 \
  --open
```

--------------------------------

### Initialize Project with Claude Code

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/README.md

Basic command to initialize the workflow in the current project directory. The 'claude' command can then be used for further interactions.

```bash
cd my-awesome-project
npx @pimzino/claude-code-spec-workflow
claude
# Type: /spec-create user-dashboard "User profile management"
```

--------------------------------

### Load Templates by Category

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/README.md

Load templates by category for context sharing. You can load all templates or specific categories like 'spec', 'bug', or 'steering'. The output is formatted markdown with the requested templates.

```bash
# Load all templates
claude-code-spec-workflow get-template-context

# Load specific template category
claude-code-spec-workflow get-template-context spec    # Spec templates
claude-code-spec-workflow get-template-context bug     # Bug templates
claude-code-spec-workflow get-template-context steering # Steering templates
```

--------------------------------

### Get Design Template Content

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/commands/spec-create.md

Retrieve the content of the design template file. This is used to ensure the design document follows the correct structure and formatting.

```bash
# Windows: claude-code-spec-workflow get-content "C:\path\to\project\.claude\templates\design-template.md"
```

```bash
# macOS/Linux: claude-code-spec-workflow get-content "/path/to/project/.claude/templates/design-template.md"
```

--------------------------------

### Execute Task with Agent

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/commands/spec-execute.md

This is a template for instructing the `spec-task-executor` agent. It includes placeholders for pasting context and task details.

```markdown
Use the spec-task-executor agent to implement task {task-id} for the {feature-name} specification.

## Steering Context
[PASTE THE COMPLETE OUTPUT FROM get-steering-context COMMAND HERE]

## Specification Context
[PASTE THE REQUIREMENTS AND DESIGN SECTIONS FROM get-spec-context COMMAND HERE]

## Task Details
[PASTE THE OUTPUT FROM get-tasks SINGLE COMMAND HERE]

## Instructions
- Implement ONLY the specified task: {task-id}
- Follow all project conventions and leverage existing code
- Mark the task as complete using: claude-code-spec-workflow get-tasks {feature-name} {task-id} --mode complete
- Provide a completion summary
```

--------------------------------

### Check Package Version

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/README.md

Verify the installed version of the Claude Code Spec Workflow package using the --version flag. This is useful for compatibility checks.

```bash
npx @pimzino/claude-code-spec-workflow --version
```

--------------------------------

### Create Bug Fix Documentation

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/README.md

Document a new bug with a structured format. This is the first step in the bug fix workflow.

```bash
/bug-create issue-name "Description"
```

--------------------------------

### Load Steering and Template Context

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/commands/bug-create.md

Load steering documents and bug templates once at the beginning of the bug creation process. Do not reload templates later.

```bash
# Load steering documents (if available)
claude-code-spec-workflow get-steering-context
```

```bash
# Load bug templates
claude-code-spec-workflow get-template-context bug
```

--------------------------------

### Check Dashboard and Firewall

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/docs/tunnel-feature.md

Troubleshoot connection issues by verifying the dashboard is running and firewall settings allow outbound HTTPS.

```bash
curl http://localhost:3000  # Should return HTML
```

--------------------------------

### Implement Bug Fix Solution

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/README.md

Execute the bug fix workflow to implement the identified solution.

```bash
/bug-fix
```

--------------------------------

### TypeScript Type Usage Examples

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/README.md

Demonstrates advanced TypeScript patterns for type safety, including discriminated unions, type guards, and the Result type for error handling. Ensure all types are imported correctly.

```typescript
// Import dashboard types
import type { Project, WebSocketMessage, AppState } from './dashboard.types';

// Type-safe project handling
function selectProject(project: Project): void {
  console.log(`Selected: ${project.name} (${project.specs.length} specs)`);
  
  // Safe property access with optional chaining
  const steeringCount = project.steeringStatus?.totalDocs ?? 0;
  if (steeringCount > 0) {
    console.log(`Steering docs: ${steeringCount}`);
  }
}

// WebSocket message handling with discriminated unions
function handleMessage(message: WebSocketMessage):
 void {
  switch (message.type) {
    case 'initial':
      // TypeScript knows data is InitialData
      console.log(`Loaded ${message.data.projects.length} projects`);
      break;
    case 'update':
      // TypeScript knows data is UpdateData
      console.log(`Updated project: ${message.data.projectPath}`);
      break;
    case 'error':
      // TypeScript knows data is ErrorData
      console.error(`Error: ${message.data.message}`);
      break;
  }
}

// Type guards for runtime validation
function isValidProject(obj: unknown): obj is Project {
  return (
    typeof obj === 'object' &&
    obj !== null &&
    'path' in obj &&
    'name' in obj &&
    'specs' in obj &&
    Array.isArray((obj as Project).specs)
  );
}

// Result type for error handling
type Result<T, E = Error> =
  | { success: true; data: T }
  | { success: false; error: E };

function parseProjectData(data: unknown): Result<Project> {
  if (isValidProject(data)) {
    return { success: true, data };
  }
  return { success: false, error: new Error('Invalid project data') };
}
```

--------------------------------

### Execute Bug Verify Command

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/commands/bug-verify.md

Use this command to initiate the bug verification process. Replace `[bug-name]` with the specific bug identifier.

```bash
/bug-verify [bug-name]
```

--------------------------------

### Load Specification Context

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/commands/spec-execute.md

Load the specification context for a given feature-name. This command retrieves requirements and design details.

```bash
claude-code-spec-workflow get-spec-context {feature-name}
```

--------------------------------

### Load Specification Context

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/commands/spec-create.md

This command loads the context of a completed specification, including the requirements document and any associated design or task files.

```bash
# Load the completed requirements document
claude-code-spec-workflow get-spec-context {feature-name}
```

--------------------------------

### Load Steering Context

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/commands/spec-execute.md

Load steering documents before proceeding with task execution. This command fetches relevant steering context.

```bash
claude-code-spec-workflow get-steering-context
```

--------------------------------

### Mark Task as Complete

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/agents/spec-task-executor.md

Execute this command to mark a specific task as complete after implementation. Ensure you replace {feature-name} and {task-id} with the actual values.

```bash
# Cross-platform command:
claude-code-spec-workflow get-tasks {feature-name} {task-id} --mode complete
```

--------------------------------

### Show Spec Status Command Usage

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/commands/spec-status.md

Use this command to view the status of all specs or a specific spec. If no feature name is provided, it lists all specs and their current phases. If a feature name is given, it shows detailed status for that spec.

```bash
/spec-status [feature-name]
```

--------------------------------

### Specify Project Directory for Permissions

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/README.md

When encountering permission errors, you can specify the project directory using the --project flag.

```bash
claude-code-spec-workflow --project ~/my-project
```

--------------------------------

### Mark Task as Complete

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/commands/spec-execute.md

Use this command to mark a specific task as complete after implementation. This is a critical step in the workflow.

```bash
claude-code-spec-workflow get-tasks {feature-name} {task-id} --mode complete
```

--------------------------------

### Run Tunnel with Debug Mode

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/examples/tunnel/README.md

To troubleshoot tunnel startup issues, run the script with the DEBUG environment variable set.

```bash
DEBUG=claude-spec:* ./script.sh
```

--------------------------------

### Usage of Bug Fix Command

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/commands/bug-fix.md

Use this command to initiate the bug fix implementation phase, providing the bug's name as an argument.

```bash
/bug-fix [bug-name]
```

--------------------------------

### Configure ngrok Region via Environment Variable

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/docs/tunnel-feature.md

Specify the ngrok region using an environment variable. This can help optimize tunnel performance based on your location.

```bash
NGROK_REGION=eu claude-spec-dashboard --tunnel --tunnel-provider ngrok
```

--------------------------------

### Mermaid Diagram for Component Flow

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/templates/design-template.md

Illustrates the flow and dependencies between different components in the system.

```mermaid
graph TD
    A[Component A] --> B[Component B]
    B --> C[Component C]
```

--------------------------------

### Generate Task Commands

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/commands/spec-create.md

Executes the generation of individual task commands for easier execution after user approval.

```bash
claude-code-spec-workflow generate-task-commands {feature-name}
```

--------------------------------

### Inferred Project Details Format

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/commands/spec-steering-setup.md

Format for presenting inferred project details to the user for confirmation. This includes product details, technology stack, and project structure.

```markdown
Based on my analysis, here's what I've inferred:

**Product Details:**
- [Inferred detail 1]
- [Inferred detail 2]

**Technology Stack:**
- [Inferred tech 1]
- [Inferred tech 2]

**Project Structure:**
- [Inferred pattern 1]
- [Inferred pattern 2]
```

--------------------------------

### Load Context for Validation

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/agents/spec-requirements-validator.md

These commands are used during the validation process to load necessary context if not provided directly in the task instructions. Use 'get-template-context' for templates and 'get-spec-context' for specifications.

```bash
# Load template for comparison
claude-code-spec-workflow get-template-context spec
```

```bash
# Load specification documents
claude-code-spec-workflow get-spec-context {feature-name}
```

```bash
# Alternative individual loading (last resort):
# Windows:
claude-code-spec-workflow get-content "C:\path\to\project\.claude\specs\{feature-name}\requirements.md"
```

```bash
# macOS/Linux:
claude-code-spec-workflow get-content "/path/to/project/.claude/specs/{feature-name}/requirements.md"
```

--------------------------------

### Load Steering and Template Context

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/commands/spec-create.md

Load steering documents and specification templates once at the beginning of the process. This context will be referenced throughout all phases without reloading.

```bash
# 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
```

--------------------------------

### Load Specific Task Details

Source: https://github.com/pimzino/claude-code-spec-workflow/blob/main/src/markdown/commands/spec-execute.md

Load the details for a single, specific task using its feature-name and task-id. The `--mode single` flag ensures only the specified task is retrieved.

```bash
claude-code-spec-workflow get-tasks {feature-name} {task-id} --mode single
```