skills.rest
yashtekavade
yashtekavadeCOMMUNITY
Explore all skills by this author →
GitHub

emil-design-eng

Review UI component animations for timing, easing, and accessibility compliance.

Updated Aug 27, 2026
Search Tags:#performance#accessibility#component design#ui animation#design engineering#css transitions#interaction polish
One-click install
npx skills add https://github.com/yashtekavade/fast-invoice-generator- --skill emil-design-eng-yashtekavade
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: emil-design-eng
Source: https://github.com/yashtekavade/fast-invoice-generator-/tree/main/.agents/skills/emil-design-eng
Command: npx skills add https://github.com/yashtekavade/fast-invoice-generator- --skill emil-design-eng-yashtekavade

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you design and review UI interactions so animations, component behavior, and micro-details feel responsive, intentional, and cohesive instead of generic or distracting.

Core Features & Use Cases

  • UI animation decision framework: Choose whether to animate, define the purpose, select appropriate easing, and keep motion under 300ms for perceived performance.
  • Polished interaction patterns: Implement press feedback, avoid scale(0), make popover origins correct, and handle tooltip timing and hover behavior safely.
  • Engineering-grade performance and accessibility guidance: Use transform/opacity for GPU-friendly motion, respect prefers-reduced-motion, and prevent frame drops under load.

Quick Start

Ask an AI to review a UI component and rewrite its animation and interaction rules to match a high-polish design engineering standard, including responsive press states, origin-aware popovers, and performance-safe transform-based transitions.

Frequently Asked Questions about emil-design-eng

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

FAQPage Schema
How do I review UI animation timing and easing for front-end components?▼

Polish UI components by governing animation intent, timing, and easing to keep motion under 300ms. This ensures CSS transitions feel responsive and intentional, using a deterministic review with strict before/after markdown table formatting.

What is the best way to implement GPU-friendly CSS transitions for popovers and tooltips?▼

Use GPU-friendly transform and opacity properties to prevent frame drops under load. This design engineering approach ensures popover origins, tooltip timing, and hover behaviors remain safe and performant during realistic front-end usage.

How do I handle prefers-reduced-motion accessibility compliance in UI interactions?▼

Respect prefers-reduced-motion within your component interaction patterns to ensure accessibility compliance. This prevents distracting motion while maintaining usable press feedback, popover origins, and drag gestures for users with motion sensitivities.

Why does my UI animation feel generic and distracting instead of polished?▼

UI animation feels generic when interaction patterns lack cohesive intent, proper timing, or responsive press states. Applying a design engineering standardizes component behavior, making micro-details feel invisible and right through deterministic review.

Can I use this design engineering approach for drag gestures and toast notifications?▼

Yes, this design engineering approach governs component interaction patterns and animation performance for front-end components including drag gestures, toasts, buttons, tooltips, popovers, and drawers under realistic usage conditions.

Related Skills

Explore More Design & Creative Skills→
pkoka888pkoka888
1

web-design-guidelines

Review HTML, CSS, and front-end files against Web Interface Guidelines.

Community
Intermediate
JaivishChauhanJaivishChauhan
6

frontend-ui

Compose React UIs with Tailwind CSS and Framer Motion.

Community
Intermediate
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-reduced-motion

Detect CSS animations and transitions lacking prefers-reduced-motion media query coverage.

Community
Intermediate
Camilo8902Camilo8902

animation-micro-interaction-pack

Provide reusable animation patterns for Tailwind CSS and Framer Motion.

Community
Intermediate