# Atelier Perf A11Y > Atelier suite — the performance & accessibility gate. The cross-cutting quality bar every Atelier build passes before it ships: animate only compositor-safe properties, hit Core Web Vitals (LCP ≤2.5s, CLS ≤0.1, INP ≤200ms), respect prefers-reduced-motion, meet WCAG 2.2 AA (contrast, focus, keyboard, target size, semantics, screen readers), give canvas/WebGL accessible fallbacks, and run the anti-slop "AI Tells" design-integrity check. Use whenever finishing or reviewing a frontend, optimizing performance / Core Web Vitals / Lighthouse, fixing jank or layout shift, doing an accessibility/a11y audit, handling reduced motion, running a pre-ship check, or checking whether a build reads as AI-generated/templated. This is the canonical home for the perf/a11y rules the other Atelier skills reference. Part of the Atelier suite. - Skill: `luminary19/atelier-perf-a11y` (Agent Skill, multi-file: 9 files) - Install (CLI): `npx skillmds@latest add luminary19/atelier-perf-a11y` - Raw SKILL.md: https://api.skillmd.com/api/skills/luminary19/atelier-perf-a11y/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: luminary19 (https://skillmd.com/u/luminary19) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/luminary19/atelier-perf-a11y --- # Atelier — Performance & Accessibility Gate The line between an amateur "beautiful" build and a professional one. **A beautiful site is not done until it passes these gates.** This skill is both a *reviewer* (run it over finished work) and the *reference* the rest of the suite points to for its perf/a11y rules — when those skills say "respect reduced motion" or "animate only transform/opacity," the full how lives here. > **Project memory:** if **`ATELIER.md`** exists, read its accessibility commitments + register first > (set up via **`/atelier init`** — the **`atelier`** router). > > **Applies to everything** from `atelier-motion`, `atelier-scroll`, `atelier-webgl`, `atelier-dataviz`, > `atelier-components`, and `atelier-copy` — and runs just after the production-resilience pass > **`atelier-harden`** (overflow, i18n, error/edge states), which this gate then verifies. > Deep reference: `references/fundamentals-deepdive.md` (§13, §16). Numbers below are current (mid-2026). --- ## How to use this skill Two modes: 1. **As you build** — the other skills cite the relevant rule; pull the matching detail from the references here (don't re-derive it). 2. **Before you ship** — work **The quality ladder** (below): the two self-checklists (perf+a11y, then anti-slop), and for substantial builds escalate to the adversarial `atelier-review`. Fix every miss. ## Performance (the mental model) Browser pipeline: **Style → Layout → Paint → Composite.** The property you animate decides how far back the browser rewinds each frame — this one fact governs animation perf. Full detail in **`references/performance.md`**: - **Animate only `transform` and `opacity`** (composite-only, GPU, off main thread). Animating `width/height/top/left/margin` forces Layout every frame; `box-shadow/background` forces Paint. - **No layout thrashing** — batch DOM reads before writes; rAF-throttle scroll/resize/mousemove + use `{ passive: true }`. - **`will-change` sparingly** — only on frequently-animated elements; layers cost GPU memory. - **Prefer CSS/WAAPI/Motion animation** (off main thread) over JS rAF tweening of layout props. - **Loading:** lazy-load below-fold (never the LCP image — eager + `fetchpriority="high"`); code-split + tree-shake; AVIF/WebP + `srcset` + dimensions; fonts preload + subset + `font-display: optional`; `content-visibility: auto` for heavy offscreen sections; CDN/Brotli; honor `prefers-reduced-data`; SRI + CSP on third-party scripts. ### Core Web Vitals (p75 field — the targets) - **LCP ≤ 2.5s** — render time of the largest in-viewport element. Preload/eager it; fast TTFB; no render-blocking CSS/JS. - **CLS ≤ 0.1** — unexpected layout shift. Set image/video dimensions or `aspect-ratio`; reserve ad/embed space; `font-display: optional`; animate only transform/opacity. - **INP ≤ 200ms** — interaction latency (replaced FID; most-failed). Break long tasks >50ms (`scheduler.yield()` — Chrome + Firefox 142, **not Safari** → keep the `setTimeout` fallback); yield after the visible update; avoid thrashing; shrink the DOM. Heavy continuous JS animation directly inflates INP — move it to the compositor or gate it. (LCP + INP both Baseline / all browsers Dec 2025.) Measure with **CrUX/RUM** (field) for decisions; Lighthouse/PSI (lab) for debugging. ## Accessibility (WCAG 2.2 AA) Full detail in **`references/accessibility.md`**. The essentials: - **`prefers-reduced-motion`** — default-safe: ship static, add motion inside `@media (prefers-reduced- motion: no-preference)`; in JS branch on `matchMedia(...)` / `useReducedMotion()`. **Reduce, don't blanket-nuke** — keep opacity fades, remove large movement/parallax/scroll-jack/spin. Provide non-motion signifiers. - **Other OS prefs** — `prefers-reduced-transparency` (glass → solid fills, the real glassmorphism fix); `prefers-contrast: more` (thicken borders, drop low-contrast greys); `forced-colors: active` (Windows HCM, ~93% reach — use `system-color`, keep focus `outline`, don't drop meaningful icons). Honoring the OS *is* a premium signal. - **Semantic HTML first** — native `