dev-workflows-frontend

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.
• pr-review: reviews GitHub PRs with Claude Code or Codex reviewers on deterministic PR snapshots, repo-specific quality criteria, and severity-gated posting with approval.

/plugin install discover@claude-code-workflows
/plugin install metronome@claude-code-workflows
/plugin install linear-prism@claude-code-workflows
/plugin install pr-review@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).

---