Skills for DesignersA pack of 12 design-engineering skills that teach AI coding agents the animation and interaction craft most models get wrong.
Repo
Skills for Designers
A pack of 12 design-engineering skills that teach AI coding agents the animation and interaction craft most models get wrong.
The sharpest animation and motion skill pack for AI coding agents, distilled from Emil Kowalski's work on Sonner, Vaul, and years at Vercel and Linear. Twelve focused skills teach agents the right easing, duration, and interaction details most models fumble. The catches: scope leans hard on motion and stops short of a full visual design system, it is one person's opinionated craft, and it is written guidance the agent chooses to follow, not enforced rules.
Great for
Design engineers and builders who want AI-generated UIs to move correctly, with real easing, duration, and interaction polish, plus dedicated skills for React Native and Expo motion and Apple-style fluidity.
The catch
The coverage is animation-weighted, not a complete design system for color, layout, and typography, and with several overlapping design skills installed at once you cannot tell which one is actually firing.
Bottom line
MIT licensed, free, and installs in one command from a maintainer people trust. It is solo-maintained and unofficial, so read the SKILL.md before you install; skills execute inside your agent.
Installnpx skills@latest add emilkowalski/skills (skills.sh CLI), or drop a single SKILL.md into your agent
LicenseMIT
LanguageMarkdown
Maintained byEmil Kowalski (solo; ex-Vercel and Linear, creator of Sonner and Vaul)
Harnesses supportedClaude Code, Cursor, Codex, and other agents that read Agent Skills
Watch out forAnimation-weighted scope, solo maintainer, guidance not enforced; review before install since skills run in your agent
Web animation guidance (easing, duration, curves)emil-design-eng and animate build motion with the correct curve and timing
Review and audit existing animationsreview-animations and improve-animations flag issues and return fix plans
Find where motion belongsfind-animation-opportunities, and it also tells you what not to animate
Animation vocabulary for better promptsanimation-vocabulary teaches the words that get better motion from an agent
React Native / Expo motionanimate-expo covers gestures, sheets, haptics, off-thread animation
Apple / HIG design principlesapple-design, distilled from WWDC talks and translated for the web
Modern Swift guidancewrite-swift: value types, Swift 6 concurrency, generics, testing
UI library selectionpick-ui-library picks trusted libraries instead of hand-rolling
Rapid UI prototypingprototype builds multiple versions with a switcher to compare
Sonner toast integration helpask-sonner covers setup, styling, recipes, and common fixes
Full visual design system (color, layout, type)some design advice, but the depth is in motion and interaction
Image / mockup generationno image-creation skills; it guides code, not reference art
Mechanical rule enforcementwritten guidance the agent chooses to follow, nothing enforced
Official Claude Code plugin marketplace entryplugin and marketplace PRs are unmerged; install via the skills CLI
What it does
- Installs into Claude Code, Cursor, Codex, and similar agents through the standard skills.sh installer, or drops in as a single reference file for a chat
- Ships 12 skills led by emil-design-eng, the main animation-and-design skill, plus animate for building a motion from scratch with the correct curve, duration, and properties
- Reviews and audits existing animations against Emil's rules and returns prioritized, self-contained plans any agent can execute (review-animations, improve-animations)
- Finds places in your UI that would genuinely benefit from motion and tells the agent what not to animate (find-animation-opportunities)
- Covers React Native and Expo motion specifically, with gestures, sheets, haptics, and keeping animation off the JS thread (animate-expo)
- Teaches Apple's interface and fluid-motion principles, modern Swift, UI-library selection, rapid prototyping with a version switcher, and setup for the Sonner toast library
What it can’t do
- Generate reference images or mockups; there are no image-creation skills here, unlike some rival design packs
- Act as a full visual design system; color, spacing, and layout advice is lighter than the animation and interaction depth
- Enforce its own rules mechanically; everything is written guidance the model chooses to follow, so quality tracks how well the agent obeys
- Cover marketing, SEO, or content work; the scope is design engineering for interfaces, nothing broader
- Build the app for you; the skills raise the craft bar, a person and the agent still write and ship the code
- Guarantee a smooth install through an official Claude Code plugin marketplace; the plugin and marketplace config PRs sit unmerged, so install is via the skills CLI
Pros & cons
Pros
- Genuine domain expertise from the author of Sonner and Vaul, distilled into rules agents can act on
- Deep, specific animation coverage: easing choice, duration, enter-versus-exit curves, and interaction detail most models get wrong
- Twelve focused skills instead of one blob, so you load only the motion, review, or platform skill you need
- First-class React Native and Expo support, built in collaboration with the Expo team
- MIT licensed and installs in one command through the skills CLI most AI coding tools already support
- Actively shipping, with recent additions like the Expo and Swift skills merged in August 2026
Cons
- Solo-maintained and unofficial, so bus factor and support are one person's time
- Scope skews to animation and motion; teams wanting full color, layout, and typography systems need other skills alongside it
- Guidance is text the agent reads, with no hard enforcement, so results depend on the model following it
- Stacking it with other design skills causes overlap you cannot easily observe or debug
- No image or mockup generation, so it does not replace a reference-design step
- Community feedback is thin and scattered relative to the star count, much of it outside English
2 positive1 mixed1 critical
What the community says
Emil Kowalski is turning his front-end animations course into a set of SKILLS that students can use with an AI model. This opens my mind to the use cases for SKILLS. I imagine that with a SKILL version of the lesson, I can ask my agent where I'm going wrong and it will guide me.
What actually worked was giving Claude Code something closer to an actual design opinion, in the form of a skill it reads before it touches any code. Emil Kowalski built Sonner and Vaul, and taught animation principles through his animations.dev course for years before packaging that knowledge into a skill file.
I added design skills like Impeccable, UI UX Pro Max, Taste Skill, emilkowalski/skill, and frontend-design, but I feel that even with these skills, it hasn't done a great job on the app's design.
You have too many skills that does the same thing.
12 sourcesWhere this page’s facts came from. Open the receipts.
- 1GitHub repo (emilkowalski/skills)
- 2GitHub API - repo metadata (stars, license, language, created)
- 3GitHub API - recently merged PRs
- 4README - the 12 skills, install command, and rationale
- 5AI Skills for Design Engineers (project homepage)
- 6Agents with Taste - Emil Kowalski on transferring taste into an AI
- 7Reddit r/ClaudeCode - Coding teacher turned his lessons into SKILLS
- 8Reddit r/ClaudeAI - Is Claude Code just bad at design (stack included emilkowalski/skill)
- 9Medium - 3 Free Claude Code Skills That Fix 90% of That AI-Generated UI Look
- 10YouTube - 3 Claude Design Skills To Build Insanely Good Websites
- 11YouTube - Claude Skills for Designers (Part 2)
- 12YouTube - Top 3 Claude Code Skills for Non-Designers
Watch it work
Real tutorials and reviews from YouTube, not ours.