emil-design-engineering

Codify accessible web interface best practices for frontend design challenges.

2|Updated Jun 13, 2023

Search Tags:#design #performance #accessibility #frontend #ux #polish #ui-patterns

Ready to run

npx skills add https://github.com/joaoprocopio/tooling --skill emil-design-engineering-joaoprocopio

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: emil-design-engineering
Source: https://github.com/joaoprocopio/tooling/tree/main/skills/emil-design-engineering
Command: npx skills add https://github.com/joaoprocopio/tooling --skill emil-design-engineering-joaoprocopio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a structured set of design engineering principles to help teams build polished, accessible web interfaces consistently.

Core Features & Use Cases

Accessibility by default and keyboard navigation as core requirements.
Guidance on motion, performance, typography, and component design.
Use cases include marketing pages, interactive forms, and responsive UI components.

Quick Start

Follow Emil Kowalski's design principles to start implementing a polished UI component.

Frequently Asked Questions about emil-design-engineering

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

FAQPage Schema

How do I build polished UI components that are accessible by default?▼

Build polished UI components by applying codified design engineering principles that enforce accessibility and keyboard navigation as core requirements. This ensures web interfaces remain inclusive while maintaining high visual polish across marketing and product pages.

What are the best practices for implementing accessible frontend interactions?▼

Best practices for accessible frontend interactions involve treating keyboard navigation and accessibility as default requirements. Apply structured guidance on motion, performance, and component design to ensure interactive forms and responsive UI patterns remain usable for all users.

How do I improve frontend performance and typography in web interfaces?▼

Improve frontend performance and typography by following structured design engineering principles that provide specific guidance on optimizing motion and font rendering. These practices ensure polished web interfaces load efficiently without sacrificing visual quality.

Does this approach to design engineering work for both marketing and product pages?▼

Yes, this design engineering approach works for both marketing and product pages. The codified principles apply broadly across interactive forms, responsive UI components, and general web interfaces to consistently deliver accessible and polished results.

Can I use these UI patterns to fix unpolished or inaccessible web forms?▼

Yes, you can use these UI patterns to fix unpolished or inaccessible web forms. The principles codify best practices for component design, keyboard navigation, and motion guidance, directly addressing common form interaction and accessibility challenges.

What are the limitations of using codified design principles for UI polish?▼

Codified design principles for UI polish provide structured guidance rather than automated code fixes. They require manual implementation within your frontend workflow and do not replace platform-specific accessibility testing or custom interaction logic.