Skill · AI & Development

Motion & Interaction Designer

Generate precise UI motion specs, easing curves, and spring physics for any tech stack. Includes accessibility fallbacks. Install in 30 seconds.

Category: AI & Development
Deliverable: 1 .skill bundle
Outputs: —
Last updated: 13 Jun 2026

$8.99 One-time · lifetime updates

Get it on Agensi

Works in Claude Pro, Team, and Enterprise
Lifetime access to updates
Refundable for 30 days via the marketplace

Or get a free skill every month. Subscribers get one curated skill, free, every 1st. Pick yours →

StrategistKit Affiliate. Purchase happens on the marketplace, which handles payment, delivery and refunds.

Overview

What Motion & Interaction Designer does.

This skill converts vague animation intentions into exact, shippable motion values. Tell it your component, the transition you need, and your stack — it asks four focused questions to calibrate output to your context, then works through duration-to-distance rules, easing curve selection, spring parameters, stagger timing, and reduced-motion fallbacks. Output arrives as structured specs, implementation checklists, or copy-paste ready configuration blocks, depending on which format fits your workflow.

A typical input: 'I need an entrance animation for a bottom-sheet panel in React Native Reanimated. It should feel quick and purposeful, not floaty. Also needs a prefers-reduced-motion version.' The skill audits whether the animation communicates meaningful state change, then returns specific values rather than adjectives — along with a fallback strategy mapped to the same component.

Example output excerpt — Bottom-sheet entrance (React Native Reanimated): • Duration: 240ms (panel-class element, >200px travel) • Easing: cubic-bezier(0.32, 0.72, 0, 1) — decelerating, implies surface lifting from below • Spring alt: stiffness 280, damping 26, mass 0.9 — use if snap feel is preferred over eased curve • prefers-reduced-motion fallback: opacity fade only, 120ms, no translateY • Stagger if multiple list items enter simultaneously: 30ms offset per item, max 5 items staggered

Who it's for

Front-end developers and product designers who need precise, stack-specific animation values rather than directional feedback — particularly those shipping Framer Motion, CSS, or React Native Reanimated work who want accessibility compliance built in from the start.

How it works

Three steps. About two minutes.

Install

Add the .skill file to your Claude app. ~10 seconds.

Run it on your work

Invoke the skill and paste in your material.

Apply the output

Review, keep what works, and use it.

In depth

Why a Claude skill beats a prompt template.

A copy-paste prompt runs one static pass and stops. A skill is a bundled program — instructions, examples, and a workflow Claude runs as a unit: it asks for the right input, applies the same pattern every time, and returns the structured outputs above.

FAQ

Common questions.

What stacks does this skill produce output for?

It calibrates output to whatever stack you specify at runtime — Framer Motion, plain CSS, React Native Reanimated, and similar. You declare your stack in the opening context step, and all values, syntax, and configuration blocks are formatted accordingly.

What input do I actually need to provide?

Describe the component or flow you want animated, the effect you're after, and your tech stack. The skill will ask up to four short clarifying questions — or proceed with defaults if you prefer to skip them.

Does the skill audit existing animations, or only design new ones?

Both. You can paste in a current motion spec or describe existing behavior and ask for an audit. The skill applies motion-as-information principles to flag animations that add no communicative value and flags anything that lacks a reduced-motion fallback.

What does 'prefers-reduced-motion fallback' mean in practice?

For every animated component, the skill specifies an alternative behavior that activates when the user has enabled the OS-level reduced-motion setting — typically a simple opacity transition or no animation at all, keeping the interface usable without triggering vestibular issues.

How is the output formatted — code, prose, or something else?

You choose. The skill can return a structured spec document, a developer-ready configuration block you paste directly into your component, a checklist with owner and verification fields, or a concise set of bullets. Default for a new design is a spec with implementation-ready values.