Collection of 8 design engineering skills by Emil Kowalski (Vercel, Linear) — animation standards, UI craft, Apple design principles, library selection, and prototyping. Based on years of production experience. Use when the user asks about UI polish, animation decisions, or wants to audit/improve interface motion.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
Collection of 8 design engineering skills by Emil Kowalski (Vercel, Linear) — animation standards, UI craft, Apple design principles, library selection, and prototyping. Based on years of production experience. Use when the user asks about UI polish, animation decisions, or wants to audit/improve interface motion.
persona:
name: "Emil Kowalski"
title: "The Design Engineer — UI Craft Authority"
expertise: ['Animation Design', 'UI Components', 'Design Systems', 'Motion Engineering', 'Frontend Architecture']
philosophy: "Taste is trained, not innate. Unseen details compound into something stunning."
credentials: ['Design Engineer at Vercel', 'Design Engineer at Linear', 'Creator of Sonner, cmdk, vaul', 'Author of animations.dev']
principles: ['Default to flagging; approval is earned', 'Right easing for the right moment', 'Sub-300ms for UI motion', 'Motion must be justified, not decorative']
Emil built these skills because AI agents consistently pick wrong animation ingredients — ease-in for enter animations (should be ease-out), solid borders instead of semi-transparent shadows, wrong timing curves. These skills encode his years of experience at Vercel and Linear into actionable rules any agent can follow.
This is domain expertise as code. AI doesn't replace taste — it amplifies it when the taste is encoded.
When to Use
Trigger phrases:
"improve the animations in this project"
"audit the UI motion"
"what library should I use for X?"
"design this UI with Apple-level polish"
"review these animation changes"
"help me pick between animation approaches"
"prototype this UI component in multiple ways"
Use when:
Building UI that needs to feel polished, not just functional
Reviewing animation/motion PRs
Choosing frontend libraries for a new project
Designing gesture-driven or spring-based interactions
Looking for where motion adds value (and where it doesn't)
You want your agent to build interfaces that stand out from AI slop
Don't use for:
General code review (non-motion changes)
Brand/graphic design (logos, illustrations)
Backend or infrastructure decisions
How to Use
Identify the task — Match the trigger phrases above (motion review, UI polish, library selection, prototyping)
Pick the relevant skill — Load the individual SKILL.md from skills/ for the specific concern (animation review, design philosophy, or prototyping)
Load dependencies — Install the depends_on skills for the selected skill (see Installation)
Apply the rules — Let the encoded rules drive the review or build; do not skip critique steps
Verify — Run the skill's Verification Checklist before declaring done
The 8 Skills
1. emil-design-eng — Core Design Philosophy
File:skills/emil-design-eng/SKILL.md
The foundational skill. Encodes Emil's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
Covers:
Core philosophy (taste is trained, unseen details compound)
Building UI that users don't think about
When and why to animate
Component-level design decisions
Invoke:emil-design-eng in conversation when discussing UI decisions.
2. review-animations — Strict Animation Review
File:skills/review-animations/SKILL.md
A specialized reviewer that evaluates animation and motion code against a high craft bar. Reference: STANDARDS.md (loaded on demand for precise values).
Invoke:review-animations or "review these animations".
3. improve-animations — Codebase Motion Audit
File:skills/improve-animations/SKILL.md
Advisor skill: surveys the codebase's animation and motion code, then produces a prioritized audit with self-contained implementation plans. Read-only — plans improvements but doesn't apply them.
Sweeps an interface for moments that would genuinely benefit from motion — while rejecting everything that shouldn't animate. The defining trait is restraint.
Invoke:animation-vocabulary or "help me describe this animation correctly".
6. apple-design — Apple's Design Principles for the Web
File:skills/apple-design/SKILL.md
Distills Apple's WWDC design talks — chiefly Designing Fluid Interfaces (WWDC 2018) — and translates them into web platform primitives.
Covers:
Response: kill latency (respond on pointer-down, not release)
Continuity: motion starts from current state, inherits velocity
Physicality: springs, momentum, inertia, resistance
Depth: translucent materials, layers, z-space
Typography: optical sizing, tracking, leading
Reduced-motion: respect system preferences
Invoke:apple-design when designing gesture-driven UI, spring animations, or sheet/drag interactions.
7. pick-ui-library — Curated Library Selection
File:skills/pick-ui-library/SKILL.md
Opinionated, taste-driven library recommendations for frontend tasks. No menu of options — one clear answer per task.
Covers: UI primitives (base-ui), command menus (cmdk), toasts (Sonner), OTP inputs (input-otp), charts, virtualization, drag-drop, state management, styling, animations (Motion), forms, tables, date pickers, and more.
Invoke: "what should I use for X?" or pick-ui-library with your task.
8. prototype — UI Variant Prototyping
File:skills/prototype/SKILL.md
Builds multiple genuinely different versions of a described UI piece, rendered behind a visual picker so you can flip through them live and choose a winner.
Covers:
True divergence (not three tints of the same idea)
Each variant meets the full craft bar
Visual picker with live switching
Export/promote the winning variant
Invoke:prototype or "show me multiple ways to build this UI".
Installation
# Install a single skill via npm (example: pick-ui-library)
npx skills@latest add emilkowalski/skills pick-ui-library
# Install all skills
npx skills@latest add emilkowalski/skills
# Install to a specific agent root
npx skills@latest add emilkowalski/skills --root ~/.claude/skills
npx skills@latest add emilkowalski/skills --root ~/.copilot/skills
After install, each skill is loadable by name in conversation:
