frontend-ui-engineering

Builds accessible, responsive, production-quality user interfaces following design system standards.

Updated Sep 5, 2026

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

One-click install

npx skills add https://github.com/nntoan/ultra-omp --skill frontend-ui-engineering-nntoan

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/nntoan/ultra-omp/tree/main/packages/proflow/skills/frontend-ui-engineering
Command: npx skills add https://github.com/nntoan/ultra-omp --skill frontend-ui-engineering-nntoan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated UI often looks generic, ignores accessibility requirements, and breaks responsive layouts. This Skill guides the construction of user-facing interfaces that meet WCAG 2.1 AA standards, follow real design systems, and avoid the recognizable "AI aesthetic" of purple gradients and stock card grids. ## Core Features & Use Cases - Component Architecture Patterns: Enforces composition over configuration, colocated file structures, and separation of data fetching from presentation. - Accessibility Compliance: Provides concrete patterns for keyboard navigation, ARIA labels, focus management, and meaningful empty/error states meeting WCAG 2.1 AA. - Responsive & State Guidance: Covers mobile-first breakpoints (320px to 1440px), state management selection (useState through Zustand), skeleton loading, and optimistic updates. - Use Case: When asked to build a task management page, the Skill produces a component tree with skeleton loading states, keyboard-accessible controls, semantic color tokens, and layouts tested at four breakpoints instead of a generic gradient-heavy template. ## Quick Start Ask the AI to build a responsive, accessible task list component with loading, error, and empty states following your project's 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 accessible for keyboard users?▼

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 filters and pagination.

What breakpoints should I test for responsive design?▼

Test at 320px, 768px, 1024px, and 1440px. Build mobile-first with a single-column layout, then expand using responsive utilities like Tailwind's sm: and lg: prefixes for larger screens.

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

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

When should I split a React component into smaller pieces?▼

Split components exceeding roughly 200 lines, and separate data fetching containers from presentational components. Avoid prop drilling deeper than three levels by introducing context or restructuring the component tree.