skills.rest
addyosmani
addyosmaniCOMMUNITY
Explore all skills by this author →
Website𝕏@addyosmaniGitHub

frontend-ui-engineering

Engineer accessible, responsive user interfaces with WCAG 2.1 AA compliance.

84.9k|9.1k|Updated Feb 15, 2026
Search Tags:#ui#accessibility#frontend#react#responsive design#design system
One-click install
npx skills add https://github.com/addyosmani/agent-skills --skill frontend-ui-engineering
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/addyosmani/agent-skills/tree/main/skills/frontend-ui-engineering
Command: npx skills add https://github.com/addyosmani/agent-skills --skill frontend-ui-engineering

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the challenge of creating user interfaces that are not only functional but also meet high standards of production quality, accessibility, and design consistency, moving beyond generic AI-generated aesthetics.

Core Features & Use Cases

  • Component Architecture: Enforces best practices for component structure, co-location, and composition.
  • State Management Guidance: Recommends appropriate state management solutions based on complexity.
  • Design System Adherence: Guides users to avoid common AI aesthetic pitfalls and adhere to project-specific spacing, typography, and color guidelines.
  • Accessibility (WCAG 2.1 AA): Ensures keyboard navigation, proper ARIA usage, focus management, and meaningful states.
  • Responsive Design: Promotes a mobile-first approach and testing across key breakpoints.
  • Loading & Transitions: Implements skeleton loading and optimistic updates for better perceived performance.
  • Use Case: When building a new dashboard component, use this skill to ensure it's accessible, responsive, follows the established design system, and has proper loading and error states.

Quick Start

Use the frontend-ui-engineering skill to build a new accessible and responsive card component for the user profile section.

Frequently Asked Questions about frontend-ui-engineering

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

FAQPage Schema
How do I build accessible React components that meet WCAG 2.1 AA standards?▼

Build accessible React components by enforcing WCAG 2.1 AA compliance through proper ARIA usage, keyboard navigation, focus management, and meaningful interactive states. This ensures functional compliance for users relying on assistive technologies.

What is the best way to avoid generic AI aesthetics when building a frontend UI?▼

Avoid generic AI aesthetics in frontend UI by adhering to project-specific design system guidelines for spacing, typography, and color. Enforcing component architecture and composition best practices ensures consistent, production-quality visual outcomes.

How do I structure React component architecture for production-quality user interfaces?▼

Structure React component architecture for production-quality user interfaces by enforcing best practices for component co-location and composition. This approach guides appropriate state management solutions based on complexity to ensure maintainable UI code.

How do I implement responsive design and loading states for a new dashboard component?▼

Implement responsive design and loading states for dashboard components by adopting a mobile-first approach tested across key breakpoints. Use skeleton loading and optimistic updates to improve perceived performance and user experience.

Does building production-quality UIs require specific state management solutions?▼

Building production-quality UIs does not mandate specific state management solutions; instead, it recommends appropriate solutions based on complexity. This ensures the frontend component architecture remains scalable and maintainable.

Related Skills

Explore More Software Engineering Skills→
ArogyaReddyArogyaReddy

visual-design-foundations

Define typography, color, spacing, and iconography design tokens for web and mobile UI.

Community
Advanced
froide-kkfroide-kk
1

design-ui-patterns

Provide UI component design guidelines for accessible, responsive interfaces.

Official
Intermediate
michsindlingermichsindlinger
1

State Management

Implements scalable state management patterns for React, Vue, and Angular applications.

Community
Advanced
bonnguyenitcbonnguyenitc
19

frontend-design

Create distinctive frontend interfaces with design tokens and responsive layouts.

Community
Advanced