What is the emil-design-eng skill?
The emil-design-eng skill is one SKILL.md in Emil Kowalski's emilkowalski/skills repository. It gives an AI coding agent his rules for UI polish: a four-question animation framework, easing and duration values, component details, and a Before, After, Why table for design reviews. The output is front-end code.
The emil-design-eng skill is the main skill in Emil Kowalski's public skills repository. Its folder holds a single SKILL.md. The README describes it as mostly animation, with some design advice, drawn from the author's years at Vercel and Linear.
The skill is a point of view more than a checklist. It says taste is trained, small details compound, and polish is worth the effort, then turns that into rules your agent can apply to a component.
What changes in your agent's output
- The agent asks whether something should animate at all before it writes any motion, and weighs how often the user will see it.
- Easing and duration come from stated values, and UI motion stays under about 300ms instead of defaulting to a slow ease.
- Buttons, popovers, tooltips and modals get specific details, such as a small scale on press and origin-aware popovers.
- Reviews come back as a markdown table of Before, After and Why, one row per issue, instead of loose prose.
The four animation questions
SKILL.md puts every animation through a short framework. The agent works through the questions in order and stops as soon as the honest answer is to leave the interface still.
- Should it animate? Frequency decides: something used 100 or more times a day gets no animation, and keyboard-initiated actions are never animated.
- What is the purpose? Spatial consistency, state change, explanation, feedback or avoiding a jarring jump.
- Which easing? Use custom curves, never ease-in for UI, with the decision tree in the file.
- How long? Button press 100 to 160ms, tooltips 125 to 200ms, dropdowns 150 to 250ms, modals and drawers 200 to 500ms.
Who it is for
Best for
- Interfaces where small transitions decide whether the product feels finished, such as dashboards, toasts, menus and drawers.
- Teams that want an agent to review motion and component details against written rules.
- Developers who like exact values for easing curves, durations and scale instead of vague advice.
Not for
- Choosing a visual direction from a brief. For that, see frontend-design.
- Performance audits of existing animation code. fixing-motion-performance is built for that job.
- Turning a Figma file into code. The skill has no design-file input.
Use it with UiChemy
This skill shapes how an interface moves and feels. The result is front-end code in your project, and improve-ui or polish can follow for broader visual passes. To get an AI-built page into WordPress as something editable, UiChemy AI to WordPress imports it. Click Get Started on uichemy.com.
How to install Emil Design Eng Skill: Animation and UI Polish Rules
git clone https://github.com/emilkowalski/skillsClone the repository
Run
git clone https://github.com/emilkowalski/skillsin any working folder. The skill lives at skills/emil-design-eng inside the clone.Copy the skill folder
Copy the skills/emil-design-eng folder into the skills location your AI coding agent reads. The repository README does not name an agent folder, so check your agent's documentation for the right path.
Ask for it by name
Start a request with the skill name, for example: use emil-design-eng to review this dropdown component and its animation.
Check that it loaded
Ask the agent to review a small component with the skill named. The reply should be a markdown table with Before, After and Why columns, one row per issue.
Key features
- Taste as a working ruleThe skill opens with a philosophy: taste is trained, unseen details compound, and beauty pays off. It gives the agent a reason to care about small things before it gives any CSS.
- Frequency-based animation testThe first question is how often the interaction happens. Heavily repeated actions get no animation, keyboard-initiated actions are never animated, and rare moments can delight.
- Easing and duration tableCustom cubic-bezier curves are provided for ease-out, ease-in-out and drawers. Ease-in is ruled out for UI, and UI animations are kept under 300ms with ranges per component.
- Spring guidanceSpring settings use a duration and a bounce value, with bounce kept between 0.1 and 0.3. The skill covers interruptibility and using springs for decorative mouse tracking.
- Component detailsPress states use a small scale, nothing grows from scale zero, popovers scale from their trigger while modals stay centered, and tooltips skip the delay after the first hover.
- Clip-path and gesture patternsClip-path animation covers tabs, hold-to-delete buttons, image reveals and comparison sliders. Gesture rules cover momentum dismissal, damping at boundaries and pointer capture.
- Performance and accessibility rulesAnimate only transform and opacity, prefer CSS over JavaScript animation under load, respect reduced-motion with gentler rather than zero motion, and gate hover effects behind a hover media query.
- Stagger and debuggingStaggered lists use 30 to 80ms between items. For debugging, the skill suggests slow-motion testing, frame-by-frame review and checking on real devices.
- Review table and checklistReviews use a Before, After, Why table with one row per issue, plus a checklist covering transition all, scale zero, ease-in, popover origin and durations over 300ms.
- Quiet first replyIf invoked with no question, the skill tells the agent to answer with a one-line ready message and nothing else until you ask for something specific.
Frequently asked questions
What is the emil-design-eng skill?
It is a skill from Emil Kowalski's emilkowalski/skills repository, made of a single SKILL.md. It gives an AI coding agent his approach to UI polish and animation: when to animate, how to pick easing and duration, how to build component details, and how to write a design review.
How do I install emil-design-eng?
Clone github.com/emilkowalski/skills, then copy the skills/emil-design-eng folder into the skills folder your AI coding agent reads. The README does not name agent folders, so check your agent's documentation for the right path. After that, ask for the skill by name in a request about a component or animation.
Does it work with Cursor, Codex or Claude Code?
The repository README does not list supported agents or agent folders. SKILL.md is a plain markdown instruction file, so any agent that loads skill files from a folder can read it. Check your own agent's documentation for where to put the copied folder, then ask for the skill by name.
When does the skill say not to animate?
Frequency decides. SKILL.md says an action used 100 or more times a day should get no animation, and keyboard-initiated actions are never animated. Actions used tens of times a day should have motion removed or reduced. Occasional interactions get standard motion, and rare ones can add delight.
What is the review format?
When asked to review UI code, the skill requires a markdown table with three columns: Before, After and Why. Each row covers one issue. This keeps the feedback specific, such as replacing a transition on all properties with named properties, and gives you something you can apply line by line.
How does it differ from fixing-motion-performance?
Emil's skill decides what should animate and how it should feel, with easing, duration and component rules. fixing-motion-performance is aimed at finding and fixing slow or janky motion in code that already exists. They pair well: one sets the design intent, the other audits the result.
Does it produce a WordPress page?
No. The skill guides an agent to write front-end code, so the result is HTML, CSS and JavaScript in your project. To bring an existing AI build into WordPress as an editable page, UiChemy AI to WordPress imports it. Click Get Started on uichemy.com to begin.