Agent skill

Recipe Front Review

by shinpr in shinpr/claude-code-workflows

Reviews completed frontend implementation for governing-source compliance, scope economy, repository quality, and security, then applies user-approved React corrections.

MITAuto-check passedDevelopment

Install Recipe Front Review

skills CLI
$ npx skills add shinpr/claude-code-workflows --skill recipe-front-review -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install shinpr/claude-code-workflows recipe-front-review --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/shinpr/claude-code-workflows.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/recipe-front-review .claude/skills/recipe-front-review && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
recipe-front-review
GitHub stars
694
Token cost
~3.5k tokens
SKILL.md length
1,436 words
Files
1
Skills in repo
30
Repo updated
First seen
Licence
MIT

At a glance

Reviews completed frontend implementation for governing-source compliance, scope economy, repository quality, and security, then applies user-approved React corrections.

  • Works in 10 steps: Prerequisite Check → Execute code-reviewer → Execute security-reviewer → …
  • Tasks that involve Code review
  • SKILL.md covers Orchestrator Definition, Execution Method and Execution Flow
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Recipe Front Review is an agent skill from shinpr/claude-code-workflows. Reviews completed frontend implementation for governing-source compliance, scope economy, repository quality, and security, then applies user-approved React corrections.

Its SKILL.md is about 3.5k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Development, covering Code review. It works with React. The repository describes itself as: Development workflows for Claude Code that keep broad exploration focused on the outcome you approved. The licence is MIT.

When your agent uses it

  • Tasks that involve Code review

Example prompts

  • “Use the recipe-front-review skill to review completed frontend implementation for governing-source compliance, scope economy, repository quality…”
  • “/recipe-front-review”

Workflow steps

10 steps, taken from the step headings in SKILL.md.

  1. Prerequisite Check
  2. Execute code-reviewer
  3. Execute security-reviewer
  4. Verdict and Response
  5. Design-Side Update
  6. Execute Fixes
  7. Quality Check
  8. Re-validate code-reviewer
  9. Re-validate security-reviewer
  10. Final Report

What it can do on your machine

Read from SKILL.md and the folder at commit a4ecd62. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Recipe Front Review loads about 3.5k tokens when it runs. Until then it costs about 47 tokens; SKILL.md has 1,436 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~47
When it runs · the whole SKILL.md, loaded when a task matches
~3.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from shinpr/claude-code-workflows at commit a4ecd62, republished under its MIT licence (© shinpr). 1,436 words, ~3,488 tokens.

Download SKILL.mdSave it as .claude/skills/recipe-front-review/SKILL.md (or your agent's skills folder).
name
recipe-front-review
description
Reviews completed frontend implementation for governing-source compliance, scope economy, repository quality, and security, then applies user-approved React corrections.
disable-model-invocation
true

Explicit User Instruction: The user explicitly instructs and authorizes every subagent call named in this recipe. Execute each applicable call when its prerequisites are met.

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. Before the first finding disposition, read references/review-resolution.md from the loaded subagents-orchestration-guide skill.

Execution Gate: Complete Steps 1-10 in order, following only the branches activated by their stated conditions. Advance through each review, correction, and re-validation transition only at its declared convergence condition. Present the final report after every applicable finding and retained quality limitation reaches its required disposition or retry result.

Execution Method

  • Implementation review → 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 Design Doc is stale, excessive, or incorrect for the required outcome. Neither path makes the existing implementation or the prior design authoritative by default.

At each Agent invocation below, build the prompt as a mechanical extraction: copy the named source values into the exact fields, apply only the declared serialization, then invoke immediately.

Design Doc: $ARGUMENTS

Execution Flow

Step 1: Prerequisite Check

Derive implementationFiles from paths changed between the current branch's merge base with the repository's default branch and the current repository state, including committed changes, working-tree changes, and untracked files. implementationFiles contains each changed path whose contents implement or verify the reviewed behavior or control its schema, build, deployment, or runtime behavior, including source files, tests, migrations, executable scripts, and behavior-affecting configuration. Governing documents and Work Plans retain their dedicated roles in document selection and governing-document inputs; task files and documentation-only paths remain outside this recipe's code and security review inputs.

Use the Design Doc explicitly supplied in $ARGUMENTS. When omitted, first use a Work Plan whose declared target files or responsibilities intersect implementationFiles and take its recorded Design Doc path. When that does not produce one candidate, use the sole Design Doc under docs/design/. Present candidates only when multiple governing Design Docs remain; report a missing prerequisite when none exists.

Step 2: Execute code-reviewer

Invoke code-reviewer using Agent tool:

  • subagent_type: "dev-workflows-frontend:code-reviewer"
  • description: "Completed frontend implementation review"
  • prompt: "Review the completed frontend implementation. governingDocuments: ["[path]"]. implementationFiles: [implementationFiles]. Return the initial review JSON."

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: ["[path]"]. implementationFiles: [implementationFiles]. Review security compliance."

Store output as: $STEP_3_OUTPUT

Step 4: Verdict and Response

When either reviewer returns a blocked or otherwise unusable result, apply subagents-orchestration-guide Specialist Result Acceptance to its semantic cause. Carry only a remaining verification limitation into the report.

Apply the Review Resolution Gate to both outputs before reporting or routing them. Finding dispositions determine routing.

For each apply finding, compute a proposed route using the rule below. A finding takes one route, or both d and c when a selected reduction removes a design statement and the implementation it authorized:

Finding patternRecommended route
Resolution keeps the current implementation because it matches the original requirement and corrects a stale Design Docd (Design-side update)
Resolution requires changing implementation to reach the accepted statec (Code-side correction)
Resolution removes a mechanism the Design Doc selected that the required outcome does not needd and c (design statement first)

Then present the adjudicated result to the user. Group apply findings by proposed route and list declined IDs with their reasons:

Implementation Review: [verdict from code-reviewer]
  Acceptance Criteria:
  - [fulfilled] [item]: [evidence]
  - [unfulfilled] [item] -> [corresponding finding ID under Required Corrections]
  Required Corrections:
  - [id] [category] [location]: [description] — [basis and effect] [recommended: c | d | d and c]
  Limitations:
  - [unverified judgment and effect]

Security Review: [status from security-reviewer]
  Findings by category:
  - [confirmed_risk] [location]: [description] — [rationale] [recommended: c]
  - [defense_gap] [location]: [description] — [rationale] [recommended: c]

Approve the proposed changes:
  c) Code-side correction — change implementation to reach the accepted state
  d) Design-side update   — correct a stale, excessive, or incorrect Design Doc
  d and c) Reduction     — delete the selecting design statement, then remove the implementation it authorized
  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. 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. Remove accidental unmapped changes; when a necessary change would alter a confirmed value boundary or explicit size constraint, return to Requirement Change Detection.

Show full SKILL.md (689 more words)Show less
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. Apply these findings to the design: [complete d-routed finding objects from $STEP_2_OUTPUT, unchanged except for their approved routes]. Where a finding accepts the current code, reflect that behavior in the relevant sections; where it removes an unnecessary mechanism, delete the statements that selected it. 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 and convergence transitions, using technical-designer-frontend for rerouted corrections. Proceed only at its convergence condition.
  3. When more than one Design Doc exists under docs/design/, invoke design-sync:

    • subagent_type: "dev-workflows-frontend:design-sync"
    • description: "Cross-DD consistency check"
    • prompt: "source_design: [updated DD path]"
    • When sync_status: CONFLICTS_FOUND, apply the Review Resolution Gate and follow its bounded verifier handoff and convergence rules.
  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; a reduction's code removal is not satisfied by the DD revision alone. 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"
  • direct_scope: Apply the approved frontend corrections within the confirmed review scope and stated total size budget
  • governing_sources: The reviewed Design Doc, applicable UI Spec, and accepted requirement or ADR paths
  • target_paths: The implementation and test paths confirmed for the approved code-side routes
  • observable_verification: The focused UI behavior tests or observable contract checks named by the findings and governing sources pass
  • correction_findings: Complete reviewer finding objects verbatim, with only their orchestrator dispositions added
Step 7: Quality Check

Invoke quality-fixer-frontend using Agent tool:

  • subagent_type: "dev-workflows-frontend:quality-fixer-frontend"
  • description: "Quality gate check"
  • Copy Step 6 direct_scope, governing_sources, observable_verification, and correction_findings inputs unchanged.
  • Pass Step 6 mutationEvidence.

Route the quality-fixer-frontend result:

  • pass → Proceed to Step 8
  • stub_detected → Return to Step 6 with incompleteImplementations unchanged, then repeat Step 7
  • verification_incomplete → Retain the complete result and proceed to Step 8
  • blocked → Apply Specialist Result Acceptance
Step 8: Re-validate code-reviewer

Immediately before this invocation, re-derive implementationFiles using the Step 1 inclusion rule so it includes implementation artifacts added or changed by the approved corrections.

Invoke code-reviewer using Agent tool:

  • subagent_type: "dev-workflows-frontend:code-reviewer"
  • description: "Re-validate frontend implementation review"
  • prompt: "Re-review the completed frontend implementation after approved corrections. governingDocuments: ["[path]"]. implementationFiles: [implementationFiles]. prior_feedback: [{id, disposition, reason?, evidence}]. Reconcile every received item."
Step 9: Re-validate security-reviewer

Immediately before this invocation, re-derive implementationFiles using the Step 1 inclusion rule so it includes implementation artifacts added or changed by the approved corrections.

Invoke security-reviewer using Agent tool when subagents-orchestration-guide's post-implementation Re-run rule requires a current security result:

  • subagent_type: "dev-workflows-frontend:security-reviewer"
  • description: "Re-validate security"
  • prompt: "Re-validate security after fixes. governingDocuments: ["[path]"]. implementationFiles: [implementationFiles]. 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; apply the parent requirement or authority gate when Review Resolution exits to it; proceed at its convergence condition.

Before Step 10, retry each retained quality-fixer-frontend limitation once with the same Step 7 inputs and affected check. When the retry returns pass, remove that limitation from retained state. Route newly discovered incomplete implementation through Steps 6-9, and report a repeated verification_incomplete result. When the retry changes the repository, repeat Steps 8-9 for the changed code before reporting.

Step 10: Final Report

Present the final report:

Implementation 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]

Quality Check:
  Final: [pass / verification_incomplete / not_run when no code-side fixes were selected]

Remaining proof limitations:
- [reason — affected check and evidence] (only when repeated after retry)

Declined actionable findings:
- [ID: governing reason — evidence] (only when any were declined)

Remaining issues:
- [items requiring manual intervention]

Scope: Completed frontend implementation review, security review, and user-approved correction routing.

© shinpr, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/recipe-front-review of shinpr/claude-code-workflows.

Open the folder on GitHubat commit a4ecd62

Compare with similar skills

Recipe Front Review next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Recipe Front Review compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Recipe Front Review this skillshinpr/claude-code-workflows694—~3.5kAutomated safety check: PassMIT
@pierre/diffs Code Renderingpierrecomputer/pierre6.3k2 repos~803Automated safety check: PassApache-2.0
Cherry Studio PR ReviewCherryHQ/cherry-studio53k—~3.9kAutomated safety check: PassAGPL-3.0
Performance CheckZeroDeng01/sublinkPro1.7k—~1.8kAutomated safety check: PassMIT
Code Reviewnteract/semiotic2.7k—~1.5kAutomated safety check: PassApache-2.0
Code Review SkillRain-kl/OpenFlare289—~2.3kAutomated safety check: NotesMIT

Similar skills

  • @pierre/diffs Code Rendering

    pierrecomputer/pierre

    Guides an agent through using @pierre/diffs to render syntax-highlighted files and diffs, and to build editing and review surfaces in React or plain JavaScript.

    6.3k GitHub starsUsed in 2 repos~803 tokens
    DevelopmentAuto-check passed
  • Cherry Studio PR Review

    CherryHQ/cherry-studio

    Reviews Cherry Studio branches, pull requests, commits, files and docs against the project's own architecture, naming, API-boundary and UI rules, report-only by default.

    53k GitHub stars~3.9k tokensUpdated today
    DevelopmentAuto-check passed
  • Performance Check

    ZeroDeng01/sublinkPro

    Checklist for reviewing code changes that touch queries, APIs, rendering, caching or algorithms for performance, scalability and resource-usage problems.

    1.7k GitHub stars~1.8k tokensUpdated 2 days ago
    DevelopmentAuto-check passed
  • Code Review

    nteract/semiotic

    Review Semiotic pull requests for behavioral bugs, regressions, contract drift, and missing evidence.

    2.7k GitHub stars~1.5k tokensUpdated today
    DevelopmentAuto-check passed
  • Code Review Skill

    Rain-kl/OpenFlare

    Provides comprehensive code review guidance for React 19, Vue 3, Angular 17+, Svelte 5, Rust, TypeScript, Java, PHP, Python, Django, Go, C/.NET, Kotlin, Swift, NestJS, C/C++, and more.

    289 GitHub stars~2.3k tokensUpdated 3 days ago
    DevelopmentAuto-check: notes
  • Frontend Code Review

    langflow-ai/langflow

    Review frontend code (.tsx, .ts, .js files) for quality, performance, and correctness against Langflow's frontend conventions.

    155k GitHub stars~1.6k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

More from shinpr/claude-code-workflows

All 30 skills in this repo
  • Integration E2E Testing

    shinpr/claude-code-workflows

    Integration and E2E test design principles, ROI calculation, test skeleton specification, and review criteria.

    694 GitHub stars~3.5k tokensUpdated 10 days ago
    Auto-check passed
  • AI Development Guide

    shinpr/claude-code-workflows

    Applies language-agnostic and backend technical decision criteria, anti-pattern detection, debugging, and quality gates.

    694 GitHub stars~3.9k tokensUpdated 10 days ago
    Auto-check passed
  • Frontend AI Guide

    shinpr/claude-code-workflows

    Applies React/TypeScript-specific technical decision criteria, anti-pattern detection, debugging, and frontend quality gates.

    694 GitHub stars~3k tokensUpdated 10 days ago
    Auto-check passed
  • Implementation Approach

    shinpr/claude-code-workflows

    Implementation strategy selection framework. An agent skill from shinpr/claude-code-workflows.

    694 GitHub stars~2.6k tokensUpdated 10 days ago
    Auto-check passed
  • Recipe Quality Profile

    shinpr/claude-code-workflows

    Proposes repository-specific quality policy for implementation and review and, after confirmation, creates or updates docs/project-context/quality.yaml.

    694 GitHub stars~1.1k tokensUpdated 10 days ago
    Auto-check passed
  • Subagents Orchestration Guide

    shinpr/claude-code-workflows

    Guides subagent coordination through implementation workflows.

    694 GitHub stars~9.3k tokensUpdated 10 days ago
    Auto-check passed

Works with

Questions about Recipe Front Review

What does Recipe Front Review do?

Reviews completed frontend implementation for governing-source compliance, scope economy, repository quality, and security, then applies user-approved React corrections. Recipe Front Review is an agent skill from shinpr/claude-code-workflows. Reviews completed frontend implementation for governing-source compliance, scope economy, repository quality, and security, then applies user-approved React corrections.

When should I use Recipe Front Review?

Recipe Front Review fits situations like: tasks that involve Code review.

How do I install Recipe Front Review in Claude Code?

Run `npx skills add shinpr/claude-code-workflows --skill recipe-front-review -a claude-code`. Or copy the skill folder (skills/recipe-front-review in shinpr/claude-code-workflows) into .claude/skills/recipe-front-review in your project. Claude Code loads it when a task matches its description.

How do I install Recipe Front Review in Codex?

Run `npx skills add shinpr/claude-code-workflows --skill recipe-front-review -a codex`. Or copy the skill folder (skills/recipe-front-review in shinpr/claude-code-workflows) into .agents/skills/recipe-front-review in your project. Codex loads it when a task matches its description.

Can I use Recipe Front Review in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add shinpr/claude-code-workflows --skill recipe-front-review -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/recipe-front-review, .gemini/skills/recipe-front-review, .github/skills/recipe-front-review and .opencode/skills/recipe-front-review in your project.

What does Recipe Front Review need to run?

SKILL.md names no scripts, command-line tools or credentials: Recipe Front Review is instructions for the agent only.

Does Recipe Front Review access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Recipe Front Review safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Recipe Front Review use?

Recipe Front Review is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Recipe Front Review use?

About 3.5k tokens (SKILL.md is roughly 14k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Recipe Front Review?

Skills that share tags, products or a category with Recipe Front Review: @pierre/diffs Code Rendering (pierrecomputer/pierre, 6.3k stars), Cherry Studio PR Review (CherryHQ/cherry-studio, 53k stars), Performance Check (ZeroDeng01/sublinkPro, 1.7k stars) and Code Review (nteract/semiotic, 2.7k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Recipe Front Review?

shinpr (a GitHub user) maintains it in shinpr/claude-code-workflows, which has 694 GitHub stars. The repository holds 30 skills in this directory. The repository was last updated on October 1, 2026.

Source: shinpr/claude-code-workflows on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.