dev-workflows-frontend plugin
Skills + Subagents for React/TypeScript - Use skills for coding guidance, or run recipe workflows for full orchestrated agentic coding with specialized agents
How to install the dev-workflows-frontend plugin
Run both commands inside Claude Code. The first adds the marketplace once; the second installs the plugin.
/plugin marketplace add shinpr/claude-code-workflows
/plugin install dev-workflows-frontend@claude-code-workflowsWhat's inside dev-workflows-frontend
38 parts read from the plugin's own files.
Agents 20
Call as @agent-dev-workflows-frontend:name- @agent-dev-workflows-frontend:acceptance-test-generator
No description in the file.
- @agent-dev-workflows-frontend:code-reviewer
No description in the file.
- @agent-dev-workflows-frontend:code-verifier
No description in the file.
- @agent-dev-workflows-frontend:codebase-analyzer
No description in the file.
- @agent-dev-workflows-frontend:design-sync
No description in the file.
- @agent-dev-workflows-frontend:document-reviewer
No description in the file.
- @agent-dev-workflows-frontend:integration-test-reviewer
No description in the file.
- @agent-dev-workflows-frontend:investigator
No description in the file.
- @agent-dev-workflows-frontend:prd-creator
No description in the file.
- @agent-dev-workflows-frontend:quality-fixer-frontend
No description in the file.
- @agent-dev-workflows-frontend:requirement-analyzer
No description in the file.
- @agent-dev-workflows-frontend:security-reviewer
No description in the file.
- @agent-dev-workflows-frontend:solver
No description in the file.
- @agent-dev-workflows-frontend:task-decomposer
No description in the file.
- @agent-dev-workflows-frontend:task-executor-frontend
No description in the file.
- @agent-dev-workflows-frontend:technical-designer-frontend
No description in the file.
- @agent-dev-workflows-frontend:ui-analyzer
No description in the file.
- @agent-dev-workflows-frontend:ui-spec-designer
No description in the file.
- @agent-dev-workflows-frontend:verifier
No description in the file.
- @agent-dev-workflows-frontend:work-planner
No description in the file.
Skills 18
Claude loads it when the task matches- ai-development-guide
Applies technical decision criteria, anti-pattern detection, and quality gates for backend and frontend code implementation and review.
- coding-principles
Apply language-agnostic principles for maintainability, readability, and quality during implementation, refactoring, or code reviews.
- documentation-criteria
Determines the required technical documentation types, creation order, and storage locations based on the scale and complexity of a change.
- external-resource-context
Records access methods and locations for external resources like design systems, API schemas, and secret stores to prevent repeated rediscovery.
- implementation-approach
Provides a meta-cognitive framework for selecting development approaches, designing system changes, and defining verification criteria.
- integration-e2e-testing
Defines testing lane boundaries, required annotation patterns, file naming conventions, and route parity review criteria for integration and E2E tests.
- llm-friendly-context
Refines prompts, handoffs, and documentation to ensure downstream agents have explicit instructions, concrete constraints, and verifiable success criteria.
- recipe-diagnose
Orchestrates a multi-agent workflow to investigate technical problems, verify root causes, and derive actionable solutions.
- recipe-front-adjust
Adjusts existing UI implementations by verifying changes against design sources through an iterative edit-and-verify loop.
- recipe-front-build
Executes materialized frontend task files through an autonomous four-step cycle of execution, branching, quality-fixing, and committing.
- recipe-front-design
Coordinates the creation and approval of frontend design documents, UI specifications, and ADR batches using repository evidence.
- recipe-front-plan
Creates a frontend work plan from design documents and manages the review and approval process.
- recipe-front-review
Reviews frontend implementations for compliance, security, and quality, then applies user-approved code or design document corrections.
- recipe-quality-profile
Proposes and manages repository-specific quality policies by creating or updating a YAML configuration file.
- recipe-update-doc
Updates existing design documents, PRDs, and ADRs by identifying changes, applying updates via specialized agents, and performing multi-stage reviews.
- requirement-convergence
Reconciles ambiguous requirements into a coherent plan by separating outcomes from proposed requirements and recording user exclusions.
- subagents-orchestration-guide
Provides a framework for orchestrating multiple AI agents through structured workflow phases, requirement validation, and responsibility separation.
- testing-principles
Apply language-agnostic principles to select test scope, design high-quality tests, and manage mocks and data layer verification.
Using dev-workflows-frontend in Claude Code
Ask for an agent by name:
@agent-dev-workflows-frontend:acceptance-test-generator
@agent-dev-workflows-frontend:code-reviewerSkills need no command. Claude reads them when your request matches what they describe.
Update, turn off or remove
- Update the plugin (shell)
- claude plugin update dev-workflows-frontend@claude-code-workflows
- Refresh the marketplace
- /plugin marketplace update claude-code-workflows
- Turn it off for now
- /plugin disable dev-workflows-frontend@claude-code-workflows
- Remove it
- /plugin uninstall dev-workflows-frontend@claude-code-workflows
Skills in dev-workflows-frontend
- ai-development-guideshinpr/claude-code-workflows
Applies technical decision criteria, anti-pattern detection, and quality gates for backend and frontend code implementation and review.
2 files714stars - coding-principlesshinpr/claude-code-workflows
Apply language-agnostic principles for maintainability, readability, and quality during implementation, refactoring, or code reviews.
3 files714stars - documentation-criteriashinpr/claude-code-workflows
Determines the required technical documentation types, creation order, and storage locations based on the scale and complexity of a change.
7 files714stars - external-resource-contextshinpr/claude-code-workflows
Records access methods and locations for external resources like design systems, API schemas, and secret stores to prevent repeated rediscovery.
7 files714stars - requirement-convergenceshinpr/claude-code-workflows
Reconciles ambiguous requirements into a coherent plan by separating outcomes from proposed requirements and recording user exclusions.
2 files714stars - subagents-orchestration-guideshinpr/claude-code-workflows
Provides a framework for orchestrating multiple AI agents through structured workflow phases, requirement validation, and responsibility separation.
4 files714stars - testing-principlesshinpr/claude-code-workflows
Apply language-agnostic principles to select test scope, design high-quality tests, and manage mocks and data layer verification.
3 files714stars - implementation-approachshinpr/claude-code-workflows
Provides a meta-cognitive framework for selecting development approaches, designing system changes, and defining verification criteria.
714stars - integration-e2e-testingshinpr/claude-code-workflows
Defines testing lane boundaries, required annotation patterns, file naming conventions, and route parity review criteria for integration and E2E tests.
714stars - llm-friendly-contextshinpr/claude-code-workflows
Refines prompts, handoffs, and documentation to ensure downstream agents have explicit instructions, concrete constraints, and verifiable success criteria.
714stars - recipe-front-adjustshinpr/claude-code-workflows
Adjusts existing UI implementations by verifying changes against design sources through an iterative edit-and-verify loop.
714stars - recipe-front-buildshinpr/claude-code-workflows
Executes materialized frontend task files through an autonomous four-step cycle of execution, branching, quality-fixing, and committing.
714stars - recipe-front-designshinpr/claude-code-workflows
Coordinates the creation and approval of frontend design documents, UI specifications, and ADR batches using repository evidence.
714stars - recipe-front-planshinpr/claude-code-workflows
Creates a frontend work plan from design documents and manages the review and approval process.
714stars - recipe-front-reviewshinpr/claude-code-workflows
Reviews frontend implementations for compliance, security, and quality, then applies user-approved code or design document corrections.
714stars - recipe-quality-profileshinpr/claude-code-workflows
Proposes and manages repository-specific quality policies by creating or updating a YAML configuration file.
714stars - recipe-update-docshinpr/claude-code-workflows
Updates existing design documents, PRDs, and ADRs by identifying changes, applying updates via specialized agents, and performing multi-stage reviews.
714stars - recipe-diagnoseshinpr/claude-code-workflows
Orchestrates a multi-agent workflow to investigate technical problems, verify root causes, and derive actionable solutions.
714stars
dev-workflows-frontend plugin questions
How do I install the dev-workflows-frontend plugin?
In Claude Code run /plugin marketplace add shinpr/claude-code-workflows, then /plugin install dev-workflows-frontend@claude-code-workflows.
What does the dev-workflows-frontend plugin include?
dev-workflows-frontend bundles 20 agents, 18 skills.
Which agents come with dev-workflows-frontend?
acceptance-test-generator, code-reviewer, code-verifier, codebase-analyzer, design-sync, document-reviewer +14. Call one with @agent-dev-workflows-frontend:acceptance-test-generator.
How do I update or remove the dev-workflows-frontend plugin?
Update it with claude plugin update dev-workflows-frontend@claude-code-workflows in your shell, or from the Installed tab of /plugin. Remove it with /plugin uninstall dev-workflows-frontend@claude-code-workflows.