skills.rest
lagarcess
lagarcessCOMMUNITY
Explore all skills by this author →
GitHub

emil-design-eng

Guide UI component animation decisions with easing, duration, and accessibility rules.

1|Updated Apr 4, 2026
Search Tags:#design#accessibility#css#animation#component-design#ui-polish
One-click install
npx skills add https://github.com/lagarcess/argus --skill emil-design-eng-lagarcess
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: emil-design-eng
Source: https://github.com/lagarcess/argus/tree/main/.agent/skills/emil-design-eng
Command: npx skills add https://github.com/lagarcess/argus --skill emil-design-eng-lagarcess

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Emil Kowalski's design engineering guidance addresses the subtle, compounding interaction and animation decisions that determine whether an interface feels high-quality or merely usable. It helps teams avoid common motion and responsiveness mistakes, improving perceived performance and user satisfaction without sacrificing accessibility.

Core Features & Use Cases

  • Opinionated animation framework: Decision flow for whether to animate, purpose-driven animation categories, recommended easing curves, and duration guidelines.
  • Component design rules: Practical prescriptions for buttons, popovers, tooltips, toasts, and staggered entrances that prioritize responsiveness and interruptibility.
  • Performance & accessibility guidance: Rules of thumb for hardware-accelerated transforms, prefers-reduced-motion support, and minimizing layout/paint costs.
  • Use Case: Review a dropdown or toast component and receive a before/after table of exact CSS/JS changes with brief rationales aligned to accessibility and performance.

Quick Start

Ask the skill to review a UI component and provide a single markdown table of Before/After/Why with concise actionable fixes.

Frequently Asked Questions about emil-design-eng

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

FAQPage Schema
What is the best way to animate UI components for a polished feel?▼

To polish UI components, apply purpose-driven animation categories with recommended easing curves and duration guidelines. This ensures interactions feel intentional and delightful while maintaining strict accessibility and performance standards.

How do I review CSS animations for performance and accessibility?▼

Review CSS animations by generating a before/after markdown table of exact changes with rationales. This enforces hardware-accelerated transform and opacity rules while verifying prefers-reduced-motion support for accessibility.

Does UI animation need to support prefers-reduced-motion?▼

Yes, UI animation must support prefers-reduced-motion to maintain accessibility. The guidance includes specific rules of thumb for hardware-accelerated transforms and minimizing layout or paint costs without sacrificing accessibility.

How do I design responsive and interruptible popovers and toasts?▼

Design responsive popovers and toasts using practical component design rules that prioritize interruptibility. This prevents common motion mistakes and improves perceived performance without sacrificing accessibility.

When should I not use CSS layout properties for animation?▼

You should not animate CSS layout properties when optimizing performance, as they trigger high layout and paint costs. Instead, animate only transform and opacity to maintain hardware acceleration and smooth UI interactions.

Can I get exact CSS and JS fixes for a dropdown component review?▼

Yes, reviewing a dropdown component provides exact CSS and JS fixes in a single markdown table of Before/After/Why. These concise actionable fixes are aligned with strict accessibility and performance rules.

Related Skills

Explore More Design & Creative Skills→
mohamedgshoaibmohamedgshoaib
5

emil-design-eng

Encode design engineering principles for CSS transitions and spring animations.

Community
Advanced
whyte25whyte25
12

emil-design-eng

Review UI animation code and enforce transform/opacity-only motion standards.

Community
Advanced
FldicoahkiinFldicoahkiin
1

animate

Identify animation opportunities for UI components across web and mobile interfaces.

Community
Advanced
devstefanchodevstefancho
2

component-design-reviewer

Review React component design against five core principles.

Community
Intermediate