skills.rest
kaissalha
kaissalhaCOMMUNITY
Explore all skills by this author →
GitHub

emil-design-engineering

Guide frontend code reviews with design engineering principles for accessible interfaces.

Updated Aug 23, 2026
Search Tags:#performance#animations#frontend-patterns#keyboard-navigation#component-design#design-engineering#ui-accessibility
One-click install
npx skills add https://github.com/kaissalha/webld --skill emil-design-engineering-kaissalha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: emil-design-engineering
Source: https://github.com/kaissalha/webld/tree/main/.agents/skills/emil-design-engineering
Command: npx skills add https://github.com/kaissalha/webld --skill emil-design-engineering-kaissalha

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design engineering principles provide a comprehensive framework to build polished, accessible web interfaces, reducing UX inconsistencies and rework.

Core Features & Use Cases

  • Establishes no-layout-shift rules, touch-first interactions, keyboard navigation, and accessibility by default to guide frontend work.
  • Provides decision flowcharts, a practical review checklist, and a library of reference topics to support consistent UI design, reviews, and marketing pages.
  • Use cases include UI component design, frontend code reviews, form UX patterns, and performance-focused polish across animations and responsive layouts.

Quick Start

Apply Emil Kowalski's design principles to every new UI component to ensure accessibility, polish, and responsive behavior.

Frequently Asked Questions about emil-design-engineering

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

FAQPage Schema
What are design engineering principles for web interfaces?▼

Design engineering principles for web interfaces establish rules for no layout shift, keyboard navigation, touch-first interactions, and accessibility by default to reduce UX inconsistencies and rework.

How do I implement accessible keyboard navigation and reduced motion in frontend components?▼

Implement accessible keyboard navigation and reduced motion by applying core design principles, using decision flowcharts and a review checklist to guide frontend code patterns and UI component design.

How do I prevent layout shift when building responsive UI components?▼

Prevent layout shift by following no-layout-shift rules provided by design engineering principles, which guide frontend code reviews and performance optimization for responsive UI components.

Does this approach to UI accessibility work for form UX patterns and marketing pages?▼

Yes, this UI accessibility approach works for form UX patterns and marketing pages by applying touch-first interactions and performance-focused polish across animations and responsive layouts.

What's the best way to review frontend code for UI accessibility and performance polish?▼

The best way to review frontend code for UI accessibility and performance polish is using a practical review checklist and reference topics that enforce design engineering principles across animations and component design.

Related Skills

Explore More Design & Creative Skills→
KosmioKosmio

ux-designer

Apply UX best practices to improve interface usability and accessibility.

Official
Intermediate
supersterlingsupersterling
1

design-engineering

Guides frontend developers to implement polished, accessible UI components with defined constraints and a review checklist.

Community
Advanced
Spectaculous-CodeSpectaculous-Code

frontend-design

Generate responsive React interfaces with shadcn/ui and Tailwind CSS.

Official
Intermediate
thehivegroup-aithehivegroup-ai

impeccable

Audit and refine frontend interfaces for accessibility and performance.

Official
Advanced