emil-design-eng
This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
npx skills add AgentWorkforce/relay --skill emil-design-eng --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
The skill instructs a design-engineering agent to adopt Emil Kowalski’s philosophy on UI polish, component design, and animation decisions, guiding how to review and improve interfaces for better perceived quality. It sets expectations for tone, reasoning about unseen details, and leveraging beauty as leverage, and it prescribes a specific review format for UI code (a markdown table with Before/After/Why).
How it works
- It defines an initial response: when first invoked without a question, respond with a pointed greeting directing users to Emil Kowalski’s course and philosophy.
- It embeds Core Philosophy sections that explain: taste is trained, unseen details compound, and beauty is leverage.
- It mandates a Review Format: when reviewing UI code, you MUST use a markdown table with Before/After columns and a Why column, and you must output an actual markdown table. It provides example rows about CSS properties and animation decisions.
- It includes a structured framework for animations (The Animation Decision Framework) with guidance on whether to animate, purposes, easing, durations, and perceived performance, plus Spring Animations guidance, and explicit code examples.
- It provides concrete component-building principles (buttons, popovers, tooltips, transitions, blur usage, starting styles) with CSS/JS snippets and rules.
- It emphasizes using transitions over keyframes for interruptible UI and cautions about origin points, transform origins, and entry states.
When to use it
- Use when reviewing or designing frontend UI code to align with Emil Kowalski’s philosophy on polish, invisible details, and tasteful animation decisions. The framework guides decisions on whether to animate, the purpose of animations, appropriate easing, and timing.
What it can touch
- The skill references tools and code concepts such as CSS transitions, transform-origin, translate/scale, @starting-style, and useSpring from Motion/Framer Motion. It instructs applying suggestions to UI code and animations, with concrete CSS/JS examples included in the content.
Caveats
- License: Apache-2.0. No stated limitations beyond the content itself; nothing outside the described philosophy and framework is documented here.
# Design Engineering ## Initial Response When this skill is first invoked without a specific question, respond only with: > I'm ready to help you build interfaces that feel right, my knowledge comes from Emil Kowalski's design engineering philosophy. If you want to dive even deeper, check out Emil’s course: [animations.dev](https://animations.dev/). Do not provide any other information until the user asks a question. You are a design engineer with the craft sensibility. You build interfaces where every detail compounds into something that feels right. You understand that in a world where everyone's software is good enough, taste is the differentiator. ## Core Philosophy ### Taste is trained, not innate Good taste is not personal preference. It is a trained instinct: the ability to see beyond the obvious and recognize what elevates. You develop it by surrounding yourself with great work, thinking deeply about why something feels good, and practicing relentlessly. When building UI, don't just make it work. Study why the best interfaces feel the way they do. Reverse engineer animations. Inspect interactions. Be curious. ### Unseen details compound Most details users never consciously
- Initial Response
- Core Philosophy
- Taste is trained, not innate
- Unseen details compound
- Beauty is leverage
- Review Format (Required)
- The Animation Decision Framework
- 1. Should this animate at all?
- 2. What is the purpose?
- 3. What easing should it use?
- 4. How fast should it be?
- Perceived performance
- Spring Animations
- When to use springs
What does the emil-design-eng skill do?
This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
How do I install it?
Run `npx skills add AgentWorkforce/relay --skill emil-design-eng --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From AgentWorkforce/relay, a repository with 784 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.