skills.rest
EliasOulkadi
EliasOulkadiCOMMUNITY
Explore all skills by this author →
𝕏@EliasOulkadiGitHub

emil-design-eng

Review UI component interactions and animations for motion and accessibility compliance.

110|14|Updated May 12, 2026
Search Tags:#accessibility#animation#component design#micro-interactions#motion design#ui polish#ui engineering
One-click install
npx skills add https://github.com/EliasOulkadi/shokunin --skill emil-design-eng-eliasoulkadi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: emil-design-eng
Source: https://github.com/EliasOulkadi/shokunin/tree/main/.pack/skills/emil-design-eng
Command: npx skills add https://github.com/EliasOulkadi/shokunin --skill emil-design-eng-eliasoulkadi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you polish interface details—especially component interactions and animation quality—so software feels fast, tactile, and trustworthy instead of generic or sluggish.

Core Features & Use Cases

  • Product UI motion rules: Apply enter/exit timing, easing curves, and interaction frequency guidance to avoid delayed or annoying animations (e.g., keyboard-triggered actions get zero animation).
  • Component interaction review: Audit patterns like transition: all, missing :active tactile feedback, incorrect transform-origin, and compositor/performance issues so interactions remain smooth.
  • Accessibility & performance gates: Enforce compositor-only animation (transform and opacity), support reduced motion, and prevent hover effects from interfering with touch/keyboard users.

Quick Start

Ask the agent to review your UI interactions and animations for compliance with Emil Kowalski-style motion and component engineering rules, including durations, easing, transform usage, origin handling for popovers/modals, and accessibility for reduced motion.

Frequently Asked Questions about emil-design-eng

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

FAQPage Schema
How do I make UI animations feel premium and responsive without hurting performance?▼

UI animations feel premium by enforcing compositor-only properties like transform and opacity, applying asymmetric enter/exit timing, and using correct transform origins for popovers and modals to maintain smooth 60fps interactions.

What easing and duration rules should I use for component micro-interactions?▼

Component micro-interactions require a product-focused decision framework defining should-animate purpose, easing curves, and duration, while ensuring keyboard-triggered actions get zero animation to avoid delayed or annoying feedback.

How do I audit UI components for motion design and accessibility issues?▼

Audit UI components by reviewing patterns like transition: all, missing :active tactile feedback, incorrect transform-origin, and compositor issues, then enforcing prefers-reduced-motion to support accessibility for keyboard and touch users.

Why does my modal or popover animation look janky during enter and exit transitions?▼

Modal and popover animations look janky when using non-compositor properties or incorrect transform origins, so you must restrict motion to transform and opacity while applying asymmetric enter/exit timing for smooth transitions.

Do I need to disable hover effects for touch and keyboard users?▼

Yes, hover effects interfere with touch and keyboard users and must be gated properly, ensuring interactions remain accessible and preventing motion from triggering unintentionally on non-mouse input devices.

Related Skills

Explore More Design & Creative Skills→
videojsvideojs
888

aria

Audit React UI components for ARIA accessibility and keyboard navigation.

Official
Basic
tcytantcytan
1

team-motion-design

Orchestrates research, choreography, animation implementation, and motion testing for UI animation systems.

Community
Advanced
Festo-WampambaFesto-Wampamba

review-animations

Reviews animation and motion code for craft regressions.

Community
Advanced
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-reduced-motion

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

Community
Intermediate