1. Habit
  2. Skills
  3. Emil Design Eng skill
Emil Kowalski · 376K installs

Emil Design Eng skill
Runs by itself, every time you change your screens.

Every screen change gets a motion review.

Install the Emil Design Eng skill and make it a habit: follow https://gethabit.dev/skills/emilkowalski/emil-design-eng.md

  1. 1Copy
  2. 2Paste into Claude Code, Codex or Cursor
  3. 3It runs by itself

376K installs48K starsMIT licenceSource on GitHub ↗

Emil Design Eng

by Emil Kowalski · 376K installs

The skill

Teaches your agent to make motion and small details feel right.

Only when you ask.

Better design

Every screen change gets a motion review. Smoother screens and fewer small mistakes.

↻ Runs by itselfevery time you change your screens

How the habit works.
You don't have to.

Three questionsWhen does it start? How does it check its work? What does it remember?

01

It starts by itself

PR touches UI code. Runs in GitHub Actions or Claude Code routine.

  • ↻ PR touches UI code
  • pull_request touching CSS or component files

02

It checks its work

diff scan + table. If a check fails, it tells you.

  • ✓no transition: all in changed CSS
  • ✓no scale(0) entry animation in the diff
  • ✓hover animations sit behind @media (hover: hover) and (pointer: fine)
  • ✓review output is one markdown table with Before, After and Why columns

03

It remembers

motion issues log. The next run reads it first: open motion issues from earlier PRs.

loops/ui-motion-review-loop/run-log.md

One run, step by step.
Then it stops.

Stop ruleStops after one pull request per run.

  1. 01

    Read the diff

    The agent reads the changed styles and components.

  2. 02

    Ask the questions

    For each animation it checks how often users see it, its purpose, its easing and its duration.

  3. 03

    Run the checklist

    It walks the review checklist, from ease-in on UI to keyframes on rapidly triggered elements.

  4. 04

    Write the table

    It writes one markdown table with Before, After and Why, one row per issue.

  5. 05

    Log

    Issues that stay open go into the run log for the next PR.

What it may do.
Nothing more.

Safe by defaultIt writes only in its own folder and asks you before anything goes out.

Is it for you?
Use it when it fits.

Quick checkRead both lists. If the left one sounds like you, the Emil Design Eng skill helps.

Use it when

  • ✓ You build UI with animation
  • ✓ Your interface feels stiff

Skip it when

  • – You only change backend code

Questions

Emil Design Eng skill, answered.

Does it change my code?

No. It writes a review table with suggested changes.

Does it remove all motion for reduced-motion users?

No. The skill keeps gentle opacity and color changes and removes movement.

Which output format does it use?

Always one markdown table with Before, After and Why columns.

How do I install the Emil Design Eng skill?

Copy the prompt at the top into your agent. It installs the skill from emilkowalski/skills and sets up the habit. Or run npx skills add emilkowalski/skills --skill emil-design-eng.

Is the Emil Design Eng skill free?

Yes. It is published under MIT. Habit is free too.

Emil Design Eng. Now as a habit.

Install the Emil Design Eng skill and make it a habit: follow https://gethabit.dev/skills/emilkowalski/emil-design-eng.md

  • Free
  • No account
  • Undo in one line

All Emil Kowalski skills →More design skills →

Works in

  • Claude Code
  • Codex
  • Cursor
  • ChatGPT
  • Claude app

Made by Emil Kowalski, published under MIT. Habit links to the original and never changes it. Is this your skill?

Copying didn't work here. Select the line and copy it by hand.