Use this skill when you need mechanical implementation invariants for frontend design: token architecture, typography hierarchy, loading order, FOUT prevention, chrome stability, motion timing, color semantics. Use with design when building components, pages, or design systems. (Aesthetic direction lives in...
\nApply with design when implementing UI: components, pages, or design systems. Every color, type, and motion choice should trace back to these rules.
\nAll colors map to a small set of primitives. No random hex values.
\nUse tokens in code (CSS variables, theme objects); never hardcode hex for UI.
\ntabular-nums for alignment.tabular-nums — mono earns its place when values line up in a column. Do NOT sprinkle mono on decorative eyebrow/metadata microtext (\"35MM · DEVELOP · SCAN\", fake spec captions) for a \"technical\" look — that's the current trend-slop, not data. See design-spatial §2.The first viewport must paint complete and correct, fast. Order every resource by whether the user sees it first; the rest waits.
\n<link rel=\"preload\" as=\"font\" type=\"font/woff2\" crossorigin> the weights used in the first viewport. Never a render-blocking third-party font stylesheet — a Google Fonts <link> adds a CSS round-trip plus extra DNS/TLS before the font even starts downloading; self-host instead.fetchpriority=\"high\" on the hero image (or the video poster); <link rel=\"preload\" as=\"image\"> it when it's CSS-referenced (the parser can't see CSS url()s early). The hero box must never be empty — ship a poster/low-res placeholder so there's no blank frame.loading=\"lazy\" decoding=\"async\" on images; preload=\"none\" (or \"metadata\") on video; defer non-critical JS. Always reserve space (aspect-ratio, or width+height) so deferred media can't shift layout (CLS).font-display: swap is the pop — it paints a fallback face, then swaps to the webfont and reflows. Do not use it for any text the user watches load (titles, wordmarks, hero copy). The rule is absolute: title/display text must never flash a fallback or reflow.
<head>, add a fonts-pending class to <html> that holds the display-font text at opacity: 0. On document.fonts.ready — kick it with document.fonts.load('<weight> 1em \"Family\"') for each critical face — swap to fonts-ready and fade the text in (~0.5s). Always include a safety timeout (~2.5s) that reveals regardless, so a font failure can never leave text permanently hidden.@font-face (or font-family fallback) tuned with size-adjust / ascent-override / descent-override so the fallback occupies the same metrics as the webfont and the swap shifts nothing.Worked example — an AR product-research page: a head script toggles fonts-pending → fonts-ready (titles fade in on fonts.ready, 2.5s fallback), preloads the four above-the-fold WOFF2 weights, and self-hosts the brand face so there's no Google round-trip.
Anything that could take a noticeable moment to be ready — fonts (above), large images, video, <canvas> scenes, Three.js / WebGL, lazy-loaded React islands, anything that fetches over the network or runs heavy main-thread setup — must either arrive fast or load gracefully. The default browser behavior (blank box → partial paint → reflow → final state) is the ugly intermediate state. Catch it.
Two levers; use both:
\npreload=\"metadata\"). Preload the few assets the first viewport actually needs (<link rel=\"preload\">). Lazy-load below-the-fold so the LCP set isn't competing. Reserve the box (aspect-ratio, width+height) so deferred content can't trigger CLS.What \"ugly\" looks like, concretely, and the fix:
\n| Symptom | \nFix | \n
|---|---|
Annotation labels stack at translate(0,0) (top-left of container) until JS positions them | \nStart labels at opacity: 0 with a transition: opacity ~0.35s; first projection sets inline opacity → CSS fades them up. | \n
| Canvas/WebGL paints empty/black for a frame on first render | \nShow a placeholder (CSS art, low-res poster image, or paper/skeleton fill) in the same box; remove it once the first real frame has rendered. | \n
| Lazy image fetches and snaps in with a layout-jump | \naspect-ratio + <link rel=\"preload\"> (above-the-fold) or loading=\"lazy\" decoding=\"async\" (below); fade from opacity:0 on the load event for the first paint. | \n
| Video poster pops to first frame on play | \nposter matches a still you control; once playing event fires, you've already had a clean handoff. | \n
| 3D model \"appears\" mid-screen with no transition | \nKeep the canvas visible but at opacity: 0; toggle a .viewer-ready class (or set inline opacity) inside the GLTFLoader success callback, after the first tick(). | \n
| Lazy React island flashes a fallback that looks worse than no UI | \nReplace Suspense fallback with a skeleton that traces the final layout, not a spinner. | \n
Rule of thumb: if a user could screenshot the page mid-load and you'd be embarrassed, you owe it a graceful state. The placeholder doesn't have to be fancy — it has to be intentional, sized correctly, and in the design language of what's coming.
\nPersistent chrome (headers, nav, toolbars, search bars, status regions) must hold a constant height no matter what text lands in it. Transient status / loading / explanatory copy — \"loading model…\", \"N matching · M indexed\", empty-state hints — must not wrap to a second line and shove adjacent controls down. A status region that grows and shrinks as its message changes is a layout-jank bug, not dynamic content.
\nwhite-space: nowrap; overflow: hidden; text-overflow: ellipsis so the longest message truncates instead of wrapping.height (or min-height) sized for the message, so the shortest and longest states — and the empty state — occupy the same footprint.Only the content area should move while chrome stays fixed; layout shift from transient text reads as broken polish. (Concrete failure this prevents: in a search app, a model-loading message wrapping to two lines and pushing the search bar downward.)
\nanimation-delay) beats scattered micro-interactions. Prefer CSS-only for HTML; Motion library for React. (Honor prefers-reduced-motion for public/multi-user projects.)For explanatory / editorial / data-walkthrough content, prefer scroll-driven graphics over click-interactive widgets. A reader scrolls by default; making them hunt for and click a toggle to advance an explanation adds friction and gets skipped. Use the NYT/Pudding pattern: pin one graphic (position: sticky) while short text \"steps\" scroll past it, and let each step drive the graphic's state.
IntersectionObserver with rootMargin: '-48% 0px -48% 0px' (threshold 0) so a step goes \"active\" exactly as it crosses the viewport mid-line; the active index re-renders the pinned graphic. ~30 lines — this is scrollama minus the dependency; don't add a scroll library.sticky top-0 h-screen in the other; stack on mobile with the graphic sticky on top. Give each step ~85vh so exactly one is centered at a time; dim the inactive step cards (opacity:.3) so the live one reads.graphic(active)), holding no click state of its own — so it also screenshots/exports deterministically and degrades to a static figure. Animate between states (color / width / opacity, 300–700ms) so scrolling feels continuous, not steppy.prefers-reduced-motion per the Motion note above; keep the state changes but drop the tweens.)Grid systems, the 8-point spacing scale, visual-weight balance, alignment, and the render-then-critique loop live in design-spatial (../design-spatial/SKILL.md) — the mechanical counterpart to this file's tokens/type/color. Load it whenever composing pages, dashboards, or components. (Direction nugget that belongs here: match composition ambition to the vision — maximalist earns elaborate/layered code; minimal/refined demands restraint and precise spacing.)
\nNot a push to round things — this governs the case where a rounded element is nested in\nanother (a button in a card, an inset panel in a container). When nested:
\nchild_radius = parent_radius − gap (the padding between them),\nso the two curves run parallel and the inner corner echoes the outer. Flat/unrounded children\nin a rounded parent are fine; what reads as broken is mismatched, non-concentric curves.design-spatial's layout-audit.js gates on and what accessibility standards require. Use APCA to design, WCAG to certify.:hover, :active, :focus must read as more prominent than rest — more contrast, not less. A hover that lowers contrast (e.g. lightens text toward the bg) reads as disabled.Avoiding the generic/trend look (Inter, purple-on-white, the same dark-glass card) and varying across generations is design-spatial §2 — not restated here.
\nAtmosphere over flat fills — but matched to the chosen aesthetic, not a default. The reflexive gradient-mesh / noise / grain \"premium\" treatment is itself the designer-trend mean (design-spatial §2); reach for it only when the direction genuinely calls for it, never as decoration for its own sake.
\n