Skills for Designers and Engineers

The hub. A long, opinionated set of rules for motion and interface detail: a four-question gate before anything animates, named easing curves, press and gesture behaviour, clip-path techniques, and a mandatory Before/After review format.

Reach for it when you want one file that sets the bar — every other motion skill here routes back to it.

Audits an interface for places that would genuinely benefit from motion, then throws most of them away. Output is capped at five to seven suggestions for an entire app, and every rejected candidate is listed with the question that killed it.

Reach for it when a page feels inert and you want to know whether that is a problem — before adding anything.

The subtraction pass. A decision tree for deleting motion — keyboard-triggered, a hundred times a day, decoration on functional data — plus the ways removal breaks things: hidden opacity start states, exit-completion waits, focus moved in a callback.

Reach for it when an interface feels busy, or before a redesign inherits years of transitions.

Construction, from the gate to the code. Seven ordered steps, a tool ladder that starts at a plain CSS transition, tables for curve and duration, and a 13-recipe reference covering press, dropdown, modal, drawer, toast, stagger and drag-to-dismiss.

Reach for it when one element should move and you want the agent to make the call instead of offering a menu.

The React Native and Expo version of animate, rewritten for different physics: no hover, two runtimes, a finger on the element. Reanimated worklets, Apple-style spring parameters, haptics rules, 120fps frame budgets and the setup traps that stop gestures working.

Reach for it when the target is a phone app, not a browser.

The coordination layer: what leads, what supports, what overlaps, what stays still. Cast roles first, then choose one of four relationships per pair, with budgets by context and an explicit ban on uniform stagger.

Reach for it once more than one thing moves together — a panel and its contents, a list and its empty state.

A merge gate for motion. Ten non-negotiable standards, findings with file and line, and an explicit Block or Approve at the end. It refuses to trigger itself, so the agent only reviews when you ask.

Reach for it when a change touches animation and you want a verdict, not a compliment.

A whole-codebase audit that writes plans, not patches. It maps the stack and the existing motion, ranks findings by leverage, then writes self-contained plans specific enough for an executor with zero context and zero taste.

Reach for it on a legacy app where motion is inconsistent and you want the work split into tickets.

Dropped frames, diagnosed in order of likelihood. Frame budgets at 60 and 120Hz, the composite/paint/layout pipeline, the two traps that still use transform — an inherited CSS variable on a parent, an animated blur — and the evidence rule: from code, or needs a device recording.

Reach for it when the animation is correct but feels heavy, especially on a mid-range phone.

Apple's fluid-interface principles translated to the web: momentum projection instead of a parabola, rubber-banding, velocity handoff, materials and vibrancy, and the two spring parameters designers actually think in. Largely distilled from WWDC 2018.

Reach for it when a gesture should feel physical rather than merely animated.

A reverse-lookup glossary: 91 terms across 12 groups for the thing you can describe but not name. Say 'the popover should grow out of the button' and it returns origin-aware animation, plus one or two alternates with the difference between them.

Reach for it when a prompt keeps returning the wrong motion because you are describing a feeling instead of a technique.

Nineteen libraries in five tables, matched to tasks rather than names: base-ui, cmdk, Sonner, NumberFlow, torph, dnd-kit, Virtuoso, zustand. It reads package.json first and recommends one, not a menu. Deliberately not auto-triggered.

Reach for it when the agent is about to hand-roll a toast, a dropdown, or a thousand-row list.

Eleven fixes that separate a website from an app on a phone: sticky tap highlights, the 100vh bug, inputs that zoom the page, the 300ms tap delay, safe areas, per-scheme theme colour. Pure CSS and meta tags, no library, and a never-ship list that includes disabling zoom.

Reach for it the week a web app ships to phones, before anyone files 'feels laggy'.

Adversarial QA with worst-case data behind a dev-only toggle: a 60-character email, a one-letter first name, 1,284 members. It maps every rendered value to its source and limit, then reports Broken, Ugly or Fragile with a symptom-to-fix table.

Reach for it on any component that renders user data and has only ever been tested with 'Jane Doe'.

Builds three to five genuinely different versions of a UI piece and puts them behind a picker, one at a time at full size. Variants must diverge on a named axis; three tints of one idea is a failure. The human picks, and the prototype surface is deleted afterwards.

Reach for it when the direction is undecided and a static mockup would settle nothing.

How to write modern Swift, and the only file here with nothing to do with motion. Value types before classes, Swift 6 concurrency doctrine including @concurrent and actor reentrancy, SwiftUI closure rules, and Swift Testing as the default. At 42 KB it is the longest skill in the set.

Reach for it when the agent writes Swift and keeps reaching for pre-6 patterns.

The guide to Sonner, the toast library the author built: setup, which call to use, update-by-id recipes, the four-rung styling ladder, and a troubleshooting table for the bugs people actually hit — duplicate toasts under StrictMode, theme not following the OS, toasts trapped behind modals.

Reach for it if Sonner is in package.json. Worth saying plainly: the author is recommending his own library. The advice is good; the bias is real.