skills.rest
JuanKCasal
JuanKCasalCOMMUNITY
Explore all skills by this author →
GitHub

emil-design-eng

Applies Emil Kowalski's design engineering principles to UI polish, animations, and interactive elements.

Updated Jun 27, 2026
Search Tags:#accessibility#performance optimization#ui design#component development#css transforms#gesture interactions#animation design
One-click install
npx skills add https://github.com/JuanKCasal/DnD --skill emil-design-eng-juankcasal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: emil-design-eng
Source: https://github.com/JuanKCasal/DnD/tree/main/.agents/skills/emil-design-eng
Command: npx skills add https://github.com/JuanKCasal/DnD --skill emil-design-eng-juankcasal

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill helps to elevate the quality and user experience of user interfaces by applying Emil Kowalski's design engineering philosophy to every detail.

Core Features & Use Cases

  • Philosophy Overview: Delivers insights on taste development, unseen details, and the leverage of beauty in software design.
  • Animation Framework: Offers a structured approach for designing animations, focusing on purpose, timing, easing, and perceived performance.
  • CSS Transform Mastery: Instructs on using CSS transformations for visual effects, including translateY with percentages, 3D transforms, and clip-path for animations.
  • Gesture and Drag Interactions: Provides guidelines on creating intuitive drag and gesture-based interactions.
  • Performance Rules: Lists best practices for optimizing performance, focusing on GPU acceleration, and minimizing layout triggers.
  • Accessibility Considerations: Discusses reduced motion preferences and touch device hover states.
  • Building Loved Components: Offers the Sonner Principles, focusing on developer experience, defaults, and documentation.
  • Stagger Animations: Explains how to create more natural and engaging entry animations.
  • Debugging Animations: Provides techniques for identifying and fixing animation issues.

Quick Start

Review the 'Design Engineering' section of the SKILL.md file for an introduction to Emil Kowalski's design engineering 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 design UI animations that feel natural and perform well?▼

Design UI animations by focusing on purpose, timing, easing, and perceived performance. Use a structured animation framework to create natural entry effects, utilizing stagger animations and CSS transforms for smooth visual transitions.

What are the best practices for using CSS transforms in component development?▼

CSS transforms in component development work best when using translateY with percentages, 3D transforms, and clip-path for animations. This approach ensures visual effects are GPU-accelerated, maintaining high performance during complex UI interactions.

How do I create intuitive gesture and drag interactions for UI components?▼

Create intuitive gesture and drag interactions by following established design engineering guidelines for touch and motion. Implementing these interactions requires understanding JavaScript event handling and CSS transforms to track movement and provide visual feedback.

Does UI animation design need to account for accessibility and reduced motion?▼

UI animation design must account for accessibility by respecting reduced motion preferences and handling touch device hover states. Addressing these considerations ensures interactive elements remain usable and comfortable for all users.

Why do my UI animations feel janky and how can I debug them?▼

UI animations feel janky when layout triggers occur or GPU acceleration is missing. Debug animation issues using specific techniques to identify performance bottlenecks, and fix them by applying performance rules that minimize layout recalculations.

What is the best way to build UI components that developers love to use?▼

Build UI components developers love by applying the Sonner Principles, which prioritize developer experience, sensible defaults, and clear documentation. This design engineering philosophy focuses on taste development and unseen UI details.

Related Skills

Explore More Design & Creative Skills→
wibus-weewibus-wee
54

emil-design-eng

Review UI code using Emil Kowalski's design engineering principles.

Community
Advanced
M-Abdullah07M-Abdullah07
1

application-performance-performance-optimization

Profile and optimize application performance across backend, frontend, and database.

Community
Advanced
FoundationForgeFoundationForge

design-system

Audit design systems for naming inconsistencies, hardcoded values, and accessibility gaps.

Official
Intermediate
fayazarafayazara
9

emil-design-eng

Guide UI polish, animation engineering, and design system implementation for web interfaces.

Community
Advanced