Motion Craft
ericrisco/rsc-harnessUse when an interface moves and the movement has to feel right — durations and easing, what must never animate, fixing motion that reads sluggish, cheap or janky, and reduced-motion. Web and native. NOT the visual system (that is `design`), NOT the graded critique (that is `design-loop`).
At a glance
This skill is for Design and helps you refine animation timing and easing, implement reduced-motion accessibility, and fix janky or sluggish motion.
git clone --depth 1 https://github.com/ericrisco/rsc-harness
cp -r rsc-harness/skills/motion-craft ~/.claude/skills/motion-craft
Setup, runtime and requirements describe ericrisco/rsc-harness, the repo this skill ships in.
animationUx MotionaccessibilitywebNativeperformance
Also in ericrisco/rsc-harness
View the repoUse when designing or analyzing a controlled experiment — falsifiable hypothesis, sample size from an MDE, reading significance/CI/power, CU...
Use when making a web UI conform to WCAG 2.2 Level AA — axe-core or Lighthouse a11y violations, keyboard operability, focus management, ARIA...
Use when running or fixing paid acquisition on Google or Meta — campaign structure (Performance Max, Demand Gen, Search, Advantage+), platfo...
Use when measuring whether an LLM or agent system actually got better and gating merges on it: golden sets, fixing an inflated LLM-as-judge,...
Use when bounding an LLM agent that already runs — scoping its task domain, gating tools to least privilege, defending against prompt inject...
Use when a creative goal must become a finished media file: pick and order generative-media models per modality — AI voiceover, image-to-vid...
Use when instrumenting product or web analytics — GA4/PostHog SDK wiring, event taxonomy, funnels, double-counted events, consent gating, PI...
Use when constitution, spec, plan and tasks all exist and you want them cross-read against each other before any code is written — the rsc-s...
Use when building, refactoring, or debugging Angular (v20/21+): standalone components, signals, zoneless change detection, @if/@for/@defer c...
Use when writing a client for someone else's REST or GraphQL API: auth flow choice and token refresh, pagination to exhaustion, retry-with-j...
Use when settling the contract of an API you expose, before implementation: resources/URLs, REST vs GraphQL, versioning, one RFC 9457 error...
Use when writing one long-form article end to end — answer-first lede, question-shaped headings, plus its on-page surface (title, meta, slug...
Other Design skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typog...
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art...
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right,...
Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explor...
A hand-drawn wireframe exploration — graph-paper background, marker / pencil tone, multiple tab labels for variants, sticky-note annotations...
An annotated / redline lo-fi wireframe — a desktop landing/marketing page drawn as flat greyboxes inside a browser chrome frame, overlaid wi...