Decide whether it should move, then get the details right
Emil
Motion, Prototypes, and UI Stress Tests
Sixteen design-engineering skills for implementing motion, reviewing and planning changes, comparing prototypes, testing difficult data, and working with mobile interfaces and component libraries.
- GitHub stars
- 51,478
- Checked
- Categories
- Design & VideoEngineering
Start with one existing popover
Choose an occasional interaction that already works, provide its component and page, and use animate for one pass. Check rapid toggling, keyboard opening, and reduced motion before applying the approach elsewhere.
Pick a task and get started
Run the npx command in the project terminal to install the skill for the selected task into Claude Code, with project scope by default. Then enter the task beginning with its slash command in a Claude Code session for that project. Slash invocations belong in the assistant session, not the system shell.
Provide a popover with working open, close, and focus behavior, plus its frequency of use. The deliverable is an implementation with verification notes.
Install this task’s skill
Run from the project root. This selects animate through the author’s skills installation method and targets Claude Code. Follow the prompts with project scope; the inspected CLI requires Node.js 22.20+. Citations use a fixed commit; installation retrieves the version available when run, so check the files actually loaded.
Read the author’s setup guidenpx skills@latest add emilkowalski/skills --skill animate -a claude-codeCheck which skill was loaded
After installation, open Claude Code in the project and check the source directory for animate and its RECIPES.md, then invoke /animate with a concrete task. prototype, review-animations, and pick-ui-library are marked for manual invocation; do not rely on automatic selection. If a same-named skill already exists, check the source actually loaded. Other assistants have their own invocation mechanisms.
Read Claude Code’s skill invocation rulesGive your AI this first task
These are editorial task briefs, not completed runs. Replace the bracketed details and include the full brief after the skill name. Invoking a skill without a concrete request usually produces the author’s readiness message first.
/animate Project: [path]. Component: [file]. Page: [local URL or route]. Run command: [command]. This settings popover is opened occasionally with a pointer; the existing component library handles semantics, focus, and dismissal. Improve its opening and closing motion while preserving layout, copy, keyboard behavior, and design tokens. Read the installed dependencies, component state model, and RECIPES.md. State the frequency tier and purpose. Use the actual library’s state attributes and positioning variables; do not assume it provides Base UI attributes or --transform-origin. Prefer existing CSS and motion tokens without adding a library for this small interaction. Keep immediate state feedback wherever animation is inappropriate. Implement restrained scale and opacity from the trigger, with a curve and duration suited to this project within the author’s guidance. Rapid closing or reopening must continue from the current state. Apply the author’s immediate-response rule to keyboard triggers while preserving visible focus. Reduced motion must actually remove translation and scaling while keeping necessary state feedback; touch must not leave a hover effect behind. Check the first opening, rapid repeated toggles, Escape dismissal and focus return, touch, and reduced motion locally. Run the project’s relevant checks. Return changed files, the preview location, brief parameter choices, and separate verified and unverified checks. If browser or device access is missing, state the gap instead of presenting code-based reasoning as an observed experience.
Check what you receive
- Component changes and concise motion choices; an immediate response may be the right result for part of the interaction.
- Verified entry, exit, interruption, keyboard focus, and reduced-motion behavior, with untested devices listed separately.
- Check the actual trigger origin, reversal during rapid input, and whether reduced motion really removes spatial movement.
More about this skill
This collection turns Emil Kowalski’s design-engineering experience, including work at Vercel and Linear, into separate workflows. The inspected commit contains 16 SKILL.md entries, including a dedicated Sonner guide. emil-design-eng provides the broader reasoning about motion and interface details; the focused entries organize a specific job around its own process and deliverable.
Choose by the work in front of you. animate implements motion for a working component. review-animations critiques a particular change, while improve-animations surveys a wider scope and writes plans. prototype lets you compare different directions; break-ui replaces tidy demo data with realistic extremes to expose layout and state problems.
The first question is whether an interaction should animate at all. Repeated actions may benefit from an immediate response, while an occasional panel can use motion to explain where it came from. Existing tokens, interruption, exit behavior, touch input, and reduced motion all matter. The four tasks below make clear when code changes and when the workflow pauses for a plan or a choice.
Sources and verification
Sources checked
Prepared from author files at commit a81dbca and the installer and host documentation checked for this page. Task and reference structure were verified statically; no skill installation, target component execution, or browser trial was performed.