skills.rest
SJLee-0525
SJLee-0525COMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-ui-engineering

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? AI-generated interfaces often look generic, ignore accessibility requirements, and break on different screen sizes. This Skill provides concrete patterns and checklists for building user-facing UI that meets WCAG 2.1 AA standards, follows a real design system, and avoids the recognizable "AI aesthetic." ## Core Features & Use Cases - Component Architecture Guidance: Enforces composition over configuration, colocated file structure, and separation of data fetching from presentation. - Accessibility Standards: Covers keyboard navigation, ARIA labels, focus management, and meaningful empty/error states to meet WCAG 2.1 AA. - Responsive & State Patterns: Provides mobile-first responsive layouts, a decision hierarchy for state management (useState through global stores), and skeleton loading with optimistic updates. - Use Case: When asked to build a new dashboard page, the Skill guides the AI to use the project's design tokens, add proper heading hierarchy, handle loading/error/empty states, and verify keyboard navigation at 320px through 1440px breakpoints. ## Quick Start Ask the AI to build a new accessible and responsive UI component or page following the frontend-ui-engineering guidelines.

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 clickable <div> elements, 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-local UI state, lift state for 2-3 sibling components, Context for read-heavy values like theme or locale, URL search params for shareable filters, and a global store like Zustand only for complex app-wide client state.

What screen sizes should responsive design be tested at?▼

Test at 320px, 768px, 1024px, and 1440px breakpoints. Build mobile-first with a single-column layout, then expand to multi-column grids at larger breakpoints using responsive utility classes.

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, consistent spacing scale, semantic typography hierarchy, and content-driven layouts instead of templates.

When should I split a large React component?▼

Split components exceeding roughly 200 lines, and separate data fetching containers from presentational components. Keep each component focused on one responsibility and prefer composition over heavily configured props.

Related Skills

Explore More Software Engineering Skills→
musher-devmusher-dev

writing-visual-identity

Define color tokens, typography systems, and spatial rules for marketing pages.

Official
Advanced
Hack23Hack23
9

playwright-testing

Automate end-to-end browser testing for static websites with Playwright.

Official
Advanced
Tresillo2017Tresillo2017
4

optimize

Measure and improve frontend performance via Core Web Vitals and code-splitting.

Community
Advanced
PatternsDevPatternsDev
235

react-server-components

Server-render React components to reduce client-side JavaScript in Next.js App Router.

Official
Intermediate