review-ui

name	review-ui
version	1.0.0
description	[Code Quality] Use when reviewing UI/frontend changes for long-content overflow, responsive multi-screen layout, flex-vs-fixed sizing, z-index discipline, and SCSS/BEM styling quality.
execution-mode	subagent
context-budget	high

[BLOCKING] Execute skill steps in declared order. NEVER skip, reorder, or merge steps without explicit user approval. [BLOCKING] Before each step or sub-skill call, update task tracking: set in_progress when step starts, set completed when step ends. [BLOCKING] Every completed/skipped step MUST include brief evidence or explicit skip reason. [BLOCKING] If Task tools are unavailable, create and maintain an equivalent step-by-step plan tracker with the same status transitions.

Quick Summary

Goal: Validate UI/frontend changes for the five visual-quality dimensions that break in production but slip past correctness review — long-content overflow & truncation, responsive multi-screen layout, flex-grow vs fixed sizing, z-index scale discipline, and SCSS/CSS/BEM styling quality — so frontend/UI changes survive real content, responsive layouts, layering, and styling conventions before handoff.

Default scope: All uncommitted frontend changes (staged + unstaged) matching the frontend path and file-extension patterns declared by the project configuration/docs index. Override: specify files, directories, components, or full frontend codebase.

CONDITIONAL — SKIP when no frontend files in scope. In workflow context this skill is SKIPPED when the diff has no files matching the project frontend path/extension patterns. If invoked standalone with no frontend changes → announce "No frontend changes detected — review-ui skipped" and report clean.

ROUTING BOUNDARY (read before starting):

• review-ui (this skill) — the project UI review gate invoked by review-changes as its UI dimension when frontend files are in scope. Purpose: find issues, assign severity, give project-specific fix guidance citing real reuse targets (sourced from the project reference docs). It complements review-architecture; it is not a separate review-changes workflow step.
• web-design-guidelines — a generic, standalone accessibility / UX checklist. Cross-read it for a11y depth (WCAG, focus order, ARIA, contrast); do NOT duplicate its content here.
• ui-ux-designer — specialized UI/UX, accessibility, responsive layout, and design-token review/authoring sub-agent when the local agent catalog provides it.

MANDATORY MUST ATTENTION Plan tasks to READ UI rules BEFORE reviewing:

1. Project styling rules doc — BEM convention, mixins, variables, responsive patterns (READ FIRST — primary styling rules source; resolve via project config/docs index)
2. Project design-system/token doc — design tokens, especially the Z-Index & Layering section
3. Project frontend architecture/patterns doc — base component classes, state/store, API service, lifecycle teardown rules shared with review-architecture
4. Project code-review rules doc — anti-patterns and conventions

Not found → search: "scss styling", "design tokens", "frontend patterns". Rules come from docs — NOT general knowledge.

Workflow:

1. Phase 0: Load UI Rules — Resolve and read the four project UI/styling rule docs above
2. Phase 1: Determine Scope — Changed frontend files (default) or user-specified scope
3. Phase 2: Blast Radius — Run graph trace if graph.db exists
4. Phase 3: UI Category Review — Check each file against all 5 applicable categories
5. Phase 4: Finalize — Generate compliance report with PASS/BLOCKED/WARN verdicts
6. Fix Loop: Validate → Fix → Full UI Re-Review — validate findings first; after validated fixes, rerun the full UI review using the local sub-agent selection guide only when that protocol calls for agents

Key Rules:

• Write findings to plans/reports/ui-review-{date}-{slug}.md
• BLOCKED = must fix before merge | WARN = review and decide | PASS = compliant
• Every violation needs file:line proof + grep 3+ counterexamples before flagging
• Review is read-only until /why-review --validate-findings confirms findings; fixes may happen only in the validated fix loop or downstream plan/feature-implement, and every fix restarts a full UI review from Phase 0 with brand-new tasks.

Your Mission

$ARGUMENTS

First Principle — Easy to Change

The success metric of every coding decision is future change cost. DRY, SRP, abstraction, design patterns, naming, layering, tests — every technique exists to serve one goal: making the next change cheaper.

When evaluating styling, a layout, a token, or a component, ask: does this make the next change cheaper or more expensive?

• Reject "best practices" that raise change cost (hardcoded values forcing per-file edits, hand-rolled overflow handling, raw breakpoints, copy-pasted truncation CSS).
• Name the real enemies in findings: magic values, duplicated styling knowledge, fixed sizing that fights the viewport, cross-system token mixing, z-index escalation wars.
• A simpler layout that survives 320px and a 200-char value beats a pixel-perfect fixed layout that breaks on either.

Apply this lens before invoking any specific rule, pattern, or checklist below — if a downstream rule would raise change cost, this principle wins.

---

Review Mindset (NON-NEGOTIABLE)

Skeptical. Every claim needs traced proof, confidence >80%.

• NEVER flag a styling violation without reading the actual SCSS/template + tracing the rendered element
• Every finding MUST include file:line evidence
• Before flagging a pattern violation: grep 3+ existing examples — codebase convention wins
• Question: "Is this actually a violation, or an established exception (icon dimensions, fixed brand assets, genuinely fixed UI)?"

Phase 0: Load UI Rules (MANDATORY FIRST) (MUST ATTENTION)

MUST ATTENTION: Read project UI docs BEFORE reviewing. Rules come from docs, not general knowledge.

• read the project styling rules doc — extract BEM convention, mixin names, variable names, responsive breakpoint mixins, nesting limits
• read the project design-system/token doc — extract design tokens and the Z-Index & Layering section
• read the project frontend architecture/patterns doc — extract base component classes, store/effect patterns, API service base, lifecycle teardown pattern
• read the project code-review rules doc — extract frontend anti-patterns and review rules directly

CROSS-SYSTEM WARNING (carry through every category): Do NOT mix token systems with incompatible root-size, namespace, or layer assumptions in one file. When flagging a fix, recommend whichever token system the file already imports/uses; never introduce another system unless the project docs explicitly require migration.

Phase 1: Determine Scope

Default (no override): Review all uncommitted frontend changes.

git status          # List changed files
git diff            # Staged + unstaged changes
git diff --cached   # Staged only

• Collect file list to review
• Filter to files matching the project frontend path/extension patterns resolved from project config/docs
• If ZERO frontend files match → announce "No frontend changes detected — review-ui skipped" and report clean (honor the CONDITIONAL skip)

Phase 2: Blast Radius (if graph.db exists)

• If .code-graph/graph.db exists: run graph trace on key changed component files
• Record: impacted file count, shared-component fan-out (a changed shared-library component affects every consumer app), risk level
• Prioritize review by highest-impact files first (shared library components > app-local components)
• Graph unavailable: note "Graph not available — skipping blast radius" and proceed

For each changed component/style file with downstream impact:

python .claude/scripts/code_graph trace <changed-file> --direction both --json

Use --node-mode file first (10-30x less noise), then --node-mode function for detail. Flag shared-component consumers impacted by a styling or layout change.

Phase 3: UI Category Review

Create report: plans/reports/ui-review-{date}-{slug}.md

For EACH file in scope, evaluate against ALL applicable categories. Skip categories not applicable to the file type (e.g., a pure .ts store file skips overflow/sizing/z-index but still hits Category 5's architecture checks).

Apply the Think: reasoning prompt before each category — derive violations, do NOT recite checklists.

---

Category 1: Long-Content Overflow & Truncation — Severity: WARN (HIGH when a flex child truncates with no min-width: 0)

Think: Does every text container survive a 200-char value? Single-line or multi-line? Can the user still read the full value when it is truncated?

Detection signals:

• Hand-rolled text-overflow: ellipsis (with white-space: nowrap / overflow: hidden re-declared by hand) instead of the project mixin/directive
• A flex child that truncates but has NO min-width: 0 — the flex-overflow trap: a flex item's default min-width: auto refuses to shrink below content width, so ellipsis never triggers
• Truncated text with NO tooltip / title to reveal the full value

DECISION RULE the reviewer enforces:

• Single-line labels / table cells / chips → ellipsis + tooltip-on-overflow
• Multi-line prose / descriptions → wrap or -webkit-line-clamp

Project fix guidance (cite real reuse targets from the resolved styling rules doc):

• Prefer the project's documented overflow/ellipsis directive, component, or utility. It must expose the full value only when the element actually overflows and must handle the flex min-width trap.
• OR the project's documented truncate/text-ellipsis mixins or utility classes from the styling rules doc.
• Multi-line: use the project-documented clamp pattern.

GOOD vs BAD: a utility/token-driven truncation that exposes the full value on overflow (tooltip/title) is correct; a hand-rolled substring / width-math truncation, or truncated text with no tooltip, is the anti-pattern. Cite the styling rules doc for the project's reuse targets.

---

Category 2: Responsive Multi-Screen via Flex — Severity: WARN

Think: Is this usable at 320 / 768 / 1024 / 1440? Does the layout flex, or is it a fixed grid that overflows the small screen?

Detection signals:

• Raw @media (max-width: NNNpx) / (min-width: NNNpx) in component SCSS that bypasses the breakpoint mixins
• Non-flex fixed layouts that cannot reflow

Project fix guidance:

• The project documented responsive-flex mixins/utilities
• Breakpoints from the project breakpoint tokens — NEVER inline pixel breakpoints

Anti-patterns: raw @media pixel breakpoints that bypass the project's breakpoint mixins, and non-flex fixed grids that cannot reflow. Cite the styling rules doc for documented offenders; grep the changeset for the same patterns.

---

Category 3: Flex-Grow vs Fixed Width/Height (prefer min/max) — Severity: WARN

Think: Must this size be fixed, or can it grow/shrink with content + viewport?

Detection signals:

• Fixed width: / height: in px (≥ ~3 digits) on containers / cards / forms / dialogs

Project fix guidance:

• Prefer flex: 1 / flex-grow + max-width / min-width caps, and min-width: 0 on truncating flex children
• The project flex-container mixin/utility documented in the styling rules doc
• Reserve fixed px for icons / borders / genuinely fixed UI

Anti-patterns: large fixed width: / height: in px on containers / cards / forms / dialogs (e.g. width: 964px, height: 772px) that should flex with content + viewport. Cite the styling rules doc for documented offenders.

---

Category 4: Z-Index Scale Discipline — Severity: BLOCKED (HARD GATE)

Think: Which layer does this surface belong to (base / raised / dropdown / sticky / modal / toast)?

Detection signals:

• Raw numeric z-index (literal value instead of a token)
• ANY z-index with !important → BLOCKED (an escalation war that the next dev will only beat with a bigger literal)

Project fix guidance — use tokens:

• The project documented z-index layer tokens
• Existing legacy/framework token systems only when the current file already uses that system
• The semantic layer variables declared canonical by the project design-system doc

Cross-reference the project design-system Z-Index & Layering map. The chosen token MUST match the surface's semantic layer.

GOOD vs BAD: a z-index set from a semantic token / layer scale is correct; a raw literal (e.g. z-index: 99999, z-index: 10000) or z-index: N !important is the anti-pattern. Cite the design-system and styling docs for the project's token scale and documented offenders.

---

Category 5: SCSS/CSS Best Practices & BEM — Severity: WARN (BLOCKED on !important, chained BEM modifiers)

Think: Does this stylesheet read cleanly, follow BEM, and use tokens — or does it hardcode, over-nest, and chain modifiers?

SCSS/BEM rules (canonical): BEM classes on ALL template elements (block__element--modifier). No magic numbers — use variables / design tokens. Max 3 nesting levels.

Detection signals:

• Nesting > 3 levels
• Hardcoded hex colors (should use CSS vars / design tokens)
• px where rem is expected
• Chained BEM modifiers (.block__element.--modifier) — .--mod MUST be a separate class, NEVER chained → BLOCKED
• Template elements missing BEM classes
• !important → BLOCKED

Apply fixes per the resolved project styling rules doc.

Frontend architecture checks (OWNED JOINTLY WITH review-architecture Category 8 — reference, do not drift):

These checks are lifted from review-architecture Category 8 so the two skills stay synchronized. They are owned jointly; when one changes, update both. They apply to the .ts files in scope:

• Components MUST extend the project-documented base component/form/store component classes (BLOCKED)
• State MUST use the project-documented store/effect pattern — NEVER ad hoc local state when the project provides a canonical store pattern (BLOCKED)
• API services MUST extend the project-documented API service base — NEVER raw HTTP clients when the project provides a service abstraction (BLOCKED)
• All subscriptions MUST use the project's auto-teardown operator — NEVER manual unsubscribe (BLOCKED)
• All template elements MUST have BEM classes (WARN)
• Logic in lowest layer: Model > Service > Component (WARN)

---

Phase 4: Finalize — UI Compliance Report

Update report with final sections:

Verdict Scoring

Verdict	Condition
BLOCKED	1+ BLOCKED findings — must fix before merge
WARN	0 BLOCKED, 1+ WARN findings — review and decide
PASS	0 BLOCKED, 0 WARN — UI compliant

Severity vocabulary (single source of truth). Category headers and this verdict table use BLOCKED / WARN / PASS. The fresh sub-agent (Phase 5 and Round 2) emits Critical / High / Medium / Low + PASS / FAIL from the shared review-protocol template. Reconcile the two with this mapping — do NOT treat them as separate scales:

This skill	Sub-agent (Round 2)	Merge gate
BLOCKED	Critical / High → FAIL	Must fix before merge
WARN	Medium / Low → WARN/INFO	Review and decide
PASS	(no findings) → PASS	Merge-clear

A category's "(HIGH when …)" note is NOT a separate tier — it means that WARN escalates to BLOCKED when the stated condition holds (i.e., the finding is a real rendered bug, not a latent risk).

Report Structure

# UI Review Report — {date}

## Scope

- Files reviewed: {count}
- Components / apps affected: {list}
- Blast radius: {summary from Phase 2}

## Verdict: {PASS | WARN | BLOCKED}

## BLOCKED Findings (Must Fix)

### {Category}: {description}

- **File:** {path}:{line}
- **Rule:** {rule from project UI doc}
- **Evidence:** {what was found}
- **Fix:** {reuse target to use — directive / mixin / token}

## WARN Findings (Review)

### {Category}: {description}

- **File:** {path}:{line}
- **Rule:** {rule from project UI doc}
- **Evidence:** {what was found}
- **Recommendation:** {suggested action}

## PASS Categories

- {list of categories that passed with no findings}

## UI Health Summary

- Long-content Overflow & Truncation: {PASS/WARN/BLOCKED}
- Responsive Multi-Screen: {PASS/WARN/BLOCKED}
- Flex-Grow vs Fixed Sizing: {PASS/WARN/BLOCKED}
- Z-Index Scale Discipline: {PASS/WARN/BLOCKED}
- SCSS/CSS Best Practices & BEM: {PASS/WARN/BLOCKED}
- Frontend Architecture (joint w/ review-architecture): {PASS/WARN/BLOCKED/N/A}

---

Systematic Review Protocol (10+ changed frontend files)

1. Categorize — Group files by app / shared-library / component concern
2. Parallel Sub-Agents — Launch one UI/UX-specialized sub-agent per group with the UI-category checklist
3. Synchronize — Collect findings, cross-reference shared-component consumers and cross-system token mixing
4. Consolidate — Single holistic report with per-category verdicts

---

Phase 5: Why-Review Findings Validation Gate (MANDATORY when findings exist)

Purpose: Adversarial validation of own findings BEFORE handoff. Catches over-flagged Highs, false positives, and severity inflation at the source rather than letting them propagate downstream.

Trigger: Any finding produced (Critical, High, Medium, OR Low). Skip ONLY when the report's verdict is unconditional PASS with literally zero findings.

Protocol:

1. Read own finalized report from plans/reports/ui-review-{date}-{slug}.md (the exact path written in Phase 3 — NOT {skill}-…)
2. Invoke /why-review --validate-findings plans/reports/ui-review-{date}-{slug}.md
3. Read the validation verdict path returned by why-review, expected as plans/reports/why-review-validate-{date}.md
4. If why-review demotes/removes any finding: UPDATE own finalized report with revised severities, remove false positives, and add a ## Why-Review Validation Notes section citing what changed and why
5. If why-review confirms all findings: Append ## Why-Review Validation line to own report stating "All N findings re-validated against actual code; no severity changes."
6. If the report changed after validation: re-run this validation gate, maximum 2 validation passes, until the report's remaining findings are validated or zero findings remain.

Skip conditions (record explicit reason if skipping):

• Verdict is unconditional PASS with zero findings → log "Skipped — no findings to validate"
• Why-review skill itself is the active context (avoid recursion)

Why this exists: AI sub-agent reports inherit confirmation bias — the orchestrator absorbs severity claims as ground truth. The 2026-05-09 review incident produced 5 Highs; adversarial validation demoted 3 of them. Codify this as standard practice.

---

Phase 6: Validated Fix + Full UI Re-Review Loop (MANDATORY when validated findings remain)

Trigger: Phase 5 returns CLEAN/validated and the UI review report still has one or more findings that must be fixed.

Protocol:

1. Create a fresh fix-cycle task list before editing. Do not reuse the review tasks.
2. Fix only findings that survived /why-review --validate-findings; route broader or cross-cutting fixes through the parent /plan + /feature-implement flow when this skill is running inside a workflow.
3. Run targeted verification for the fixed UI files and any affected consumers.
4. Re-invoke /review-ui from Phase 0 over the full current UI scope, not only the fixed files.
5. The re-run MUST create brand-new review tasks, reload the UI docs, determine scope again, rerun blast radius where applicable, and review every changed UI file from the start.
6. Repeat validate → fix → full UI re-review until a complete pass has zero findings.
7. If the same validated blocker repeats across 3 full invocations with no progress, stop and ask the user for a decision.

Non-negotiable rules:

• Never fix a finding before /why-review --validate-findings validates it.
• Never mark UI review clean after a targeted fix check only; the clean verdict must come from a full Phase 0 restart.
• Never review only fixed files during the recursive pass; analyze all UI files in scope again.
• Never reuse old todo/task items for the recursive review pass.

---

Workflow Recommendation

MANDATORY — NO EXCEPTIONS: If NOT already in a workflow, MUST use AskUserQuestion to ask user. Do NOT judge task complexity or decide "simple enough to skip" — user decides, not you:

1. Activate workflow-review-changes workflow (Recommended) — run the canonical workflow from .claude/workflows.json; it sequences UI review through /review-changes, findings validation, parallel reviewers, code-simplifier self-review, fix-plan cycle, full re-review restart, docs, and handoff.
2. Execute /review-ui directly — run this skill standalone

---

Next Steps

MANDATORY — NO EXCEPTIONS: After completing, use AskUserQuestion to present:

• "/code-simplifier" (Recommended) — Simplify and refine the styling/component code
• "/web-design-guidelines" — Generic accessibility / UX checklist for a11y depth
• "Skip, continue manually" — user decides

AI Agent Integrity Gate (NON-NEGOTIABLE)

Before reporting ANY work done:

1. Grep every removed name. Extraction/rename/delete → grep confirms 0 dangling refs across ALL file types (SCSS @use, template class refs, TS imports)
2. Ask WHY before changing. Existing values intentional until proven otherwise — a fixed width may be a genuinely fixed UI element; no "fix" without traced rationale
3. Verify ALL outputs. One compiled stylesheet ≠ all consumers — a shared-component style change affects every consuming app
4. Evaluate pattern fit. Copying a nearby mixin/token? Verify the file imports/uses the SAME token system and does not mix incompatible project token systems
5. New artifact = wired artifact. Created a class/mixin? Prove it is imported, referenced in the template, and reachable

[IMPORTANT] Use TaskCreate to break ALL work into small tasks BEFORE starting. Simple tasks: ask user whether to skip.

Fresh Context Re-Review — Eliminate orchestrator confirmation bias after fixes by restarting the full review with isolated sub-agents where applicable.

Why: The main agent knows what it (or /feature-implement) just fixed and rationalizes findings accordingly. A fresh sub-agent has ZERO memory, re-reads from scratch, and catches what the main agent dismissed. Sub-agent bias is mitigated by (1) fresh context, (2) verbatim protocol injection, (3) main agent not filtering the report.

When: ONLY after a validated-finding fix cycle, or when the user/workflow explicitly requests an independent high-risk UI synthesis pass. A review pass that finds issues triggers validation first; it does NOT trigger a fresh-context pass over the same findings before validation/fix.

How:

1. Start a NEW full review invocation/task breakdown; when that protocol calls for agents, spawn a NEW Agent tool call — use the UI/UX-specialized subagent_type from the local sub-agent selection guide
2. Inject ALL required review protocols VERBATIM into the prompt — see SYNC:review-protocol-injection for the full list and template. Never reference protocols by file path; AI compliance drops behind file-read indirection (see SYNC:shared-protocol-duplication-policy)
3. Sub-agent re-reads ALL target files from scratch via its own tool calls — never pass file contents inline in the prompt
4. Sub-agent writes structured report to plans/reports/{review-type}-round{N}-{date}.md
5. Main agent reads the report, integrates findings into its own report, DOES NOT override or filter

Rules:

• NEVER reuse a sub-agent across rounds — every iteration that uses sub-agents spawns a NEW Agent call
• NEVER fix unvalidated findings; validate first using the caller's validation gate
• NEVER skip the full review restart after a validated fix cycle — every fix invalidates the prior verdict
• Continue until a complete full review pass has zero findings; if the same blocker repeats across 3 full invocations with no progress, escalate via AskUserQuestion
• Track iteration count in conversation context (session-scoped, no persistent files)

Sub-Agent Type Override

MANDATORY: UI reviews spawn the UI/UX-specialized sub-agent defined by the local sub-agent selection guide. Keep subagent_type: "ui-ux-designer" in the canonical template below when that agent type exists in the local catalog. Rationale: The shared sub-agent selection guide routes frontend UI/UX, accessibility, responsive layout, and design-token work to the UI/UX specialization. Do not fall back to a generic code-reviewer catch-all unless the local catalog lacks a UI/UX reviewer.

Review Protocol Injection — Every fresh sub-agent review prompt MUST embed 11 protocol blocks VERBATIM. The template below has ALL 11 bodies already expanded inline. Copy the template wholesale into the Agent call's prompt field at runtime, replacing only the {placeholders} in Task / Round / Reference Docs / Target Files / Output sections with context-specific values. Do NOT touch the embedded protocol sections.

Why inline expansion: Placeholder markers would force file-read indirection at runtime. AI compliance drops significantly behind indirection (see SYNC:shared-protocol-duplication-policy). Therefore the template carries all 11 protocol bodies pre-embedded.

Subagent Type Selection

• ui-ux-designer — default for UI reviews when the local agent catalog provides it
• code-reviewer — fallback only when the local catalog lacks a UI/UX-specialized reviewer

Canonical Agent Call Template (Copy Verbatim)

Agent({
  description: "Fresh Round {N} UI review",
  subagent_type: "ui-ux-designer",
  prompt: `
## Task
{review-specific task — e.g., "Review all uncommitted frontend changes for UI quality: long-content overflow, responsive layout, flex-vs-fixed sizing, z-index discipline, SCSS/BEM" | "Review SCSS/template files under {path}"}

## Round
Round {N}. You have ZERO memory of prior rounds. Re-read all target files from scratch via your own tool calls. Do NOT trust anything from the main agent beyond this prompt.

## Protocols (follow VERBATIM — these are non-negotiable)

### Spec ↔ Tests ↔ Code Triangulation
DO THIS FIRST — before any per-protocol check below. The review target is the WHOLE PACKAGE, not the diff alone: load the behavior's spec (§3 ACs / §4 BRs / §8 TCs), its tests, and the changed code TOGETHER, and reason about their mutual consistency BEFORE judging any one in isolation.
1. Locate all three faces: the Feature Spec section(s) governing the changed behavior, the tests that guard it, and the production code that implements it. A missing face is itself a finding (SPEC-GAP / TEST-GAP / DEAD-SPEC).
2. Triangulate pairwise — every disagreement is a finding; classify which face is wrong:
   - code vs spec: behavior the code does that no §3/§4/§8 rule describes → CODE-EXTRA or SPEC-STALE; a [HARD] §4 rule or §5 invariant with no enforcing code path → CODE-WRONG.
   - tests vs spec: a §8 TC with no test, or a test asserting behavior no TC/rule names → TEST-GAP or SPEC-SILENT.
   - tests vs code: a changed code path with no covering test → TEST-GAP; a test that still passes against a deliberately broken invariant → WEAK-TEST (apply the mutation thinking in Bug Detection).
3. Hidden-rule capture: any invariant the code enforces but the spec never states (SPEC-SILENT) MUST be surfaced as a finding to add into §3/§4/§8 AND guarded with a test — the enrichment loop, never a silent pass.
4. Only after the three faces agree — or every disagreement is logged as a finding — proceed to the per-protocol checks below; when enrichment adds spec/test content, re-review the package against the enriched spec.
NEVER mark review PASS while any spec/test/code face disagrees without a logged finding. The diff is the entry point; the package is the unit of judgment.

### Evidence-Based Reasoning
Speculation is FORBIDDEN. Every claim needs proof.
1. Cite file:line, grep results, or framework docs for EVERY claim
2. Declare confidence: >80% act freely, 60-80% verify first, <60% DO NOT recommend
3. Cross-service validation required for architectural changes
4. "I don't have enough evidence" is valid and expected output
BLOCKED until: Evidence file path (file:line) provided; Grep search performed; 3+ similar patterns found; Confidence level stated.
Forbidden without proof: "obviously", "I think", "should be", "probably", "this is because".
If incomplete → output: "Insufficient evidence. Verified: [...]. Not verified: [...]."

### Bug Detection
MUST check categories 1-4 for EVERY review. Never skip.
1. Null Safety: Can params/returns be null? Are they guarded? Optional chaining gaps? .find() returns checked?
2. Boundary Conditions: Off-by-one (< vs <=)? Empty collections handled? Zero/negative values? Max limits?
3. Error Handling: Try-catch scope correct? Silent swallowed exceptions? Error types specific? Cleanup in finally?
4. Resource Management: Connections/streams closed? Subscriptions unsubscribed on destroy? Timers cleared? Memory bounded?
5. Concurrency (if async): Missing await? Race conditions on shared state? Stale closures? Retry storms?
6. Stack-Specific: Check the configured language/runtime pitfalls and framework-specific failure modes discovered from local code.
Classify: CRITICAL (crash/corrupt) → FAIL | HIGH (incorrect behavior) → FAIL | MEDIUM (edge case) → WARN | LOW (defensive) → INFO.

### Design Patterns Quality
Priority checks for every code change:
1. DRY via OOP: Same-suffix classes (*Entity, *Dto, *Service) MUST share base class. 3+ similar patterns → extract to shared abstraction.
2. Right Responsibility: Logic in LOWEST layer (Entity > Domain Service > Application Service > Controller). Never business logic in controllers.
3. SOLID: Single responsibility (one reason to change). Open-closed (extend, don't modify). Liskov (subtypes substitutable). Interface segregation (small interfaces). Dependency inversion (depend on abstractions).
4. After extraction/move/rename: Grep ENTIRE scope for dangling references. Zero tolerance.
5. YAGNI gate: NEVER recommend patterns unless 3+ occurrences exist. Don't extract for hypothetical future use.
Anti-patterns to flag: God Object, Copy-Paste inheritance, Circular Dependency, Leaky Abstraction.

### Logic & Intention Review
Verify WHAT code does matches WHY it was changed.
1. Change Intention Check: Every changed file MUST serve the stated purpose. Flag unrelated changes as scope creep.
2. Happy Path Trace: Walk through one complete success scenario through changed code.
3. Error Path Trace: Walk through one failure/edge case scenario through changed code.
4. Acceptance Mapping: If plan context available, map every acceptance criterion to a code change.
5. Tests Verify Intent: For test/spec changes, verify tests name the protected business rule or invariant and would fail if that intent breaks.
6. Migration Test Exclusion: Do not write tests for migration code. Schema/data migrations are one-time execution paths, not core application logic.
NEVER mark review PASS without completing both traces (happy + error path).

### Test Spec Verification
Map changed code to test specifications.
1. Identify the project's test/spec format from existing docs, test-case files, BDD feature files, or spec folders.
2. Every changed code path MUST map to a corresponding test case/spec (or flag as "needs test case").
3. New functions/endpoints/handlers → flag for test spec creation.
4. Migration files are excluded from test/spec creation; schema/data migrations are one-time execution paths, not core application logic.
5. If spec evidence fields exist, verify they point to actual code (file:line, not stale references).
6. Verify each meaningful test case names the business intent/invariant; flag behavior-only cases that only mirror implementation details.
7. Auth/data changes → verify corresponding authorization and data-state test cases exist.
8. If no specs exist for a changed path → log the gap and recommend the project's test-spec workflow.
NEVER skip test mapping. Untested code paths are the #1 source of production bugs.

### Behavioral Delta Matrix
MANDATORY for any bugfix review. Produce input-state × pre-fix × post-fix × delta table BEFORE writing verdict.
- Minimum 3 rows; include at least one row OUTSIDE the original bug report.
- Any "REGRESSION" delta → review returns FAIL until a preservation test is added.
- Narrative descriptions do NOT substitute for the matrix.
Example rows (external-record sync fix):
| Input                 | Pre-fix | Post-fix                  | Delta      |
| --------------------- | ------- | ------------------------- | ---------- |
| Record exists (valid) | Reused  | Always recreated → orphan | REGRESSION |
| Record missing (404)  | Error   | Recreated                 | Fixed      |

### Fix-Layer Accountability
NEVER fix at the crash site. Trace the full flow, fix at the owning layer. The crash site is a SYMPTOM, not the cause.
MANDATORY before ANY fix:
1. Trace full data flow — Map the complete path from data origin to crash site across ALL layers (storage → backend → API → frontend → UI). Identify where bad state ENTERS, not where it CRASHES.
2. Identify the invariant owner — Which layer's contract guarantees this value is valid? Fix at the LOWEST layer that owns the invariant, not the highest layer that consumes it.
3. One fix, maximum protection — If fix requires touching 3+ files with defensive checks, you are at the wrong layer — go lower.
4. Verify no bypass paths — Confirm all data flows through the fix point. Check for direct construction skipping factories, clone/spread without re-validation, raw data not wrapped in domain models, mutations outside the model layer.
BLOCKED until: Full data flow traced (origin → crash); Invariant owner identified with file:line evidence; All access sites audited (grep count); Fix layer justified (lowest layer that protects most consumers).
Anti-patterns (REJECT): "Fix it where it crashes" (crash site ≠ cause site, trace upstream); "Add defensive checks at every consumer" (scattered defense = wrong layer); "Both fix is safer" (pick ONE authoritative layer).

### Rationalization Prevention
AI skips steps via these evasions. Recognize and reject:
- "Too simple for a plan" → Simple + wrong assumptions = wasted time. Plan anyway.
- "I'll test after" → RED before GREEN. Write/verify test first.
- "Already searched" → Show grep evidence with file:line. No proof = no search.
- "Just do it" → Still need TaskCreate. Skip depth, never skip tracking.
- "Just a small fix" → Small fix in wrong location cascades. Verify file:line first.
- "Code is self-explanatory" → Future readers need evidence trail. Document anyway.
- "Combine steps to save time" → Combined steps dilute focus. Each step has distinct purpose.

### Graph-Assisted Investigation
MANDATORY when .code-graph/graph.db exists.
HARD-GATE: MUST run at least ONE graph command on key files before concluding any investigation.
Pattern: Grep finds files → trace --direction both reveals full system flow → Grep verifies details.
- Investigation/Scout: trace --direction both on 2-3 entry files
- Fix/Debug: callers_of on buggy function + tests_for
- Feature/Enhancement: connections on files to be modified
- Code Review: tests_for on changed functions
- Blast Radius: trace --direction downstream
CLI: python .claude/scripts/code_graph {command} --json. Use --node-mode file first (10-30x less noise), then --node-mode function for detail.

### Understand Code First
HARD-GATE: Do NOT write, plan, or fix until you READ existing code.
1. Search 3+ similar patterns (grep/glob) — cite file:line evidence.
2. Read existing files in target area — understand structure, base classes, conventions.
3. Run python .claude/scripts/code_graph trace <file> --direction both --json when .code-graph/graph.db exists.
4. Map dependencies via connections or callers_of — know what depends on your target.
5. Write investigation to .ai/workspace/analysis/ for non-trivial tasks (3+ files).
6. Re-read analysis file before implementing — never work from memory alone.
7. NEVER invent new patterns when existing ones work — match exactly or document deviation.
BLOCKED until: Read target files; Grep 3+ patterns; Graph trace (if graph.db exists); Assumptions verified with evidence.

## Reference Docs (READ before reviewing)
- {resolved project styling rules doc}
- {resolved project design-system/token doc, especially Z-Index & Layering}
- {resolved project frontend architecture/patterns doc}
- {resolved project code-review rules doc}

## Target Files
{explicit file list OR "run git diff and filter by the project frontend path/extension patterns"}

## Output
Write a structured report to plans/reports/ui-review-round{N}-{date}.md with sections:
- Status: PASS | FAIL
- Issue Count: {number}
- Critical Issues (with file:line evidence)
- High Priority Issues (with file:line evidence)
- Medium / Low Issues
- Cross-cutting findings (cross-system token mixing, shared-component fan-out)

Return the report path and status to the main agent.
Every finding MUST have file:line evidence. Speculation is forbidden.
`
})

Rules

• DO copy the template wholesale — including all 11 embedded protocol sections
• DO replace only the {placeholders} in Task / Round / Reference Docs / Target Files / Output sections with context-specific content
• DO keep the UI/UX-specialized subagent_type for UI reviews when the local catalog provides it (see Sub-Agent Type Override above)
• DO NOT paraphrase, summarize, or skip any protocol section
• DO NOT pass file contents inline — the sub-agent reads via its own tool calls so it has a fresh context
• DO NOT reference protocols by file path or tag name — the bodies are already embedded above
• DO NOT introduce placeholder markers for the protocols — they must stay literally expanded

Critical Purpose: UI quality — no content overflow without escape, no broken responsive layouts, no fixed sizing fighting the viewport, no z-index escalation wars, no styling/BEM drift.

External Memory: Complex/lengthy work → write findings to plans/reports/. Prevents context loss, serves as deliverable.

Evidence Gate: MANDATORY — every finding requires file:line proof + confidence percentage (>80% act, <80% verify first).

fresh-context-review is intentionally OVERRIDE-only in this skill — see the OVERRIDE:fresh-context-review block above (it uses the UI/UX-specialized ui-ux-designer subagent_type, NOT the generic code-reviewer). The generic SYNC:fresh-context-review copy is deliberately omitted here so the two cannot drift into a code-reviewer vs ui-ux-designer contradiction. This mirrors how OVERRIDE:review-protocol-injection is handled (override-only, no generic SYNC copy). Do NOT re-add the generic SYNC:fresh-context-review block — the sync-inline-versions.md propagation only updates existing SYNC: markers, so omission is stable.

Graph-Assisted Investigation — MANDATORY when .code-graph/graph.db exists.

HARD-GATE: MUST ATTENTION run at least ONE graph command on key files before concluding any investigation.

Pattern: Grep finds files → trace --direction both reveals full system flow → Grep verifies details

Task	Minimum Graph Action
Investigation/Scout	trace --direction both on 2-3 entry files
Fix/Debug	callers_of on buggy function + tests_for
Feature/Enhancement	connections on files to be modified
Code Review	tests_for on changed functions
Blast Radius	trace --direction downstream

CLI: python .claude/scripts/code_graph {command} --json. Use --node-mode file first (10-30x less noise), then --node-mode function for detail.

Nested Task Expansion Contract — For workflow-step invocation, the [Workflow] ... row is only a parent container; the child skill still creates visible phase tasks.

1. Call TaskList first. If a matching active parent workflow row exists, set nested=true and record parentTaskId; otherwise run standalone.
2. Create one task per declared phase before phase work. When nested, prefix subjects [N.M] $skill-name — phase.
3. When nested, link the parent with TaskUpdate(parentTaskId, addBlockedBy: [childIds]).
4. Orchestrators must pre-expand a child skill's phase list and link the workflow row before invoking that child skill or sub-agent.
5. Mark exactly one child in_progress before work and completed immediately after evidence is written.
6. Complete the parent only after all child tasks are completed or explicitly cancelled with reason.

Blocked until: TaskList done, child phases created, parent linked when nested, first child marked in_progress.

Project Reference Docs Gate — Run after task-tracking bootstrap and before target/source file reads, grep, edits, or analysis. Project docs override generic framework assumptions.

1. Identify scope: file types, domain area, and operation.
2. Required docs by trigger: always docs/project-reference/lessons.md; doc lookup docs-index-reference.md; review code-review-rules.md; backend/CQRS/API backend-patterns-reference.md; domain/entity domain-entities-reference.md; frontend/UI frontend-patterns-reference.md; styles/design scss-styling-guide.md + design-system/design-system-canonical.md; integration tests integration-test-reference.md; E2E e2e-test-reference.md; feature docs/specs feature-spec-reference.md + spec-system-reference.md + spec-principles.md; behavior/public-contract/spec-test-code sync workflow-spec-test-code-cycle-reference.md; derived spec index/ERD/reimplementation guides spec-system-reference.md + source Feature Specs under docs/specs/; architecture/new area project-structure-reference.md.
3. Read every required doc. If docs/project-config.json, the docs index, lessons.md, CLAUDE.md, AGENTS.md, or any task-required reference doc is missing or stale, auto-run /project-init or the narrow lower-level route (/project-config, /docs-init, /scan-all, /scan --target=<key>, /claude-md-init) before ordinary project-specific work. If Codex mirrors or AGENTS.md are missing/stale, ask the user to run /sync-codex; do not auto-run it.
4. Before target work, state: Reference docs read: ... | Not applicable: ....

Ready when: scope evaluated, required docs checked/read or setup route completed, lessons.md confirmed, citation emitted.

Task Tracking & External Report Persistence — Bootstrap this before execution; then run project-reference doc prefetch before target/source work.

1. Create a small task breakdown before target file reads, grep, edits, or analysis. On context loss, inspect the current task list first.
2. Mark one task in_progress before work and completed immediately after evidence; never batch transitions.
3. For plan/review work, create plans/reports/{skill}-{YYMMDD}-{HHmm}-{slug}.md before first finding.
4. Append findings after each file/section/decision and synthesize from the report file at the end.
5. Final output cites Full report: plans/reports/{filename}.

Blocked until: task breakdown exists, report path declared for plan/review work, first finding persisted before the next finding.

Sub-Agent Return Contract — When this skill spawns a sub-agent, the sub-agent MUST return ONLY this structure. Main agent reads only this summary — NEVER requests full sub-agent output inline.

## Sub-Agent Result: [skill-name]

Status: ✅ PASS | ⚠️ PARTIAL | ❌ FAIL
Confidence: [0-100]%

### Findings (Critical/High only — max 10 bullets)

- [severity] [file:line] [finding]

### Actions Taken

- [file changed] [what changed]

### Blockers (if any)

- [blocker description]

Full report: plans/reports/[skill-name]-[date]-[slug].md

Main agent reads Full report file ONLY when: (a) resolving a specific blocker, or (b) building a fix plan. Sub-agent writes full report incrementally (per SYNC:incremental-persistence) — not held in memory.

Context budget — the return payload is a SUMMARY, not a transcript: ≤10 finding bullets, no raw file contents / full diffs / verbatim logs inline, no re-pasted source. Everything beyond the summary lives in the Full report on disk. A sub-agent that would exceed the summary shape MUST write the detail to its report and return only the pointer — the orchestrator's context is the scarce resource the whole map-reduce protects.

Critical Thinking Mindset — Apply critical thinking, sequential thinking. Every claim needs traced proof, confidence >80% to act. Anti-hallucination: Never present guess as fact — cite sources for every claim, admit uncertainty freely, self-check output for errors, cross-reference independently, stay skeptical of own confidence — certainty without evidence root of all hallucination.

Sequential Thinking Protocol — Structured multi-step reasoning for complex/ambiguous work. Use when planning, reviewing, debugging, or refining ideas where one-shot reasoning is unsafe.

Trigger when: complex problem decomposition · adaptive plans needing revision · analysis with course correction · unclear/emerging scope · multi-step solutions · hypothesis-driven debugging · cross-cutting trade-off evaluation.

Format (explicit mode — visible thought trail):

1. Thought N/M: [aspect] — one aspect per thought, state assumptions/uncertainty
2. Thought N/M [REVISION of Thought K]: ... — when prior reasoning invalidated; state Original / Why revised / Impact
3. Thought N/M [BRANCH A from Thought K]: ... — explore alternative; converge with decision rationale
4. Thought N/M [HYPOTHESIS]: ... then [VERIFICATION]: ... — test before acting
5. Thought N/N [FINAL] — only when verified, all critical aspects addressed, confidence >80%

Mandatory closers: Confidence % stated · Assumptions listed · Open questions surfaced · Next action concrete.

Stop conditions: confidence <80% on any critical decision → escalate via AskUserQuestion · ≥3 revisions on same thought → re-frame the problem · branch count >3 → split into sub-task.

Implicit mode: apply methodology internally without visible markers when adding markers would clutter the response (routine work where reasoning aids accuracy).

Deep-dive: see /sequential-thinking skill (.claude/skills/sequential-thinking/SKILL.md) for worked examples (API design, debugging, architecture), advanced techniques (spiral refinement, hypothesis testing, convergence), and meta-strategies (uncertainty handling, revision cascades).

Evidence-Based Reasoning — Speculation is FORBIDDEN. Every claim needs proof.

1. Cite file:line, grep results, or framework docs for EVERY claim
2. Declare confidence: >80% act freely, 60-80% verify first, <60% DO NOT recommend
3. Cross-service validation required for architectural changes
4. "I don't have enough evidence" is valid and expected output

BLOCKED until: - [ ] Evidence file path (file:line) - [ ] Grep search performed - [ ] 3+ similar patterns found - [ ] Confidence level stated

Forbidden without proof: "obviously", "I think", "should be", "probably", "this is because" If incomplete → output: "Insufficient evidence. Verified: [...]. Not verified: [...]."

Design Patterns Quality — Priority checks for every code change:

1. DRY via OOP: Identify classes/modules with the same purpose, naming pattern, or lifecycle. Apply your knowledge of the project's language/framework to determine the idiomatic abstraction (base class, mixin, trait, protocol, decorator). 3+ similar patterns → extract to shared abstraction.
2. Right Responsibility: Logic in LOWEST layer (Entity > Domain Service > Application Service > Controller). Never business logic in controllers.
3. SOLID: Single responsibility (one reason to change). Open-closed (extend, don't modify). Liskov (subtypes substitutable). Interface segregation (small interfaces). Dependency inversion (depend on abstractions).
4. After extraction/move/rename: Grep ENTIRE scope for dangling references. Zero tolerance.
5. YAGNI gate: NEVER recommend patterns unless 3+ occurrences exist. Don't extract for hypothetical future use.

Anti-patterns to flag: God Object, Copy-Paste inheritance, Circular Dependency, Leaky Abstraction.

Serial Attention for Design Quality — Scan one quality dimension at a time (serial passes), not all concerns at once. — why: split attention misses violations that single-focus passes catch.

1. Identify applicable dimensions — Based on the code's language, domain, and patterns, determine which quality dimensions apply: DRY, SOLID principles (SRP/OCP/LSP/ISP/DIP), OOP idioms, cohesion/coupling, GRASP, Law of Demeter, CQRS invariants, etc. Your list is NOT fixed — derive from what the code actually does.
2. One focused pass per dimension — Dedicate single-focus attention to EACH dimension in sequence. Do NOT mix concerns across passes.
3. Threshold: 3+ similar patterns = MANDATORY extraction — Not optional suggestion. Flag as mandatory structural fix requiring action.
4. 2+ violations of same kind = structural finding — Report as "pattern problem" needing architectural resolution, not a list of individual instances.

Complexity Prevention (UI-scoped) — measure code by cost of change: one UI change should map to one code change. The full backend-OOP treatise (anemic models, primitive obsession, value objects, repo leakage) does not apply to UI review and is intentionally not carried here. UI-relevant essence: (1) extract repeated component lifecycle — 3+ forms/list views reimplementing loading/dirty/submit/pagination → base component / hook / composable / mixin; (2) keep derivations, formatting, and validation off the template — move them onto the model / store / view-model / API service, not inline in the component. For deeper OOP/DRY structural review of any backend the UI calls, defer to /review-changes / /review-architecture.

Validated-Finding Fix + Full Re-Review Loop — Re-review is triggered by a validated finding fix cycle, not by a round number. Review purpose: review → validate findings → fix validated findings → full re-review until a complete review pass finds no issues. A clean review ENDS the loop — no further rounds required.

Round 1: Main-session review. Read target files, build understanding, note issues. Output findings + verdict (PASS / FAIL).

Decision after Round 1:

• No issues found (PASS, zero findings) → review ENDS. Do NOT spawn a fresh sub-agent for confirmation.
• Issues found (FAIL, or any non-zero findings) → run the active review skill's findings-validation gate first; for review skills the default gate is /why-review --validate-findings <report-path>. Fix only validated findings, then restart the full review protocol from the beginning with a fresh task breakdown.

Fresh full re-review after every fix cycle: Re-run the whole review protocol over the current full target. When sub-agents are part of that protocol, spawn NEW Agent calls — never reuse prior agents. Reviewers re-read ALL files from scratch with ZERO memory of prior rounds. See SYNC:fresh-context-review for the spawn mechanism and SYNC:review-protocol-injection for the canonical Agent prompt template. Each fresh full review must catch:

• Cross-cutting concerns missed in the prior round
• Interaction bugs between changed files
• Convention drift (new code vs existing patterns)
• Missing pieces that should exist but don't
• Subtle edge cases the prior round rationalized away
• Regressions introduced by the fixes themselves

Loop termination: After each full re-review, repeat the same decision: clean → END; issues → validate findings → fix → restart from the first review phase. Continue until a complete review pass finds zero issues. If the same validated finding repeats for 3 full invocations with no progress, or a fix requires product/owner input, escalate via AskUserQuestion.

Rules:

• A clean Round 1 ENDS the review — no mandatory Round 2
• NEVER fix unvalidated findings; validate first using the caller's validation gate
• NEVER skip the full re-review after a fix cycle (every fix invalidates the prior verdict)
• NEVER reuse a sub-agent across rounds — every iteration that uses sub-agents spawns NEW Agent calls
• Main agent READS sub-agent reports but MUST NOT filter, reinterpret, or override findings

Source/test drift check. For coding, fix, debug, investigation, test, or review work: when source behavior changes, inspect affected unit/integration/E2E tests and decide from evidence whether tests should change to match intended behavior or the source change is an unintended bug to fix. Do not write tests for migration code; schema/data migrations are one-time execution paths, not core application logic.

Understand Code First — HARD-GATE: Do NOT write, plan, or fix until you READ existing code.

1. Search 3+ similar patterns (grep/glob) — cite file:line evidence
2. Read existing files in target area — understand structure, base classes, conventions
3. Run python .claude/scripts/code_graph trace <file> --direction both --json when .code-graph/graph.db exists
4. Map dependencies via connections or callers_of — know what depends on your target
5. Write investigation to .ai/workspace/analysis/ for non-trivial tasks (3+ files)
6. Re-read analysis file before implementing — never work from memory alone. — why: long context drifts from the file; the file is ground truth
7. NEVER invent new patterns when existing ones work — match exactly or document deviation. — why: divergent patterns fragment the codebase and slow every future reader

BLOCKED until: - [ ] Read target files - [ ] Grep 3+ patterns - [ ] Graph trace (if graph.db exists) - [ ] Assumptions verified with evidence

AI Mistake Prevention — Failure modes to avoid on every task:

Re-read files after context changes. Context compaction, resume, or long-running work can make memory stale; verify current files before acting. Verify generated content against source evidence. AI hallucinates APIs, names, claims, and document facts. Check the relevant source before documenting or referencing. Check downstream references before deleting or renaming. Removing an artifact can stale docs, generated mirrors, configs, and callers; map references first. Trace the full impact chain after edits. Changing a definition can miss derived outputs and consumers. Follow the affected chain before declaring done. Verify ALL affected outputs, not just the first. One green check is not all green checks; validate every output surface the change can affect. Assume existing values are intentional — ask WHY before changing. Before changing a constant, limit, flag, wording, or pattern, read nearby context and history. Surface ambiguity before acting — don't pick silently. Multiple valid interpretations require an explicit question or stated assumption with risk. Keep shared guidance role-relevant. Universal guidance must help every receiving skill or agent; code-specific obligations belong only in code-specific protocols.

Systematic Review Batching (map-reduce) — When a changeset is large, do NOT review files one-by-one. Partition into size-capped batches, fire one specialized sub-agent per batch in parallel, then reduce. This bounds EVERY context — each batch agent AND the orchestrator — so coverage stays complete as file count grows.

Trigger ladder (one ordered escalation — not competing thresholds):

1. < 10 changed files → sequential per-file review (default; no batching).
2. ≥ 10 changed files → switch to systematic parallel mode. Announce: "Detected {N} changed files. Switching to systematic parallel review protocol." Then: categorize → size-capped batches → flat consolidation.
3. categories > 6 OR files > 40 → additionally insert the hierarchical synthesis tier (below). Everything from rung 2 still applies.

Step 1 — Categorize. Group changed files into logical categories derived from the project's actual structure (not forced). Category is the concern axis; orient with these examples, derive what fits the repository:

Category Type	Example Groupings
Agent/Tooling	AI scripts, hooks, skill definitions, workflow configs, linting rules
Root config/docs	Root README, project config, CI/CD pipeline configs
Reference docs	Architecture docs, patterns references, setup guides
Feature/domain docs	Business feature documentation, spec files, ADRs
Backend logic	Service/handler/controller source (infer from project structure)
Frontend logic	UI component/state/API source (infer from project structure)
Data/Schema	Migrations, schema files, seed data
Tests	Unit, integration, E2E test files
Infrastructure	Docker, k8s, CI/CD, cloud manifests

Step 2 — Size-capped batches. One sub-agent per batch of ≤8 files OR ≤2000 diff-lines, whichever hits first. Category stays the concern axis, but any category exceeding a cap splits into multiple size-capped batches (30 backend files → 4 batches). Size caps — not category caps — make "many files" safe: a category cap alone lets one giant category blow a single agent's context.

Step 2a — Sub-agent type per batch (match the batch's dominant concern):

Severity Rubric — Classify every finding by consequence, not by how easy it is to fix. One scale across all reviews so a "High" means the same thing everywhere.

Severity	Action	Definition
CRITICAL	Block merge	Silent runtime failure, data corruption, validation bypass, security hole
HIGH	Must fix	Incorrect behavior, invariant gap, architectural violation
MEDIUM	Should fix	Design debt, maintainability, likely future bug
LOW	Nice to fix	Convention, documentation, minor clarity

Score-based skills map their numeric scale onto these tiers — do not invent a parallel vocabulary:

• 0-2 criterion scoring (e.g. production-readiness-review): 0 = CRITICAL/HIGH (criterion unmet, blocks production readiness), 1 = MEDIUM (partial, should fix), 2 = pass (no finding).
• Two-axis scoring (e.g. performance-review, impact × likelihood): map the resulting cell to the nearest tier — high-impact + high-likelihood → CRITICAL/HIGH; low-impact OR low-likelihood → MEDIUM/LOW.

A finding's tier drives the gate: CRITICAL/HIGH must be resolved or explicitly accepted by the owner before PASS; MEDIUM/LOW may ship with a tracked follow-up.

Category Review Thinking — A thinking framework for reviewing any category of changed files. NOT a fixed checklist — derive concerns from domain knowledge; the examples are starting points only. Your knowledge of the category exceeds any list here — trust it.

Step 1 — Understand the category's role. What is this category responsible for in the overall system? What invariants must it uphold? What are its consumer contracts (who depends on it, what do they expect)?

Step 2 — Read project conventions for this category. Search for reference docs, style guides, ADRs, or READMEs specific to this area. Grep 3+ existing similar files — extract naming conventions, structural patterns, shared base classes. If no docs exist, derive conventions empirically from existing code.

Step 3 — Derive concerns from first principles. Apply all that are relevant; expand beyond this list based on the actual category:

• Correctness: Does the logic match the intent? Trace happy path AND error path.
• Boundary contracts: Are interfaces/APIs/events/protocols honored? No implicit coupling introduced?
• Project conventions: Does new code follow the patterns found in Step 2? Evidence-confirmed, not assumed.
• Security: Auth enforced at every entry point? Input validated at boundaries? No secrets in the diff?
• Performance: Unbounded operations? N+1 patterns? Blocking calls in async context? Unindexed queries?
• Maintainability: DRY? Single responsibility? Complexity within reason? Names reveal intent?
• Test coverage: Are the changed paths covered by tests? Are existing tests still valid after the change?
• Documentation: Do related docs, specs, or READMEs reflect the changes?

Step 4 — Create sub-tasks and execute. For each identified concern: create a TaskCreate sub-task, work through it with file:line evidence, mark done. No findings without proof.

Illustrative concern examples by category type (not exhaustive — trust your knowledge beyond this):

• Server-side logic: handler/service structure conventions, validation layer placement, side-effect isolation, cross-service boundary enforcement, data-access layer separation, error propagation strategy
• Client-side logic: component lifecycle management, resource cleanup (subscriptions, listeners, timers), state management patterns, API integration layer separation, reactive stream composition

IMPORTANT MUST ATTENTION cite file:line evidence for every claim. Confidence >80% to act, <60% = do NOT recommend.

IMPORTANT MUST ATTENTION check DRY via OOP, right responsibility layer, SOLID. Grep for dangling refs after moves.

IMPORTANT MUST ATTENTION run at least ONE graph command on key files when graph.db exists. Pattern: grep → trace → verify.

IMPORTANT MUST ATTENTION when source behavior changes, inspect affected tests; decide from evidence whether tests update to match intent or the source change is an unintended bug.

IMPORTANT MUST ATTENTION search 3+ existing patterns and read code BEFORE any modification. Run graph trace when graph.db exists.

IMPORTANT MUST ATTENTION every spawned sub-agent returns report path + status + severity counts; appends findings per-file (never batched); main agent integrates verbatim, never filters.

MUST ATTENTION apply critical + sequential thinking — every claim needs appropriate traced evidence (file:line for repo/code claims; source URL or artifact section for research, product, content, and docs claims); confidence >80% to act, <60% DO NOT recommend. Anti-hallucination: never present guess as fact, admit uncertainty freely, cross-reference independently, stay skeptical of own confidence.

MUST ATTENTION apply sequential-thinking — multi-step Thought N/M, REVISION/BRANCH/HYPOTHESIS markers, confidence % closer; see /sequential-thinking skill.

MUST ATTENTION apply AI mistake prevention — verify generated content against evidence, trace downstream references before deleting or renaming, verify all affected outputs, re-read files after context loss, and surface ambiguity before acting.

• MANDATORY Bootstrap task tracking before target work; transition one task at a time.
• MANDATORY Persist plan/review findings to plans/reports/ incrementally and synthesize from disk.

• MANDATORY After task-tracking bootstrap and before target/source work, read required project-reference docs and cite Reference docs read: ....
• MANDATORY Always include lessons.md; project conventions override generic defaults.
• MANDATORY If project config, root instruction files, or any required reference doc is missing, stop and run or ask the user to run /project-init.

• MANDATORY Parent workflow rows do not replace child phase tracking; expand phases and link the parent when nested.
• MANDATORY Orchestrators pre-expand child skill phases before invocation; use [N.M] $skill-name — phase prefixes and one-in_progress discipline.

Prompt-Enhance Closing Anchors

IMPORTANT MUST ATTENTION follow declared step order for this skill; NEVER skip, reorder, or merge steps without explicit user approval IMPORTANT MUST ATTENTION for every step/sub-skill call: set in_progress before execution, set completed after execution IMPORTANT MUST ATTENTION every skipped step MUST include explicit reason; every completed step MUST include concise evidence IMPORTANT MUST ATTENTION if Task tools unavailable, maintain an equivalent step-by-step plan tracker with synchronized statuses

• MANDATORY Large changeset → batch by size cap (≤8 files OR ≤2000 diff-lines), one parallel sub-agent per batch; never review many files one-by-one.
• MANDATORY > 6 categories OR > 40 files → add the hierarchical synthesis tier; each concern-synthesizer emits cross-concern interaction candidates and the orchestrator runs the cross-concern pass before concluding.

• MANDATORY Classify findings Critical/High/Medium/Low by consequence; Critical/High block PASS until fixed or owner-accepted.
• MANDATORY Score-based skills (sre 0-2, perf two-axis) map onto the same four tiers — no parallel severity vocabulary.

• MANDATORY Derive review categories from file language + directory semantics + change nature; create a sub-task per category.
• MANDATORY Derive each category's concerns from first principles with file:line evidence — never a fixed checklist.

Closing Reminders

IMPORTANT MUST ATTENTION Goal: Ensure frontend/UI changes survive real content, responsive layouts, layering, and styling conventions before handoff.

Protocols in force (concise digest of the SYNC/shared blocks this skill carries — MUST ATTENTION honor each canonical body above):

• Graph-Assisted Investigation: Run graph command on key files first.
• Nested Task Creation: Expand child phases; link parent when nested.
• Project Reference Docs Guide: Read project docs before reviewing.
• Task Tracking External Report: Track tasks; persist findings incrementally.
• Subagent Return Contract: Sub-agent returns summary plus report path.
• Critical Thinking Mindset: Traced proof per claim; never guess.
• Sequential Thinking Protocol: Multi-step reasoning; state confidence closer.
• Evidence-Based Reasoning: Cite file:line; >80% to act.
• Design Patterns Quality: DRY, layered responsibility, SOLID; grep dangling.
• Double Round-Trip Review: Validate, fix, full re-review until clean.
• Source-Test Drift Check: Source changes; inspect affected tests.
• Understand Code First: Read code, grep 3+, before changing.
• AI Mistake Prevention: verify generated content against evidence, trace downstream references, verify all affected outputs, re-read after context loss, surface ambiguity.
• Systematic Review Batching: Large changeset; parallel size-capped batches.
• Severity Rubric: Classify by consequence; NEVER pass Critical/High.
• Category Review Thinking: Derive concerns first-principles, never fixed checklist.

MUST ATTENTION break work into small tasks using TaskCreate BEFORE starting MUST ATTENTION resolve and read project UI/styling docs BEFORE reviewing — rules come from docs, not general knowledge MUST ATTENTION SKIP this skill when no files match the project frontend path/extension patterns MUST ATTENTION every violation requires file:line proof — NEVER speculate MUST ATTENTION grep 3+ counterexamples before flagging any pattern violation MUST ATTENTION z-index with !important and chained BEM modifiers are HARD-GATE BLOCKED MUST ATTENTION NEVER mix incompatible project token systems in one file — recommend whichever system the file already imports/uses MUST ATTENTION after validated UI fixes, rerun the full UI review; when that protocol uses a fresh reviewer, use the UI/UX-specialized sub-agent from the local sub-agent selection guide MUST ATTENTION run at least ONE graph command on key files when graph.db exists MUST ATTENTION NEVER fix code — review and report only MUST ATTENTION apply Think: reasoning prompt before checking each category — derive violations, don't recite checklists MUST ATTENTION use AskUserQuestion to present next steps after completing review

Anti-Rationalization:

Evasion	Rebuttal
"Too simple for a UI review"	Simple templates still overflow on a 200-char value. Apply all 5 categories.
"Already read the docs"	Show the extracted rule (mixin name, token name) — no recall = no read.
"Just flag obvious z-index literals"	Gray areas matter most. Trace the surface's semantic layer before recommending a token.
"Fixed width is fine, it looks right"	Looks right at 1440px ≠ usable at 320px. Apply the flex/min-max decision rule.
"web-design-guidelines already covers UI"	That is a11y/UX, not the project styling gate. Different scope — do both.

---

Closing reminder — Easy to Change is the success metric. Every finding, token, mixin, and layout must answer one question: does this make the next change cheaper or more expensive? If it doesn't reduce future change cost, reject it. Magic values, duplicated styling knowledge, fixed sizing that fights the viewport, cross-system token mixing, and z-index escalation wars are the real enemies — call them out by name.