what your agent actually reads
The skill
A skill is a folder of notes an agent loads when a job calls for it. This one, design-engineering, is a graph: short nodes that link to each other, grouped into clusters. The lessons teach these nodes to you; your agent reads the nodes themselves.
Version 3.3.1 AgentsORG/design-engineering Install it in your agent
/
201 nodes in 14 clusters
Philosophy12
Taught in How good interfaces think- MOC — PhilosophyWhen polish matters, what taste is, and how delight earns its weight.
MOC-philosophy - Articulate preciselyName the phenomenon exactly, and say why it works. Precise vocabulary is what converts taste into a spec — for a teammate or for an agent.
articulate-precisely - Beauty is leveragePolish compounds into competitive moat. The thing that looks like it doesn't matter is often the thing that does.
beauty-is-leverage - Data is contentTables, charts, lists, dashboards deserve the same typography, alignment, and whitespace care as marketing pages.
data-is-content - Dependency disciplineReplicate simple utilities. Draw shapes in CSS. Prefer native browser APIs over libraries. The bundle is design.
dependency-discipline - Feeling rightOptimize for "feeling right," not just "working." This is the part the model cannot infer from training data.
feeling-right - Marketing UI vs Product UIMarketing is brand expression and narrative pacing. Product is consistency for the 100th session, not the first. Different rules apply.
marketing-vs-product-ui - Pointing beats describingPrecise machine-readable selection (selectors, file paths, coordinates) outperforms natural-language description when feedback goes to an AI agent.
pointing-beats-describing - States are the workLoading, empty, error, partial, offline, permission-denied. The real design surface is the states, not the happy path.
states-are-the-work - Taste is trainedTaste is a trained instinct, not innate. Reference libraries, constraints, and time spent looking are the inputs.
taste-is-trained - The delight-impact curvePotential for delight rises as feature frequency falls. Daily-use features need minimal delight; rare moments earn big ones.
delight-impact-curve - Unseen details compoundThe details users never consciously notice are the ones that decide whether they trust the product.
unseen-details-compound
Motion33
Taught in Motion- MOC — MotionWhen to animate, how to animate, and the discipline of restraint.
MOC-motion - `prefers-reduced-motion`The one accessibility rule everyone skips. Disable large translations/scales, not all motion.
prefers-reduced-motion - Animate only transform and opacityOnly animate transform and opacity. They are GPU-accelerated. Everything else forces layout.
transform-opacity-only - Animated hit testingWhile something animates, a press goes to where it is heading, not where it is drawn — except when the press starts a drag. Pin a dragged element's spring to the pointer, keep the just-released item above the rest until it settles, and select a row in a scroll list on release, not on press.
animated-hit-testing - Animation decision frameworkShould this animate at all? Frequency-based decision tree. Most animations should be deleted.
animation-decision-framework - Animation durationsSpecific durations by element type. UI < 300ms. Buttons 100–160ms.
duration-table - Animation removal hazardsDeleting an animation is not find-and-replace. Remove its start state, the code that waits for it, and the orphans it leaves; reduce before you delete, and keep motion that bridges a jarring change.
animation-removal-hazards - animations.dev — the canonical courseExternal pointer to Emil Kowalski's animations.dev course. Don't duplicate its content here.
animations-dev-curriculum - clip-path tricksclip-path is animatable, GPU-accelerated, and unlocks 5+ patterns that would otherwise require canvas or SVG.
clip-path-tricks - Compose on enter, subtract on exitEnter with 5 properties, exit with 3. Disappearance feels soft, not a reversed entrance.
compose-subtract-asymmetry - Cross-blur transitions
cross-blur-transitions - CSS conventions1turn over 360deg, seconds over ms (or both with a reason), unitless line-heights, rem over px, native methods over libraries.
css-conventions - CSS transform masterytranslateY with percentages, scale() scales children, 3D transforms, transform-origin fundamentals.
transform-mastery - Debugging animationsSlow-motion playback, frame-by-frame inspection, real-device testing. The three tools.
debugging-animations - Distance-falloff hover propagationPer-element lift via `lift * pow(falloff, distance)` for grouped hover. Avatar groups, list rows.
distance-falloff-propagation - Easing curvesCustom cubic-bezier beats built-in CSS easings. Never use ease-in for UI.
easing-curves - Fly, don't teleportWhen a component persists between two states, animate the change. Don't crossfade what should travel.
fly-not-teleport - Frame-rate independenceAnimation state should depend on time and events, never on which frames happened to run. Step springs on a fixed clock or sample a closed form, cap the catch-up after a stall, apply events at their timestamps, store what the user placed and derive what fits, and never let last frame's value make a decision.
frame-rate-independence - Gesture momentumVelocity-based dismissal, damping at boundaries, pointer capture. The mobile-feel rules.
gesture-momentum - Hover by default, imperative for everything elseIcon-animation components animate on :hover by default. Expose an imperative trigger() for touch and programmatic use.
hover-default-imperative - Lerp breathing — one update, many elementsUpdate multiple visual elements with the same lerp rate so they breathe as one organism, not as desynced parts.
lerp-breathing - Momentum projectionOn release, project where the flick would come to rest (current + (v/1000)·d/(1−d), d ≈ 0.998), snap to the target nearest that point, hand the release velocity to the spring, decide by velocity sign, run X and Y on separate springs, and always start from the on-screen value.
momentum-projection - Morphing icons — the constraint-driven approachConstraint-driven icon system — every icon = N SVG lines, unused lines collapse to invisible center points, same-shape icons rotate.
morphing-icons - Multi-segment shakeForm-error shake at 0%, 28.57%, 57.14%, 78.57%, 100% over 280ms with 4px overshoot.
multi-segment-shake - Never animate from scale(0)Never animate from scale(0). Use scale(0.95) + opacity, or @starting-style for modern CSS entry.
never-scale-from-zero - Performance disciplineFast UI is work you don't do. Name transition properties (bare Tailwind `transition` is `all`), composite-only animation, will-change as a targeted fix, virtualize past ~50 rows, keep frames out of React state, reserve space for everything async, preload critical and lazy the rest, pause off-screen, pre-render content, mute transitions during theme swaps.
performance-discipline - React Native motionMotion in React Native and Expo lives on the UI runtime. Reanimated not core Animated, no setState per frame, springs for anything a finger touched, native navigation instead of hand-rolled transitions, haptics on the causal frame, judged on a release build.
react-native-motion - Responsive feedbackButton press, tooltip skip-delay, popover origin awareness — the small responsiveness wins.
responsive-feedback - Shared-letter text morphsText-state morphs that share letters animate the difference. "Continue" → "Confirm" via the shared "Con".
shared-letter-morph - Sonner principlesTen principles for building loved components, distilled from Emil Kowalski's Sonner library.
sonner-principles - Spring animationsWhen springs beat curves — interactive/draggable elements. Apple's critically damped default (bounce 0, ~0.35s), the 380/30 drawer spring, bounce only after momentum. Interruptibility.
spring-animations - Stagger choreographyCascading reveals (30–80ms delays). When stagger helps comprehension and when it just reads as noise.
stagger-choreography - Tray rulesSix rules for tray-style modal stacks — user-initiated, varied heights, single focus, title + dismiss, context preservation, transient actions.
tray-rules
Color, depth and surfaces15
Taught in Color, depth and surfaces- MOC — SurfaceColor, shadow, border-radius, dark mode. The "background" choices that decide feel.
MOC-surface - Border radiusUniform radius everywhere is lazy. Capsule buttons need full package. Nested-radius rule.
border-radius - Color scales in OKLCHAuthor in OKLCH. One hue per ramp, L anchored 0.97→0.22 and spaced evenly, chroma as a curve clamped per step, siblings at the same fraction of their own ceiling, dark mode by remapping steps, contrast repaired by moving L only.
color-scales-oklch - Colour token tiersTwo tiers — primitives named by hue and step, never used in a component; semantics named by role, the only tier components reference. Build against a full role inventory, one word per concept, accent for the brand so primary stays free, separator and border as separate roles, and no text on a colour with alpha.
color-token-tiers - Contrast and color-schemeAPCA over WCAG 2 for contrast math. theme-color and color-scheme meta. Interactions raise contrast. Avoid gradient banding.
contrast-and-color-scheme - Dark modeNever pure
dark-mode - Depth and nestingInner radius = outer − padding. Shadows elevate, borders separate. Dark mode collapses shadows to a ring. Hairlines at 0.5px on retina, image outlines pure black or white at 10%, fades by mask, themes by flipping variables.
depth-and-nesting - Gradient interpolationA gradient's interpolation space is a look, not a correctness setting. `in oklab` is the default (even brightness), `in oklch` arcs round the hue wheel and stays vivid (pick shorter or longer hue), sRGB muddies the middle. Opposite hues go grey in a rectangular space; big low-contrast gradients band; text on a gradient is measured at its worst region.
gradient-interpolation - Monochromatic palettesMonochromatic with one or two accents beats a five-color palette. Why bright/purple gradients scream AI.
color-monochromatic - OKLCH gamut and migrationChroma ceilings swing with hue and lightness — clamp C holding L and H, layer P3 behind a media query over an sRGB base, add a hex floor only for pre-2023 browsers, and migrate hex/rgb/hsl to OKLCH value-for-value, reporting every change.
oklch-gamut-and-migration - Palette step rolesA system is one neutral ramp, one accent ramp and only the status ramps the product renders. Every step exists because a role consumes it (Tailwind 50–950 by lightness, Radix 1–12 by role), solid fills sit on 600 because white on 500 fails, status hues stay 15° from the accent, one filled action per view, and an existing palette is inventoried before it is restructured.
palette-step-roles - Shadows whisperShadows should whisper, not announce. The default 0 2px 8px is a tell. Concrete spec.
shadows-whisper - Translucent materialsTranslucency is a floating functional layer, not decoration. Material weight encodes hierarchy, never stack light glass on light glass, bigger surfaces read thicker, scrim for modal and none for parallel, vibrant text, scroll-edge masks over dividers, materialize with blur + scale, and solid fallbacks for reduced transparency and more contrast.
translucent-materials - Visual imperfectionOptical alignment beats mathematical. Texture and noise beat flat. Imperfect shapes beat perfect geometry — in marketing.
visual-imperfection - Z-index strategyPrefer DOM order to z-index; where you need it, one global file of sequential layer constants for app-wide layers and local values inside an isolated stacking context. No magic numbers, never mix the two, and know which properties create a stacking context or a clip.
z-index-strategy
Typography6
Taught in Typography- MOC — TypographyHumanizing text on screen. Font choice, line length, tracking.
MOC-typography - Line behaviorCap the measure near 65ch, pick a wrap mode per role, guard overflow both ways, never truncate without a route to the full text, case with CSS, type real punctuation, tune underlines, write direction-neutral CSS, and hold the size and contrast floors.
line-behavior - Line length, tracking, and text wrap
line-length-tracking - OpenType features and axesWhat lives inside a font file and how to reach it — static vs variable, the five registered axes, custom axes, OpenType features through font-variant-* first, numbered sets commented, real small caps and superiors, optical cuts by size, ornament and caret/placeholder details.
opentype-features-and-axes - Type scale and rhythmEvery size comes from a closed scale named by role. Leading unitless — ~1.1 display, 1.5–1.6 body. Tracking follows size. woff2 only, font-synthesis none, high-level properties over raw tags, tabular figures on anything that updates.
type-scale-and-rhythm - Typography humanityWhy Inter and SF Pro feel default. Indie foundries to know. The single-weight rule.
typography-humanity
Layout13
Taught in Layout and pages- MOC — LayoutPage-level layout, grids, viewports, sticky and scroll tells.
MOC-layout - Grouping by spaceGroup with space first, a background shape second, a separator line last; the gap between groups is at least twice the gap inside one. Controls look like controls, everything sits on a few shared edges, borderless controls get 24px between glyphs (bordered ones 12px), buttons inset 16px from the screen edge, content bleeds while controls float, one primary action per view.
grouping-by-space - Growth and overflowLayouts break when content grows — a German label, 200% text, a long URL. Size text boxes with max-width and min-height, let rows wrap, test with pseudo-localization. minmax(0, 1fr) and min-width 0 stop min-content blowout; 100% not 100vw; 100dvh panes; container queries for components (and the container-type collapse); breakpoints where the layout stops fitting; peeks and scroll-padding for what scrolls.
growth-and-overflow - Information architectureStructure follows the user's mental model. Group long settings, tabs only for views of one thing, two levels of menu before breadcrumbs, search logs as rename requests, the primary action always in view, first value before any tour, errors that name a recovery.
information-architecture - Logical properties and RTLWrite anything that mirrors as leading and trailing — margin-inline-start, inset-inline-end, text-align start, float inline-start. Physical left and right are for physical geometry (safe-area insets) with a [dir="rtl"] override; translateX and background-position have no logical form. Visual order matches DOM order, only direction-bearing icons mirror, and mixed-direction values go in <bdi>.
logical-properties-rtl - Marketing surface rulesMarketing pages earn a bigger motion budget and still overspend it. Motion maps to input, intros play once per session, everything pre-renders, fonts and hero images preload, nav content stays in the DOM, CTAs know who is looking, docs are for copying, blogs and changelogs are feeds.
marketing-surface-rules - Mobile platform layerThe viewport, keyboard, scroll and browser-chrome fixes that make a web app feel installed — the baseline meta tag, dvh vs svh, safe areas in all four directions, the Android keyboard, scroll lock through a dialog primitive, overscroll none vs contain, per-scheme theme-color, text-size-adjust — each with its reason, verified on a real phone.
mobile-platform-layer - Page frameThe frame readers judge before any detail — one pair of equal margins, no half-empty sections, no holes, a first screen that says what this is, a heading on every section. Each rule is a measurement you can run on a render.
page-frame - Scroll anchoringWhen content above the view changes height, keep the row the reader is looking at where it is on screen. Pick an anchor when the user scrolls, keep its screen offset until they scroll again, compare scroll positions by value (never by "a scroll event fired"), and store the scrollTop the browser read back.
scroll-anchoring - Share and crawl metadataA public page is read by people in tabs, by link previews in chat apps, and by crawlers — each needs a real title, description, image and crawl rule. Wire the template; take the words from the page; and walk the one paying flow end to end before launch.
share-and-crawl-metadata - Sticky and scroll tellsBackground-blur on sticky sections is an AI tell. Scroll hijacking confuses users. Native scroll usually wins.
sticky-and-scroll-tells - URL as stateFilters, tabs, pagination, panels — all live in the URL. Back/forward restores everything including scroll.
url-as-state - Viewport-custom designEach viewport gets its own design, not just a scaled version of desktop. Narrow columns are valid. Break the grid for delight.
viewport-custom-design
Components25
Taught in Components and states- MOC — ComponentsThe atoms users actually touch — hover states, empty/loading states, icons.
MOC-components - Accessibility baselineKeyboard-everywhere, :focus-visible, hit targets, ARIA names on icon buttons, polite aria-live for async. The a11y floor below taste.
accessibility-baseline - Avatar systemsUse real photos when available; fallback to deterministic generated avatars. DiceBear provides 30+ styles for the fallback.
avatar-systems - Cards designDon't nest cards. Design card interiors intentionally — whitespace, hover-only actions, subtle icons.
cards-design - Component API designA component API is a contract. Composition over configuration, compound parts sharing context, customization layered variants → size → className → asChild with className restricted on styled components, platform prop names, controlled and uncontrolled both, refs forwarded and props spread, type="button" by default.
component-api-design - Component confusablesThe component pairs people reach for interchangeably but shouldn't — tooltip vs popover, badge vs tag, sheet vs drawer vs dialog. Pick by behaviour, not by looks.
component-confusables - Copy and voiceActive voice, Title Case for headings + buttons, "&" over "and", 2nd person, numerals for counts, error messages guide the exit.
copy-voice - Dashboard tellsAn app screen is not a landing page. Headline numbers without icon circles or sparklines, at 16–40 px; deltas coloured by good or bad rather than up or down; zero change in grey; numbers right-aligned in tabular figures; one grotesk, 4–9 sizes.
dashboard-tells - Destructive actionsUndo beats confirmation for frequent, reversible actions; confirm only what cannot be reversed, affects other people or destroys many items. A confirmation names the action and object in its title, the loss in its body, verb-plus-object on its buttons, focuses the safe button, and asks for the name when an account, workspace or repository is at stake.
destructive-actions - Drawing toolbarA drawing or markup tool inside a product — a toolbar that changes shape instead of swapping panels, pens in a tray rather than a row of icons, strokes whose width answers speed or direction, an eraser that removes area, export that matches the screen exactly, defaults that are the shipping version, and a bar that stands up on the side of a phone. From Benji Taylor's Drawesome.
drawing-toolbar - Empty and loading statesEvery data view has four branches — loading, empty, error, full. Empty states direct action; errors offer a specific recovery. Delay any indicator ~150ms, show one by 400ms — a skeleton for content, a spinner only inside a control, progress bars past 3s. Persisted state is correct on first paint.
empty-loading-states - Forms — behaviorThe semantics the platform gives you, then the details — label wiring, right input type and keyboard hints, 16px, focus-visible, autocomplete where it helps, decorations over the input, autofocus only on desktop modals, a real form so Enter submits, buttons that disable while submitting and re-enable in finally, failed submits that keep every value, no dead zones, confirmed destruction, prefilled everything, drafts that survive a refresh.
forms-behavior - Forms — inline validationValidate at input, not on submit. Inline errors beat error summaries. Soft validation while typing, hard validation on blur.
forms-validation - Hover states — subtle by defaultHover is not lift-and-shadow. 1px shifts, color shifts, layered disabled state.
hover-states-subtle - Icon systemsNever mix icon packs. 10-32px range. Match stroke to font weight. Lucide is overused.
icon-systems - Interaction personalityUnique microinteractions, easter eggs, contextual feedback, sound. Personality lives in how the product responds, not how it looks.
interaction-personality - Keyboard patterns
keyboard-patterns - Optimistic updatesUpdate UI immediately on likely-success actions, reconcile or undo on failure. The fastest possible perceived latency.
optimistic-updates - Presence signalsShowing that another person is here, half here, or gone in a real-time product — an arrival that fills a ring, partial attention as a dashed outline, a leaving beat, live typing that resizes its bubble, reactions pinned where they were tapped in relative coordinates, shared activities that pause when one person leaves, and one colour per person everywhere. From Benji Taylor's Honk.
presence-signals - Screen-reader announcementsPick the announcement by a four-step ladder — focus move, aria-describedby, role="status", role="alert" — and stop at the first match. Live regions exist empty before their text changes; aria-busy around loads; alt text by purpose, not looks; sr-only boxes are 1px; aria-hidden never sits on or above anything focusable.
screen-reader-announcements - Sonner usageUsing and fixing Sonner. One Toaster at the root, toast() from client code only, theme and richColors set on purpose, a styling ladder that ends in headless toast.custom, and the causes behind missing, doubled, unstyled or buried toasts.
sonner-usage - Strings and localeInventory the existing strings before writing one; one noun per object, one verb per action. Build sentences whole in ICU with real plural categories, format every number, date and list through Intl, start buttons with a verb, make links name their destination, label toggles for the ON state, and keep in-progress and done strings parallel.
strings-and-locale - The UI polish passThe invisible finish, as a pass — antialiasing, constant weight on interaction, tabular numbers, no layout shift, real characters, states that stay put, a z-index scale, hit areas, optical alignment, native page scrollbars, designed empty states, inert decoration, no flash on refresh.
ui-polish-pass - Touch and focusHover enhances, never enables. 44px hit areas by pseudo-element, touch-action set on purpose, muted + playsinline, aria-label on icon buttons, hidden content out of the tab order, focus moved in and restored, timers paused when hidden, tooltip warm state, submenu safe area — plus the mobile-native fixes table.
touch-and-focus - WCAG 2.2 thresholdsThe WCAG 2.2 A/AA numbers that turn a preference into a finding — 4.5:1 and 3:1 contrast, 3:1 focus rings, 24×24 targets, a single-pointer path for every drag, focus never hidden under sticky chrome, 200% text and 320px reflow, a pause on anything moving over 5 s. A finding cites one of these or a task an assistive-tech user cannot finish; 44px targets and heading outlines are recommendations.
wcag-thresholds
Anti-patterns8
Taught in Spotting AI-default UI- MOC — Anti-PatternsWhat "AI default" looks like, and what to do instead.
MOC-anti-patterns - AI-default tellsPurple gradients, Inter, pure black dark mode, Lucide icons, lorem ipsum. The full list.
ai-default-tells - Code tellsGenerated UI code is rarely buggy and still costs you — narrated comments, catch theater, silent fallbacks, casts that delete compiler errors, V2 names, one-call wrappers, dead scaffolding, celebratory logs, weakened tests, drive-by diffs. The default fix is deletion.
code-tells - Content authenticityReal data, specific odd numbers, written copy, real photos. The opposite of lorem-ipsum and generated marketing tropes.
content-authenticity - Copy tellsThe statistical habits that mark prose as generated — model vocabulary, "not just X but Y", the rule of three, false ranges, stacked hedges, em dashes, bold inflation, generic conclusions, chatbot residue — and the two tests every product sentence must pass.
copy-tells - Leftovers and leaksWhat the build process leaves behind and the visitor sees — dev panels mounted for everyone, scaffolding routes indexed, debug logs of a session, secrets behind a public prefix, TODOs on the payment path. Gate what you can't prove is dead; report names, never values.
leftovers-and-leaks - Screenshot critiqueCritique the render, never your own code — single-purpose passes over screenshots at three widths, a fixed write-up per round, a fix order where later items cannot rescue earlier ones, and a three-round stop. Subtraction that leaves a page thin loses.
screenshot-critique - The unslop passThe process for a screen that looks generated — squint, subtract first, sweep color → type → layout → decoration → icons → copy → motion, then put a point of view back in, then audit for survivors. Fifty median choices compound into a recognizable one.
unslop-pass
Faux product UI8
Taught in Product demos- MOC — Faux UIFaux product UI — the still or short animated product shot on a landing page, feature card, docs hero or bento tile. A believable interface simplified to what the viewer needs, framed with intent, every motion caused, then filmed and checked frame by frame. Distilled from Benji Taylor's Stageshow.
MOC-faux-ui - Bento gridsA bento grid is one picture made of tiles, planned before any tile is built — a third to a half of the tiles show UI, one hero, each UI tile one component not a window, chrome at most once, neighbours of different kinds, stat tiles at display size on one line, copy outside the picture at page size, one Stage per tile at 1:1, and each width its own design.
bento-grids - Demo cursor and touchDriving a product demo like a hand — cursor kinds set by the elements it crosses, travel timed by distance on a shallow arc, a visible press, never over the label it clicks, rests on empty surface; drags as one motion with a fixed grab offset; selections that stay under the I-beam; one camera push-in; phones driven by touch with flicks and UIKit-quick responses.
demo-cursor-and-touch - Demo rehearsalChecking an animated demo the way an audience sees it — prove the still first, then film the whole loop as a contact sheet at the shown width and at 390, step through every press and the loop seam at 40–80ms, treat a fixed list of measured faults as never intentional, hand the frames (not the reasoning) to a fresh-eye reviewer, and leave a REHEARSAL.md that says what was not checked.
demo-rehearsal - Demo story and loopsThe timeline of an animated product demo — one of three story shapes, 3–5 beats in 10–16 s, a poster frame that tells the story alone, a payoff held 2 s, resets that have a cause, data that never rewinds in view, two storytelling curves beside product-quick feedback, and the measured kit values for flights, rows, rolling text and connectors.
demo-story-and-loops - Faux-UI restraintThe still frame of a faux product UI — a word budget of 3–7 real strings with placeholder bars for the rest, fidelity as a dial, the domain's signature content kept, real type sizes, the spacing numbers (12px word inset, 8px above a button, 4–6px between a title and its subtitle, 6px around a dot), icons from one set, real marks only, no AI sparkle, opaque fills, platform chrome kept true.
faux-ui-restraint - Product-shot framingHow a faux UI sits in its space — decided before the screen is built. Design at the shown size, one hero and at most two satellites of different kinds, 10–40% of the hero off stage, crop only filler, one gutter, the page is the ground, a compact second design at 358 wide, and a layout table from corner bleed to tilted stack.
product-shot-framing - Stageshow, reconciledBenji Taylor's Stageshow as a companion — when it owns a faux-UI job (a React kit, gold examples, a film-and-gate loop), what this graph keeps (whether it should move, the contract, the page around it, accessibility), and nine conflicts settled, from its 0.8–1 s arrivals against the 300ms UI budget to its autoplaying loops against WCAG 2.2.2's pause.
stageshow-reconciliation
- MOC — SVGAuthoring clean, editable, token-aware SVG; animating it with the right engine for where it lives; morphing paths that actually interpolate; and turning AI video or frame sequences into one editable animated SVG. The vector layer under icons, mascots, illustrations, and launch motion.
MOC-svg - Animating SVGPick the engine by where the file lives — inline + CSS/WAAPI for interactive UI, SMIL or embedded CSS keyframes for a self-contained file loaded as an image, a library only for gesture or timeline work. Stroke drawing, transform-origin, composite-only properties, group choreography, reduced motion, size.
svg-animation - Creating SVGAuthor SVG that is clean, editable, and on the token system — viewBox always, paths when it will animate, currentColor and CSS variables, defs and symbols, named layers, SVGO with the right flags off, title and desc — and the tells of generated SVG.
svg-creation - fun-isometric, reconciledKelvin Adithya's fun-isometric as a companion — when it owns a sticker job, what the graph keeps (the contract, pov, reduced motion, where motion is allowed), and ten conflicts settled, from its scale-0.2 pop against never-scale-from-zero to its sharp corners and grey slot against a forked pov.
fun-isometric-reconciliation - Isometric stickersAnimated isometric stickers for empty states, onboarding and feature cards — flat slabs with one thick ink outline, faces that lean instead of rotate, colours as palette roles, three to six parts per hero object, and motion played from After Effects keys chosen by the object's verb, with a still hold after the action. Distilled from Kelvin Adithya's fun-isometric.
isometric-stickers - Path morphingA native morph interpolates only between paths with the same number and order of commands — author both shapes on one point budget, or hand the mismatch to flubber. Most icon "morphs" should be a deep scale-and-blur swap instead.
svg-path-morphing - Video to vector
video-to-vector-pipeline
Sound14
Taught in Sound- MOC — SoundWhen an interface should make a sound, how to design a family of sounds that belong together, how to sync them to motion, and how to generate them — ElevenLabs on demand, or open-weight and CC0 without a key — plus the five measured launch-film sound registers and how a track or a voice is placed on the picture.
MOC-sound - Designed SFX anatomyWhat a designed motion sound effect is made of, measured — one gesture per sound, its own band, a hard end, mono for objects and wide for textures, and a sync point per kind. Per-category targets for whoosh, riser, impact, sub drop, sting, glitch, shimmer, ding, pop, pop-in, click, tick, typing and zip.
designed-sfx-anatomy - earshot, reconciledearshot gives an agent ears — describe, match, find, realness, a listening timeline, a launch scorecard, and a bank of 201 code-rendered effects aimed at the picture. What it owns, where this graph's values win, and how to run it.
earshot-reconciliation - Launch-video musicPlace a music track or a voice on a launch film's picture — the drop on the reveal, breakdowns under anything read, locked cuts on the onset frame, and the voice as the clock with the bed 10-13 dB under it.
launch-video-music - Launch-video soundPick the sound register from the picture (dry reveal, OpenAI one-key bed with clicks, beat track, voice-led, product-camera pad with consequence foley), take something away just before the reveal, and state the loudness on purpose; -1 dBTP true peak is the only fixed number.
launch-video-sound - Sound decision frameworkShould this make a sound at all? Frequency first, then purpose, then the 100th-use test. The default answer is no — and the exceptions are specific.
sound-decision-framework - Sound from motionDerive every audio property from the motion, and let the picture place a bed's or a track's structure.
sound-from-motion - Sound generation with ElevenLabsGenerate a whole sound family on demand with ElevenLabs — material-first prompts, high prompt_influence for functional sounds, short durations, one session per family, then trim and normalize.
sound-generation-elevenlabs - Sound generation without a keyNo API key needed — open-weight text-to-audio that runs on a CPU, procedural synthesis in under a kilobyte, and CC0 libraries you can ship commercially. A decision table for which path.
sound-generation-open-source - Sound licensingA launch film is commercial, edited and published where audio is scanned, so every recording needs a licence that allows all three — read on the item's own page, recorded, audited and credited. CC0 and CC BY yes; NC, ND and SA no; Content ID is its own trap.
sound-licensing - Sound paletteOne material, a handful of sounds. Size maps to pitch and length, direction maps to meaning, consonance to success and dissonance to error. Stock packs are tells.
sound-palette - Sound playback on the webUnlock the AudioContext on the first gesture, decode once, one source node per play, a persisted mute that is off by default, and never information carried by sound alone.
sound-playback-web - Sound specThe numbers for a shipped UI sound — duration by category, loudness in LUFS, peak headroom, mono, 44.1 kHz, zero leading silence, file format per target.
sound-spec - Sound–motion syncSound and motion are one event: transients on contact frames, cuts on onsets; audio may lag a frame, never lead.
sound-motion-sync
Launch video14
Taught in Launch films- MOC — Launch videoLaunch films as an ordered decision flow — register, beats, words, UI demo, motion, seams, cuts, sound, review.
MOC-launch-video - A film as a function of timeA film rendered from code is a pure function of time on a beat grid. That buys real sub-frame motion blur, a shutter that never crosses a cut, a grid fitted to the music the film actually uses, and delivery gates (H.264 level, size, frame count, the hardware decoder) that a file must pass before handover.
film-as-function-of-time - cinetic, reconciledcinetic builds a launch film in Remotion (or HyperFrames) from one beat grid, with render, QA and Chromium forensics scripts. It owns the build. This graph keeps register, structure, type cadence and sound, and its measured values win where they disagree. cinetic's unnamed-corpus pacing numbers wait for a measurement.
cinetic-reconciliation - HyperFrames reconciliationWhere this graph and HyperFrames give different values for a launch film (seam eases, zoom-through, springs, crossfades, idle motion, blur, cursor, captions, clip timing, sound) and which value to use inside a HyperFrames project.
hyperframes-reconciliation - Launch video structureMeasured beats for a launch film — a readable word by 0.2-0.7 s, the name early, where a problem act ends or at ~70 %, the low end on the first reveal, an endcard of 4.4-6.3 s holding ~2 s.
launch-video-structure - Launch-video cutsLaunch films cut (Skale's UI films 4 a minute, acclaimed in-house or uncredited films 15.6, beat-cut sizzles 31). The craft is where the cut lands (on a cause, on a constant ground, on the element being read, inside a fill), plus the two cuts that fail in every register (the dead cut, and a crossfade whose midpoint exposes a different ground).
launch-video-cuts - Launch-video formatsThe short forms beside a launch film — a feature loop that is a cycle with no seam, a logo sting that assembles the mark and holds it, and vertical cuts that are re-laid out for the feed rather than cropped. Seam gates, GIF frame-rate arithmetic, feed safe zones and type minimums.
launch-video-formats - Launch-video motionMotion inside a launch-film shot — exponential settles sized to each move's travel, mirrored exits, cameras exempt, overshoot and velocity blur as registers with measured base rates, no decorative idle, and liveliness from creep, accelerating rhythm and causes that ignite their effects.
launch-video-motion - Launch-video registersPick the register first. Cut rate, stillness, move length and loudness are register properties, measured on 47 launch films (29 Skale pieces, 18 acclaimed 2024-2026 films).
launch-video-registers - Launch-video reviewReview a film at native fps against its register — recount cuts by eye, check seams and onsets on frames, then taste. Measurement traps, the 11-row film rubric, and HeyGen's numeric render checks.
launch-video-review - Launch-video seamsWhat crosses a scene change in a launch film — the vector law, one current per film, measured carriers, a seam budget, and a typed seam ledger.
launch-video-seams - Launch-video typeFilm type is built per word at ~0.2 s, the newest word is marked then settled, holds run 1.15-1.5 s, and statements are set at video sizes. Cadence numbers, the slam word, stamped type moves, and who owns captions.
launch-video-type - Launch-video UI demoProduct on screen in a launch film — rebuilt UI cropped tight, a cursor big enough to read with a visible press, prompts typed at read or recognise speed, human and agent told apart, and the agent's wait stepped or cut.
launch-video-ui-demo - scenario-kinetic-film, reconciledscenario-kinetic-film builds a beat-cut kinetic-type film as one web page, renders it with real motion blur, and generates the music, sound kit and key art through Scenario MCP. It owns the build and the paid generation loop; this graph keeps register, structure, sound placement and loudness, and its energy gates apply only inside its own register.
scenario-kinetic-reconciliation
Diagrams5
Taught in Diagrams- MOC — DiagramsDiagrams as a decision flow — whether a picture earns its place, which surface it lives on (an editorial figure, an editable tldraw canvas, docs-as-code, FigJam), the craft of a figure, the contract handoff into diagram-design, and canvases for agents.
MOC-diagram - Diagram craftWhat makes a figure read as designed — delete first, one or two focal accents, treatment over size, orthogonal connectors with masked labels and their own attach points, arrows drawn before boxes, a 4px grid, a bottom legend, mono only for technical text, and an accessible SVG. Distilled from diagram-design for drawing without it and for reviewing a figure made with it.
diagram-craft - diagram-design reconciliationWhere diagram-design, a project's .design contract and this graph give different values for a figure (skin source, paper, families, accent, component tokens, small type, motion clock, export, pov) and which value to use inside a diagram-design file.
diagram-design-reconciliation - Should this be a diagram, and where does it live?Whether a picture earns its place, and which surface it lives on — a finished editorial figure (diagram-design), an editable canvas (tldraw), docs-as-code (Mermaid) or FigJam — with one owner per surface, chosen by who touches the picture next.
diagram-decision - tldraw canvases
tldraw-canvas
Meta: working with agents26
Taught in Directing your agent- Agentation workflow
agentation-workflow - Build a tool to build the thingWhen prompting for an artifact keeps landing on "closer, but not quite", stop iterating on the output and build the small tool that produces it — diagnose the gap, pitch the tool, put every judgment on a live control, save writes a file, harvest the config.
build-a-tool - Change-scoped reviewReviewing a diff, not a screen. Resolve the scope (commits ahead of the merge base plus uncommitted work), expand changed files to the surfaces they render in, read the removed side of every hunk for lost signals, and status each finding Introduced, Regression or Pre-existing by cause, not by location. Only the first two block; three pre-existing findings is a courtesy, thirty is another review.
change-scoped-review - Cross-model testingTest skill routing and execution against GPT, Claude Opus, Claude Sonnet. Sonnet and GPT behave quite differently.
cross-model-testing - Design benchmarks and this skill's evalsHow design output gets measured — DesignBench's generation / edit / repair tasks with compile, CLIP, and MLLM-judge metrics; Design Arena's anonymous pairwise votes aggregated by Bradley-Terry — and this skill's own eval suite that borrows both shapes.
design-benchmarks - Design system docs agents can followDocs define when to use what; write them for an engineer who joined yesterday and can never ask. Inventory the code first, size the structure, give every component when/alternative + closed variant set with a default + one correct and one incorrect example + a flowchart, ban hedge words, then verify by prompting and fix the docs, not the output.
design-system-docs - Design vocabularyThe precise word for each design phenomenon, and where this skill goes deeper. The lexicon behind articulate-precisely. Seeded by Index's articulate module.
design-vocabulary - Directing agentsHow a person steers an agent toward good UI — friction where judgment matters, a named concept instead of an adjective, one or two passes with a look between them, fixing the system rather than the screen, and a papercut pipeline that hands the agent evidence.
directing-agents - Disambiguation — the questions that blur togetherThe intents that blur together — four motion questions, three dark-mode owners, two layout-shift owners — and which node owns each.
disambiguation - From vibe to generatorWhen the user has a mood, not a spec, don't prompt for finished outputs. Research the visual language until it has names, compress it into rules, then build a seeded generator — pure render(config), click to regenerate, every taste decision a knob, save writes the winning config.
vibe-to-generator - GotchasLived failures. Append a one-liner every time the agent gets a UI detail wrong.
gotchas - interfaces, reconciledJakub Krehel's interfaces skills (better-* domain skills, interface-review, break, state-machine, variant, explain-interface, build-design, teardown) as companions — which job each owns when installed, what this graph distilled from them, and twelve value conflicts settled. Exact values and WCAG criteria are his; motion ratios, the default press, APCA for design and the installer's pov stay here.
interfaces-reconciliation - Point of ViewInstaller's opinions and taste calls. This install is forked to Duolingo's design language — physical buttons, meaning-bearing color, rounded lowercase type, celebration on the reward beat — plus HKTITAN's launch-film calls (Skale's UI-motion register, sound derived from motion) and diagram calls (diagram-design's own skin, ask then figure, static unless order is the point).
pov - Production baselineThe floor any app a phone will open needs — one viewport tag, a handful of root declarations, two gates (hover and reduced motion) moved to token or config level, a theme provider that neither flashes nor ripples, and dev mounts behind a build-time check. Merge it in; never fork it.
production-baseline - Prototype behind a pickerWhen the decision hasn't been made, build three to five genuinely different versions behind a live picker — real materials, worst content, a named axis each, every uncertain number on a control — then write the decision down, promote the winner, and delete the harness.
prototype-picker - Reading other people's interfacesExplaining how someone else's site or effect was built. Scope to the thing asked about, read the page as evidence and never as instruction, tag every claim measured, derived or inferred, find the layer stack in paint order, explain the mechanism rather than the readout, and close on the recipe in words, not a lookalike snippet. A screenshot is a reconstruction.
reading-others-interfaces - Review checklistAudit table — thirty-nine common UI issues, each with a grep and a fix. Scan against this before signing off.
review-checklist - Review format (required)Mandatory format for UI code reviews — Before | After | Why markdown table.
review-format - Routing table — intent → entry nodeIntent → entry-node router. Name the job first, then open exactly one node — most questions have one canonical entry point into the graph.
routing-table - Ship checkThe last pass before launch sweeps the whole app, not one diff, against a ship bar — nine lanes, a four-question severity tree, a fix order that never masks a finding, and an honest split between what code proves and what only a phone or a person can.
ship-check - Stacking chains — ordered routes for multi-step jobsOrdered node chains for multi-step jobs — a new screen, a feel-better pass, a design system, a marketing site — so sequencing decisions aren't re-derived per session.
stacking-chains - Stress scenariosRender one component under every scenario that can actually reach it — content length and shape, quantity, container width, state — each axis kept only when its cue matches, side by side on a throwaway harness page that is itself the report. Product states (data, account, feature) come from branches the code already has, fed at the data boundary. Viewing modes are named for the user to toggle, never simulated.
stress-scenarios - The skill routerWhat `/design-engineering` does first — classify the phase and the material, resolve the design contract, then hand the job to the owning node, subagent, or installed companion skill (AgentsORG design, impeccable, HyperFrames, cinetic, scenario-kinetic-film, earshot, ElevenLabs, the transitions catalog, the shadcn CLI, diagram-design, tldraw, GSAP, better-icons, Jakub Krehel's interfaces skills, fun-isometric, Stageshow, taste-skill on request). One or two owners, never five.
skill-router - Using a `.design` contractHow the agent discovers, reads, follows, updates, and verifies a project's .design contract — and why it outranks this skill's defaults.
using-design-file - Using design.mdHow the agent reads, respects, and (rarely) updates a project's DESIGN.md file. Tokens are normative; prose is context.
using-design-md - Writing skills that change behaviorA skill fights probabilistic output by forcing the same process, not the same output — encode decision trees, write the why, be strict, make every line earn its place, keep one skill per aspect, and test by running with and without a line.
skill-writing-rules
- MOC — CommandsThe verbs behind the single entry `/design-engineering [verb] [target]` — one command file per job, each a whole procedure that points into the graph.
MOC-commands - /design-engineering a11y/design-engineering a11y [target]
cmd-a11y - /design-engineering break
cmd-break - /design-engineering film
cmd-film - /design-engineering mobile
cmd-mobile - /design-engineering motion
cmd-motion - /design-engineering polish/design-engineering polish [target]
cmd-polish - /design-engineering review
cmd-review - /design-engineering ship/design-engineering ship [audit | quick | lane | path]
cmd-ship - /design-engineering sound
cmd-sound - /design-engineering stage
cmd-stage - /design-engineering svg
cmd-svg - /design-engineering tells
cmd-tells - /design-engineering tokens
cmd-tokens - The short verbsThe short verbs — diagram, options, name, which, agentation, pov — each one owner and a stop condition.
cmd-small