frontend-agents-a11y-perf-consistency-auditor

name	frontend-agents-a11y-perf-consistency-auditor
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
license	MIT
compatibility	Designed for Claude Code. Requires Frontend Design evergreen-2026.
metadata	{"author":"OpenAEC-Foundation","version":"1.0"}

Frontend Agents : A11y + Perf + Consistency Auditor

This skill is an AGENT skill : it codifies a three-axis static-analysis checklist (Accessibility, Performance, Consistency) and the audit-report shape that parent agents consume. Spawn this skill when auditing a UI component, a pull request, a feature branch, or a newly-authored skill file. The skill does NOT cover general accessibility theory (see [[frontend-a11y-aria-patterns]]), Core Web Vitals theory (see [[frontend-perf-core-web-vitals-inp]]), design-token enforcement (see [[frontend-agents-design-system-validator]]), automated visual regression testing, or browser-rendered audits. This is STATIC ANALYSIS only.

Quick Reference

Audit workflow

1. Identify scope : single component, single page, full feature, single skill file. The checklist applies recursively to any of these targets.
2. Read source materially : load every *.html, *.css, *.js, *.ts, *.md file in scope. Do not infer ; quote line numbers.
3. Apply the three checklists in order : A11Y -> PERF -> CONSISTENCY. Each rule produces zero or more findings.
4. Grade severity : ERROR (WCAG AA fail or CWV threshold miss), WARNING (missed best practice), INFO (style inconsistency).
5. Emit the report : JSON for parent-agent consumption, Markdown for human review. See references/examples.md for the canonical shape.
6. Suggest fixes : every finding includes a fix snippet citing the relevant skill (e.g. [[frontend-a11y-motion-contrast-wcag22]] SC reference).

Decision tree 1 : Which checklist first ?

Auditing a UI component, page, or feature ?
  -> Run A11Y first (semantic-HTML-first rule catches structural issues
     that affect everything else), then PERF, then CONSISTENCY.

Auditing a skill file or documentation ?
  -> Run CONSISTENCY first (file shape, frontmatter, line count), then
     scan code blocks within the docs for A11Y and PERF issues.

Auditing a pull-request diff (incremental change) ?
  -> Run all three on the changed files, plus CONSISTENCY on any newly
     added files. Skip unchanged files unless they reference changed APIs.

Audit triggered by a Lighthouse regression ?
  -> PERF first (the regression is metric-driven), then A11Y on the same
     scope to catch what Lighthouse missed (semantic HTML correctness).

Decision tree 2 : ARIA needed or native enough ?

Element behaves like a button (click to perform action) ?
  -> Use <button>. ERROR if `<div role="button">` is found.
     Native button gets focus-trap, keyboard activation (Space, Enter),
     forced-colors mapping (ButtonText), and screen-reader semantics for free.

Element behaves like a link (navigation) ?
  -> Use <a href>. ERROR if `<button>` used for navigation.

Element is a form control ?
  -> Use <input>, <select>, <textarea>, <button>. ERROR if a div + custom
     keyboard handlers reimplements one of these.

Element is a disclosure (expand / collapse panel) ?
  -> Use <details> + <summary>. Native browser handles state + keyboard.

Element is a dialog ?
  -> Use <dialog> + showModal(). ERROR if a custom modal is built.

Element has NO native equivalent (combobox, custom tree, custom slider) ?
  -> ARIA is required. Follow the W3C WAI APG pattern exactly.
     See [[frontend-a11y-aria-patterns]].