recipe-front-adjust
Recipe-front-adjust guides iterative UI refinement for already-implemented features by delegating analysis to subagents while running adjustment loops and design verification in the parent session. Use this when modifying existing UI components and need systematic verification that changes match the original design source before committing updates.
git clone --depth 1 https://github.com/shinpr/claude-code-workflows /tmp/recipe-front-adjust && cp -r /tmp/recipe-front-adjust/dev-workflows-fullstack/skills/recipe-front-adjust ~/.claude/skills/recipe-front-adjustSKILL.md
**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.
**Context**: UI adjustment on already-implemented features. The verification loop (edit → check against the design source → refine) runs in the parent session.
## Execution Pattern
**Core Identity**: "I am a guided executor. I run the adjustment and the verification loop myself; subagents handle one-shot tasks."
**Execution Protocol**:
1. **Delegate to subagents** (one-shot calls): quality-fixer-frontend.
2. **Run in the parent session** (multi-step loops and user dialogs): external-resource hearing via AskUserQuestion, write-set inspection, scale judgment, adjustment-context approval, adjustment edits, verification against the design source, iteration until acceptance.
3. **Stop at every `[Stop: ...]` marker** before proceeding.
## Execution Gate
Complete Steps 1-7 in order for each adjustment unit. Advance only through the current step's stated evidence, quality result, or user stop; skip work only when its stated condition is false. Report completion after every applicable Completion Criterion and retained-limitation retry is satisfied.
## Workflow Overview
```
Adjustment request → conditional external resource evidence
↓
existing-pattern and write-set inspection
↓
structural boundary judgment on candidate write set
↓
local existing-pattern adjustment → [Stop]
↓
adjustment + verification (parent session)
↓
quality-fixer-frontend (subagent: typecheck/lint/test)
↓
commit
```
## Scope Boundaries
**Included in this skill**:
- External resource hearing per the external-resource-context skill
- Existing-pattern and write-set inspection in the parent session
- Structural boundary judgment via documentation-criteria
- Adjustment edits and verification against the design source (run in this session)
- Quality verification via quality-fixer-frontend
- Commit per adjustment unit
**Responsibility Boundary**: This skill completes when each adjustment is committed after its quality cycle and any retained proof limitation receives its final retry. Adjustment work is end-to-end within this recipe; parent session owns edits, verification loops, quality-result routing, and commits.
**Escalation Boundary**: Escalate to the full frontend design phase when the request crosses a responsibility or approved UI boundary, requires a complete Design Doc, or contains a technical choice that passes documentation-criteria's Choice and Durability filters.
Adjustment request: $ARGUMENTS
## Execution Flow
### Step 1: External Resource Hearing
Execute Skill: external-resource-context before running the hearing protocol.
Run the hearing protocol only when external evidence can change the current adjustment target or verification result. Otherwise continue with the existing repository/UI Spec evidence and record no external references.
### Step 2: Determine the Route and Write Set
Execute Skill: documentation-criteria.
Inspect the named or current UI and the smallest sufficient repository evidence needed to identify the likely write set and preserved visible behavior. Include a generated artifact only when repository tooling shows that a candidate write triggers its generator. When the UI Spec creation condition applies, route to `recipe-front-design` and stop. Otherwise record the evidence-backed candidate write set for this existing-pattern adjustment.
### Step 3: Scale Judgment
1. Read the candidate write set from Step 2.
2. Apply Structural Scale to the confirmed outcome and responsibility boundary. Use write-set count as supporting evidence only:
- **0 files**: The adjustment request did not map to any existing file. Escalate to the user with the message "No write target identified from the adjustment request. Please clarify which component(s) should change, or run the full frontend design phase if this is a new feature." Stop this recipe.
- **Direct adjustment**: One coherent UI outcome follows existing component, state, interaction, and verification patterns inside one responsibility boundary. Continue directly to adjustment context even when generated or tightly coupled files increase the count.
- **Design required**: The change crosses a responsibility or approved UI contract, coordinates independently valuable outcomes, or needs a durable technical choice between credible alternatives. Escalate to the full frontend design phase.
### Step 4: Adjustment Context
No work plan. Build a minimal adjustment context for the parent session:
- Adjustment request (verbatim)
- Existing UI pattern and preserved visible behavior relevant to the adjustment
- Evidence-backed affected files list from the candidate write set
- External resources fetched_summary and access methods that the verification loop will use
Present the adjustment context to the user for review.
- **[STOP]**: User confirms the adjustment context covers the work.
### Step 5: Adjustment + Verification (parent session)
Execute Skill: frontend-ai-guide before planning or applying adjustment edits.
Execute Skill: typescript-rules before planning or applying adjustment edits.
Execute Skill: implementation-approach before planning or applying adjustment edits.
Execute Skill: test-implement before adding or changing tests.
For each file in the confirmed adjustment context:
1. **Plan the edit** from the confirmed adjustment context and relevant external resource (e.g., design origin's fetched_summary).
2. **Apply the edit** usingGenerates integration/E2E test skeletons from Design Doc ACs using ROI-based selection and journey-based E2E reservation. Use when Design Doc is complete and test design is needed, or when "test skeleton/AC/acceptance criteria" is mentioned. Behavior-first approach for minimal tests with maximum coverage.
Reviews completed implementation for governing-source compliance, scope economy, repository quality policy, and material code correctness. Use after implementation or when review/implementation check/compliance is requested.
Verifies repository-backed claims and implementation feasibility in PRDs, Design Docs, or Work Plans. Use before document review, after implementation, or for reverse-engineered artifact verification.
Collects compact repository evidence for scope confirmation, technical option selection, complete design, and verification. Use before Design Doc creation when repository facts can change scope, reuse, contracts, cost, or proof.
Detects conflicts across multiple Design Docs and provides structured reports. Use when multiple Design Docs exist, or when "consistency/conflict/sync/between documents" is mentioned. Focuses on detection and reporting only, no modifications.
Reviews one document or one ADR batch against governing requirements, repository evidence, and the needs of its next consumer. Use before user approval or when document consistency and completeness need verification.
Reviews changed integration and E2E tests against skeletons, proof obligations, or explicit prompt claims. Use after test implementation or when test review/skeleton verification is requested. Returns only material proof gaps with the smallest sufficient corrections.
Comprehensively collects problem-related information and creates evidence matrix. Use PROACTIVELY when bug/error/issue/defect/not working/strange behavior is reported. Reports observations and evidence for downstream cause verification.