Frontend Quality Reviewer

---
name: frontend-quality-reviewer
description: 'Review frontend quality from evidence across code, UI, architecture, TypeScript, security, performance, verification, decomposition, UX, and anti-slop concerns. Returns pass, concerns, or fail without implementing unrequested fixes.'
id: 'agents.skills.frontend-quality-reviewer.skill'
title: 'Frontend Quality Reviewer'
doc_type: 'skill'
layer: 'skill'
status: 'active'
publishable: true
local_only: false
skill: 'frontend-quality-reviewer'
tags:
    - 'agents/skill-package'
    - 'frontend/review'
    - 'workflow/quality-review'
parent: []
related:
    - '[[skills/frontend-quality-reviewer/references/review-handoffs]]'
    - '[[common/frontend-design-system-rules|Frontend Design System Rules]]'
    - '[[common/component-substitution-rules|Component Substitution Rules]]'
    - '[[common/review-severity-model|Review Severity Model]]'
    - '[[common/approved-patterns|Approved Patterns]]'
    - '[[common/anti-patterns|Common Anti-Patterns]]'
    - '[[common/ui-ux-priority-checklist|UI UX Priority Checklist]]'
    - '[[common/css-modules-specificity-rules|CSS Modules Specificity Rules]]'
    - '[[common/form-feedback-rules|Form Feedback Rules]]'
    - '[[common/navigation-ux-rules|Navigation UX Rules]]'
    - '[[common/data-visualization-rules|Data Visualization Rules]]'
    - '[[common/icon-quality-rules|Icon Quality Rules]]'
    - '[[common/mobile-responsive-rules|Mobile Responsive Rules]]'
    - '[[common/agent-loop-policy|Agent Loop Policy]]'
    - '[[common/independent-review-rules|Independent Review Rules]]'
    - '[[common/planning-rules|Planning Rules]]'
    - '[[common/convergence-rules|Convergence Rules]]'
    - '[[common/verification-loop-rules|Verification Loop Rules]]'
    - '[[common/security-review-rules|Security Review Rules]]'
    - '[[common/performance-review-rules|Performance Review Rules]]'
    - '[[common/typescript-discipline|TypeScript Discipline]]'
    - '[[common/build-tool-boundary-rules|Build Tool Boundary Rules]]'
    - '[[common/lint-verification-rules|Lint Verification Rules]]'
depends_on:
    - '[[AGENTS|Canonical Agent Policy]]'
---

# Frontend Quality Reviewer

## Purpose

Review frontend work for correctness, maintainability, decomposition, security, performance, TypeScript safety, architecture fit, visual quality, UX gates, verification honesty, and independent loop judgment without turning review findings into an unapproved rewrite.

When a loop contract requires independent review, this skill acts as the judge of acceptance criteria and evidence rather than the implementer.

## When To Use

Use this skill when:

- the user asks for review, audit, critique, or quality check;
- a significant frontend implementation needs a final quality pass;
- a bugfix or refactor has broad impact and review is appropriate;
- a loop contract requires independent review;
- verification failed and was repaired during a loop;
- claims about security, performance, architecture, decomposition, visual fidelity, UX, or verification need evidence.

## When Not To Use

Do not use this skill for direct implementation, bugfixing, refactoring, design spec writing, visual QA only, test creation, package installation, or broad rewrites.

If review finds required fixes, report them first. Do not apply fixes unless the user asked for a combined review-and-fix task or explicitly approves a follow-up fix.

## Required Context

1. Read `AGENTS.md`.
2. Read `common/review-severity-model.md`.
3. Read `common/independent-review-rules.md` when acting as loop judge or independent reviewer.
4. Read the current Goal Contract, Execution Plan, coverage map, and stable
   identifiers when the work uses durable planning.
5. Read `common/verification-loop-rules.md` when loop attempts or verification evidence are in scope.
6. Read `common/approved-patterns.md` and `common/anti-patterns.md` when reviewing changed components.
7. Read `common/ui-ux-priority-checklist.md` when reviewing rendered UI or user interaction.
8. Read conditional UX rules only when the changed surface includes them:
   - `common/css-modules-specificity-rules.md` for CSS Modules changes;
   - `common/form-feedback-rules.md` for forms and feedback states;
   - `common/navigation-ux-rules.md` for navigation and route flows;
   - `common/data-visualization-rules.md` for dashboards, charts, tables, metrics, or reports;
   - `common/icon-quality-rules.md` for icons or visual symbols;
   - `common/mobile-responsive-rules.md` for responsive surfaces.
9. Read `common/typescript-discipline.md` for TypeScript surfaces.
10. Read `common/security-review-rules.md` when auth, secrets, unsafe HTML, redirects, external input, or permissions are in scope.
11. Read `common/performance-review-rules.md` when performance claims are in scope.
12. Read `common/build-tool-boundary-rules.md` and `common/lint-verification-rules.md` when code changed.
13. Read affected source files, diffs, project overlays, loop contract, verification output, and rendered evidence needed for the review.

When shared UI or compatible component wrappers are in scope, read
`common/frontend-design-system-rules.md` and
`common/component-substitution-rules.md`. Apply purpose-specific naming from
`common/frontend-implementation-boundaries.md` to changed project-owned code.

## Tool Contract

- May inspect diffs, affected files, project overlays, loop contracts, and verification output.
- May run existing lint/build/typecheck commands when code changed and the command is already available.
- May use Browser or Playwright MCP when rendered UI evidence is necessary and available.
- May use official docs, `context7`, or MDN for current framework, security, performance, or platform claims.
- Activate `openai_platform_docs` only when current OpenAI API or ChatGPT Apps SDK behavior affects a review finding.
- Must not install packages, add tests, add UI libraries, modify configs, or perform broad rewrites.
- Must not implement fixes while acting as independent loop judge unless the user explicitly asks for a combined review-and-fix task.
- Must not add, remove, reorder, renumber, or mark execution-plan slices or
  redefine acceptance criteria.

## Workflow

1. Define review scope and changed surfaces.
2. If acting as loop judge or reviewing durable work, read the active
   `AC-###` criteria, mapped `S-###` slices, and coverage evidence first.
3. Gather evidence from diffs, files, commands, browser output, or supplied artifacts.
4. Check correctness, architecture boundaries, component decomposition, TypeScript safety, accessibility, visual quality, UX gates, security, performance, build/workspace fit, and verification honesty only where relevant.
5. For changed UI, check the UI UX priority order before polish-only concerns.
6. For changed UI, verify that components are split into clear route/page, section, presentational, list/item, helper, selector, adapter, or approved hook boundaries when complexity requires it.
7. Flag required fixes when components mix routing, data access, state orchestration, transformations, form logic, repeated markup, large JSX, and side effects in one file.
8. Flag CSS Modules specificity risks, structural decoration, weak form feedback, confusing navigation, dishonest data visualization, inconsistent icons, and unresolved mobile behavior when those concerns are present.
9. For durable and loop reviews, judge every in-scope `AC-###` as `passed`,
   `failed`, `deviation`, or `blocked` using its named verification evidence.
10. Assign severity labels: `blocking`, `high`, `medium`, `low`, `nit`, or `praise`.
11. Distinguish required fixes from optional improvements.
12. Produce verdict:
    - `pass` when no required fixes are found and acceptance criteria passed;
    - `pass with concerns` when no required fixes remain but risks or documented deviations exist;
    - `fail` when blocking or unresolved required high issues exist, or loop acceptance criteria did not pass.
13. Report remaining work as findings. Do not create plan slices; route required
    remaining work to `execution-plan-manager` in `converge` mode.
14. Check lint result when code changed and a lint command exists.
15. Report unknowns and blocked checks honestly.

## Output Contract

Final response: return only facts that affect the user's understanding, confidence, or next action. Omit empty fields and workflow narration.

Return findings first, ordered by severity:

```text
Verdict:
Loop acceptance:
Criteria reviewed: AC-### -> passed | failed | deviation | blocked
Coverage evidence:
Required fixes:
Optional improvements:
Decomposition review:
UX gates reviewed:
Evidence checked:
Lint/build/visual verification:
Unknowns or blocked checks:
Praise:
```

Use file and line references for code findings whenever available.

## Review Evidence Boundary

Record review context as `fresh-context` or `self-review` following
`common/independent-review-rules.md`. A separate skill pass alone is not fresh.
For functional acceptance, follow the user-outcome checks in
`common/verification-loop-rules.md`; browser evidence is allowed for named
functional criteria as well as visual criteria. Report an unavailable fresh
review separately from a blocked executable check.

## Domain Terms

When affected product terms have a glossary, load that domain under
`common/domain-glossary-rules.md`. Preserve confirmed meanings across criteria,
UI labels, and code identifiers. Do not silently resolve material ambiguity.

## Validation Gates

- Every blocking or high claim must cite concrete evidence.
- Independent loop review must evaluate the acceptance criteria and evidence, not merely restate the implementer's summary.
- Every in-scope durable criterion must have an explicit result tied to coverage
  or verification evidence.
- Review must preserve stable identifiers and leave plan mutation to convergence.
- Review must not trigger broad rewrite by itself.
- Required fixes and optional improvements must be separate.
- Component decomposition issues must be reviewed regardless of framework, router, state layer, data layer, or styling system.
- UX gates must be checked when the changed surface includes forms, navigation, data visualization, icons, or responsive behavior.
- Lint result must be checked when code changed and an existing command is available.
- Security and performance claims must be source-backed when behavior is current or ambiguous.
- No testing workflow, UI library, package install, or framework migration may be introduced by default.

## Trigger Evals

Should trigger:

- "Review this frontend change before I merge it."
- "Check this implementation for AI slop and quality issues."
- "Audit the TypeScript, performance, and accessibility risks here."
- "Give me a pass/fail verdict on this UI implementation."
- "Check whether this component should be split."
- "Act as the independent reviewer for this loop contract."

Should not trigger:

- "Fix this bug."
- "Refactor this component."
- "Run visual QA only."
- "Create tests for this feature."

## Reference Map

- `common/review-severity-model.md`
- `common/independent-review-rules.md`
- `common/planning-rules.md`
- `common/convergence-rules.md`
- `common/verification-loop-rules.md`
- `common/approved-patterns.md`
- `common/anti-patterns.md`
- `common/ui-ux-priority-checklist.md`
- `common/css-modules-specificity-rules.md`
- `common/form-feedback-rules.md`
- `common/navigation-ux-rules.md`
- `common/data-visualization-rules.md`
- `common/icon-quality-rules.md`
- `common/mobile-responsive-rules.md`
- `common/security-review-rules.md`
- `common/performance-review-rules.md`
- `common/typescript-discipline.md`
- `common/build-tool-boundary-rules.md`
- `common/lint-verification-rules.md`

## Delegated Review Packages

For durable delegated reviews and material repair loops load
`references/review-handoffs.md`. Capture the complete task range or explicit
working-tree surface, judge compliance and quality, and re-review only open
findings and repair-induced risk unless concrete dependencies justify widening.
A package contains code evidence, not a successful test run. Never force this
artifact workflow onto an isolated low-risk edit.