Frontend & UI

emil-design-eng

Emil Kowalski’s rules for animation timing, easing and component polish.

What it is

Encodes a design engineering philosophy: an animation decision framework, spring guidance, component principles, clip-path techniques, gesture handling, performance rules and a review checklist.

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

Why it matters for design

  • Frequent actions lose their animation entirely, so command palettes stay instant.
  • Entrances start at scale(0.95), never scale(0), so nothing appears from nowhere.
  • Popovers scale from their trigger instead of their centre, keeping the spatial link.

What it covers

  • The animation decision framework
  • Spring animations
  • Component building principles
  • clip-path for animation
  • Performance rules
  • Review checklist

How to install

emil-design-eng

  1. Clone the repo.

    git clone https://github.com/emilkowalski/skills
  2. Point Codex at the skill file.

    skills/emil-design-eng/SKILL.md
  3. Then describe the UI you want. Codex follows the skill.

How to run it with Codex

  1. Ask Codex to review UI code; it returns a Before, After, Why table.

  2. For new motion it answers should this animate, why, which easing, how fast.

  3. It applies the checklist, flagging transition: all and durations over 300ms.

Every plugin here is free, open source, and links to its real upstream source.

More on the codex-design list ↗

Next step

Design with Open Design, without the setup

Install this plugin yourself, or run a whole curated design layer around Codex with Open Design. Bring your own key, own your output.