shinpr/claude-code-workflows-recipe-front-review
Design Doc compliance and security validation with optional auto-fixes
This is a copy. The original lives at shinpr/recipe-front-review.
npx skills add https://github.com/shinpr/claude-code-workflows --skill recipe-front-review
Execute Skill: llm-friendly-context before writing Agent prompts, handoffs, or generated artifacts.
Execute Skill: subagents-orchestration-guide before making workflow decisions, invoking agents, or resolving findings.
Context: Post-implementation quality assurance for React/TypeScript frontend
Core Identity: "I am an orchestrator." (see subagents-orchestration-guide skill)
Local authority gate: Make this recipe's workflow decisions and validate each returned result directly; delegate semantic deliverable production to the named specialist.
Review Resolution Gate [MANDATORY]: Resolve every actionable deliverable-review finding through subagents-orchestration-guide Review Resolution before correction or progression; include declined IDs with governing reasons and evidence in the final user report.
Before the first finding disposition, read references/review-resolution.md from the loaded subagents-orchestration-guide skill.
First Action: Register Steps 1-10 using TaskCreate before any execution.
The design-side path applies when the discrepancy reflects code that was correct but the Design Doc became stale, rather than code that violated the Design Doc.
Design Doc (uses most recent if omitted): $ARGUMENTS
# Identify Design Doc
ls docs/design/*.md | grep -v template | tail -1
# Check implementation files
git diff --name-only main...HEAD
Invoke code-reviewer using Agent tool:
subagent_type: "dev-workflows-frontend:code-reviewer"description: "Code compliance review"prompt: "Design Doc: [path]. Implementation files: [git diff file list]. Review mode: full. Validate Design Doc compliance and return structured JSON report."Store output as: $STEP_2_OUTPUT
Invoke security-reviewer using Agent tool:
subagent_type: "dev-workflows-frontend:security-reviewer"description: "Security review"prompt: "governingDocuments: [{\"type\":\"design-doc\",\"path\":\"[path]\"}]. implementationFiles: [git diff file list]. Review security compliance."Store output as: $STEP_3_OUTPUT
If security-reviewer returned blocked: Stop immediately. Report the blocked finding and escalate to user. Do not proceed to fix steps.
Apply the Review Resolution Gate to both outputs before reporting or routing them. Finding dispositions determine routing; compliance percentages remain diagnostic.
For each apply or user_decision_required finding, compute a proposed route using the rule below:
| Finding pattern | Recommended route |
|-----------------|-------------------|
| dd_violation where the code intent matches the original requirement but the Design Doc captured a different design | d (Design-side update) |
| dd_violation where the code drifted from a still-correct Design Doc | c (Code-side fix) |
| reliability / security / maintainability findings | c (Code-side fix) |
Then present the adjudicated result to the user. Group apply and user_decision_required findings by proposed route, and list declined IDs with their reasons separately:
Code Compliance: [complianceRate from code-reviewer]
Verdict: [verdict from code-reviewer]
Identifier Match Rate: [identifierMatchRate from code-reviewer]
Acceptance Criteria:
- [fulfilled] [item] (confidence: [high/medium/low])
- [partially_fulfilled] [item]: [gap] — [suggestion] [recommended: c | d]
- [unfulfilled] [item]: [gap] — [suggestion] [recommended: c | d]
Identifier Mismatches:
- [identifier]: DD=[designDocValue] Code=[codeValue] at [location] [recommended: c | d]
Quality Findings:
- [category] [location]: [description] — [rationale] [recommended: c]
Security Review: [status from security-reviewer]
Findings by category:
- [confirmed_risk] [location]: [description] — [rationale] [recommended: c]
- [defense_gap] [location]: [description] — [rationale] [recommended: c]
- [hardening] [location]: [description] — [rationale] [recommended: c]
- [policy] [location]: [description] — [rationale] [recommended: c]
Notes: [notes from security-reviewer, if present]
Approve the proposed changes or decide unresolved items:
c) Code-side fix — code violates Design Doc; modify code to match
d) Design-side update — code is correct; Design Doc is stale, revise it
s) Decline — record the governing reason and accept current state
This review command authorizes analysis; use AskUserQuestion to obtain separate implementation authority. The batch option is "approve all proposed apply routes" and its scope consists exclusively of those routes. Collect an explicit decision for each user_decision_required item. When the approved change set is empty, proceed directly to Step 10.
Pass approved findings, routes, covered files/sections, and any stated total size budget to update or fix agents. Before re-validation, map every diff hunk to an approved finding or required consistency update; request a scope decision for unmapped or over-budget changes.
Run this step only when the user routed at least one finding to d. When no d routes exist, skip it; continue to Step 6 only when approved c routes remain.
subagent_type: "dev-workflows-frontend:technical-designer-frontend"description: "Design Doc update from review findings"prompt: "Update Design Doc at [path] in update mode. The implementation has diverged in the following ways that the team has decided to ratify in the design rather than in the code: [list of d-routed findings with codeLocation and designDocValue from $STEP_2_OUTPUT]. Reflect the current code behavior in the relevant sections and add a history entry."subagent_type: "dev-workflows-frontend:document-reviewer"description: "Document review of updated Design Doc"prompt: "Review updated Design Doc at [path] for consistency and completeness. doc_type: DesignDoc. review_context: update."apply findings back to technical-designer-frontend and re-run document-reviewer with prior_feedback; stop for unresolved user_decision_required; proceed when the result is approved or every actionable finding is decline.ls docs/design/*.md | grep -v template | wc -l > 1), invoke design-sync:subagent_type: "dev-workflows-frontend:design-sync"description: "Cross-DD consistency check"prompt: "source_design: [updated DD path]. Detect conflicts across all Design Docs after the update."sync_status: conflicts_found: present conflicts to the user; resolution requires re-invoking technical-designer-frontend for affected DDs.d for all findings (no c routes) → skip Steps 6-7, proceed to Step 8 for re-validationd and c → re-evaluate the c-routed findings against the updated DD and drop any that are now satisfied by the DD revision; then proceed to Step 6 with the remaining c findingsInvoke task-executor-frontend using Agent tool:
subagent_type: "dev-workflows-frontend:task-executor-frontend"description: "Execute review fixes"prompt: "Apply these approved code-side findings directly: [findings with IDs, governing sources, smallest correction, affected paths, and observable verification condition]. Keep the change within the approved routes and stated total size budget."Invoke quality-fixer-frontend using Agent tool:
subagent_type: "dev-workflows-frontend:quality-fixer-frontend"description: "Quality gate check"filesModified and mutationEvidence.prompt: "Confirm quality gate passage for fixed files."Invoke code-reviewer using Agent tool:
subagent_type: "dev-workflows-frontend:code-reviewer"description: "Re-validate compliance"prompt: "Re-validate Design Doc compliance after fixes. Design Doc: [path]. Implementation files: [file list]. prior_feedback: [{id, disposition, correction?, reason?, evidence}]. Review the current state normally, then reconcile every prior item."Invoke security-reviewer using Agent tool (only if security fixes were applied):
subagent_type: "dev-workflows-frontend:security-reviewer"description: "Re-validate security"prompt: "Re-validate security after fixes. governingDocuments: [{\"type\":\"design-doc\",\"path\":\"[path]\"}]. implementationFiles: [file list]. prior_feedback: [{id, disposition, correction?, reason?, evidence}]. Review the current state normally, then reconcile every prior item."Apply the Review Resolution Gate to every Step 8 and Step 9 result before Step 10. Route new apply findings through their approved design-side or code-side path and repeat the affected verification; stop for unresolved user_decision_required; proceed when each result is approved or every actionable finding is decline.
Present the final report:
Code Compliance:
Initial: [X]%
Final: [Y]% (if fixes executed)
Security Review:
Initial: [status]
Final: [status] (if fixes executed)
Notes: [notes from approved_with_notes, if any]
Remaining issues:
- [items requiring manual intervention]
Discrepancies suitable for the design-side path (code is correct, DD became stale):
Scope: Design Doc compliance validation, security review, code-side auto-fixes, and design-side update routing.
Append the following block to every subagent prompt invoked from this recipe:
Scope boundary for subagents:
Operate within the review scope and referenced files in the prompt.
Use loaded skills to execute that scope.
Escalate when the required fix or investigation falls outside that scope.
Take shinpr/claude-code-workflows-recipe-front-review from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.