skills.rest
wibus-wee
wibus-weeCOMMUNITY
Explore all skills by this author →
Website𝕏@wibus_weeGitHub

emil-design-eng

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

54|7|Updated May 29, 2026
Search Tags:#animation#ui design#component design#ui polish#emil kowalski
One-click install
npx skills add https://github.com/wibus-wee/cradle-app --skill emil-design-eng-wibus-wee
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: emil-design-eng
Source: https://github.com/wibus-wee/cradle-app/tree/main/.agents/skills/emil-design-eng
Command: npx skills add https://github.com/wibus-wee/cradle-app --skill emil-design-eng-wibus-wee

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides guidance on UI polish, component design, animation decisions, and the invisible details that make software feel great, based on Emil Kowalski's design engineering philosophy.

Core Features & Use Cases

  • Design Engineering Philosophy: Offers insights into taste, unseen details, and beauty as leverage in software design.
  • Review Format: Provides a required markdown table format for reviewing UI code.
  • Animation Decision Framework: Includes a framework for evaluating animation needs, including purpose, easing, speed, and perceived performance.
  • Component Building Principles: Outlines principles for building responsive buttons, popovers, tooltips, and other UI components.
  • CSS Transform Mastery: Offers best practices for using CSS transforms for animations and interactions.
  • clip-path for Animation: Explains how to use clip-path for complex animations and transitions.
  • Gesture and Drag Interactions: Discusses best practices for implementing gesture and drag interactions in UI.
  • Performance Rules: Provides guidelines for optimizing animations for performance.
  • Accessibility: Offers considerations for reducing motion and improving accessibility.
  • Sonner Principles: Shares principles from building Sonner, a component library, for creating loved components.
  • Stagger Animations: Explains how to stagger animations for a more natural appearance.
  • Debugging Animations: Offers tips for debugging animations using DevTools and testing on real devices.

Quick Start

Use the emil-design-eng skill to review the UI of a component and provide feedback using the specified markdown table format.

Frequently Asked Questions about emil-design-eng

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

FAQPage Schema
What is design engineering and how does it improve UI polish?▼

Design engineering applies principles of taste, unseen details, and beauty as leverage to improve UI polish. It bridges front-end development and aesthetics to create intuitive user interfaces.

How do I evaluate animation decisions for front-end components?▼

Evaluate animation decisions using a framework assessing purpose, easing, speed, and perceived performance. This ensures animations enhance user experience rather than degrade it.

What are the best practices for using CSS transforms and clip-path in UI animations?▼

Best practices for CSS transforms and clip-path involve mastering them for complex animations and transitions. They enable performant visual effects without triggering expensive browser layout recalculations.

Do I need advanced JavaScript knowledge to implement gesture and drag interactions?▼

Implementing gesture and drag interactions requires HTML, CSS, and JavaScript knowledge. The skill provides specific best practices for building these interactions effectively within front-end components.

How do I debug UI animations and ensure accessibility for reduced motion?▼

Debug UI animations using DevTools and testing on real devices. Ensure accessibility by following specific guidelines for reducing motion and optimizing animation performance for all users.

When should I use stagger animations in component design?▼

Use stagger animations in component design to achieve a more natural appearance. This technique prevents multiple UI elements from animating simultaneously, reducing visual noise and cognitive load.

Related Skills

Explore More Design & Creative Skills→
kimmyxpowkimmyxpow

12-principles-of-animation

Audit web animation code for compliance with the 12 principles of animation.

Community
Basic
parsojparsoj

emil-design-eng

Review React component animation styles against Emil Kowalski's design principles.

Community
Advanced
emilkowalskiemilkowalski
27.6k

emil-design-eng

Review UI motion, easing, and interaction design for polish.

Community
Advanced
samcannassamcannas

design-motion-principles

Audit UI motion design for accessibility, performance, and design guidelines.

Community
Intermediate