skills.rest
sjoerdbeentjes
sjoerdbeentjesCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

emil-design-eng

Review UI components for polish using design engineering principles.

Updated Apr 14, 2026
Search Tags:#design#ui#accessibility#review#animation#polish
One-click install
npx skills add https://github.com/sjoerdbeentjes/open-agents --skill emil-design-eng-sjoerdbeentjes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: emil-design-eng
Source: https://github.com/sjoerdbeentjes/open-agents/tree/main/.agents/skills/emil-design-eng
Command: npx skills add https://github.com/sjoerdbeentjes/open-agents --skill emil-design-eng-sjoerdbeentjes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.

Core Features & Use Cases

  • Establishes a design engineering mindset with principles such as taste is trained, unseen details compound, and beauty is leverage.
  • Provides a structured Review Format that guides consistent UI quality, emphasizing clear before/after critique and actionable guidelines.
  • Covers animation decision frameworks, spring-based motion, and component-building principles (buttons, popovers, tooltips) to ensure cohesive and accessible UI behavior.
  • Addresses performance, accessibility, and the Sonner design principles to build cohesive, delightful components.

Quick Start

Apply Emil Kowalski's design engineering philosophy to review and refine a UI component for polish.

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 my web app UI for polish and accessibility?▼

UI review for polish involves a structured format with clear before/after critique and actionable guidelines. You evaluate performance, accessibility, and cohesive motion to ensure invisible details compound into a refined, delightful user experience.

What is the best way to design popover and tooltip components for accessibility?▼

Component design for popovers and tooltips requires origin-aware positioning and avoiding scale(0) for transitions. Using transitions and spring-based motion ensures accessible, cohesive UI behavior across interactive elements.

How does spring-based animation improve component design?▼

Spring-based animation improves component design by providing cohesive, natural motion across interactive elements. It replaces linear transitions with physics-based movement, ensuring UI behavior feels unified and polished.

When should I avoid scale(0) in UI transitions?▼

Avoid scale(0) in UI transitions when animating popovers, tooltips, or buttons to prevent layout collapse and accessibility issues. Use standard transitions instead to maintain cohesive component behavior and visual stability.

Can I apply design engineering principles to an existing web application?▼

You can apply design engineering principles to existing web apps through structured UI reviews. This process refines components, animation decisions, and accessibility improvements by enforcing concrete guidelines and clear before/after critique.

Related Skills

Explore More Design & Creative Skills→
evolving-machines-labevolving-machines-lab
76

web-design-guidelines

Audit UI code for Web Interface Guidelines compliance and output findings in file:line format.

Official
Intermediate
mohamed-g-shoaibmohamed-g-shoaib

emil-design-eng

Codify UI polish principles for buttons, popovers, and motion guidelines.

Community
Advanced
nokusukunnokusukun

animate

Identify animation opportunities and plan cohesive motion strategies for UI components.

Community
Intermediate
luicabref97luicabref97

emil-design-eng

Apply Emil Kowalski's design engineering philosophy to UI polish reviews.

Community
Advanced