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.
What it does
Emil Kowalski's design-engineering craft as a Claude skill: animation decisions, custom easing, spring physics, and details that make UIs feel right.
How to use this
Once it is installed, this skill picks itself up. You do not need to name it.
- Created by
- Emil Kowalski
- Category
- Engineering
- Source
- View source
Run this on Skills and Agents
You can run the skill on Skills and Agents by creating an account. You don't need to install anything. We provide the model and tokens. Your connected tools and company brain are ready to use.
Skills give you best practices and templates to get the most out of your AI
Add this skill
Pick where you want it. Nothing to configure after.
These install links go live once the signup flow ships. Until then, ask Claude, ChatGPT, or Gemini to fetch this skill's file directly from GitHub.
Not sure which? See the install guide.
Share this skill
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.
Third-party, by Emil Kowalski
June 10, 2026
Install the skill
This is a single-file skill: the SKILL.md below is the exact pinned commit (ecf66bb) Skills and Agents Co 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.
Your skill is downloading.
Create a free account and the platform does the rest:
- Get an email the moment this skill updates
- See every skill and agent you've installed, in one place
- Get your next recommendation based on what you actually use
No credit card. Takes about a minute.
What this skill does
This is an overview of the skill from the site, not the skill's real instructions. The full SKILL.md Claude reads when this skill is active lives on GitHub at the source below.
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.
View full SKILL.md on GitHub