skills.rest
lemu
lemuCOMMUNITY
Explore all skills by this author →
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
One-click install
npx skills add https://github.com/lemu/sea-prototype-template --skill emil-design-engineering-lemu
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
japurcelljapurcell

addy-frontend-ui-engineering

Build and validate reusable frontend components with accessible, responsive markup.

Community
Advanced
smarmen86smarmen86

seo-unlighthouse

Run automated multi-page Lighthouse audits and generate aggregate JSON reports.

Community
Intermediate
arthtyagiarthtyagi
1

web-animation-design

Design natural web motion for UI elements with easing and reduced-motion support.

Community
Advanced
T1nker-1220T1nker-1220

mobile-ui-standards

Enforce mobile-first UI standards with compact spacing and touch-friendly targets.

Community
Basic