ring-checking-frontend-quality

name

ring:checking-frontend-quality

description

Checking frontend quality against changed UI via ring:qa-frontend in accessibility, visual, e2e, or performance mode and aggregating pass/fail verdicts. Use when a frontend change needs standalone a11y, visual-snapshot, Playwright e2e, or Lighthouse/Core-Web-Vitals validation outside the dev cycle. Skip for backend-only or non-UI work, or inside ring:running-dev-cycle-frontend, which already runs these in Gate 0.

Frontend Quality Checks

When to use

• A frontend task needs standalone quality validation outside ring:running-dev-cycle-frontend (which owns these checks in Gate 0).
• You want to run one specific check (a11y, visual, e2e, or performance) against changed UI components, or all of them at once.

Skip when

• Backend-only project with no UI components.
• Task is documentation-only, configuration-only, or non-code.
• Changes limited to build tooling, CI/CD, or infrastructure.
• Inside ring:running-dev-cycle-frontend — that orchestrator already runs these in Gate 0.

Related

Complementary: ring:running-dev-cycle-frontend, ring:qa-frontend

Modes

Mode	What it checks
accessibility	axe-core automated scans, zero WCAG 2.1 AA critical/serious violations, keyboard nav, focus management
visual	Snapshot tests across all component states and viewports (mobile 375px / tablet 768px / desktop 1280px)
e2e	Playwright user-flow tests across Chromium, Firefox, and WebKit (happy + error paths)
performance	Lighthouse > 90 and Core Web Vitals (LCP < 2.5s, CLS < 0.1, INP < 200ms), bundle budget