Quality & Performance — every app must clear these bars

SkillWeb & browsing

Speed, accessibility, and testing bars every delivered app must clear, Core Web Vitals, WCAG 2.2 AA, TDD real-browser E2E, and the build-fail gates.

Use Quality & Performance — every app must clear these bars in Claude, ChatGPT or Ahel Desktop

Free. Sign in, add Quality & Performance — every app must clear these bars and connect your AI. About a minute.

Then ask your AI: use the Quality & Performance skill

Details

Instructions available. Your AI can read the instructions. Execution depends on the setup they require.

Account requirements not reviewed. Check the skill instructions before use; Ahel provides instructions and does not run this skill.

No other account needed.

Add Ahel to your AI once: Claude, ChatGPT, Cursor, Claude Code or Codex. Then ask it to use this.

Quality & Performance — every app must clear these barsStart free

The instructions your AI receives, as published by heymegabyte/agent-skills in 25-quality-performance/SKILL.md and read by Ahel’s review.

LCP ≤ 2.0s · CLS ≤ 0.05 · INP ≤ 100ms (cinematic target; ≤ 200ms hard ceiling). Per-route asset budget enforced.
Lighthouse: Performance ≥ 75 · Accessibility ≥ 95, run in CI (Lighthouse CI).

axe-core 0 violations at all 6 breakpoints (375 · 390 · 768 · 1024 · 1280 · 1920). ADA Title II ready.
Everything keyboard-operable; visible focus; honors prefers-reduced-motion. (Contrast/target-size specifics live in visual-experience.)

Failing Playwright E2E spec BEFORE implementation — watch RED → GREEN. Bug fix = failing regression test FIRST. No feature without ≥1 E2E; no fix without ≥1 regression.
E2E runs against the PROD URL in a real browser: goto('/') then navigate by clicks/keyboard only (no page.goto after load). Deterministic (locator waits, no sleeps), parallel-safe, hermetic.
Every clickable element · form field · nav link · API endpoint · modal · keyboard shortcut · error/empty/loading state has ≥1 E2E asserting it against prod.
Coverage matrix: fullyParallel × 6 viewports × 3 browsers, sharded. Units via Vitest.
Simulate realistic full user journeys (homepage → discover → convert) via Cloudflare Browser Rendering or Browserbase (whichever is configured). Drive HIGH % code coverage from these end-to-end journey runs, not just units.

Console errors · CSP violations · 4xx/5xx · axe violations · broken hyperlinks — in ANY test — fail the build.
AI-vision QA ≥ 8/10 on every new/changed route (random snapshot sampling per run). Visual regression via Percy / pixelmatch.

A mocked/stubbed render is NOT a pass. "Deploy succeeded" ≠ "works" — only a real-browser prod run with 0 console errors and asserted content counts as green.

Advanced