emil-design-eng
Use when designing or reviewing polished product UI with Emil Kowalski-inspired animation, interaction, and component craft guidance.
Profile →npx skills add sickn33/agentic-awesome-skills --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
Summarizes how to design or critique polished product UI with Emil Kowalski-inspired animation, interaction, and component craft guidance; targeted at UI polish, motion quality, and high-craft frontend decisions.
How it works
The skill provides concrete design‑engineering guidance for UI polish and motion quality across React, Tailwind, CSS, and Framer Motion projects. It instructs reviewing UI code for motion quality, easing, duration, physicality, interaction feedback, and subtle interface details. It emphasizes building or refining interfaces where taste and perceived quality matter, and it prescribes using a structured design philosophy (taste, unseen details, beauty as leverage). It requires using a markdown review format with a Before/After table when evaluating code, and it presents an animation decision framework including whether to animate, purpose, easing, and timing guidance. It includes examples and code snippets to illustrate recommended practices for transitions, hover/press feedback, popovers, tooltips, and enter states, emphasizing custom easing curves, short durations, and interruptible transitions. It also outlines limitations and cautions about brand/system constraints and production readiness.
When to use it
Use when user asks for UI polish, product design critique, animation direction, or high‑craft component decisions; also when reviewing frontend code for motion quality or building refined React/Tailwind/Framer Motion interfaces where taste matters.
What it can touch
The skill references tools and environments including React, Tailwind, CSS, Framer Motion, and code reviews. It instructs applying concrete CSS and animation guidance in those contexts (e.g., transitions, transform-origin, starting styles, and use of @starting-style). It does not specify executable scripts beyond code examples and review formats.
Caveats
Notes that design engineering judgment does not replace product requirements, accessibility testing, or real-device motion review. Requires verification of framework versions, dependencies, and rendered behavior before production use. Avoid mechanical application when brand or user requirements demand different interaction language.
# Design Engineering ## When to Use - Use when the user asks for UI polish, product design critique, animation direction, or high-craft component decisions. - Use when reviewing frontend code for motion quality, easing, duration, physicality, interaction feedback, or subtle interface details. - Use when building or refining React, Tailwind, CSS, or Framer Motion interfaces where taste and perceived quality matter. ## Limitations - This skill provides design engineering judgment; it does not replace project-specific product requirements, accessibility testing, or real-device motion review. - Verify framework versions, installed dependencies, and rendered behavior before treating animation or UI recommendations as production-ready. - Do not apply these rules mechanically when an existing brand system, platform convention, or user requirement calls for a different interaction language. ## 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]
- When to Use
- Limitations
- 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
What does the emil-design-eng skill do?
Use when designing or reviewing polished product UI with Emil Kowalski-inspired animation, interaction, and component craft guidance.
How do I install it?
Run `npx skills add sickn33/agentic-awesome-skills --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 sickn33/agentic-awesome-skills, a repository with 44,414 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.