What problem does it solve? React frontend changes often regress page speed and accessibility silently — bundle weight creeps onto the critical path, layout shifts appear, and WCAG violations slip past review. This Skill turns Lighthouse budgets and WCAG 2.2 AA into enforced, non-waivable gates on every UI change. ## Core Features & Use Cases - Lighthouse budget enforcement: Runs desktop and mobile Lighthouse audits through the project's make targets, treating mobile (throttled) as the binding budget with raise-only floors (95 desktop / 85 mobile defaults). - Bundle and render-path optimization: Guides route-level code-splitting, deferred-DI composition roots, and container-free first paint so heavy dependencies load behind dynamic import() instead of at boot. - WCAG 2.2 AA build-time checklist: Covers accessible names, focus management, keyboard operability, contrast, and a strict no-data-testid policy, pairing with the accessibility-audit skill for authoritative per-family verdicts. - Use Case: While building a sign-in page, you keep the DI container and data client out of the entry chunk, verify the mobile Lighthouse score stays at or above 85, and confirm every control has an accessible name before the PR passes review. ## Quick Start Ask the agent to audit the current route's Lighthouse mobile score and accessibility, then fix any budget or WCAG regressions it finds.
