emil-design-eng
This skill provides design engineering guidance based on Emil Kowalski's philosophy for UI polish, component design, and animation. It includes specific frameworks for animation decision-making, CSS transition techniques, and component interaction patterns.
Is emil-design-eng safe to install?
Safe to install: our audit of emil-design-eng's source files found 0 shell commands, 3 external URLs, no file writes (none risk). Every command and URL listed appears verbatim in the skill's source. The skill provides text-based design and engineering advice. It does not execute code or modify files.
How we audit skills: our security review methodology.
Who is this skill for?
Developers and designers building user interfaces who want to improve the feel and responsiveness of their software.
What can you do with it?
- Reviewing UI code for animation and interaction improvements
- Determining whether an element should be animated based on frequency of use
- Selecting appropriate easing curves for UI transitions
- Implementing responsive button states and popover origins
- Applying spring-based animations for gestures and decorative elements
How good is this skill?
Quality score: 5/10. The skill provides clear, actionable, and highly specific design engineering principles. It includes concrete code examples and a strict review format.
What does the skill file contain?
# 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 ...
Frequently asked questions
How should I decide if an element needs an animation?
Use the animation decision framework provided. High-frequency actions like keyboard shortcuts should never animate. Occasional elements like modals can use standard animations, while rare events like onboarding can include delight-focused animations.
What is the recommended duration for UI animations?
Keep all UI animations under 300ms. Specific durations are suggested: 100-160ms for button presses, 125-200ms for tooltips, 150-250ms for dropdowns, and 200-500ms for modals.
Why does the skill recommend against using ease-in?
Ease-in starts slow, which makes interfaces feel sluggish and unresponsive. Ease-out is preferred because it starts fast and provides immediate feedback.
How should I format my code reviews?
You must use a markdown table with exactly three columns: Before, After, and Why.
Related skills
frontend-design
618.4KAI agents tasked with designing and building web interfaces who need to produce unique, high-quality visual identities rather than generic, templated designs
The frontend-design skill provides guidance for creating distinctive, intentional visual designs for web interfaces. It instructs the agent to act as a design lead at a small studio, focusing on avoiding templated defaults by making deliberate choices regarding typography, color palettes, layout, and motion. The skill emphasizes a structured process of brainstorming, planning, and self-critique before writing code.
brainstorming
256.4KDevelopers and project managers who need to define requirements, architecture, and design for software projects before writing code
A structured brainstorming framework that guides users through project exploration, design proposal, and specification before implementation. It enforces a strict design-first workflow, requiring user approval for designs and documentation before transitioning to the writing-plans skill.
simple
221.4KDevelopers and project managers who need a fast, lightweight decision-making process for feature design or component creation
A structured brainstorming framework for architectural and creative tasks that guides users from discovery to decision-making through a defined process flow.
shadcn
217.3KDevelopers building UI components and design systems using shadcn/ui
The shadcn skill manages UI components and design systems for projects using the shadcn/ui framework. It provides tools to search, add, debug, and style components, while enforcing strict composition and styling rules based on project-specific configuration.