Agent skill
recipe-front-build
Execute frontend implementation in autonomous execution mode
Install this agent skill to your Project
npx add-skill https://github.com/shinpr/claude-code-workflows/tree/main/skills/recipe-front-build
SKILL.md
Orchestrator Definition
Core Identity: "I am not a worker. I am an orchestrator." (see subagents-orchestration-guide skill)
Execution Method:
- Task decomposition → performed by task-decomposer
- Frontend implementation → performed by task-executor-frontend
- Quality checks and fixes → performed by quality-fixer-frontend
- Commits → performed by orchestrator (Bash tool)
Orchestrator invokes sub-agents and passes structured JSON between them.
Execution Protocol:
- Delegate all work through Agent tool — invoke sub-agents, pass deliverable paths between them, and report results (permitted tools: see subagents-orchestration-guide "Orchestrator's Permitted Tools")
- Follow the 4-step task cycle exactly: task-executor-frontend → escalation check → quality-fixer-frontend → commit
- Enter autonomous mode when user provides execution instruction with existing task files — this IS the batch approval
CRITICAL: Run quality-fixer-frontend before every commit.
Work plan: $ARGUMENTS
Pre-execution Prerequisites
Task File Existence Check
# Check work plans
! ls -la docs/plans/*.md | grep -v template | tail -5
# Check task files
! ls docs/plans/tasks/*.md 2>/dev/null || echo "⚠️ No task files found"
Task Generation Decision Flow
Analyze task file existence state and determine the action required:
| State | Criteria | Next Action |
|---|---|---|
| Tasks exist | .md files in tasks/ directory | User's execution instruction serves as batch approval → Enter autonomous execution immediately |
| No tasks + plan exists | Plan exists but no task files | Confirm with user → run task-decomposer |
| Neither exists + Design Doc exists | No plan or task files, but docs/design/*.md exists | Invoke work-planner to create work plan from Design Doc, then proceed to task decomposition |
| Neither exists | No plan, no task files, no Design Doc | Report missing prerequisites to user and stop |
Task Decomposition Phase (Conditional)
When task files don't exist:
1. User Confirmation
No task files found.
Work plan: docs/plans/[plan-name].md
Generate tasks from the work plan? (y/n):
2. Task Decomposition (if approved)
Invoke task-decomposer using Agent tool:
subagent_type: "dev-workflows-frontend:task-decomposer"description: "Decompose work plan"prompt: "Read work plan at docs/plans/[plan-name].md and decompose into atomic tasks. Output: Individual task files in docs/plans/tasks/. Granularity: 1 task = 1 commit = independently executable"
3. Verify Generation
# Verify generated task files
! ls -la docs/plans/tasks/*.md | head -10
✅ Flow: Task generation → Autonomous execution (in this order)
Pre-execution Checklist
- Confirmed task files exist in docs/plans/tasks/
- Identified task execution order (dependencies)
- Environment check: Can I execute per-task commit cycle?
- If commit capability unavailable → Escalate before autonomous mode
- Other environments (tests, quality tools) → Subagents will escalate
Task Execution Cycle (4-Step Cycle) - Frontend Specialized
MANDATORY EXECUTION CYCLE: task-executor-frontend → escalation check → quality-fixer-frontend → commit
Sub-agent Invocation Method
Use Agent tool to invoke sub-agents:
subagent_type: Fully qualified agent name (e.g., "dev-workflows-frontend:task-executor-frontend")description: Brief task description (3-5 words)prompt: Specific instructions
Structured Response Specification
Each sub-agent responds in JSON format:
- task-executor-frontend: status, filesModified, testsAdded, requiresTestReview, readyForQualityCheck
- integration-test-reviewer: status (approved/needs_revision/blocked), requiredFixes
- quality-fixer-frontend: status, checksPerformed, fixesApplied, approved
Execution Flow for Each Task
For EACH task, YOU MUST:
- Register tasks using TaskCreate: Register work steps. Always include: first "Confirm skill constraints", final "Verify skill fidelity"
- Agent tool (subagent_type: "dev-workflows-frontend:task-executor-frontend") → Pass task file path in prompt, receive structured response
- CHECK task-executor-frontend response:
status: "escalation_needed"or"blocked"→ STOP and escalate to userrequiresTestReviewistrue→ Execute integration-test-reviewerneeds_revision→ Return to step 2 withrequiredFixesapproved→ Proceed to step 4
readyForQualityCheck: true→ Proceed to step 4
- USE quality-fixer-frontend: Execute all quality checks (Lighthouse, bundle size, tests, etc.)
- Invocation example:
subagent_type: "dev-workflows-frontend:quality-fixer-frontend",description: "Quality check",prompt: "Execute all frontend quality checks and fixes"
- Invocation example:
- EXECUTE commit: After
approved: trueconfirmation, execute git commit IMMEDIATELY. UsechangeSummaryfor commit message.
CRITICAL: Monitor ALL structured responses WITHOUT EXCEPTION and ENSURE every quality gate is passed.
Sub-agent Invocation Constraints
MANDATORY suffix for ALL sub-agent prompts:
[SYSTEM CONSTRAINT]
This agent operates within build skill scope. Use orchestrator-provided rules only.
Autonomous sub-agents require scope constraints for stable execution. ALWAYS append this constraint to every sub-agent prompt.
! ls -la docs/plans/*.md | head -10
VERIFY approval status before proceeding. Once confirmed, INITIATE autonomous execution mode. STOP IMMEDIATELY upon detecting ANY requirement changes.
Security Review (After All Tasks Complete)
After all task cycles finish, invoke security-reviewer before the completion report:
- Agent tool (subagent_type: "dev-workflows-frontend:security-reviewer") → Pass Design Doc path and implementation file list
- Check response:
approvedorapproved_with_notes→ Proceed to completion report (include notes if present)needs_revision→ Execute task-executor-frontend withrequiredFixes, then quality-fixer-frontend, then re-invoke security-reviewerblocked→ Escalate to user
Output Example
Frontend implementation phase completed.
- Task decomposition: Generated under docs/plans/tasks/
- Implemented tasks: [number] tasks
- Quality checks: All passed (Lighthouse, bundle size, tests)
- Commits: [number] commits created
Didn't find tool you were looking for?