| description | Use when auditing a UI component, page, or feature for the three combined failure modes a frontend product can ship : WCAG 2 2 accessibility violations, Core Web Vitals (LCP / INP / CLS) regressions, and cross-skill consistency drift (naming, structure, token usage, file shape). Spawn this agent skill when reviewing a pull request, before merging a feature branch, during a quarterly compliance audit, when triaging a Lighthouse score regression, or when validating a newly-authored skill file against the package quality rules. Prevents the most common audit gaps in 2026 : skipping the accessibility pass because the page "looks fine" while still failing WCAG 2 5 8 Target Size or 2 4 11 Focus Not Obscured, trusting a green Lighthouse score without checking semantic correctness, fixing performance by intuition before measuring against the binding p75 thresholds, naming-convention drift across components (`--my-bg` vs `--color-bg-surface`), magic numbers in component CSS despite a token system existing, `<div role="button">` shipped after the accessibility team approved an earlier version using `<button>`, and skill files that diverge from the YAML frontmatter shape required by the package validators. Covers the codified A11Y checklist (9 deterministic rules anchored to WCAG 2 2 and ARIA APG : accessible name on every interactive, native HTML over ARIA, focus-visible matching pair, modal `<dialog>` with `showModal()` + `aria-labelledby`, pre-existing live regions, 24-by-24 px target size with five-exception fallback, 4 5 to 1 / 3 to 1 contrast ratios, `prefers-reduced-motion: reduce` branch on every animation, no positive `tabindex`, no `tabindex` on `<dialog>`), the PERF checklist (7 rules anchored to Core Web Vitals : explicit image dimensions or `aspect-ratio`, `fetchpriority="high"` on LCP image, `loading="lazy"` below the fold, compositor-only animation properties, `will-change` applied transiently not permanently, webfont budget under 100 KB woff2 per face, critical CSS inlined or preloaded), the CONSISTENCY checklist (6 rules anchored to the package quality contract : YAML frontmatter shape, four-file structure, line-count limit, English-only, colon headings, `[[skill-name]]` cross-reference format), severity grading (ERROR for WCAG AA fail or CWV miss, WARNING for missed best practice, INFO for style inconsistency), and the prioritized audit-report output shape (JSON for parent-agent consumption plus Markdown for human review). Keywords: a11y audit, accessibility audit, ARIA audit, WCAG audit, WCAG 2 2, Core Web Vitals, CWV, LCP, INP, CLS, focus-visible, prefers-reduced-motion, aria-label, aria-labelledby, accessible name, target size, contrast ratio, forced-colors, fetchpriority, loading lazy, aspect-ratio, will-change, scheduler yield, GPU animations, design tokens consistency, kebab-case, cross-skill audit, validator, lint, skill-package quality, missing alt text, focus invisible, animation does not respect setting, image without dimensions, custom button not keyboard accessible, slow page, skill format inconsistent, design system drift, inconsistent components, how do I audit my site for accessibility, performance audit, WCAG checker, find missing alt text, validate skill format, cross-skill consistency check, how to review accessibility, how to check performance, how to audit UI
|
