PlugWiki

emil-design-eng Skill for Claude: Design Engineering Taste

emil-design-eng teaches Claude Emil Kowalski's rules for UI animation and polish, and reviews UI code in a Before/After table.

Installs
408.5K
on skills.sh
Stars
52.7K
on GitHub
Updated
Oct 2026
last repo commit

emil-design-eng loads one long guide on design engineering into Claude: when an animation should exist at all, which easing and duration to use, how springs and gestures behave, and the small details that make a component feel right. When you ask for a UI review, it must answer with a markdown table of Before, After and Why.

It is a single SKILL.md of knowledge with no scripts. If you invoke it without a question, Claude replies with one fixed sentence and waits. It is guidance for front-end code, mostly CSS, Framer Motion and React.

Good for

  • Front-end developers who want animations that feel fast and natural
  • Designers who code and want a checklist for UI details
  • Teams reviewing component polish in pull requests

Install emil-design-eng

Claude Code

  1. 1

    Copy this prompt.

    Install the emil-design-eng skill in Claude Code. Run this command:

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

Then check that it loaded and tell me how to use it.
  2. 2

    Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.

Sections in SKILL.md

  1. Initial Response
  2. Core Philosophy
  3. Taste is trained, not innate
  4. Unseen details compound
  5. Beauty is leverage
  6. Review Format (Required)
  7. The Animation Decision Framework
  8. 1. Should this animate at all?
  9. 2. What is the purpose?
  10. 3. What easing should it use?
  11. 4. How fast should it be?
  12. Perceived performance
  13. Spring Animations
  14. When to use springs
  15. Spring-based mouse interactions
  16. Spring configuration

Key facts

Author
Emil Kowalski (emilkowalski/skills)
License
MIT
Installs on skills.sh
408,486 as of 2026-11-02
GitHub stars
52,705 for the whole emilkowalski/skills repo
skills.sh audits
Gen Agent Trust Hub pass, Socket pass, Snyk pass
What is inside
1 file: SKILL.md; no scripts
Needs
Nothing; it is guidance only
Last commit to the repo
2026-10-28

What it includes

  • UI reviews come back as a Before / After / Why table

    SKILL.md requires a markdown table, one row per issue, and forbids the list format.

    Try: “Review this modal component for animation problems.”

    Read · Review format

  • Should it animate, why, which easing, how fast

    Frequency drives the answer: 100+ times a day means no animation, such as keyboard shortcuts.

    Read · Animation decision framework

  • When to use springs, mouse interactions, configuration

    Covers spring setup and why springs can be interrupted.

    Read · Spring animations

  • Buttons, popovers, tooltips, enter states

    Never animate from scale(0), make popovers origin-aware, skip tooltip delay on later hovers, use CSS transitions for interruptible UI.

    Read · Component building principles

  • translate, scale, 3D, transform-origin, clip-path reveals

    Includes tabs, hold-to-delete, image reveals and comparison sliders.

    Read · CSS transforms and clip-path

  • Momentum dismissal, damping, pointer capture

    Rules for swipe and drag interactions, including multi-touch protection.

    Read · Gestures and drag

  • Animate transform and opacity; honor reduced motion

    Also touch-device hover states and Web Animations API use.

    Read · Performance and accessibility

  • Slow motion, frame-by-frame, real devices, review checklist

    Ends with a review checklist.

    Read · Debugging and checklist

From the official docs

Questions

What does emil-design-eng do?

It gives Claude Emil Kowalski's design engineering rules for UI: when to animate, which easing and speed to use, how springs and gestures should behave, and what to check in a review.

How do I install emil-design-eng?

Use the install box at the top of this page. It is a single SKILL.md, so a skills-folder install is enough.

Why does Claude reply with one sentence when I invoke it?

SKILL.md tells Claude to answer only "I'm ready to help you build interfaces that feel right, my knowledge comes from Emil Kowalski's design engineering philosophy." when it is invoked without a specific question, and then wait for your question.

What format are the reviews in?

A markdown table with Before, After and Why columns, one row per issue. SKILL.md forbids listing Before and After on separate lines.

Does it work with any framework?

The rules are about CSS, transforms, springs and gestures, and the examples mention Framer Motion. SKILL.md does not limit it to one framework.

Does it need an API key or tools?

No. It is a long guide with no scripts, tools or keys.

Is emil-design-eng safe?

It bundles no scripts, so it only shapes Claude's advice. On skills.sh the audits read Gen Agent Trust Hub pass, Socket pass and Snyk pass. Claude can still write UI code, so review the changes.

Information

updated Nov 2, 2026

Repository
emilkowalski/skills
Folder
skills/emil-design-eng

emilkowalski/skillsskills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 1
  1. emil-design-eng SKILL.md · github.com

Updated Nov 2, 2026.