Verified:GitHub

emil-design-engineering

Apply design engineering principles to build accessible web interfaces.

Updated Oct 22, 2025

Search Tags:#performance #a11y #keyboard-navigation #component-design #design-engineering #ui-accessibility #no-layout-shift

Ready to run

npx skills add https://github.com/lemu/sea-prototype-template --skill emil-design-engineering-lemu

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: emil-design-engineering
Source: https://github.com/lemu/sea-prototype-template/tree/main/.agents/skills/emil-design-engineering
Command: npx skills add https://github.com/lemu/sea-prototype-template --skill emil-design-engineering-lemu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design engineering principles to help teams build polished, accessible web interfaces by codifying robust patterns and guidance.

Core Features & Use Cases

No Layout Shift: ensure stable layouts by reserving space and avoiding typography/font weight changes on hover.
Touch-First, Keyboard-Ready: prioritize touch interactions with accessible focus states and proper keyboard navigation.
Accessibility by Default: includes aria-label guidance, prefers-reduced-motion, and inclusive patterns across components.
Performance-First Patterns: guidance on transform/opacity animations, layout-avoidant changes, and progressive enhancement.
Decision Flows & Checklists: structured review practices and decision charts to guide UI work.

Quick Start

Study Emil Kowalski's design engineering principles and apply them to your UI components to prevent layout shifts, enhance accessibility, and boost performance.

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 web components during font loading?▼

Prevent layout shift by reserving space for dynamic content and avoiding typography or font weight changes on hover. This skill enforces stable UI layouts by applying design engineering principles that lock dimensions during asset loading and state transitions.

How to build accessible keyboard navigation for touch-first UI?▼

Build accessible keyboard navigation by prioritizing touch interactions alongside proper focus states. This skill provides guidance on implementing keyboard-ready components that maintain full accessibility without sacrificing mobile touch experiences.

What is design engineering for web interfaces?▼

Design engineering for web interfaces is the practice of codifying robust patterns to build polished, accessible UIs. It combines performance optimization, no layout shift principles, and default accessibility to ensure high-quality user experiences across components and marketing pages.

Does this UI accessibility guidance include prefers-reduced-motion support?▼

Yes, this UI accessibility guidance includes prefers-reduced-motion support. It enforces accessibility by default across components, providing aria-label guidance and inclusive patterns that respect user motion preferences and ensure compliant interactions.

What's the best way to optimize front-end animation performance?▼

Optimize front-end animation performance by using transform and opacity properties while avoiding layout-avoidant changes. This skill establishes performance-first patterns and progressive enhancement techniques to maintain smooth 60fps interactions.

Can I apply these design engineering principles to existing forms and pages?▼

Yes, you can apply these design engineering principles to existing forms and marketing pages. The skill provides decision flows and structured checklists to guide UI review work, ensuring stable layouts and accessibility upgrades across current interfaces.