Emil Design Engineering
A third-party skill that turns Claude into a design engineer with Emil Kowalski's craft sensibility. It carries an opinionated animation decision framework (should this animate at all, what is the purpose, what easing, how fast), strong custom easing curves over the weak CSS defaults, spring physics for interruptible gestures, and component rules like scale-on-press feedback, origin-aware popovers, never animating from scale(0), and clip-path reveals. It reviews UI code in a required Before/After/Why table and applies performance rules (only animate transform and opacity, CSS transitions over keyframes for dynamic UI, WAAPI for hardware-accelerated programmatic animation) plus accessibility guards for prefers-reduced-motion and touch hover. Use it when building or reviewing frontend components, animations, drawers, toasts, tooltips, or any interaction where polish matters. Sourced from Emil Kowalski's articles and his animations.dev course.
Install the skill
This is a single-file skill: the SKILL.md below is the exact pinned commit (ecf66bb) Uristocrat reviewed, and it's all Claude needs to run.
- 1
Get the skill file
Open the pinned SKILL.md and save it, then add it in Claude under Code → Customize → Create a new skill (desktop) or Customize → Skills → + (claude.ai).
- 2
Use it
Ask Claude to build or review a component, an animation, or a micro-interaction, and the skill applies Emil's framework.
What Claude does with this skill
The following is the exact SKILL.md content Claude reads when this skill is
active. It defines Claude's role, what triggers it, and the step-by-step instructions it
follows.
Emil Design Engineering
A third-party skill by Emil Kowalski. The pinned SKILL.md is the source of truth; this entry is a short summary.
It gives Claude a trained design-engineering instinct for UI work: an animation decision framework, strong custom easing curves, spring physics for interruptible gestures, and component-level rules (scale-on-press feedback, origin-aware popovers, never animating from scale(0), clip-path reveals, blur to mask imperfect transitions). UI reviews come back as a Before / After / Why table. Performance and accessibility rules are baked in.
To go deeper, see Emil’s course at animations.dev.