skills.rest
ceshez
ceshezCOMMUNITY
Explore all skills by this author →
GitHub

emil-design-eng

Review web UI interactions and animation choices against design engineering rules.

Updated Aug 23, 2026
Search Tags:#performance#accessibility#animation#ui polish#component states#design engineering#easing curves
One-click install
npx skills add https://github.com/ceshez/VELAR --skill emil-design-eng-ceshez
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: emil-design-eng
Source: https://github.com/ceshez/VELAR/tree/main/.agents/skills/emil-design-eng
Command: npx skills add https://github.com/ceshez/VELAR --skill emil-design-eng-ceshez

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you design UI that feels consistently premium by guiding how to choose animation, spacing, states, and micro-interactions so they match real-world expectations.

Core Features & Use Cases

  • Animation decision-making: choose whether to animate and then set easing and timing using a repeatable framework (including strict rules like staying under 300ms and never using ease-in for UI).
  • Component craft guidelines: apply specific interaction details such as responsive press feedback, origin-aware popovers, and tooltips that behave correctly across first and subsequent hovers.
  • Performance and accessibility guardrails: prefer GPU-friendly properties (transform/opacity), avoid keyframes for interruptible UI, respect prefers-reduced-motion, and test for device-specific hover/gesture behavior.

Quick Start

Ask the AI to review your UI interaction or component code for polish by producing a Before/After markdown table and recommending concrete animation and state fixes based on Emil Kowalski’s design engineering rules.

Frequently Asked Questions about emil-design-eng

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I choose the right easing curves and duration for UI animations?▼

For UI animation, keep durations under 300ms and never use ease-in for interface elements. This Skill provides a repeatable framework to set easing and timing so interactions feel responsive and premium.

How do I make web UI component interactions feel premium and responsive?▼

Polish web UI by applying specific interaction details like responsive press feedback, origin-aware popovers, and correct tooltip hover behaviors. This Skill reviews your code and outputs a Before/After markdown table with concrete fixes.

How do I handle animation interruptibility and prefers-reduced-motion in web UI?▼

Respect prefers-reduced-motion and avoid keyframes for interruptible UI. Prefer GPU-friendly properties like transform and opacity to maintain performance and accessibility during component state changes.

What is the best way to review UI component code for design polish?▼

Review UI component code by evaluating animation, spacing, and micro-interactions against strict design engineering rules. Request a Before/After markdown table to identify and fix interaction and state issues.

Can I use this design engineering approach for any web UI build?▼

Yes, this approach applies to component interaction design, animation system choices, hover/tooltip behavior, and performance/accessibility tuning across web UI builds without requiring external dependencies.

Related Skills

Explore More Design & Creative Skills→
Festo-WampambaFesto-Wampamba

redesign-existing-projects

Upgrades existing app interfaces by applying premium visual design changes.

Community
Advanced
letxbrace-droidletxbrace-droid

emil-design-eng

Review UI motion and interaction code using Emil Kowalski's design engineering framework.

Community
Intermediate
Alfie728Alfie728

web-animation-design

Design web animations with timing, easing, and accessibility guidelines.

Community
Advanced
emilkowalskiemilkowalski
27.6k

emil-design-eng

Review UI motion, easing, and interaction design for polish.

Community
Advanced