Skip to content
UI Aesthetics

Emil Design Eng

Tool coverage — filled cells are supported. Full names under “Works with” below.

The taste-and-polish philosophy behind Improve Animations, generalized to every UI decision, not just motion.

The philosophy underneath Improve Animations, made general. Where the audit skill surveys a codebase’s motion and turns findings into plans, this one is the live consult: taste-training principles (“good taste is trained, not innate”), a required Before/After review-table format, and drop-in, physics-accurate CSS for staggered lists and exit animations that are deliberately faster than their enters.

The review checklist is the most useful piece to steal on its own — eleven specific catches (transition: all, scale(0) entry animations, animation on keyboard actions, hover effects with no pointer: fine guard) each paired with the exact fix, not a vague note to “polish this up.”

Install: same repo as Improve Animations — emilkowalski/skills — copy skills/emil-design-eng/ into .claude/skills/, or npx skills add emilkowalski/skill per the author’s own site.

Gotcha: it opens with a scripted refusal to answer anything until you ask a real question, and that opener name-drops the author’s paid course (animations.dev). Useful context, not a knock on the skill itself, which is free and MIT-licensed.

File & content map

SKILL.md

Emil Design Eng

The taste-and-polish philosophy behind Improve Animations, generalized to every UI decision, not just motion.

Contents — 15 sections

Initial Response
Core Philosophy
Taste is trained, not innate
Unseen details compound
Beauty is leverage
Review Format (Required)
The Animation Decision Framework
1. Should this animate at all?
2. What is the purpose?
3. What easing should it use?
4. How fast should it be?
+ 1 more
Spring Animations
When to use springs
Spring-based mouse interactions
Spring configuration
Interruptibility advantage
Component Building Principles
Buttons must feel responsive
Never animate from scale(0)
Make popovers origin-aware
Tooltips: skip delay on subsequent hovers
+ 3 more
CSS Transform Mastery
translateY with percentages
scale() scales children too
3D transforms for depth
transform-origin
clip-path for Animation
The inset shape
Tabs with perfect color transitions
Hold-to-delete pattern
Image reveals on scroll
+ 1 more
Gesture and Drag Interactions
Momentum-based dismissal
Damping at boundaries
Pointer capture for drag
Multi-touch protection
+ 1 more
Performance Rules
Only animate transform and opacity
CSS variables are inheritable
Framer Motion hardware acceleration caveat
CSS animations beat JS under load
+ 1 more
Accessibility
prefers-reduced-motion
Touch device hover states
The Sonner Principles (Building Loved Components)
Cohesion matters
The opacity + height combination
Review your work the next day
Asymmetric enter/exit timing
Stagger Animations
Debugging Animations
Slow motion testing
Frame-by-frame inspection
Test on real devices
Review Checklist
content section file folder