Emil Kowalski skill (emil-design-eng): UI polish and animation rules for agents

Source: emilkowalski/skills · Maintainer: community: Emil Kowalski · License: MIT · Checked: 24 October 2026

What is the Emil Kowalski skill?

The Emil Kowalski skill, emil-design-eng, gives your coding agent one design engineer's rules for making interfaces feel right: whether something should animate at all, which easing curve and duration to use, how buttons should respond to a press, and the small details that separate polished UI from generic UI. It is for frontend developers and designers who want their agent's animations and interactions to stop feeling slow or off.

Emil Kowalski built Sonner, which the repo calls "my toast library," and the skill draws many of its examples from it. His emilkowalski/skills README says the skills "are based on my years of experience working at companies like Vercel and Linear," and describes emil-design-eng as "The main skill that consists of mostly animation, but also some design advice." The skill's description reads: "This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great."

As of 24 October 2026, its skills.sh page listed about 382,600 installs (snapshot, 24 October 2026).

What does it do?

The folder holds a single file, a SKILL.md of about 3,900 words. The description doesn't list trigger phrases, so the agent loads it when a task matches UI polish, component design or animation, or when you invoke it by name.

Two behaviors are fixed:

• First response. Invoked with no specific question, the agent replies only with: "I'm ready to help you build interfaces that feel right, my knowledge comes from Emil Kowalski's design engineering philosophy." It then waits for your question.
• Review format. When reviewing UI code, the agent must use a single Markdown table with Before, After and Why columns, one row per issue, not a list.

The core is an animation decision framework the agent works through before writing animation code:

The rest of the file covers:

• Springs. When to use them (drags, interruptible gestures, decorative mouse tracking), Apple-style duration and bounce settings, and keeping bounce subtle.
• Component rules. scale(0.97) on :active for buttons, never animating from scale(0), popovers that scale from their trigger (modals stay centered), tooltips that open instantly once one is already open, CSS transitions over keyframes for anything triggered rapidly, a small blur to hide a rough crossfade, and @starting-style for enter animations.
• CSS transforms and clip-path. Percentage translates, 3D transforms, and clip-path patterns for tabs, hold-to-delete, image reveals and comparison sliders.
• Gestures. Velocity-based dismissal, damping at boundaries, pointer capture and multi-touch protection.
• Performance. Animate only transform and opacity, avoid updating inherited CSS variables on a busy parent, and prefer CSS or the Web Animations API when the main thread is loaded.
• Accessibility. prefers-reduced-motion means fewer and gentler animations, not none, and hover effects belong behind @media (hover: hover) and (pointer: fine).
• The Sonner principles, stagger and debugging. Good defaults over options, cohesive motion, short stagger delays, slow-motion and frame-by-frame review, and testing gestures on real devices.

It ends with a review checklist that pairs common issues, such as transition: all or a duration over 300ms, with their fixes.

How do you install the Emil Kowalski skill?

skills.sh lists this command for the skills CLI:

npx skills add https://github.com/emilkowalski/skills --skill emil-design-eng

The repo README shows the whole-repo form, which lets you pick from all 15 skills:

npx skills@latest add emilkowalski/skills

Add -g to install for every project. For Claude Code, the skill lands in .claude/skills/emil-design-eng/ in your project, or ~/.claude/skills/emil-design-eng/ with -g, the standard Claude Code skill locations. Codex and Cursor read the same SKILL.md format; see Codex skills and Cursor skills. The README doesn't list a Claude Code plugin.

claude.ai. Custom skills upload as a ZIP of the skill folder under Customize, then Skills (Claude Help Center). The folder name already matches the skill name, so zip emil-design-eng as it is.

How do you use it?

Give it something concrete. Because of the first-response rule, calling it with no task gets you only the greeting.

Example prompts (suggestions, not quotes from the repo):

• "Use the emil-design-eng skill to review the animations in components/Dropdown.tsx."
• "Our command palette fades in over 300ms. Should it animate at all?"
• "Build a hold-to-delete button: slow fill while pressed, fast snap back on release."
• "Make this drawer dismiss on a quick flick, not only past a distance threshold."
• "Audit our hover effects for touch devices and reduced motion."

There are no packages, scripts or API keys. Examples are in plain CSS, with some JavaScript and React; a few use Motion (formerly Framer Motion) and Base UI's --transform-origin variable, but you don't need either.

Tips and limits

• It is one person's taste, stated firmly. Rules like "No animation. Ever." for frequent actions and "Never use ease-in for UI animations" are opinions from experience. Override them in your CLAUDE.md where your product needs something else.
• Expect tables in reviews. The required Before, After, Why table is handy for scanning, less so for a long narrative review.
• The other skills are separate. The repo has 14 more skills, such as animate, review-animations, improve-animations, animation-performance and ask-sonner. Installing emil-design-eng alone doesn't bring them.
• Library claims age. Statements about Motion's shorthand properties and browser behavior reflect the time of writing. Check the current library docs before refactoring around them.
• Security. The folder is one Markdown file with no scripts. As of 24 October 2026, its skills.sh page showed Pass from Gen Agent Trust Hub, Socket and Snyk.
• License. MIT, from the repo's LICENSE file (copyright 2026 Emil Kowalski). You can copy and change the skill as long as you keep the notice.

Save it in your Kipt library

In Kipt, open Skills and paste the skill's GitHub folder link into the import box. Kipt reads the SKILL.md; paste the repo link instead and Kipt shows a list of all 15 skills to pick from, so you can add review-animations or animate too. You can also drop the folder or a .zip. Your skills live in your own private GitHub repo and install into Claude Code or Codex with one command:

npx skills add https://github.com/<you>/<repo>.git --all -g

Kipt is not affiliated with Emil Kowalski or emilkowalski/skills.

Similar skills

• Frontend design skill: Anthropic's skill for steering agents away from generic AI-looking UI.
• Impeccable skill: design commands and an anti-pattern detector, including an animate command.
• Design taste frontend skill: art direction for coding agents.
• Web design guidelines skill: Vercel's UI audit, which includes animation and reduced-motion rules.