skills.rest
bykoleksii-hardo
bykoleksii-hardoCOMMUNITY
Explore all skills by this author →
GitHub

emil-design-eng

Review UI code with a markdown table of Before/After columns.

Updated Apr 25, 2026
Search Tags:#software development#animation#UI design#component design#design engineering
One-click install
npx skills add https://github.com/bykoleksii-hardo/hardo-app --skill emil-design-eng-bykoleksii-hardo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: emil-design-eng
Source: https://github.com/bykoleksii-hardo/hardo-app/tree/main/.claude/skills/emil-design-eng
Command: npx skills add https://github.com/bykoleksii-hardo/hardo-app --skill emil-design-eng-bykoleksii-hardo

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill unit provides a comprehensive guide to design engineering principles, focusing on UI polish, component design, and animation decisions based on Emil Kowalski's philosophy.

Core Features & Use Cases

  • Design Engineering Philosophy: Offers insights into UI polish, component design, and animation decisions following Emil Kowalski's philosophy.
  • Core Philosophy: Discusses the importance of taste, unseen details, and leveraging beauty for software design.
  • Review Format: Provides a required format for reviewing UI code using a markdown table with Before/After columns.
  • Animation Decision Framework: Outlines a structured approach to animation design, including purpose, easing, and timing considerations.
  • Component Building Principles: Offers best practices for building buttons, popovers, tooltips, and other UI components.
  • CSS Transform Mastery: Explores advanced CSS techniques for animations and interactions.
  • clip-path for Animation: Demonstrates creative uses of clip-path for animation effects.
  • Gesture and Drag Interactions: Discusses techniques for implementing gesture-based interactions.
  • Performance Rules: Highlights best practices for UI performance and animation.
  • Accessibility: Offers guidelines for creating accessible animations and UI components.
  • The Sonner Principles: Provides principles for building loved components from the Sonner project.
  • Stagger Animations: Explains how to stagger animations for a more natural effect.
  • Debugging Animations: Offers tips for testing and debugging animations.

Quick Start

Use the emil-design-eng skill to review a UI component and provide feedback following the required 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 for UI component development?▼

Design engineering for UI component development combines UI polish, component design, and animation decisions to enhance software UI/UX quality, emphasizing taste and unseen details to build polished interfaces.

How do I review UI code for design and animation quality?▼

Review UI code for animation quality using a structured markdown table with Before and After columns to evaluate component design, animation purpose, easing, and timing decisions against established design engineering principles.

How do I build better UI components like buttons and tooltips?▼

Build better UI components by following established component building principles and leveraging techniques like CSS transforms, clip-path animations, and stagger animations to create natural, polished interactions.

What's the best way to implement animations in UI components?▼

Implement UI animations using a structured framework that evaluates animation purpose, easing, and timing, while applying CSS transforms, clip-path properties, and gesture interactions to achieve high-performance visual effects.

How do I optimize UI performance and accessibility for animations?▼

Optimize UI performance and animation accessibility by following specific performance rules and accessibility guidelines, ensuring gesture and drag interactions remain smooth and usable for all users.

How do I debug and test UI animations effectively?▼

Debug and test UI animations effectively by applying targeted debugging tips to verify animation purpose, easing curves, and timing, ensuring component interactions perform as intended across different states.

Related Skills

Explore More Software Engineering Skills→
jorgeasaurusjorgeasaurus
12

ckm:ui-styling

Create accessible React interfaces with Radix UI components and Tailwind CSS.

Community
Advanced
Cor-IncorporatedCor-Incorporated
4

ui-skills

Enforce Tailwind CSS, accessibility, animation, and layout standards in UI components.

Official
Advanced
daffy0208daffy0208
34

animation-designer

Implement motion design improvements for React web applications using Framer Motion, CSS, Tailwind, and GSAP.

Community
Intermediate
JaiminVadadoriyaJaiminVadadoriya
1

emil-design-eng

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

Community
Intermediate