skills.rest
dallenpyrah
dallenpyrahCOMMUNITY
Explore all skills by this author →
GitHub

emil-design-eng

Apply design engineering principles to UI/UX component and animation decisions.

Updated Jun 21, 2026
Search Tags:#performance#css#design principles#ux design#animation#ui design
One-click install
npx skills add https://github.com/dallenpyrah/pi --skill emil-design-eng-dallenpyrah
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: emil-design-eng
Source: https://github.com/dallenpyrah/pi/tree/main/skills/emil-design-eng
Command: npx skills add https://github.com/dallenpyrah/pi --skill emil-design-eng-dallenpyrah

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This skill helps you apply Emil Kowalski's design philosophy to UI/UX, focusing on taste, unseen details, and animation decisions.

Core Features & Use Cases

  • Design Engineering Philosophy: Learn and apply principles like taste, unseen details, and beauty as leverage.
  • Animation Decision Framework: Understand when and how to animate, including easing, duration, and purpose.
  • Component Building Principles: Learn best practices for buttons, popovers, tooltips, and more.
  • CSS Transform Mastery: Master translateY, scale, 3D transforms, and transform-origin.
  • clip-path for Animation: Explore its uses for tabs, hold-to-delete, image reveals, and comparison sliders.
  • Gesture and Drag Interactions: Understand momentum-based dismissal, damping, pointer capture, and friction.
  • Performance Rules: Learn to animate transform and opacity, use CSS variables wisely, and leverage WAAPI.
  • Accessibility: Address motion sensitivity and touch device hover states.
  • Sonner Principles: Apply principles from building Sonner to your own components.
  • Stagger Animations: Create natural cascading effects for multiple elements.
  • Debugging Animations: Use slow motion testing, frame-by-frame inspection, and real device testing.
  • Review Checklist: Follow a checklist for UI code reviews to ensure best practices.

Quick Start

Use the emil-design-eng skill to review your UI code and apply design principles from Emil Kowalski's 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 use CSS transforms for UI animation without causing layout performance issues?▼

To optimize UI animation performance, animate CSS transform and opacity properties rather than box-model attributes. This leverages GPU compositing, ensuring smooth frame rates during complex component transitions.

What is the best way to decide when and how to animate UI components?▼

UI animation decisions should be guided by purpose, easing, and duration. An animation decision framework determines the correct timing and motion mechanics to enhance user experience without unnecessary distraction.

How do I create natural stagger animations for multiple UI elements?▼

Natural stagger animations are created by applying cascading delays to multiple elements, generating a sequential reveal effect. This technique relies on adjusting CSS variables and transform origins for smooth motion.

Does CSS clip-path work for building interactive component animations like image reveals?▼

CSS clip-path works effectively for interactive component animations, enabling smooth image reveals, tab transitions, and hold-to-delete interactions. It provides precise visual masking without triggering expensive document reflows.

How do I handle motion sensitivity and touch device hover states in UI design?▼

Handle motion sensitivity and touch device hover states by implementing accessibility-focused CSS fallbacks. This ensures interactive components remain usable while respecting user preferences and physical input constraints.

What should be included in a UI code review checklist for animation and component design?▼

A UI code review checklist for animation and component design should include checks for transform usage, accessibility compliance, and easing consistency. It ensures components meet performance rules and design engineering best practices.

Related Skills

Explore More Design & Creative Skills→
JaiminVadadoriyaJaiminVadadoriya
1

emil-design-eng

Apply Emil Kowalski's design engineering principles to UI/UX workflows.

Community
Intermediate
BintzGavinBintzGavin
94

example-framer-motion

Synchronize Helios frames with Framer Motion animations via MotionValue mapping.

Community
Intermediate
almeidamarcellalmeidamarcell
6

animejs

Create DOM, SVG, and WAAPI animations with anime.js v4 timelines and stagger.

Community
Advanced
Manish-Let-It-BeManish-Let-It-Be
1

emil-design-eng

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

Community
Advanced