graphics

graphics

!checklist init ${CLAUDE_SKILL_DIR} --force

A graphics studio keeps every rendered mark — the icon drawn to a keyline, the hero photograph boxed to its ratio, the procedural surface compiled to the GPU — under a discipline that makes the whole surface read as one hand at work. graphics is the advanced visual lens of the atelier suite: where the other skills decide what color the surface wears and how the type scales, graphics decides what renders when the document model can't, and makes that too a system, not a pile of ad-hoc choices. Its product is a written graphics contract: one icon system (one family, one stroke, one optical-size rule), one imagery system (allowed ratios, CLS-proof pipeline, loading strategy, alt discipline), and a disciplined Canvas / WebGL / GPU layer with a DOM fallback and a frame budget — each committed before any component consumes them. It runs across gated stages and will not advance past a GATE until the checklist tool clears it.

The governing fact: the DOM is the default and the budget — escape to Canvas/WebGL/GPU only where the DOM genuinely can't go, always with a fallback, always within a frame budget, and always with one coherent icon set and an aspect-ratio-boxed imagery system. Mixed icon packs (three families, different strokes, mismatched corners), a hero <img> with loading="lazy" (the single most common way to wreck LCP), canvas blurry on retina because no one applied the devicePixelRatio fix, or three.js imported for a UI that a <div> and a CSS transition could have handled — each is a default move, and their sum is the technical and visual noise the eye and the profiler both read as wrong without being able to name it.

This is where the agent era bites:

• The agent reaches for canvas/three.js as a reflex. It imports WebGL infrastructure for a quantity selector, a CSS animation for a data chart, a shader for a hover effect — each because the API is there and the cost isn't felt. The DOM has a ceiling, but that ceiling is high; the escape-to-GPU must be earned, with a fallback written and a budget held.
• The agent mixes icon families without noticing. Lucide here, Heroicons there, a rogue Material icon pulled for a specific shape — each defensible in isolation, the set immediately amateur. Stroke weights, optical sizes, corner radii, endpoint styles: a mixed bag gets every one of these wrong. One family, or a written spec for everything drawn.
• The agent lazy-loads the LCP hero. loading="lazy" is a sensible default for most images; applied to the above-the-fold hero it cracks the LCP score in half. The LCP image gets loading="eager" + fetchpriority="high" + a <link rel="preload"> in the head. This is the rule the agent consistently breaks.
• The agent skips the retina fix. A <canvas> on a 2× display is blurry unless the backing pixel buffer is scaled by devicePixelRatio and CSS holds the logical size. The agent sets up the canvas loop, ships the blur, and moves on.
• The agent treats accessibility as optional. Canvas and WebGL are accessibility black holes — no DOM, no semantics, AT sees nothing. A fallback (<canvas> fallback content, a parallel accessible DOM, a data table) is non-negotiable; without it the feature is invisible to a screen reader. And an icon-only button without an aria-label is equally invisible.

Read references/dom-vs-canvas-vs-webgl-and-fallback.md first — the decision tree that earns each escape from the DOM, the fallback contract, and the frame budget. Load at the start, re-check at every gate.

Speak the user's language. The decisions are the user's — which icon family, which allowed aspect ratios, which generative technique fits the surface. Read their fluency and gloss terms on first use (keyline / optical sizing, immediate mode vs retained scene graph, HiDPI / devicePixelRatio, CLS / aspect-ratio, LCP / fetchpriority, SDF / signed distance field, GLSL / WGSL, fallback path, frame budget / 16.7ms). A rendering pipeline the user can't trace is imposed infrastructure, not shared craft.