Teaching AI Design Taste: 38k-Star Skill Pack for Polished UI Animations

AI-Generated UIs Lack "Taste" — This Project Fixes That

Developers using AI for frontend work notice a pattern: generated interfaces are functionally correct but feel off. Buttons lack press feedback, modals appear abruptly, animations are too fast or too sluggish. The missing quality is taste — the judgment calls that make an interface feel crafted.

The GitHub project emilkowalski/skills (38.1k+ stars, MIT license) addresses this by packaging ten years of design-engineering experience into 13 Markdown skill files that load into AI coding assistants such as Claude Code , Cursor , and Codex . The author, Emil Kowalski , is a design engineer who worked at Vercel and Linear and created the Sonner toast component (13M weekly downloads).

Project Quick Reference

Repository: https://github.com/emilkowalski/skills Stars: 38.1k+

Format: Markdown skill packs

License: MIT

Install: npx skills@latest add emilkowalski/skills Compatible tools: Claude Code, Cursor, Codex (any editor supporting the skills protocol)

Core Skill: emil-design-eng — A Decision Framework for Animation

The main skill (~27k characters) centers on a four-question framework that must be answered before writing any animation:

Should this animation exist? — A frequency judgment table dictates the answer:

Actions occurring 100+ times per day (keyboard shortcuts, command palettes) get zero animation . Example: Raycast has no open/close animation, which is exactly why it feels instant.

Occasional modals, toasts, and dropdowns receive standard animations .

First-time onboarding flows may earn "delight" animations .

What is the animation's purpose? — If you cannot articulate it, don't animate.

Which easing curve? — UI interactions always use ease-out . ease-in starts slowly, delaying the moment the user watches most closely. Built-in CSS easings are too weak; the skill prescribes custom cubic-bezier curves.

How fast? — Hard limits:

All UI animations ≤ 300 ms

Button press feedback: 100–160 ms

Dropdown menus: 150–250 ms

Granular, Executable Rules

The skill's value lies in rules precise enough for an AI to execute directly:

Modals should not spring from scale(0) — nothing appears from nothing in the real world. Start at scale(0.95) with opacity for natural emergence.

Popover menus must expand from the triggering button's direction, not the screen center.

Tooltips: first appearance delayed to prevent accidental triggers; subsequent adjacent tooltips appear immediately.

List item entrance: stagger each item by 30–80 ms ; simultaneous entry looks synthetic.

Performance Insights from Production

The skill includes counter-intuitive performance lessons learned on the Vercel dashboard :

Framer Motion's x / y shorthand properties do not run on the GPU — they execute on the main thread and drop frames under load. The fix: write the full transform string (e.g., translate3d(10px, 20px, 0)).

CSS animations run off the main thread ; during page load they are often smoother than JavaScript-driven animations.

Real-World Demo: iOS Now Playing Prototype

To validate the skills, the author combined three skills — apple-design (translation of Apple's WWDC 2018 Designing Fluid Interfaces talk), animation-vocabulary (animation terminology dictionary), and animate (animation construction) — and asked the AI to build a functional iOS Now Playing music app prototype. Three physical devices displayed distinct states:

Left device — default playback: SF Pro font, iOS 26 rounded corners, album artwork, progress bar, bottom dock with backdrop-filter frosted glass — all prescribed by apple-design 's "translucent material" guidelines.

Middle device — track switch frozen at 120 ms: Pink cover slides left, scales to 0.95 , fades to 0.3 ; blue cover slides in from right. Top-right play button presses down to scale(0.97) . Center play button morphs into the top-right ▶ icon. This demonstrates scale-in + stagger — motion follows the user's finger, not arbitrary movement.

Right device — lock-screen live activity at 180 ms: Frosted glass card springs from screen bottom using cubic-bezier(0.34, 1.56, 0.64, 1) (a spring curve), starting at scale(0.85) . This reflects mobile-native 's "real device environment adaptation".

The prototype shows three skills collaborating to produce a single cohesive interaction.

The Full 13-Skill Catalog

emil-design-eng

— Core animation decision framework (described above) animate — Build animations from scratch using the framework improve-animations — Audit entire codebase and output a remediation plan find-animation-opportunities — Identify where motion adds value review-animations — Strict 12-point checklist: transition: all, ease-in, excessive duration, keyboard-triggered animations, etc. animation-vocabulary — Reverse dictionary: describe an effect ("that bouncy thing") → get precise term for prompting AI apple-design — Distilled Web translation of WWDC 2018 Designing Fluid Interfaces : animations start from current value, inherit user velocity, are interruptible and reversible mobile-native — Fixes "web doesn't feel like an app": 100vh pitfalls, tap highlight flash, input-induced viewport shift, safe-area handling pick-ui-library — Curated library selection guide (avoid hand-rolling toasts; avoid unmaintained packages) write-swift — Modern Swift patterns prototype — Generate multiple UI variants for side-by-side comparison ask-sonner — Official usage guide for the Sonner toast library

Installation & Usage

npx skills@latest add emilkowalski/skills

No configuration files required. After installation, the AI agent automatically invokes the relevant skill based on context (e.g., applies the decision framework when writing animation code, runs the 12-point checklist during code review). Skills can also be invoked manually by name.

Why This Matters: Expertise as a Distribution Vehicle

Emil's README states:

"AI doesn't replace professional knowledge — it amplifies it. It's the amplifier that lets you extract value from your expertise."

The skill pack exemplifies this: every rule (e.g., ease-out) is established UI knowledge, but only a practitioner with a decade of experience and a 13M-download component knows which details actually decide success and how to phrase them so the AI doesn't miss them . Skills become a distribution mechanism for expert taste — previously only absorbable by working at Vercel, now installable with one command.

For those anxious about AI replacement, the insight is: the deeper your domain expertise, the more AI can amplify you .

Honest Limitations

Scope: UI and animation only — no backend, algorithm, or data-layer help.

Ecosystem bias: Heavily tied to React and Framer Motion ; Vue or vanilla developers can only borrow the reasoning.

Personal distillation, not standard: Rules reflect one expert's judgment. Emil admits exceptions (e.g., Sonner toasts use ease not ease-out to match the component's personality).

Tool dependency: Requires an AI editor that supports the skills protocol (Claude Code, Cursor, Codex currently do).

Conclusion

In an era where anyone can generate a passable interface, taste becomes the differentiator . This 38k-star project demonstrates that taste can be checklist-ified — at least to a "passing grade." The higher reaches of aesthetic judgment still require human practice. As Emil puts it: every engineer should study design, because in the AI age, professional depth is more valuable, not less .