Localized reading guide
emil-design-engPurpose, usage and source
This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
Source retrieved:
- Source repository
- vercel-labs/open-agents
- SKILL.md
.agents/skills/emil-design-eng/SKILL.md- Repository stars
- 5,871
- Repository updated
- 2026-08-29
- Categories
- Agent workflows
- Last collected
License: MIT
Workflow excerpts are reading aids, not executable instructions from Codez. No third-party Skill was run to produce this page.
The purpose and workflow passages below are upstream material, organized and translated for reading. They are distinct from the separately labeled Codez editorial analysis.
What this Skill does
This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
How the upstream workflow works
When to use springs
Drag interactions with momentum Elements that should feel "alive" (like Apple's Dynamic Island) Gestures that can be interrupted mid-animation Decorative mouse-tracking interactions
Upstream passage · L143 ↗Design Engineering
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.
Upstream passage · L6 ↗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.
Upstream passage · L12 ↗Before: transition: all 300ms
After: transition: transform 200ms ease-out
────────────────────────────
Before: scale(0)
After: scale(0.95)Requirements and setup
No short requirements passage was selected from this file. This does not mean the Skill has no dependencies. Check the repository setup instructions and referenced files.
Limits and quality checks
Never animate from scale(0)
Nothing in the real world disappears and reappears completely. Elements animating from scale(0) look like they come out of nowhere. Start from scale(0.9) or higher, combined with opacity. Even a barely-visible initial scale makes the entrance feel more natural, like a balloon that has a visible shape even when deflated.
Start with a safe trial
- Check the supported host and the repository installation instructions. Keep the Skill directory and its referenced scripts, assets and documentation together; SKILL.md alone may omit dependencies.
- Give the agent your real input, desired output and acceptance criteria. Invocation syntax and available tools depend on the host; this site does not assume a universal install command.
- Try the source workflow in a disposable project or on a copy. Review operations that change files, remote services or billable resources before allowing them.
- Validate the output against the source quality checks and your own requirements. A successful trigger or a high repository Star count does not establish a correct result.
Read further in the source
- Design Engineering
- 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
- Spring-based mouse interactions
- Spring configuration
- Interruptibility advantage
- Buttons must feel responsive
- Never animate from scale(0)
- Make popovers origin-aware
- Tooltips: skip delay on subsequent hovers
- Use CSS transitions over keyframes for interruptible UI
- Use blur to mask imperfect transitions
- Animate enter states with @starting-style
- translateY with percentages
- scale() scales children too
- 3D transforms for depth
- transform-origin
- clip-path for Animation
- The inset shape
- Tabs with perfect color transitions
Related Skills
Translation and scope
This reading guide selects passages from the pinned upstream SKILL.md. Translation is assisted. It is not a complete manual or a claim of tested compatibility. Read the original and its referenced files before use.
This introduction refers to the pinned version below; current repository activity and collection time are shown separately.
- Pinned source
- Read the original ↗
- Source retrieved
- Source commit
cf865e94de7729751c747171785b6ce57e7b178c- Source SHA-256
9d261c73de2c2c4dc5662ab20117b8e045c7b71958f8042acf037325444ebe6b