frontend-ui-engineering

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

2|Updated Jul 25, 2026

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

One-click install

npx skills add https://github.com/ankaboot-source/boucle --skill frontend-ui-engineering-ankaboot-source

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/ankaboot-source/boucle/tree/main/.jcode/skills/frontend-ui-engineering
Command: npx skills add https://github.com/ankaboot-source/boucle --skill frontend-ui-engineering-ankaboot-source

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? AI-generated UI often looks generic, ignores accessibility requirements, and breaks on different screen sizes. This Skill provides concrete engineering standards for building interfaces that meet WCAG 2.1 AA accessibility, follow real design systems, and avoid the recognizable "AI aesthetic" of purple gradients and stock layouts. ## Core Features & Use Cases - Component Architecture Patterns: Enforces composition over configuration, container/presentation separation, and colocated file structures for React components. - Accessibility Compliance: Provides concrete patterns for keyboard navigation, ARIA labels, focus management, and meaningful empty/error states meeting WCAG 2.1 AA. - Responsive & State Management Guidance: Covers mobile-first responsive design at standard breakpoints and a decision hierarchy for state management from useState to global stores. - Use Case: When asked to build a task list page, the Skill guides creation of skeleton loading states, optimistic updates, keyboard-accessible interactions, and layouts tested at 320px through 1440px. ## 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> 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, 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. Also avoid relying 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 palettes, excessive gradients, uniform rounded corners, and stock card grids. Avoid this by using the project's actual color tokens, consistent spacing scale, semantic colors, and content-first layouts instead of templates.

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 to multi-column grids at larger breakpoints using responsive utility classes.