skills.rest
harshitcodes1308
harshitcodes1308COMMUNITY
Explore all skills by this author →
WebsiteGitHub

emil-design-eng

Review UI code against Emil Kowalski's design and animation principles.

Updated Jul 1, 2026
Search Tags:#design principles#ui/ux design#ui code review#emil kowalski#animation design
One-click install
npx skills add https://github.com/harshitcodes1308/padh.ai --skill emil-design-eng-harshitcodes1308
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: emil-design-eng
Source: https://github.com/harshitcodes1308/padh.ai/tree/main/.agents/skills/emil-design-eng
Command: npx skills add https://github.com/harshitcodes1308/padh.ai --skill emil-design-eng-harshitcodes1308

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides a comprehensive guide to UI/UX design principles based on Emil Kowalski's philosophy, focusing on taste, usability, and animation design.

Core Features & Use Cases

  • Design Philosophy: Offers insights on taste, unseen details, and beauty as leverage in software.
  • Review Format: Provides a strict format for reviewing UI code with a focus on transitions and animations.
  • Animation Framework: Offers a decision framework for animations, covering frequency, purpose, easing, and speed.
  • Component Principles: Outlines guidelines for building responsive buttons, popovers, tooltips, and more.
  • CSS Transform Mastery: Delivers best practices for translateY, scale, 3D transforms, and transform-origin.
  • clip-path for Animation: Explains the use of clip-path for animations, tabs, hold-to-delete, and image reveals.
  • Gesture and Drag Interactions: Discusses momentum-based dismissal, damping, pointer capture, and friction-based interactions.
  • Performance Rules: Highlights the importance of animating transform and opacity, CSS variables, and Framer Motion for performance.
  • Accessibility: Covers prefers-reduced-motion and touch device hover states for accessibility.
  • Sonner Principles: Offers principles from building Sonner components, emphasizing developer experience and good defaults.
  • Stagger Animations: Discusses staggered animations for a natural appearance.
  • Debugging Animations: Provides strategies for slow motion testing, frame-by-frame inspection, and real device testing.
  • Review Checklist: Offers a checklist for reviewing UI code for common issues and best practices.

Quick Start

Use the emil-design-eng skill to review the UI code of a component and provide feedback on its design principles.

Frequently Asked Questions about emil-design-eng

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

FAQPage Schema
How do I review UI code for animation and transition quality?▼

To review UI code for animation quality, evaluate easing, speed, and purpose using a decision framework that checks if transitions enhance usability without causing distraction. Apply a strict review format to test frame-by-frame execution and responsiveness.

What is the best way to use CSS transform and clip-path for component animations?▼

The best way to use CSS transform and clip-path for component animations is to master translateY, scale, and transform-origin for performance, while utilizing clip-path for tab transitions, hold-to-delete actions, and image reveals.

Does Framer Motion support performance rules for animating opacity and CSS variables?▼

Framer Motion supports performance rules by animating transform and opacity properties, utilizing CSS variables to optimize rendering, and ensuring smooth gesture interactions without dropping frames during component mounting.

How do I build accessible popovers and tooltips that respect prefers-reduced-motion?▼

To build accessible popovers and tooltips that respect prefers-reduced-motion, implement touch device hover states and conditionally disable complex animations to ensure usability across all user environments and interaction modes.

What are the core principles for building responsive buttons and gesture interactions?▼

Core principles for building responsive buttons and gesture interactions include implementing momentum-based dismissal, applying damping and friction-based logic, and ensuring pointer capture functions correctly across various touch surfaces.

How do I debug UI animations and staggered component appearances?▼

To debug UI animations and staggered component appearances, use slow motion testing for frame-by-frame inspection, conduct real device testing, and verify that staggered timings produce a natural appearance without visual jank.

Related Skills

Explore More Design & Creative Skills→
dylantarredylantarre
38

animation-principles

Map Disney's 12 animation principles to UI motion guidelines.

Community
Basic
fayazarafayazara
9

make-interfaces-feel-better

Apply design engineering principles to refine web interface visual polish and tactile feel.

Community
Intermediate
hulusi-tunchulusi-tunc
3

gesture-patterns

Define gesture vocabularies for touch and pointer device interactions.

Community
Intermediate
JaiminVadadoriyaJaiminVadadoriya
1

emil-design-eng

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

Community
Intermediate