design-eng
Decides whether UI motion should exist, then picks easing, duration, origin, and gesture behavior. Covers frequency limits, springs, popover origin, tooltips, clip-path reveals, drag dismissal, and reduced motion. Activates when adding a transition, popover, drawer, toast, or drag gesture, or when the user says 'design engineering', 'should this animate', 'easing', 'spring', 'popover origin', or 'emil'. Do not use for concentric radius, surface shadows, the 0.96 press scale, or icon cross-fades - that is vd:better-ui. Do not use for design-system choice, page implementation, or accessibility audits - that is vd:uiuxdesign.
Target: Design & content creation. Automatically collected · unverified.
Excerpt from the author’s documentation
Extracted from a fixed version of SKILL.md in its original language. This is the author’s documentation; installation, compatibility and runtime results have not been verified by this site.
Read the original English text
Topics in the source
- Design engineering
- What this skill is, and is not
- Hard rules
- Decision framework
- 1. Should this animate at all?
- 2. What is the purpose?
- 3. What easing?
- 4. How fast?
Motion decisions from Emil Kowalski's design-engineering notes (MIT). Unseen details compound. Keyboard actions never animate. Do the task. Do not open with a philosophy recap. | This skill | Not this skill | | --- | --- | | Should this animate, and with which easing, duration, and origin | Exact polish numbers (vd:better-ui) | | Popovers, tooltips, toasts, drawers, clip-path, drag | Design-system choice, tokens, page build (vd:uiuxdesign) | | A Before / After / Why review table | Posting that table on a PR (vd:code-review) | When vd:better-ui already names an exact value, use that value. | Interaction | Use | | --- | --- | | Press scale | 0.96 from vd:better-ui, not 0.97 | | Icon cross-fade | scale 0.25, blur 4px, bounce 0 from vd:better-ui | | Page-level stagger | 100ms from vd:better-ui | | List stagger | 30-80ms, in motion.md | | Crossfade mask | blur(2px) here, not the icon blur | 1. Answer "should this animate?" before writing a curve. Frequency decides. A keyboard shortcut or command palette never animates. 2. Never use ease-in on UI. It delays the first frame, which is the moment the user is watching. Never use transition: all. 3. Never enter from scale(0). Start at scale(0
This is an excerpt. Refer to the complete source and its current requirements.
- Source repository
- vanducng/skills
- Source file
- skills/design-eng/SKILL.md
- Fixed revision
- c20411b8df8f821988c87689f6aefe142b6f9025
Requirements
- Only the author’s Skill metadata is included. Read the full instructions to check dependencies, licensing and conditions of use.
A small first task
先阅读原作者说明，再决定是否在自己的 AI 工具中使用。
Instructions for your AI tool
- Claude Desktop: resource-specific guide not available yet
- Claude Code: resource-specific guide not available yet
- Cursor: resource-specific guide not available yet
- Codex: resource-specific guide not available yet
Author documentation is not live verification by this site. Without evidence, we do not mark a resource as compatible, safe or free.
Sources and evidence
This record was collected automatically. Its documentation, suitability and runtime behavior have not been manually verified.
Author: vanducng/skills · original repository metadata. Documentation review: Not reviewed. Last source check: 2026-11-11T14:02:27.313Z.
Categories are inferred from names, descriptions and paths. They do not establish compatibility.
License and attribution
MIT. Third-party content and copyright remain with their authors. Refer to the original license and terms.
Original license ↗Synchronization, copying and user-reported success do not mark a resource as runtime-tested.
Limitations and notes
- Collecting metadata does not mean this site has installed, adapted, runtime-tested or security-reviewed the resource.