emil-design-eng

Encode design engineering principles for CSS transitions and spring physics.

4|Updated Jan 27, 2026
One-click install
npx skills add https://github.com/k97/dock-tile --skill emil-design-eng-k97
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: emil-design-eng
Source: https://github.com/k97/dock-tile/tree/main/.agents/skills/emil-design-eng
Command: npx skills add https://github.com/k97/dock-tile --skill emil-design-eng-k97

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses the gap between functional code and interfaces that feel truly premium, helping developers implement the subtle, invisible details that make software feel responsive and intentional.

Core Features & Use Cases

  • Animation Decision Framework: Provides a structured approach to determine if, how, and when to animate UI elements to maximize perceived performance.
  • Component Polish: Offers specific guidance on button feedback, popover origins, and interruptible transitions to ensure a native-feeling experience.
  • Use Case: When building a new dashboard, use this skill to review your CSS transitions and animation curves to ensure they follow the principle of ease-out responsiveness rather than sluggish ease-in defaults.

Quick Start

Ask the emil-design-eng skill to review your current CSS transition code for a dropdown component to ensure it follows the recommended animation philosophy.

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 CSS transitions feel more responsive and premium?

To make CSS transitions feel responsive, apply ease-out animation curves rather than sluggish ease-in defaults. This provides immediate visual feedback following the principle of ease-out responsiveness, making software feel intentional and premium.

What's the best way to handle interruptible UI state management during animations?

The best way to handle interruptible UI state management is to design component interactions that allow transitions to stop mid-flight without resetting. This prevents UI freezing and ensures gesture-based interactions remain fluid and responsive.

When should I use spring physics in frontend UI animations?

You should use spring physics in frontend UI animations when building gesture-based interactions that require natural momentum. It provides a structured approach to component polish like button feedback and popover origins that mimic real-world physical movement.

Does hardware-accelerated animation work with accessibility-compliant motion requirements?

Yes, hardware-accelerated animations can be fully accessibility-compliant. By applying an animation decision framework, you determine if, how, and when to animate UI elements so they maximize perceived performance without violating accessibility motion guidelines.

Why does my dropdown component animation feel sluggish on frontend dashboards?

Your dropdown component animation feels sluggish because it likely uses default ease-in transitions instead of ease-out responsiveness. Reviewing CSS transition code with an animation decision framework corrects timing curves and popover origins for a native-feeling experience.