Agent Skillsshinpr/claude-code-workflows › recipe-front-review

recipe-front-review

GitHub

针对React/TypeScript前端实现的质量保证技能,通过编排子代理执行设计文档合规性与安全审查。支持自动修复代码偏差或更新过时设计文档,并强制实施基于证据的审查决议流程。

dev-workflows-frontend/skills/recipe-front-review/SKILL.md shinpr/claude-code-workflows

触发场景

需要验证前端代码是否符合设计文档规范时 需要检查前端实现的安全性漏洞时 发现代码与设计文档不一致需自动修正时

安装

npx skills add shinpr/claude-code-workflows --skill recipe-front-review -g -y
更多选项

非标准路径

npx skills add https://github.com/shinpr/claude-code-workflows/tree/main/dev-workflows-frontend/skills/recipe-front-review -g -y

不安装直接使用

npx skills use shinpr/claude-code-workflows@recipe-front-review

指定 Agent (Claude Code)

npx skills add shinpr/claude-code-workflows --skill recipe-front-review -a claude-code -g -y

安装 repo 全部 skill

npx skills add shinpr/claude-code-workflows --all -g -y

预览 repo 内 skill

npx skills add shinpr/claude-code-workflows --list

SKILL.md

Frontmatter
{
    "name": "recipe-front-review",
    "description": "Design Doc compliance and security validation with optional auto-fixes",
    "disable-model-invocation": true
}

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

Orchestrator Definition

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.

Execution Method

  • Compliance validation → performed by code-reviewer
  • Security validation → performed by security-reviewer
  • Code-side fix path: Fix implementation → task-executor-frontend; Quality checks → quality-fixer-frontend; Re-validation → code-reviewer / security-reviewer
  • Design-side update path: DD revision → technical-designer-frontend (update mode); DD review → document-reviewer; cross-DD consistency → design-sync (when multiple DDs exist); Re-validation → code-reviewer

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

Execution Flow

Step 1: Prerequisite Check

# Identify Design Doc
ls docs/design/*.md | grep -v template | tail -1

# Check implementation files
git diff --name-only main...HEAD

Step 2: Execute code-reviewer

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

Step 3: Execute security-reviewer

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

Step 4: Verdict and Response

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.

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 Review: [verdict 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.

Step 5: Design-Side Update

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.

  1. Invoke technical-designer-frontend in update mode using Agent tool:

    • 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."
  2. Invoke document-reviewer to verify the updated Design Doc:

    • 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."
    • Run the Review Resolution Gate through its correction re-review, escalation, and convergence transitions, using technical-designer-frontend for rerouted corrections. Proceed only at its convergence condition.
  3. When multiple Design Docs exist (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."
    • When sync_status: conflicts_found: present conflicts to the user; resolution requires re-invoking technical-designer-frontend for affected DDs.
  4. After Step 5 completes:

    • If the user selected d for all findings (no c routes) → skip Steps 6-7, proceed to Step 8 for re-validation
    • If the user selected both d 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 findings

Step 6: Execute Fixes

Invoke 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: [complete reviewer finding objects verbatim, with only their orchestrator dispositions added]. Keep the change within the approved routes and stated total size budget."

Step 7: Quality Check

Invoke quality-fixer-frontend using Agent tool:

  • subagent_type: "dev-workflows-frontend:quality-fixer-frontend"
  • description: "Quality gate check"
  • Pass Step 6 filesModified and mutationEvidence.
  • prompt: "Confirm quality gate passage for fixed files."

Step 8: Re-validate code-reviewer

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, reason?, evidence}]. Reconcile every prior item under the reviewer's re-review scope."

Step 9: Re-validate security-reviewer

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, reason?, evidence}]. Reconcile every prior item under the reviewer's re-review scope."

Apply the Review Resolution Gate to every Step 8 and Step 9 result before Step 10. Follow its maintained transitions and repeat the affected verification after a rerouted correction; stop at its escalation conditions; proceed at its convergence condition.

Step 10: Final Report

Present the final report:

Code Review:
  Initial: [verdict from code-reviewer]
  Correction review: [verdict for the re-review scope] (if fixes executed)
  Reconciliation: [resolved / withdrawn / maintained by finding ID]

Security Review:
  Initial: [status]
  Correction review: [status for the re-review scope] (if fixes executed)
  Reconciliation: [resolved / withdrawn / maintained by finding ID]
  Notes: [notes from approved_with_notes, if any]

Remaining issues:
- [items requiring manual intervention]

Auto-fixable Items (code-side path)

  • Simple unimplemented acceptance criteria
  • Error handling additions
  • Contract definition fixes
  • Function splitting (length/complexity improvements)
  • Security confirmed_risk and defense_gap fixes (input validation, auth checks, output encoding)

Non-fixable Items

  • Fundamental business logic changes
  • Architecture-level modifications
  • Committed secrets (blocked → human intervention)

Design-Side Update Triggers

Discrepancies suitable for the design-side path (code is correct, DD became stale):

  • Identifier renames where the new identifier reflects the team's current naming
  • Behavioral changes that match the original requirement intent better than what the DD captured
  • Component splits or merges where the new structure is sound and the DD documented the prior structure
  • New ACs that the implementation already satisfies but the DD never enumerated

Scope: Design Doc compliance validation, security review, code-side auto-fixes, and design-side update routing.

Scope Boundary for Subagents

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.

版本历史

  • 51b7dbc 当前 2026-08-05 01:44

    新增强制性审查决议门控,要求在执行修正前必须处理所有可操作发现;简化规划逻辑并收敛审查结果;强化以结果为导向的编排机制。

  • d439b50 2026-07-31 02:51

    优化了Opus 5工作流提示词,精简了流程步骤,明确了批准范围与已提交内容的绑定关系,并完善了工作流提示词契约。

  • 66e3b29 2026-07-05 11:58

同 Skill 集合

dev-skills/skills/ai-development-guide/SKILL.md
dev-skills/skills/coding-principles/SKILL.md
dev-skills/skills/documentation-criteria/SKILL.md
dev-skills/skills/external-resource-context/SKILL.md
dev-skills/skills/frontend-ai-guide/SKILL.md
dev-skills/skills/implementation-approach/SKILL.md
dev-skills/skills/integration-e2e-testing/SKILL.md
dev-skills/skills/llm-friendly-context/SKILL.md
dev-skills/skills/requirement-convergence/SKILL.md
dev-skills/skills/test-implement/SKILL.md
dev-skills/skills/testing-principles/SKILL.md
dev-skills/skills/typescript-rules/SKILL.md
dev-workflows-frontend/skills/ai-development-guide/SKILL.md
dev-workflows-frontend/skills/coding-principles/SKILL.md
dev-workflows-frontend/skills/documentation-criteria/SKILL.md
dev-workflows-frontend/skills/external-resource-context/SKILL.md
dev-workflows-frontend/skills/frontend-ai-guide/SKILL.md
dev-workflows-frontend/skills/implementation-approach/SKILL.md
dev-workflows-frontend/skills/integration-e2e-testing/SKILL.md
dev-workflows-frontend/skills/llm-friendly-context/SKILL.md
dev-workflows-frontend/skills/recipe-diagnose/SKILL.md
dev-workflows-frontend/skills/recipe-front-adjust/SKILL.md
dev-workflows-frontend/skills/recipe-front-build/SKILL.md
dev-workflows-frontend/skills/recipe-front-design/SKILL.md
dev-workflows-frontend/skills/recipe-front-plan/SKILL.md
dev-workflows-frontend/skills/recipe-task/SKILL.md
dev-workflows-frontend/skills/recipe-update-doc/SKILL.md
dev-workflows-frontend/skills/requirement-convergence/SKILL.md
dev-workflows-frontend/skills/subagents-orchestration-guide/SKILL.md
dev-workflows-frontend/skills/task-analyzer/SKILL.md
dev-workflows-frontend/skills/test-implement/SKILL.md
dev-workflows-frontend/skills/testing-principles/SKILL.md
dev-workflows-frontend/skills/typescript-rules/SKILL.md
dev-workflows-fullstack/skills/ai-development-guide/SKILL.md
dev-workflows-fullstack/skills/coding-principles/SKILL.md
dev-workflows-fullstack/skills/documentation-criteria/SKILL.md
dev-workflows-fullstack/skills/external-resource-context/SKILL.md
dev-workflows-fullstack/skills/frontend-ai-guide/SKILL.md
dev-workflows-fullstack/skills/implementation-approach/SKILL.md
dev-workflows-fullstack/skills/integration-e2e-testing/SKILL.md
dev-workflows-fullstack/skills/llm-friendly-context/SKILL.md
dev-workflows-fullstack/skills/recipe-add-integration-tests/SKILL.md
dev-workflows-fullstack/skills/recipe-build/SKILL.md
dev-workflows-fullstack/skills/recipe-design/SKILL.md
dev-workflows-fullstack/skills/recipe-diagnose/SKILL.md
dev-workflows-fullstack/skills/recipe-front-adjust/SKILL.md
dev-workflows-fullstack/skills/recipe-front-build/SKILL.md
dev-workflows-fullstack/skills/recipe-front-design/SKILL.md
dev-workflows-fullstack/skills/recipe-front-plan/SKILL.md

元信息

文件数
0
版本
51b7dbc
Hash
dfe166be
收录时间
2026-07-05 11:58

首页 - Wiki
Copyright © 2011-2026 iteam. Current version is 2.155.2. UTC+08:00, 2026-08-05 19:50
浙ICP备14020137号-1 $访客地图$