skills.rest
SanHsien
SanHsienCOMMUNITY
Explore all skills by this author →
𝕏@Hsien_3GitHub

frontend-ui-engineering

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

1|Updated Sep 4, 2026
Search Tags:#accessibility#frontend#react#responsive design#design system#wcag#ui components
One-click install
npx skills add https://github.com/SanHsien/agent-skills --skill frontend-ui-engineering-sanhsien
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/SanHsien/agent-skills/tree/main/skills/frontend-ui-engineering
Command: npx skills add https://github.com/SanHsien/agent-skills --skill frontend-ui-engineering-sanhsien

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated UI often looks generic, ignores accessibility requirements, and breaks on different screen sizes. This Skill enforces engineering discipline for frontend work so components are keyboard-accessible, responsive, stateful, and consistent with the project's design system instead of looking like a default AI template. ## Core Features & Use Cases - Component Architecture Guidance: Enforces composition over configuration, colocated file structure, and separation of data fetching from presentation in React/TSX components. - WCAG 2.1 AA Accessibility: Covers keyboard navigation, ARIA labels, focus management, and meaningful empty/error states for every interactive element. - Responsive & State Patterns: Provides mobile-first breakpoint strategies (320px to 1440px) and a decision ladder for state management from useState to Zustand/Redux. - Use Case: When asked to build a task list page, the Skill produces a container/presentational component split with skeleton loading, optimistic updates, keyboard-accessible controls, and design-system-compliant spacing and color tokens. ## Quick Start Ask the agent to build a new UI component or page, such as "create an accessible, responsive settings page 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 accessible to WCAG 2.1 AA?▼

Use semantic HTML elements like button instead of div, add aria-label to icon-only controls, associate labels with form inputs, and manage focus when dialogs open. Verify by tabbing through the page and running axe-core checks.

How to structure React components for production apps?▼

Colocate the component, tests, stories, hooks, and types in one folder per component. Separate data-fetching container components from presentational components, and prefer composition over heavily configured props.

When should I use Context vs Zustand vs React Query for state?▼

Use useState for local 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.

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

AI defaults to purple gradients, excessive rounding, uniform card grids, and oversized padding. Avoid this by using the project's actual color tokens, spacing scale, border-radius values, and content-first layouts from the design system.

What breakpoints should responsive layouts be tested at?▼

Test at 320px, 768px, 1024px, and 1440px. Build mobile-first with a single-column base layout, then expand to multi-column grids at small and large breakpoints.

Related Skills

Explore More Software Engineering Skills→
4tikhonov4tikhonov
3

intent-capture

Guide exploratory conversations to capture goals, constraints, and success criteria.

Community
Basic
malinskibeniaminmalinskibeniamin
3

development-lifecycle

Guide frontend React/TypeScript projects through gated lifecycle phases from planning to deployment.

Community
Advanced
esneiderbravoesneiderbravo
1

accessibility-standards

Audit UI accessibility for WCAG 2.2 AA compliance with automated and manual checks.

Community
Intermediate
PatkikPatkik

laravel:api-resources-and-pagination

Create paginated Laravel API responses with Resource::collection and conditional fields.

Community
Intermediate