ai-development-guide
Applies technical decision criteria, anti-pattern detection, debugging, and quality gates for backend and frontend code. Use when…
Adjust an already-implemented UI in-session with verification against the design source
Claude Code
$ npx -y skills add shinpr/claude-code-workflows --skill recipe-front-adjust --agent claude-code
Codex
$ npx skills add shinpr/claude-code-workflows --skill recipe-front-adjust -a codex -y
Cursor
$ npx skills add shinpr/claude-code-workflows --skill recipe-front-adjust -a cursor -y
Gemini CLI
$ npx skills add shinpr/claude-code-workflows --skill recipe-front-adjust -a gemini-cli -y
GitHub Copilot
$ npx skills add shinpr/claude-code-workflows --skill recipe-front-adjust -a github-copilot -y
OpenCode
$ npx skills add shinpr/claude-code-workflows --skill recipe-front-adjust -a opencode -y
Windsurf
$ npx skills add shinpr/claude-code-workflows --skill recipe-front-adjust -a windsurf -y
name: recipe-front-adjust description: Adjust an already-implemented UI in-session with verification against the design source 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.
**Context**: UI adjustment on already-implemented features. The verification loop (edit → check against the design source → refine) runs in the parent session.
**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): conditional external-evidence resolution, with AskUserQuestion for missing decision-relevant inputs, 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.
Complete Steps 1-7 in order for the adjustment outcome. 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.
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**Included in this skill**:
**Responsibility Boundary**: This skill completes when the 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
Execute Skill: external-resource-context when external evidence is required.
Resolve only external evidence that can change the current adjustment target or verification result; use existing access details and ask only for missing decision-relevant inputs. Otherwise continue with the existing repository/UI Spec evidence and record no external references.
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.
1. Read the candidate write set from Step 2. 2. Apply Structural Scale to the adjustment outcome and responsibility boundary. Use write-set count as supporting evidence only:
No work plan. Build a minimal adjustment context for the parent session:
Present the adjustment context to the user for review.
Execute Skill: ai-development-guide and read its `references/frontend.md` before planning or applying adjustment edits. Execute Skill: coding-principles and read its `references/frontend.md` before planning or app
Claude Code can explore a codebase deeply. On non-trivial work, the harder problem is convergence.
Applies technical decision criteria, anti-pattern detection, debugging, and quality gates for backend and frontend code. Use when…
Language-agnostic coding principles for maintainability, readability, and quality. Use when implementing features, refactoring…
Determines which of PRD, ADR, UI Spec, Design Doc, and Work Plan a change requires, and where each is stored. Use when deciding…
Records where resources outside the repository live (design source, design system, API schema, IaC source, secret store) and how…
Implementation strategy selection framework. Use when planning implementation strategy, selecting development approach, or…
Defines integration/E2E skeleton annotations, lane and file contracts, and route-parity review criteria. Use when generating or…
You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…
Ask which skill or flow fits your situation. A router over the skills in this repo.