This skill is a graph, not a file. The body below is the Map of Content. Follow the

[[wikilinks]]

only as needed — that's the whole point of progressive disclosure.

1. /design-engineering

   is a router before it is a library:

   [[skill-router]]

   resolves the design contract, classifies the phase (undecided → build → refine → check → name), and hands the job to one owner — a node here, a subagent, or an installed companion skill (AgentsORG

   design

   , impeccable, HyperFrames, ElevenLabs, transitions-dev, the shadcn CLI). One or two owners, never five.
2. Route first:

   [[routing-table]]

   maps intent → entry node for most single questions. If two intents blur,

   [[disambiguation]]

   names the tiebreaker. Multi-cluster jobs follow

   [[stacking-chains]]

   .
3. Otherwise scan the MOCs below, pick the cluster, and open its

   MOC-*.md

   for the atomic nodes under it.
4. Read only the atomic nodes that match. Each node is standalone — you don't need siblings.
5. Before reviewing UI code, also load

   [[gotchas]]

   and

   [[pov]]

   .

[[review-format]]

[[review-checklist]]

• [[MOC-philosophy]]

  → [[taste-is-trained]], [[unseen-details-compound]], [[beauty-is-leverage]], [[delight-impact-curve]], [[feeling-right]], [[marketing-vs-product-ui]], [[states-are-the-work]], [[data-is-content]], [[dependency-discipline]], [[pointing-beats-describing]], [[articulate-precisely]]

• [[MOC-motion]]

  → [[animation-decision-framework]], [[easing-curves]], [[duration-table]], [[spring-animations]], [[transform-opacity-only]], [[performance-discipline]], [[transform-mastery]], [[clip-path-tricks]], [[never-scale-from-zero]], [[gesture-momentum]], [[stagger-choreography]], [[prefers-reduced-motion]], [[fly-not-teleport]], [[responsive-feedback]], [[sonner-principles]], [[debugging-animations]], [[lerp-breathing]], [[morphing-icons]], [[shared-letter-morph]], [[hover-default-imperative]], [[tray-rules]], [[css-conventions]]

• [[cross-blur-transitions]] — Pair opacity 0↔1 with

  filter: blur(2px) ↔ 0

  to mask imperfect crossfades.
• [[compose-subtract-asymmetry]] — Enter with more properties than exit. Disappearance feels soft, not reversed.
• [[distance-falloff-propagation]] — Per-element lift via

  lift * pow(falloff, distance)

  for grouped hover.
• [[multi-segment-shake]] — Form-error shake at 0%, 28.57%, 57.14%, 78.57%, 100% over 280ms.

• [[MOC-sound]]

  → [[sound-decision-framework]], [[sound-motion-sync]], [[sound-palette]], [[sound-spec]], [[sound-playback-web]], [[sound-generation-elevenlabs]], [[sound-generation-open-source]], [[launch-video-sound]], [[launch-video-music]], [[sound-from-motion]]

• [[MOC-launch-video]]

  → [[launch-video-registers]], [[launch-video-structure]], [[launch-video-type]], [[launch-video-ui-demo]], [[launch-video-motion]], [[launch-video-seams]], [[launch-video-cuts]], [[launch-video-review]], [[hyperframes-reconciliation]]

• [[MOC-svg]]

  → [[svg-creation]], [[svg-animation]], [[svg-path-morphing]], [[video-to-vector-pipeline]]

• [[MOC-typography]]

  → [[typography-humanity]], [[line-length-tracking]], [[type-scale-and-rhythm]], [[line-behavior]]

• [[MOC-surface]]

  → [[color-monochromatic]], [[color-scales-oklch]], [[dark-mode]], [[shadows-whisper]], [[depth-and-nesting]], [[border-radius]], [[visual-imperfection]], [[contrast-and-color-scheme]]

• [[MOC-layout]]

  → [[viewport-custom-design]], [[sticky-and-scroll-tells]], [[url-as-state]], [[marketing-surface-rules]]

• [[MOC-components]]

  → [[hover-states-subtle]], [[empty-loading-states]], [[icon-systems]], [[cards-design]], [[forms-validation]], [[forms-behavior]], [[touch-and-focus]], [[ui-polish-pass]], [[component-api-design]], [[avatar-systems]], [[interaction-personality]], [[accessibility-baseline]], [[optimistic-updates]], [[copy-voice]]

• [[MOC-anti-patterns]]

  → [[ai-default-tells]], [[unslop-pass]], [[content-authenticity]], [[copy-tells]], [[code-tells]]

[[review-format]]

• [[skill-router]] — What

  /design-engineering

  does first: resolve the contract, classify the phase, hand off to one owner — a node, a subagent, or an installed companion (AgentsORG

  design

  , impeccable, HyperFrames, ElevenLabs, transitions-dev, shadcn CLI).
• [[routing-table]] — Intent → entry-node router with the four postures (build / judge / decide / name). Open this before anything else on a single question.
• [[prototype-picker]] — Undecided? Three to five genuinely different versions behind a live picker, numbers on controls, then write the decision and delete the harness.
• [[build-a-tool]] — "Closer, but not quite" twice? Stop re-prompting; diagnose the gap and build the small tool that produces the artifact.
• [[vibe-to-generator]] — Only a mood, no spec? Research the visual language into rules, then a seeded generator with knobs and a save button.
• [[design-system-docs]] — Writing a DESIGN.md or docs folder an agent can follow: inventory the code, when/alternative, closed variant sets, correct/incorrect examples, verify by prompting.
• [[skill-writing-rules]] — Encode process, write the why, be strict, earn every line, one aspect per skill, test by running. Governs every node here and [[pov]].
• [[design-benchmarks]] — DesignBench's generation / edit / repair tasks and Design Arena's pairwise votes, and this skill's own eval suite that borrows both.
• [[disambiguation]] — The questions that blur together (four motion questions, three dark-mode owners, two layout-shift owners) and which node owns each.
• [[stacking-chains]] — Ordered node chains for multi-step jobs (new screen, feel-better pass, design system, marketing site, a11y pass).
• [[review-format]] — Required output format for UI critiques (Before | After | Why markdown table).
• [[review-checklist]] — Thirteen-row audit to scan against before signing off on a UI review.
• [[design-vocabulary]] — The precise word for each design phenomenon and where the skill goes deeper. The lexicon behind [[articulate-precisely]]; seeded by Index (Emil Kowalski & Glenn Carstens-Peters).
• [[using-design-file]] — How to consume a project's

  .design

  contract (schema

  design.v1

  ). Machine-readable tokens, committed intent, executable policy — and it outranks this skill's defaults.
• [[using-design-md]] — How to consume a project's DESIGN.md (Google Labs spec). Tokens are normative; prose is context.
• [[agentation-workflow]] — Install and use Agentation for click-to-annotate design review. Two-session critique-then-fix workflow.
• [[cross-model-testing]] — How to test description / routing changes across GPT, Claude Opus, and Claude Sonnet.
• [[gotchas]] — lived failures, appended as the agent trips up.
• [[pov]] — author/installer's opinions and taste calls that override defaults. Edit this when you fork.
• [[animations-dev-curriculum]] — external pointer to Emil's course; don't duplicate.

agents/

• [[ui-reviewer]] — Runs the

  [[review-format]]

  table +

  [[review-checklist]]

  audit on a UI snippet.
• [[motion-auditor]] — Animation/transition critique against the motion cluster + transitions.dev nodes.
• [[anti-pattern-scanner]] — Scans for AI-default tells and content-authenticity misses.
• [[agentation-fix-loop]] — Session-2 fix side of

  [[agentation-workflow]]

  . Reads MCP annotations and applies fixes.
• [[design-md-consumer]] — Reads a project's DESIGN.md and threads its tokens through generated UI per

  [[using-design-md]]

  .
• [[pov-curator]] — Helps the installer fork

  [[pov]]

  and append to

  [[gotchas]]

  after a real failure.
• [[sound-designer]] — Runs the sound cluster end to end: decide, palette, generate (

  scripts/sound-family.mjs

  for a product family,

  scripts/sound-sheet.mjs

  for a video stem derived from the motion), spec, wire up. Returns a sound map.
• [[svg-creator]] — Authors or refactors an SVG asset: grid, named groups, token colors, SVGO with the right flags, accessible name.
• [[svg-animator]] — Animates an SVG or builds a vector flipbook from frames (

  scripts/svg-flipbook.mjs

  ), engine chosen by where the file lives.
• [[launch-film-analyst]] — Measures a reference launch film or your own render at native fps and returns the [[launch-video-review]] rubric plus a per-film JSON.

agents/README.md