skills.rest
moonwell-fi
moonwell-fiOFFICIAL
Explore all skills by this author →
Website𝕏@MoonwellDeFiGitHub

emil-design-engineering

Standardize accessible, touch-friendly, and performance-safe web UI design practices.

Updated Aug 27, 2026
Search Tags:#performance#react components#web accessibility#ui polish#touch ux#animation guidelines
One-click install
npx skills add https://github.com/moonwell-fi/moonwell-ai --skill emil-design-engineering-moonwell-fi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: emil-design-engineering
Source: https://github.com/moonwell-fi/moonwell-ai/tree/main/.claude/skills/emil-design-engineering
Command: npx skills add https://github.com/moonwell-fi/moonwell-ai --skill emil-design-engineering-moonwell-fi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps teams avoid common web UI issues like layout shift, inaccessible interactions, broken keyboard navigation, and performance regressions when building modern interfaces.

Core Features & Use Cases

  • Accessibility-first UI guidance: Ensures interactive elements have correct focus management, ARIA labels for icon buttons, and consistent keyboard navigation behavior.
  • Polished interaction patterns: Provides touch-first rules (44px tap targets, disable hover-only functionality on touch devices) and form/control best practices to make UI feel responsive and correct.
  • Animation and performance guardrails: Defines when and how to animate (especially reduced-motion support), and enforces GPU-friendly animation practices that prevent jank and layout shift.
  • Component and UI architecture principles: Recommends composable React component patterns (including compound components and the asChild slot pattern) to reduce prop explosion and increase maintainability.

Quick Start

Use this skill when reviewing a frontend change for accessibility, touch usability, animation behavior, and performance regressions—then ask the AI to turn your UI description into a checklist of concrete fixes and code-level recommendations.

Frequently Asked Questions about emil-design-engineering

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

FAQPage Schema
How do I prevent layout shift in React components?▼

To prevent layout shift in React components, enforce fixed dimensions on media and UI elements before rendering. This skill standardizes performance-safe engineering practices to avoid visual jank during asynchronous UI load.

What is the best way to handle web accessibility for icon buttons?▼

Handling web accessibility for icon buttons requires correct ARIA labeling and strict focus management. This skill provides accessibility-first UI guidance to ensure interactive elements meet compliance and keyboard navigation standards.

How do I animate CSS transitions without causing performance regressions?▼

Animating CSS transitions without performance regressions requires animating only the transform and opacity properties. This skill enforces GPU-friendly animation practices and strict avoidance of transition: all to prevent rendering jank.

Does prefers-reduced-motion work with standard CSS animations?▼

Yes, prefers-reduced-motion works with CSS animations when explicitly defined in your media queries. This skill provides animation guidelines that define when and how to apply reduced-motion support for accessible user experiences.

What are the minimum tap target sizes for touch UX?▼

The minimum tap target size for touch UX is 44px. This skill provides touch-first interaction rules, including disabling hover-only functionality on touch devices, to ensure interfaces feel responsive and correct.

How do I reduce prop explosion in composable React components?▼

Reducing prop explosion in composable React components involves using compound components and the asChild slot pattern. This skill recommends UI architecture principles to increase maintainability without sacrificing web accessibility.

Related Skills

Explore More Design & Creative Skills→
hq-opensourcehq-opensource
7

react-patterns

Standardize React component design, hook usage, state management, and typing.

Official
Advanced
CallMeLuigiv2CallMeLuigiv2

web-design-guidelines

Audit UI code against current Web Interface Guidelines for accessibility and UX compliance.

Community
Basic
RSHVRRSHVR
1

elite-accessibility

Apply motion accessibility patterns to CSS and GSAP web animations.

Community
Advanced
kmt-tkmt-t
1

Embedded C++ Optimization

{ ... }

Community
Basic