Verified:GitHub

frontend-ui-engineering

Build accessible, responsive React components and pages following design system standards.

Updated Aug 26, 2026

Search Tags:#accessibility #frontend #react #responsive design #design system #wcag #ui components

One-click install

npx skills add https://github.com/aungpwint/presentation --skill frontend-ui-engineering-aungpwint

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/aungpwint/presentation/tree/main/.agents/skills/frontend-ui-engineering
Command: npx skills add https://github.com/aungpwint/presentation --skill frontend-ui-engineering-aungpwint

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated interfaces often look generic, ignore accessibility requirements, and break on different screen sizes. This Skill provides concrete engineering standards for building user interfaces that meet WCAG 2.1 AA accessibility, follow a real design system, and handle loading, error, and empty states properly. ## Core Features & Use Cases - Component Architecture Guidance: Enforces composition over configuration, colocated file structure, and separation of data fetching from presentation in React components. - Accessibility Standards: Provides concrete patterns for keyboard navigation, ARIA labels, focus management, and meaningful empty/error states that meet WCAG 2.1 AA. - Design System Adherence: Lists specific "AI aesthetic" anti-patterns (purple gradients, excessive rounding, stock card grids) and replaces them with spacing scales, semantic color tokens, and type hierarchy rules. - Use Case: When asked to build a task management page, apply this Skill to produce a responsive grid layout with skeleton loading states, keyboard-accessible interactive elements, optimistic updates via React Query, and styling that matches the project's design tokens. ## Quick Start Build a responsive, accessible task list page with proper loading, error, and empty states following our design system.

Frequently Asked Questions about frontend-ui-engineering

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

FAQPage Schema

How do I make React components keyboard accessible?▼

Use native interactive elements like <button> instead of <div> with onClick, since they are focusable by default. If a custom element is unavoidable, add role="button", tabIndex={0}, and handle Enter and Space key events explicitly.

How to choose between useState, Context, and Zustand for state management?▼

Use useState for component-specific UI state, Context for read-heavy values like theme or auth, and Zustand or Redux only for complex client state shared app-wide. URL search params work best for shareable state like filters and pagination.

What contrast ratio does WCAG 2.1 AA require for text?▼

WCAG 2.1 AA requires a 4.5:1 contrast ratio for normal text and 3:1 for large text. Never rely on color alone to convey information; pair it with icons, text, or patterns.

Why does AI-generated UI look generic and how do I avoid it?▼

AI defaults to purple gradients, excessive border radius, oversized padding, and stock card grids. Avoid this by using the project's actual color palette, a consistent spacing scale, semantic color tokens, and content-first layouts.

Should I use skeleton loaders or spinners for loading states?▼

Use skeleton loaders for content areas because they preserve layout and reduce perceived wait time. Mark them with aria-busy="true" and an aria-label so screen readers announce the loading state.