From shinpr-claude-code-workflows
Orchestrates sub-agents for frontend design workflow: requirement/codebase analysis, UI specs, technical docs, verification, review, and approval gates. Use before frontend implementation.
npx claudepluginhub joshuarweaver/cascade-code-general-misc-1 --plugin shinpr-claude-code-workflowsThis skill uses the workspace's default tool permissions.
**Context**: Dedicated to the frontend design phase.
Creates isolated Git worktrees for feature branches with prioritized directory selection, gitignore safety checks, auto project setup for Node/Python/Rust/Go, and baseline verification.
Executes implementation plans in current session by dispatching fresh subagents per independent task, with two-stage reviews: spec compliance then code quality.
Dispatches parallel agents to independently tackle 2+ tasks like separate test failures or subsystems without shared state or dependencies.
Context: Dedicated to the frontend design phase.
Core Identity: "I am an orchestrator." (see subagents-orchestration-guide skill)
Execution Protocol:
[Stop: ...] marker → Wait for user approval before proceedingCRITICAL: Execute document-reviewer, design-sync, and all stopping points defined in subagents-orchestration-guide skill flows — each serves as a quality gate. Skipping any step risks undetected inconsistencies.
Requirements → requirement-analyzer → [Stop: Scale determination]
↓
codebase-analyzer → ui-spec-designer → [Stop: UI Spec approval]
↓
technical-designer-frontend
↓
code-verifier → document-reviewer
↓
design-sync → [Stop: Design approval]
Included in this skill:
Responsibility Boundary: This skill completes with frontend design document (UI Spec/ADR/Design Doc) approval. Work planning and beyond are outside scope.
Requirements: $ARGUMENTS
Considering the deep impact on design, first engage in dialogue to understand the background and purpose of requirements:
Once the user has answered the three dialogue questions above, execute the process below within design scope. Follow subagents-orchestration-guide Call Examples for codebase-analyzer and code-verifier invocations.
subagent_type: "dev-workflows-frontend:requirement-analyzer"description: "Requirement analysis"prompt: "Requirements: [user requirements] Execute requirement analysis and scale determination"After requirement analysis approval, ask the user about prototype code:
Ask the user: "Do you have prototype code for this feature? If so, please provide the path to the code. The prototype will be placed in docs/ui-spec/assets/ as reference material for the UI Spec."
Then create the UI Specification:
subagent_type: "dev-workflows-frontend:ui-spec-designer"description: "UI Spec creation"prompt: "Create UI Spec from PRD at [path]. Prototype code is at [user-provided path]. Place prototype in docs/ui-spec/assets/{feature-name}/"prompt: "Create UI Spec from PRD at [path]. No prototype code available."prompt: "Create UI Spec based on the following requirements: [pass requirement-analyzer output]. No PRD available." (add prototype path if provided)subagent_type: "dev-workflows-frontend:document-reviewer", description: "UI Spec review", prompt: "doc_type: UISpec target: [ui-spec path] Review for consistency and completeness"First, analyze the existing codebase:
subagent_type: "dev-workflows-frontend:codebase-analyzer", description: "Codebase analysis", prompt: "requirement_analysis: [JSON from Step 1]. requirements: [user requirements]. Analyze existing codebase for frontend design guidance."Create appropriate design documents according to scale determination. technical-designer-frontend presents at least two architecture alternatives (technology selection, data flow design) with trade-offs for each:
subagent_type: "dev-workflows-frontend:technical-designer-frontend", description: "ADR creation", prompt: "Create ADR for [technical decision]. Present at least two alternatives with trade-offs."subagent_type: "dev-workflows-frontend:technical-designer-frontend", description: "Design Doc creation", prompt: "Create Design Doc based on requirements. Codebase analysis: [JSON from codebase-analyzer]. UI Spec is at [ui-spec path]. Inherit component structure and state design from UI Spec. Present at least two architecture alternatives with trade-offs."subagent_type: "dev-workflows-frontend:code-verifier", description: "Design Doc verification", prompt: "doc_type: design-doc document_path: [Design Doc path] Verify Design Doc against existing code."subagent_type: "dev-workflows-frontend:document-reviewer", description: "Document review", prompt: "Review [document path] for consistency and completeness. code_verification: [JSON from code-verifier] (Design Doc only)"subagent_type: "dev-workflows-frontend:design-sync", description: "Design consistency check", prompt: "Check consistency across all Design Docs in docs/design/. Report conflicts and overlaps."Frontend design phase completed.