Verified:GitHub

frontend-ui-engineering

Builds accessible, responsive React components following design system conventions.

Updated May 5, 2026

Search Tags:#accessibility #frontend #react #responsive design #design system #wcag #component architecture

One-click install

npx skills add https://github.com/UlaYuga/promo-preflight --skill frontend-ui-engineering-ulayuga

Or copy as Structured Prompt for Agent▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? AI-generated interfaces often look generic, ignore accessibility standards, and lack proper loading, error, and empty states. This Skill provides concrete patterns and checklists for building user interfaces that meet WCAG 2.1 AA accessibility requirements, follow a project's design system, and avoid recognizable AI-generated visual defaults. ## Core Features & Use Cases - Component Architecture Patterns: Enforces composition over configuration, colocated file structure, and separation of data fetching from presentation in React components. - Accessibility Enforcement: Provides keyboard navigation, ARIA labeling, focus management, and contrast requirements with code examples for every interactive element. - Design System Adherence: Defines rules for spacing scales, typography hierarchy, semantic color tokens, and a checklist of AI-aesthetic anti-patterns to avoid. - Use Case: When asked to build a task management dashboard, the Skill guides creation of responsive components with skeleton loading states, optimistic updates, keyboard-accessible controls, and meaningful empty states tested at 320px through 1440px breakpoints. ## Quick Start Build a responsive, accessible task list component with 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> which are focusable by default instead of clickable <div> elements. If a div must be interactive, add role="button", tabIndex={0}, and handle Enter and Space key events. Every interactive element must be reachable via Tab navigation.

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

Use useState for component-specific UI state, lifted state for 2-3 sibling components, Context for read-heavy values like theme or auth, URL search params for shareable filters, React Query or SWR for server data, and Zustand or Redux only for complex app-wide client state.

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. Color must never be the sole indicator of state; combine it with icons, text, or patterns so information remains perceivable.

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

Use skeleton loaders for content areas because they preserve layout and set expectations about incoming content structure. Mark them with aria-busy="true" and an aria-label so screen readers announce the loading state.

When should a React component be split into smaller components?▼

Split components exceeding roughly 200 lines, components doing more than one thing, or when prop drilling extends deeper than three levels. Separate data-fetching container components from presentational components to keep rendering logic focused.