Skip to content
Development
Skill

/recipe-front-adjust

Adjust an already-implemented UI in-session with verification against the design source

From plugin
claude-code-workflows
71427 skills24 agents

Claude Code

$ npx -y skills add shinpr/claude-code-workflows --skill recipe-front-adjust --agent claude-code

SKILL.md

recipe-front-adjust.SKILL.md
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.

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): 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.

Execution Gate

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.

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**:

  • Conditional external-evidence resolution 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 the adjustment outcome

**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

Execution Flow

Step 1: External Resource Evidence

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.

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 adjustment 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: 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

Read more
@shinpr
Ships withclaude-code-workflows

Claude Code can explore a codebase deeply. On non-trivial work, the harder problem is convergence.

71427 skills24 agents
Get the whole plugin

Stars on GitHub

Momentum

stars in total
714
Star history of shinpr/claude-code-workflows on GitHub, a chart by star-history.com

Other skills on claude-code-workflows.

More skills from other plugins.

brainstorming
Auto-invoked

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…

@obra@obraInstall Skill
ask-matt

ask-matt

Ask which skill or flow fits your situation. A router over the skills in this repo.

skills11d309k
@mattpocock@mattpocockInstall Skill
accessibility
Auto-invoked

accessibility

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels,…

ecc13d293k
@affaan-m@affaan-mInstall Skill
compiler-commit

compiler-commit

Use when you want to verify compiler changes and commit with the correct convention. Runs tests, lint, and format, then commits…

react2d252k
@facebook@facebookInstall Skill

Questions about recipe-front-adjust.

Which coding agents can use recipe-front-adjust?
recipe-front-adjust installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.