Claude Code Workflows 🚀

End-to-end development workflows for Claude Code that produce code aligned with design docs and tests. Specialized agents handle requirements, design, implementation, and quality checks, so what you get is code that actually passes its tests and matches its design docs.

⚡ Quick Start

Which plugin should I start with?

| Your work | Install | |---|---| | Backend, APIs, CLI tools, or general programming | dev-workflows | | React / TypeScript frontend | dev-workflows-frontend | | Full-stack (backend + React) | dev-workflows-fullstack (single plugin, replaces installing both) | | You already have your own orchestration and just want the rules | dev-skills (skills only, see Skills only) |

Common setup

# 1. Start Claude Code
claude

# 2. Add the marketplace
/plugin marketplace add shinpr/claude-code-workflows

Install and start building

# Backend or general
/plugin install dev-workflows@claude-code-workflows
/reload-plugins
/recipe-implement <your feature>

# Frontend
/plugin install dev-workflows-frontend@claude-code-workflows
/reload-plugins
/recipe-front-design <your feature>

# Fullstack (single plugin)
/plugin install dev-workflows-fullstack@claude-code-workflows
/reload-plugins
/recipe-fullstack-implement "Add user authentication with JWT + login form"

# Or execute from an existing fullstack work plan
/recipe-fullstack-build

The fullstack recipes create separate Design Docs per layer (backend + frontend), verify cross-layer consistency via design-sync, and route tasks to the appropriate executor based on filename patterns. See Fullstack Workflow for details.

Migration notice: recipe-fullstack-* recipes are available from dev-workflows-fullstack, not dev-workflows. If you do fullstack work, install only dev-workflows-fullstack.

Optional add-ons

These optional plugins cover adjacent stages in the workflow:

• claude-code-discover: turns feature ideas into evidence-backed PRDs.
• metronome: detects shortcut-taking behavior and nudges Claude to proceed step by step.
• linear-prism: turns requirements into structured Linear tasks. Validates before decomposing, so downstream design starts clean.

/plugin install discover@claude-code-workflows
/plugin install metronome@claude-code-workflows
/plugin install linear-prism@claude-code-workflows

Skills only

If you already have your own orchestration (custom prompts, scripts, CI-driven loops) and want only the best-practice guides, use dev-skills. If you want Claude to plan, execute, and verify end-to-end, install dev-workflows.

• Minimal context footprint (no agents or recipe skills loaded)
• Drop-in best practices without changing your workflow
• Works as a ruleset layer for your own orchestrator

Do not install alongside dev-workflows, dev-workflows-frontend, or dev-workflows-fullstack. Duplicate skills will be silently ignored. See details below.

# Install skills-only plugin
/plugin install dev-skills@claude-code-workflows

Skills auto-load when relevant. coding-principles activates during implementation, testing-principles during test writing, etc.

Switching between plugins:

# dev-skills -> dev-workflows
/plugin uninstall dev-skills@claude-code-workflows
/plugin install dev-workflows@claude-code-workflows

# dev-workflows -> dev-skills
/plugin uninstall dev-workflows@claude-code-workflows
/plugin install dev-skills@claude-code-workflows

Warning: dev-skills and dev-workflows / dev-workflows-frontend / dev-workflows-fullstack share the same skills. Installing more than one of them makes skill descriptions appear multiple times in the system context. Claude Code limits skill descriptions to ~2% of the context window. Exceeding this limit causes skills to be silently ignored. For fullstack work, install only dev-workflows-fullstack (do not install it alongside dev-workflows or dev-workflows-frontend).

🔧 How It Works

The Workflow

graph TB
    A[User Request] --> B[requirement-analyzer]

    B --> |"Large (6+ files)"| C[prd-creator]
    B --> |"Medium (3-5 files)"| CA[codebase-analyzer]
    B --> |"Small (1-2 files)"| E[Direct Implementation]

    C --> CA
    CA --> D[technical-designer]
    D --> CV[code-verifier]
    CV --> DR[document-reviewer]
    DR --> DS[design-sync]
    DS --> F[acceptance-test-generator]
    F --> G[work-planner]
    G --> H[task-decomposer]

    H --> I[task-executor]
    E --> I

    I --> J[quality-fixer]
    J --> K[Ready to Commit]

This figure shows how a request is routed by size (small / medium / large). Larger work goes through PRD, codebase analysis, and design before reaching implementation. Smaller work skips ahead.

The Diagnosis Workflow

graph LR
    P[Problem] --> INV[investigator]
    INV --> |Failure Points| VER[verifier]
    VER --> |Coverage Check| COV{Sufficient?}
    COV --> |Yes| SOL[solver]
    COV --> |No| INV
    SOL --> |Solutions + Steps| R[Report]

The diagnosis flow loops between investigator and verifier until path coverage is sufficient, then hands off to solver for tradeoff analysis.

The Reverse Engineering Workflow

graph TB
    subgraph Phase1[Phase 1: PRD Generation]
        CMD["/recipe-reverse-engineer"] --> SD[scope-discoverer unified]
        SD --> PRD[prd-creator]
        PRD --> CV1[code-verifier]
        CV1 --> DR1[document-reviewer]
    end

    subgraph Phase2[Phase 2: Design Doc Generation]
        TD[technical-designer] --> CV2[code-verifier]
        CV2 --> DR2[document-reviewer]
        DR2 --> DONE[Complete]
    end

    DR1 --> |"All PRDs Approved (reuse scope)"| TD

Reverse engineering runs in two phases. PRDs come first (one per discovered feature), then Design Docs reuse the scope without re-discovering it.

What Happens Behind the Scenes

1. Analysis. requirement-analyzer determines task complexity and picks the workflow.
2. Codebase Understanding. codebase-analyzer scans existing modules and dependencies before design (auth flows, schema definitions, dependency graph).
3. Planning. PRD, UI Spec, Design Doc, and work plan are generated based on complexity.
4. Execution. Specialized agents implement the plan autonomously.
5. Quality. Tests run, types check, errors get fixed.
6. Review. Implementation is verified against design docs.
7. Done. Reviewed, tested, ready to commit.

Each phase runs in a fresh agent context, so earlier steps don't bloat the context or interfere with later decisions.

⚡ Workflow Recipes

All workflow entry points use the recipe- prefix to distinguish them from knowledge skills. Type /recipe- and use tab completion to see all available recipes.

Backend & General Development (dev-workflows)

| Recipe | Purpose | When to Use | |--------|---------|-------------| | /recipe-implement | End-to-end feature development | New features, complete workflows | | /recipe-task | Execute single task with precision | Bug fixes, small changes | | /recipe-design | Create design documentation | Architecture planning | | /recipe-plan | Generate work plan from design | Planning phase | | /recipe-prepare-implementation | Verify implementation readiness and resolve gaps | Pre-build check that the work plan is implementable | | /recipe-build | Execute from existing task plan | Resume implementation | | /recipe-review | Verify code against design docs | Post-implementation check | | /recipe-diagnose | Investigate problems and derive solutions | Bug investigation, root cause analysis | | /recipe-reverse-engineer | Generate PRD/Design Docs from existing code | Legacy system documentation, codebase understanding | | /recipe-add-integration-tests | Add integration/E2E tests to existing code | Test coverage for existing implementations | | /recipe-update-doc | Update existing design documents with review | Spec changes, review feedback, document maintenance |

For fullstack recipes, install dev-workflows-fullstack and use /recipe-fullstack-implement or /recipe-fullstack-build.

Frontend Development (dev-workflows-frontend)

The frontend plugin adds React-specific agents (component architecture, Testing Library, TypeScript-first quality checks) and UI Spec generation from optional prototype code.

| Recipe | Purpose | When to Use | |--------|---------|-------------| | /recipe-front-design | Create UI Spec + frontend Design Doc | React component architecture, UI Spec | | /recipe-front-plan | Generate frontend work plan | Component breakdown planning | | /recipe-front-build | Execute frontend task plan | Resume React implementation | | /recipe-front-adjust | Adjust an already-implemented UI with MCP-driven verification | Visual tweaks, component refinements that need design-source comparison | | /recipe-front-review | Verify code against design docs | Post-implementation check | | /recipe-task | Execute single task with precision | Component fixes, small updates | | /recipe-diagnose | Investigate problems and derive solutions | Bug investigation, root cause analysis | | /recipe-update-doc | Update existing design documents with review | Spec c