skills.rest
itsmichaelwest
itsmichaelwestCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-engineering

Guide design engineering for accessible, performant web interfaces.

1|1|Updated Mar 7, 2026
Search Tags:#accessibility#frontend development#web performance#ui design#component design#ux polish
One-click install
npx skills add https://github.com/itsmichaelwest/agent-kit --skill design-engineering-itsmichaelwest
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-engineering
Source: https://github.com/itsmichaelwest/agent-kit/tree/main/skills/design-engineering
Command: npx skills add https://github.com/itsmichaelwest/agent-kit --skill design-engineering-itsmichaelwest

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides principles and patterns for creating user interfaces that are not only visually appealing but also highly accessible and performant across all devices.

Core Features & Use Cases

  • UI Polish: Guidance on typography, layout, color, and visual details.
  • Accessibility: Ensuring designs are usable by everyone, including keyboard navigation and reduced motion support.
  • Performance: Optimizing animations, transitions, and rendering for speed.
  • Use Case: When designing a new button component, use this Skill to ensure it has proper touch targets, accessible focus states, and smooth, performant animations that respect user preferences for reduced motion.

Quick Start

Review the core principles for building polished and accessible web interfaces.

Frequently Asked Questions about design-engineering

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

FAQPage Schema
How do I build accessible web interfaces with proper keyboard navigation?▼

To build accessible web interfaces, you must implement keyboard navigation and ensure designs are usable by everyone. This includes providing accessible focus states and respecting user preferences for reduced motion.

What is the best way to optimize web performance for frontend animations?▼

Optimizing web performance for frontend animations requires following animation best practices and rendering optimization techniques. This ensures smooth transitions while maintaining fast speeds across all devices.

How do I design a button component with accessible touch targets?▼

Designing a button component with accessible touch targets requires applying UI polish and accessibility standards. You must ensure proper touch target sizing, accessible focus states, and performant animations.

Does this design engineering guidance support reduced motion preferences for UI components?▼

Yes, this design engineering guidance supports reduced motion preferences for UI components. It ensures animations and transitions respect user preferences to provide accessible frontend development experiences.

What principles should I follow for UI polish in frontend development?▼

For UI polish in frontend development, you should follow principles covering typography, layout, color, and visual details. These guidelines help create visually appealing and highly performant web interfaces.

When do I need to perform a web accessibility audit for component design?▼

You need to perform a web accessibility audit for component design when ensuring interfaces are usable by everyone. This verifies keyboard navigation, accessible focus states, and reduced motion support work correctly.

Related Skills

Explore More Design & Creative Skills→
windyskywindysky

moai-domain-frontend

Guide React 19, Next.js 16, and Vue 3.5 frontend architecture with reusable components.

Community
Advanced
boraoztuncboraoztunc
248

make-interfaces-feel-better

Evaluate and enhance frontend UI polish using typography, surfaces, animation, and performance guidelines.

Community
Advanced
devalexanderdazadevalexanderdaza

bmad-create-ux-design

Generates a comprehensive UX design specification through a structured 14-step collaborative workflow.

Community
Advanced
LschulzesLschulzes

web-design-guidelines

Evaluate UI code against Web Interface Guidelines to detect deviations.

Community
Intermediate