atelier-perf-a11ylisted

# 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. > **Applies to everything** from `atelier-motion`, `atelier-scroll`, `atelier-webgl`, `atelier-components`. > 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 thrash