design-engineering-polish

Generated source view for the actual executable engineering/design-engineering-polish skill. The durable routing article is Frontend and Design Skills. Source: skills/engineering/design-engineering-polish/SKILL.md

Runtime Source

Bundled Resources

These files are part of the executable skill folder and must be preserved with the skill source.

Description

Kevin's design-engineering polish route for UI motion, component feel, animation vocabulary, animation decisions, and invisible interface details. Use when reviewing animation decisions, component polish, motion design, animation vocabulary prompts, direction-aware transitions, stagger, crossfade, layout animation, or when the user says "Emil", "animation review", "component polish", "motion details", "animations.dev", or "make it feel right".

Skill Source

---
name: design-engineering-polish
description: Kevin's design-engineering polish route for UI motion, component feel, animation vocabulary, animation decisions, and invisible interface details. Use when reviewing animation decisions, component polish, motion design, animation vocabulary prompts, direction-aware transitions, stagger, crossfade, layout animation, or when the user says "Emil", "animation review", "component polish", "motion details", "animations.dev", or "make it feel right".
origin: personal
source_slug: design-engineering-polish
upstream_slug: emil-design-eng
---


# Design Engineering Polish


## Progressive Disclosure

This `SKILL.md` is the routing layer. Detailed recipes, examples, integration notes, and troubleshooting guidance live in `references/details.md` so they are loaded only when the task needs them.

Before producing concrete output, making a design recommendation, or debugging an implementation, load the relevant reference section below. Do not rely on memory for branch-specific APIs, examples, or caveats.

| Task branch | Read first |
| --- | --- |
| Initial Response | `references/details.md#initial-response` |
| Core Philosophy | `references/details.md#core-philosophy` |
| Review Format (Required) | `references/details.md#review-format-required` |
| The Animation Decision Framework | `references/details.md#the-animation-decision-framework` |
| Animation Vocabulary | `references/details.md#animation-vocabulary` |
| Effect and WebGL Source Selection | `references/details.md#effect-and-webgl-source-selection` |
| Spring Animations | `references/details.md#spring-animations` |
| Component Building Principles | `references/details.md#component-building-principles` |
| CSS Transform Mastery | `references/details.md#css-transform-mastery` |
| clip-path for Animation | `references/details.md#clip-path-for-animation` |
| Gesture and Drag Interactions | `references/details.md#gesture-and-drag-interactions` |
| Performance Rules | `references/details.md#performance-rules` |
| Accessibility | `references/details.md#accessibility` |
| The Sonner Principles (Building Loved Components) | `references/details.md#the-sonner-principles-building-loved-components` |
| Stagger Animations | `references/details.md#stagger-animations` |
| Debugging Animations | `references/details.md#debugging-animations` |
| Review Checklist | `references/details.md#review-checklist` |

---

Timeline

• 2026-07-15 | Generated a browseable source page from the actual executable skill file. Source: skills/engineering/design-engineering-polish/SKILL.md