83.3K+Download
Skip to the usage guide
emil-design-engby Emil Kowalski

Emil Design Eng Skill.

A Claude Code and Codex skill for UX research: emil Kowalski's philosophy on UI polish, component design, and animation decisions.

  • UX & Research
Download OpenDesignView usage guide
emilkowalski/skills · skills/emil-design-eng/SKILL.mdSKILL.md
--- name: emil-design-eng description: This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great. --- ## Initial Response ## Core Philosophy ## Review Format (Required) ## The Animation Decision Framework ## Spring Animations ## Component Building Principles
Front matter and section headings read from the upstream file on 2026-09-14 · 27,130 characters in full

01 What it does

What the emil-design-eng Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

This skill gives coding agents Emil Kowalski's design engineering judgment for interface work: how to decide whether something should animate, which easing and duration to use, and how to build components that feel responsive. It sets hard defaults — UI animations under 300ms, custom cubic-bezier curves instead of built-in CSS easings, never ease-in, never scale(0) entrances, popovers scaling from their trigger.

It also covers springs, clip-path techniques, drag and gesture handling, GPU performance rules, reduced motion, and a required Before/After markdown table for code reviews. It is for designers and developers who want taste-driven interface decisions rather than generic animation advice.

What it produces

  • A markdown review table with Before, After and Why columns, one row per issue found
  • Ready-to-paste CSS variables holding the recommended custom easing curves
  • Spring configuration objects, either Apple-style or traditional physics parameters
  • A prioritised fix list drawn from the Review Checklist categories
See the example prompt ↗

How It Works

  1. 01
    Gate the Animation on Frequency

    Before writing any animation code, decide how often users will hit the interaction.

  2. 02
    Name the Purpose

    Every animation must answer why it animates, from the valid list: spatial consistency, state indication, explanation, feedback, or preventing jarring changes.

  3. 03
    Pick a Custom Curve

    Choose easing by whether the element enters, exits, moves, or only changes color, then swap the built-in curves for stronger custom cubic-beziers.

  4. 04
    Set the Duration

    Match duration to the element type from the table — button press 100-160ms, dropdowns 150-250ms, modals 200-500ms — and keep UI below the 300ms ceiling.

  5. 05
    Apply the Component Defaults

    Buttons scale to 0.97 on :active, entrances start from 0.95 with opacity rather than scale(0), and popovers scale from their trigger while modals stay centered.

  6. 06
    Use Springs Where They Earn It

    Springs suit drag with momentum, gestures that can be interrupted, and deliberately decorative interactions.

02 Find your fit

When to Use the emil-design-eng Skill

Use the emil-design-eng skill in Claude Code or Codex when the job is UX research of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • Reviewing existing UI code and getting a concrete fix table rather than vague feedback
  • Building components where small details accumulate into an interface that feels right
  • Drag and swipe work where dismissal should respond to flick velocity, not just distance dragged
  • Performance-sensitive interfaces where JS animation drops frames while the main thread is busy

Know the Boundaries

  • Bouncy springs everywhere: bounce is avoided in most UI contexts and reserved for drag-to-dismiss and playful interactions
  • Decorative motion on functional data visuals, where no animation would be better
  • Anyone wanting a formula for the opacity plus height combination; the file says it is trial and error
  • Treating reduced motion as zero animation, which the file explicitly rejects

What to Provide

  • The animation you are about to writeThe framework expects the four questions answered in order before any animation code exists: should it animate, why, which easing, how fast.
  • How often users will see itFrequency is the first question and drives the whole decision, from no animation ever to permission to add delight.
  • Your browser support targetEntry animations use @starting-style where support allows, otherwise fall back to the data-mounted attribute pattern.

03 Inside the skill

Rules the emil-design-eng Skill Gives Claude Code and Codex

6 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. Never Use ease-in

    ease-in delays the initial movement, exactly the moment the user watches most closely, so a 300ms ease-in dropdown feels slower than ease-out at the same duration.

  2. Never Enter from Scale(0)

    Nothing in the real world disappears and reappears completely. Entrances start at scale(0.9) or higher combined with opacity, and press-scale stays subtle at 0.95-0.98.

  3. Modals Keep Center Origin

    Popovers should set transform-origin to their trigger, using Base UI's var(--transform-origin), but modals are the explicit exception because they are not anchored to a trigger.

  4. Reviews Use a Real Table

    A UI review must output an actual markdown table with Before, After and Why columns, one row per issue. A list with Before: and After: on separate lines is the wrong format.

  5. Gate Hover Behind a Media Query

    Hover animations go inside @media (hover: hover) and (pointer: fine), because touch devices fire hover on tap and produce false positives.

  6. Keep Stagger Short and non-blocking

    Stagger delays run 30-80ms between items, longer delays make the interface feel slow, and stagger is decorative so it must never block interaction while playing.

04 Put it to work

Install emil-design-eng in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add emil-design-eng to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

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

Generic skills CLI form for skills/emil-design-eng/SKILL.md; the repository may document its own path.

Give the Skill a First UX Research Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt
Review the code for [the dropdown and the popover] in [component file]. The dropdown opens with ease-in over 300ms, the popover scales from center, and the entering panel animates from scale(0). Use the Before/After format and tell me what to change and why.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

  • Replay the work the next day with fresh eyes, since imperfections are easier to spot after a night away from it
  • Temporarily slow the duration to 2-5x normal, or use the browser animation inspector, to catch timing problems
  • Step through the animation frame by frame in Chrome DevTools to see coordination issues invisible at full speed
  • Test drawers and swipe gestures on physical devices, connecting a phone by USB to the local dev server
  • In slow motion, confirm the animated properties stay in sync and origin and easing look right

In OpenDesign emil-design-eng is bundled: Plugins → Skills, pick it in the top bar.

Download OpenDesignRead the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
Emil Kowalski
Repository
github.com/emilkowalski/skills Branch main
Skill file
skills/emil-design-eng/SKILL.md Content checksum recorded at verification; commit d23d7f8
License
MIT From LICENSE.
Repository stars
37,516 GitHub snapshot taken 2026-09-14 for the whole emilkowalski/skills repository, which contains 9 skills in this catalog. Not a rating or usage count for emil-design-eng.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. Core PhilosophyTaste is trained, unseen details compound, and beauty is a real differentiator.
  2. Review Format (Required)Mandates a Before/After/Why markdown table and shows the forbidden list format.
  3. The Animation Decision FrameworkFour ordered questions: frequency, purpose, easing, duration, plus perceived performance.
  4. Spring AnimationsWhen springs fit, mouse-tracking with useSpring, and two configuration styles.
  5. Component Building PrinciplesPress feedback, scale(0) avoidance, popover origin, tooltip delays, transitions over keyframes, blur.
  6. CSS Transform MasteryPercentage translates, scaling children, 3D depth, and transform-origin anchors.
  7. clip-path for AnimationInset reveals for overlays, tabs, hold-to-delete, scroll reveals, comparison sliders.
  8. Gesture and Drag InteractionsVelocity dismissal, boundary damping, pointer capture, multi-touch protection, friction.
  9. Performance RulesAnimate only transform and opacity, avoid CSS variable recalc, prefer CSS under load.
  10. AccessibilityReduced motion keeps opacity and color, drops movement; hover gated by media query.
  11. The Sonner Principles (Building Loved Components)Six principles from Sonner on DX, defaults, naming, edge cases, transitions, docs.
  12. Review ChecklistTable of common issues and their prescribed fixes, from transition-all to missing stagger.
The Skill's Own Description
“This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.”

Front-matter description from SKILL.md. The full file is about 27,130 characters. Read the full file on GitHub.

Emil Design Eng

Run emil-design-eng on a Real UX Research Task.

The emil-design-eng skill ships inside OpenDesign. Download the app, pick the skill in Plugins → Skills, paste the prompt above, and read the plan before the result.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/emilkowalski/skills --skill emil-design-eng