/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 act