UI Review Report — {date} Skill

Codex compatibility note:

Invoke repository skills with $skill-name in Codex; this mirrored copy rewrites legacy Claude /skill-name references.

Task tracker mandate: BEFORE executing any workflow or skill step, create/update task tracking for all steps and keep it synchronized as progress changes.

User-question prompts mean to ask the user directly in Codex.

Ignore Claude-specific mode-switch instructions when they appear.

Strict execution contract: when a user explicitly invokes a skill, execute that skill protocol as written.

Subagent authorization: when a skill is user-invoked or AI-detected and its protocol requires subagents, that skill activation authorizes use of the required spawn_agent subagent(s) for that task.

Do not skip, reorder, or merge protocol steps unless the user explicitly approves the deviation first.

For workflow skills, execute each listed child-skill step explicitly and report step-by-step evidence.

If a required step/tool cannot run in this environment, stop and ask the user before adapting.

Codex Project-Reference Loading (No Hooks)

Codex uses static project-reference loading instead of runtime-injected project docs. When coding, planning, debugging, testing, or reviewing, open project docs explicitly using this routing.

Always read:

docs/project-config.json (project-specific paths, commands, modules, and workflow/test settings)
docs/project-reference/docs-index-reference.md (routes to the full docs/project-reference/* catalog)
docs/project-reference/lessons.md (always-on guardrails and anti-patterns)

Missing/stale context route: 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 setup 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.

Situation-based docs:

Backend/CQRS/API/domain/entity changes: backend-patterns-reference.md, domain-entities-reference.md, project-structure-reference.md
Frontend/UI/styling/design-system: frontend-patterns-reference.md, scss-styling-guide.md, design-system/README.md
Spec authoring, docs/specs/ pathing, or TC format: feature-spec-reference.md, spec-system-reference.md, spec-principles.md
Behavior/public-contract changes or spec-test-code sync: workflow-spec-test-code-cycle-reference.md plus the spec docs above
Derived spec indexes/ERDs/reimplementation guides: spec-system-reference.md and source Feature Specs under docs/specs/
Integration test implementation/review: integration-test-reference.md
E2E test implementation/review: e2e-test-reference.md
Code review/audit work: code-review-rules.md plus domain docs above based on changed files

Do not read all docs blindly. Start from docs-index-reference.md, then open only relevant files for the task.

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

Project styling rules doc — BEM convention, mixins, variables, responsive patterns (READ FIRST — primary styling rules source; resolve via project config/docs index)

Project design-system/token doc — design tokens, especially the Z-Index & Layering section

Project frontend architecture/patterns doc — base component classes, state/store, API service, lifecycle teardown rules shared with review-architecture

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:

Phase 0: Load UI Rules — Resolve and read the four project UI/styling rule docs above
Phase 1: Determine Scope — Changed frontend files (default) or user-specified scope
Phase 2: Blast Radius — Run graph trace if graph.db exists
Phase 3: UI Category Review — Check each file against all 5 applicable categories
Phase 4: Finalize — Generate compliance report with PASS/BLOCKED/WARN verdicts
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

<task> $ARGUMENTS </task>

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)

Categorize — Group files by app / shared-library / component concern
Parallel Sub-Agents — Launch one UI/UX-specialized sub-agent per group with the UI-category checklist
Synchronize — Collect findings, cross-reference shared-component consumers and cross-system token mixing
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:

Read own finalized report from plans/reports/ui-review-{date}-{slug}.md (the exact path written in Phase 3 — NOT {skill}-…)
Invoke $why-review --validate-findings plans/reports/ui-review-{date}-{slug}.md
Read the validation verdict path returned by why-review, expected as plans/reports/why-review-validate-{date}.md
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
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."
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:

Create a fresh fix-cycle task list before editing. Do not reuse the review tasks.
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.
Run targeted verification for the fixed UI files and any affected consumers.
Re-invoke $review-ui from Phase 0 over the full current UI scope, not only the fixed files.
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.
Repeat validate → fix → full UI re-review until a complete pass has zero findings.
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 a direct user question to ask user. Do NOT judge task complexity or decide "simple enough to skip" — user decides, not you:

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.

Execute $review-ui directly — run this skill standalone

Next Steps

MANDATORY — NO EXCEPTIONS: After completing, use a direct user question 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:

Grep every removed name. Extraction/rename/delete → grep confirms 0 dangling refs across ALL file types (SCSS @use, template class refs, TS imports)
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
Verify ALL outputs. One compiled stylesheet ≠ all consumers — a shared-component style change affects every consuming app
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
New artifact = wired artifact. Created a class/mixin? Prove it is imported, referenced in the template, and reachable

[IMPORTANT] Use task tracking 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:

Start a NEW full review invocation/task breakdown; when that protocol calls for agents, spawn a NEW spawn_agent tool call — use the UI/UX-specialized agent_type from the local sub-agent selection guide

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)

Sub-agent re-reads ALL target files from scratch via its own tool calls — never pass file contents inline in the prompt

Sub-agent writes structured report to plans/reports/{review-type}-round{N}-{date}.md

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 spawn_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 a direct user question

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 agent_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)

spawn_agent({
  description: "Fresh Round {N} UI review",
  agent_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 task tracking. 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 agent_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 agent_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.

Call the current task list first. If a matching active parent workflow row exists, set nested=true and record parentTaskId; otherwise run standalone.

Create one task per declared phase before phase work. When nested, prefix subjects [N.M] $skill-name — phase.

When nested, link the parent with TaskUpdate(parentTaskId, addBlockedBy: [childIds]).

Orchestrators must pre-expand a child skill's phase list and link the workflow row before invoking that child skill or sub-agent.

Mark exactly one child in_progress before work and completed immediately after evidence is written.

Complete the parent only after all child tasks are completed or explicitly cancelled with reason.

Blocked until: the current task list 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.

Identify scope: file types, domain area, and operation.

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.

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.

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.

Create a small task breakdown before target file reads, grep, edits, or analysis. On context loss, inspect the current task list first.

Mark one task in_progress before work and completed immediately after evidence; never batch transitions.

For plan/review work, create plans/reports/{skill}-{YYMMDD}-{HHmm}-{slug}.md before first finding.

Append findings after each file/section/decision and synthesize from the report file at the end.

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

Thought N/M: [aspect] — one aspect per thought, state assumptions/uncertainty

Thought N/M [REVISION of Thought K]: ... — when prior reasoning invalidated; state Original / Why revised / Impact

Thought N/M [BRANCH A from Thought K]: ... — explore alternative; converge with decision rationale

Thought N/M [HYPOTHESIS]: ... then [VERIFICATION]: ... — test before acting

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 ask the user directly · ≥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.

Cite file:line, grep results, or framework docs for EVERY claim

Declare confidence: >80% act freely, 60-80% verify first, <60% DO NOT recommend

Cross-service validation required for architectural changes

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

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.

Right Responsibility: Logic in LOWEST layer (Entity > Domain Service > Application Service > Controller). Never business logic in controllers.

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

After extraction/move/rename: Grep ENTIRE scope for dangling references. Zero tolerance.

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.

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.

One focused pass per dimension — Dedicate single-focus attention to EACH dimension in sequence. Do NOT mix concerns across passes.

Threshold: 3+ similar patterns = MANDATORY extraction — Not optional suggestion. Flag as mandatory structural fix requiring action.

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 spawn_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 a direct user question.

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

No arbitrary sub-agent-round cap replaces the clean-review requirement; use the 3 repeated-no-progress blocker rule only to avoid infinite spinning

Track recursive invocation count and repeated blockers in conversation context (session-scoped)

Final verdict must incorporate ALL rounds executed

Report must include ## Round N Findings (Fresh Sub-Agent) for every round N≥2 that was executed.

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.

Search 3+ similar patterns (grep/glob) — cite file:line evidence

Read existing files in target area — understand structure, base classes, conventions

Run python .claude/scripts/code_graph trace <file> --direction both --json when .code-graph/graph.db exists

Map dependencies via connections or callers_of — know what depends on your target

Write investigation to .ai/workspace/analysis/ for non-trivial tasks (3+ files)

Re-read analysis file before implementing — never work from memory alone. — why: long context drifts from the file; the file is ground truth

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

< 10 changed files → sequential per-file review (default; no batching).

≥ 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.

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

Code logic (any stack) → code-reviewer

Security-sensitive changes → security-auditor

Performance-critical paths → performance-optimizer

Docs, plans, specs, configs, infra → general-purpose

Each batch sub-agent receives: its full file list; SYNC:category-review-thinking as its primary thinking model — derive each category's concerns from first principles, NOT a fixed checklist (if the consuming skill does not carry that block, apply category-first thinking directly); project reference docs relevant to its concern (discover via *patterns*, *conventions*, *style-guide*); cross-reference verification instructions (counts, tables, links). All batch agents run in parallel and write findings to plans/reports/ (per SYNC:task-tracking-external-report); reducers read from disk, never from memory.

Step 3 — Reduce.

Flat reduction (rung 2, ≤6 categories AND ≤40 files): the orchestrator collects each batch report, cross-references counts/tables/contracts ACROSS batches, detects gaps visible only across categories (feature in code but missing from docs; new API endpoint with no client call), and consolidates into one categorized holistic report.

Hierarchical reduction (rung 3, > 6 categories OR > 40 files): insert a mid-tier — each concern gets ONE synthesizer agent that reads only its own batch reports and emits a single concern-synthesis. The orchestrator reads the concern-syntheses (~5), never the raw batch reports — keeping the reducer's context O(#concerns), not O(#files).

Cross-concern interaction pass (mandatory at rung 3 — closes the synthesis-tier blind spot): concern-siloed synthesis can drop an interaction spanning two concerns AND two batches (tainted source in data-layer/batch 7 → sink in api/batch 3). So: (a) each concern-synthesizer MUST emit an explicit "cross-concern interaction candidates" list — entities/symbols/contracts it touched that plausibly bind to another concern (shared DTOs, event names, table/collection names, exported symbols); (b) the orchestrator MUST run the Step-3 cross-reference/gap step over those candidate lists across all concern-syntheses, not only within a batch, before concluding. Without this pass the tier trades completeness for context-bounding on exactly the large diffs it targets.

Step 4 — Holistic assessment. With all findings combined, judge: overall coherence as a unified intent; cross-category sync (docs match code? contracts match callers?); risk areas where categories interact; missing doc/spec updates for changed artifacts.

No silent truncation. If any cap forces sampling or a batch is dropped for budget, ANNOUNCE the dropped/sampled scope explicitly — bounded coverage must never read as complete coverage.

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 task tracking 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

Data/Schema: migration reversibility (rollback script), lock impact on table volume, backfill idempotency, index coverage for query patterns, deployment ordering

Configuration: present in ALL environments? No secrets in diff? App fails fast if config missing (not silently null)? Documented in setup guide?

Infrastructure: dev/prod parity? No hardcoded dev values (localhost, debug flags)? Pinned image/dependency versions? CI/CD secret requirements documented?

Styles/Assets: follows project naming conventions? Uses design variables/tokens (no hardcoded magic values)? Correct scope (no global side effects from component styles)?

Documentation: accurate? Links valid? Examples still match current code/behavior? Covers new scenarios?

Tests: assertions verify specific outcomes (not just "no exception")? Idempotent (repeatable N times)? Covers edge cases, not just happy path?

Security artifacts: all code paths reach the gate? Negative tests exist (unauthorized denied)? Both enforcement AND display control updated?

Build/Tooling: rule changes apply consistently? No exceptions that silently swallow violations? Impact on CI runtime documented?

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 task tracking 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 a direct user question 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.

Hookless Prompt Protocol Mirror (Auto-Synced)

Source: .claude/.ck.json + .claude/skills/shared/sync-inline-versions.md (:full blocks) + .claude/scripts/lib/hookless-prompt-protocol.cjs

[WORKFLOW-EXECUTION-PROTOCOL] [BLOCKING] Workflow Execution Protocol — MANDATORY IMPORTANT MUST CRITICAL. Do not skip for any reason.

Generic portability boundary: Reusable skills and protocol text stay project-neutral; project-specific conventions are discovered from docs/project-config.json and docs/project-reference/. Apply shared AI-SDD from shared/sdd-artifact-contract.md. Read docs/project-config.json and docs/project-reference/docs-index-reference.md, then open the project reference docs named there. For spec, test-case, behavior-change, public-contract, or docs/specs/ work, route through the local spec docs named by the docs index: feature-spec-reference.md, spec-system-reference.md, spec-principles.md, and workflow-spec-test-code-cycle-reference.md when specs/tests/code must stay synchronized. If either file or a required reference doc is missing or stale, auto-run $project-init (or the narrow lower-level route such as $project-config, $docs-init, $scan-all, or $scan --target=<key>) before ordinary project-specific work. Any supported AI tool may execute when this shared context and local docs are available.

DETECT: If the prompt starts with an explicit slash skill/workflow command, execute it directly. Otherwise match the prompt against the workflow catalog and skill list.
ANALYZE: Choose the best option: execute directly, invoke a skill, activate a standard workflow, or compose a custom step combination.
AUTO-SELECT: Pick the best option yourself. Do not ask the user to choose between direct execution, skill, standard workflow, or custom workflow.
ACTIVATE: For a selected workflow, call $start-workflow <workflowId>; for a selected skill, invoke that skill; for a custom workflow, sequence custom steps directly; for direct execution, proceed with the task.
CREATE TASKS: task tracking for ALL workflow/skill/custom steps before execution when the selected path has multiple steps.
EXECUTE: Advance per the Workflow Step Advancement & Parallel Phases rule in your context instructions — model-driven; a sub-agent completion advances a step identically to an inline call; a parallel-phase group is an all-return barrier (advance only after ALL members return, never serialize it)

Shared AI-SDD Protocol Markers

Source: .claude/skills/shared/sync-inline-versions.md

SYNC:ai-sdd-artifact-contract

AI-SDD Artifact Contract — Shared spec-driven development rules stay portable and source-owned.

Keep reusable AI-SDD principles in .claude; put repository-specific paths, commands, owners, products, and formats in project config/reference docs.

Preserve cycle: spec -> plan -> tasks -> implement -> verify -> update spec/docs.

Trace every requirement or invariant through decision, task, TC/test, source evidence, and docs/spec update.

Treat code-to-spec extraction as reference-only until accepted by the canonical spec owner.

Any supported AI tool may plan, implement, review, or verify with synced context; using multiple tools is optional.

Update .claude source first, then sync generated mirrors; do not manually edit .agents, .codex, or AGENTS.md. — why: mirrors are generated artifacts; hand-edits are overwritten on the next sync

If docs/project-config.json, root instruction files, or a required project-reference doc is missing or stale, auto-run $project-init or the narrow lower-level route before ordinary project-specific work.

Active reference: shared/sdd-artifact-contract.md in the active skills root.

SYNC:ai-sdd-artifact-contract:reminder

MANDATORY Apply shared/sdd-artifact-contract.md; keep reusable AI-SDD in .claude and local rules in project docs.
MANDATORY Code-to-spec extraction is reference-only until canonical acceptance; any supported AI tool may execute with synced context.
MANDATORY Update .claude source before syncing generated mirrors; do not manually edit .agents, .codex, or AGENTS.md.
MANDATORY Missing or stale project config, root instruction files, or required reference docs route project-specific work through $project-init or the narrow setup route automatically. [TASK-PLANNING] [MANDATORY] BEFORE executing any workflow or skill step, create/update task tracking for all planned steps, then keep it synchronized as each step starts/completes.

[LESSON-LEARNED-REMINDER] [BLOCKING] Task Planning & Continuous Improvement — MANDATORY. Do not skip.

Break work into small tasks (task tracking) before starting. Add final task: "Analyze AI mistakes & lessons learned".

Extract lessons — ROOT CAUSE ONLY, not symptom fixes:

Name the FAILURE MODE (reasoning/assumption failure), not symptom — "assumed API existed without reading source" not "used wrong enum value".
Generality test: does this failure mode apply to ≥3 contexts/codebases? If not, abstract one level up.
Write as a universal rule — strip project-specific names/paths/classes. Useful on any codebase.
Consolidate: multiple mistakes sharing one failure mode → ONE lesson.
Recurrence gate: "Would this recur in future session WITHOUT this reminder?" — No → skip $learn.
Auto-fix gate: "Could $code-review/$code-simplifier/$security-review/$lint catch this?" — Yes → improve review skill instead.
BOTH gates pass → ask user to run $learn. [CRITICAL-THINKING-MINDSET] Apply critical thinking, sequential thinking. Every claim needs traced proof, confidence >80% to act. Anti-hallucination principle: 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. AI Attention principle (Primacy-Recency): Put the 3 most critical rules at both top and bottom of long prompts/protocols so instruction adherence survives long context windows. Goal-driven execution: Define success criteria first, loop until verified, and stop only when observable checks pass. Tests verify intent: Tests must protect business rules/invariants and fail when the protected intent breaks, not only mirror current behavior.

Common AI Mistake Prevention (System Lessons)

Re-read files after context compaction. Edit requires prior Read in same context; compaction wipes read state. Re-read before editing.
Grep for old terms after bulk replacements. AI over-trusts find/replace completeness. Grep full repo after bulk edits for missed refs in docs/configs/catalogs.
Check downstream references before deleting. Deletions cascade doc/code staleness. Map referencing files before removal.
After memory loss, check existing state before creating new. Compaction wipes prior-work memory. Query current state to resume — never blindly duplicate.
Verify AI-generated content against actual code. AI hallucinates APIs, class names, method signatures. Grep to confirm existence before documenting/referencing.
Trace full dependency chain after edits. Changing a definition misses downstream consumers. Trace the full chain.
When renaming, grep ALL consumer file types. Some file types silently ignore missing refs (no compile error). Search code, templates, configs, generated files.
Trace ALL code paths when verifying correctness. Code existing ≠ code executing. Trace early exits, error branches, conditional skips — not just happy path.
Update docs that embed canonical data when source changes. Docs inlining derived data (workflows, schemas, configs) go stale silently. Update all embedding docs alongside source.
Verify sub-agent results after context recovery. Background agents may finish while parent compacted — grep-verify output, don't trust assumed completion.
Cross-check full target list against sub-agent assignments. Parallel sub-agents by category miss boundary items. Reconcile union of assignments against target list before proceeding.
Sub-agents inherit knowledge only from their agent .md definition — use custom agent types, not built-in Explore. Tool adoption = permission + knowledge + enforcement (numbered workflow step).
Persist sub-agent findings incrementally, not as a final batch. Long sub-agents hit cutoffs before final write — findings lost. Instruct append-per-section to report file.
When debugging, ask "whose responsibility?" before fixing. Trace caller (wrong data) vs callee (wrong handling). Fix at responsible layer — never patch symptom site.
Grep ALL removed names after extraction/refactoring. Primary file "done" ≠ secondary files clean. Grep entire scope for every removed symbol before declaring complete.
Assume existing values are intentional — ask WHY before changing. Pattern-matching as "wrong" skips context. Before changing any constant/limit/flag: read comments, git blame, surrounding code.
Verify ALL affected outputs, not just the first. One build green ≠ all green. Multi-stack changes (backend/frontend/tests/docs) require verifying EVERY output.
Evaluate fit before copying a nearby pattern. Closest example ≠ matching preconditions — verify the new context shares the same constraints, base classes, scope, lifetime.
Holistic-first debugging — resist nearest-attention trap. Don't dive into first plausible cause. List EVERY precondition (config, env vars, paths, DB, endpoints, creds, versions, DI, data). Verify each against evidence (grep/query — not reasoning). Ask "what would falsify this?" — if nothing, it's not a hypothesis. Most expensive failure: going deeper in "obvious" layer while bug sits in layer never questioned.
Surgical changes — apply the diff test (context-aware). Two modes: (1) Bug fix → every line traces to the bug; no restyling; orphan cleanup only for imports YOUR changes made unused. (2) Review/enhancement → implement improvements AND announce as "Enhancement beyond main request: [what]". Never silently scope-creep. Diff test: "Would this line exist if I wasn't asked to do X?" — if no, delete or announce.
Surface ambiguity before coding — don't pick silently. Multiple valid interpretations → present each with effort: "[Request] could mean (1) [N h], (2) [N h]. Which matters?" List scope/format/volume/constraints assumptions first. If simpler path exists, say so. Never silently pick.
[MANDATORY FIRST ACTION] ALWAYS activate a suitable skill or workflow BEFORE responding. Match task against workflow catalog + skill list; invoke via skill invocation or $start-workflow <workflowId>. NEVER answer or write code before checking. Skip = protocol violation.
Why-Review adversarial mindset — apply when reviewing any plan, decision, or design. Default SKEPTIC not VALIDATOR: steel-man a rejected alternative, invert each stated reason ("what does it sacrifice?"), stress-test top 2-3 assumptions, run pre-mortem ("ships, fails in 3 months — what breaks?"), surface 1-2 alternatives author missed. Section presence ≠ quality; quality = causal reasoning + concrete mitigations + evidence, not "it's better" or "monitor closely".
Front-load report-write in sub-agent prompts for large reviews. Many-file sub-agents hit budget before final write — findings lost. Design prompts so: (1) report-write is first explicit deliverable, (2) append per-file/section (not batched), (3) scope bounded so reads don't exhaust budget. Truncated mid-sentence with no report file → spawn narrower scope, don't retry same prompt.
After context compaction, re-verify all prior phase outcomes before continuing. Summaries describe intent, not environment state (git index, filesystem, processes). On resume, FIRST audit: git status, re-read modified files, verify filesystem. Every "completed" claim is an untested hypothesis until evidence confirms.
OOM/memory: check row count before row size. Triage: (1) Unbounded query — no DB filter for trigger? Push filter to DB; eliminates OOM. (2) Large rows? Projection reduces proportionally. Row reduction > projection in ROI.
Keep domain concepts out of generic/shared/infrastructure layers. Reusable layer (shared library, framework, infra module) must reference NO consumer-specific domain concept — tenant/customer/product IDs, business entities, feature rules. Leak compiles + runs → passes review silently while coupling the "reusable" layer to one consumer. Keep shared type domain-free; push domain fields/logic down into the consumer via subclass/composition. — why: a layer coupled to one consumer's domain is no longer reusable.

Agent Skills: UI Review Report — {date}

Install this agent skill to your local

Skill Files

Codex Project-Reference Loading (No Hooks)

Quick Summary

Your Mission

First Principle — Easy to Change

Review Mindset (NON-NEGOTIABLE)

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

Phase 1: Determine Scope

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

Phase 3: UI Category Review

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

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

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

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

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

Phase 4: Finalize — UI Compliance Report

Verdict Scoring

Report Structure

Systematic Review Protocol (10+ changed frontend files)

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

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

Workflow Recommendation

Next Steps

AI Agent Integrity Gate (NON-NEGOTIABLE)

Sub-Agent Type Override

Subagent Type Selection

Canonical Agent Call Template (Copy Verbatim)

Rules

Prompt-Enhance Closing Anchors

Closing Reminders

Hookless Prompt Protocol Mirror (Auto-Synced)

[WORKFLOW-EXECUTION-PROTOCOL] [BLOCKING] Workflow Execution Protocol — MANDATORY IMPORTANT MUST CRITICAL. Do not skip for any reason.

Shared AI-SDD Protocol Markers

SYNC:ai-sdd-artifact-contract

SYNC:ai-sdd-artifact-contract:reminder

[LESSON-LEARNED-REMINDER] [BLOCKING] Task Planning & Continuous Improvement — MANDATORY. Do not skip.

Common AI Mistake Prevention (System Lessons)

Agent Skills: UI Review Report — {date}

Install this agent skill to your local

Skill Files

Codex Project-Reference Loading (No Hooks)

Quick Summary

Your Mission

First Principle — Easy to Change

Review Mindset (NON-NEGOTIABLE)

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

Phase 1: Determine Scope

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

Phase 3: UI Category Review

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

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

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

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

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

Phase 4: Finalize — UI Compliance Report

Verdict Scoring

Report Structure

Systematic Review Protocol (10+ changed frontend files)

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

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

Workflow Recommendation

Next Steps

AI Agent Integrity Gate (NON-NEGOTIABLE)

Sub-Agent Type Override

Subagent Type Selection

Canonical Agent Call Template (Copy Verbatim)

Rules

Prompt-Enhance Closing Anchors

Closing Reminders

Hookless Prompt Protocol Mirror (Auto-Synced)

[WORKFLOW-EXECUTION-PROTOCOL] [BLOCKING] Workflow Execution Protocol — MANDATORY IMPORTANT MUST CRITICAL. Do not skip for any reason.

Shared AI-SDD Protocol Markers

SYNC:ai-sdd-artifact-contract

SYNC:ai-sdd-artifact-contract:reminder

[LESSON-LEARNED-REMINDER] [BLOCKING] Task Planning & Continuous Improvement — MANDATORY. Do not skip.

Common AI Mistake Prevention (System Lessons)

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

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