emil-design-engineering

Guide frontend engineers in implementing polished, accessible interfaces with design engineering principles.

Updated Aug 27, 2026

Search Tags:#typography #design #accessibility #keyboard-navigation #component-design #prefers-reduced-motion #ui-polish

Ready to run

npx skills add https://github.com/perimetre/ai-toolkit --skill emil-design-engineering-perimetre

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: emil-design-engineering
Source: https://github.com/perimetre/ai-toolkit/tree/main/plugins/perimetre-apps/skills/emil-design-engineering
Command: npx skills add https://github.com/perimetre/ai-toolkit --skill emil-design-engineering-perimetre

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a centralized guide for building polished, accessible web interfaces using Emil Kowalski's design engineering principles, helping teams apply consistent UI patterns across components, forms, and marketing pages.

Core Features & Use Cases

UI polish and typography decisions to improve readability and visual coherence.
Accessibility by default, including keyboard navigation, focus management, ARIA labeling, and reduced motion considerations.
Component-design guidance such as compound components, composition, and slot patterns to enable flexible, predictable APIs.
Performance-aware practices, including efficient animations and GPU-friendly transforms.

Quick Start

Audit a UI component against Emil Kowalski's principles and apply the recommended patterns to improve accessibility, typography, and interaction polish.

Frequently Asked Questions about emil-design-engineering

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

FAQPage Schema

How do I implement accessible keyboard navigation and focus management in UI components?▼

Accessible keyboard navigation and focus management require applying design engineering patterns that enforce logical tab order, proper ARIA labeling, and visible focus states. This ensures interfaces remain operable for all users.

What is the best way to design compound components with predictable APIs?▼

Compound components use composition and slot patterns to create flexible, predictable APIs. This design engineering approach ensures UI components remain robust and maintainable while allowing complex interface compositions across projects.

How do I handle prefers-reduced-motion in frontend animations?▼

Handling prefers-reduced-motion involves implementing performance-aware practices with efficient, GPU-friendly transforms. Design engineering principles ensure your UI interactions respect user motion preferences while maintaining visual polish.

Can I use these UI design patterns for both forms and marketing pages?▼

Yes, these UI design patterns apply directly to forms, marketing pages, and general UI components. The design engineering principles provide concrete patterns and checklists ensuring consistent, robust implementation across all frontend project surfaces.

How do I improve typography decisions for better readability and visual coherence?▼

Typography decisions improve readability and visual coherence by applying structured design engineering principles. Auditing UI components against these guidelines ensures consistent type scaling, spacing, and polish across your interface.

Why does my UI component lack polish despite meeting functional requirements?▼

Lack of UI polish often stems from missing design engineering principles like typography refinement, performance-aware animations, and accessibility defaults. Auditing components against these patterns reveals gaps in interaction quality and visual coherence.