skills.rest
MSC72m
MSC72mCOMMUNITY
Explore all skills by this author →
𝕏@MSC72mGitHub

frontend-ui-engineering

Builds accessible, responsive React components following design system standards and WCAG guidelines.

Updated Aug 22, 2026
Search Tags:#typescript#accessibility#React#WCAG#responsive design#design system#component architecture
One-click install
npx skills add https://github.com/MSC72m/DevForge --skill frontend-ui-engineering-msc72m
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/MSC72m/DevForge/tree/main/skills/frontend-ui-engineering
Command: npx skills add https://github.com/MSC72m/DevForge --skill frontend-ui-engineering-msc72m

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated interfaces often look generic, ignore accessibility requirements, and break on different screen sizes. This Skill enforces production-quality UI engineering practices so components are accessible, responsive, and consistent with the project's design system. ## Core Features & Use Cases - Component Architecture Patterns: Enforces composition over configuration, colocated file structures, and separation of data fetching from presentation in React/TypeScript code. - Accessibility Compliance: Applies WCAG 2.1 AA standards including keyboard navigation, ARIA labels, focus management, and meaningful empty/error states. - Design System Adherence: Prevents the generic "AI aesthetic" (purple gradients, excessive rounding, stock layouts) by enforcing project tokens, spacing scales, and type hierarchies. - Use Case: When asked to build a task management dashboard, the Skill produces a mobile-first responsive grid with skeleton loading states, optimistic updates via React Query, keyboard-accessible controls, and semantic color tokens instead of hardcoded hex values. ## Quick Start Build a responsive, accessible task list component with loading, empty, and error states that follows our design system tokens.

Frequently Asked Questions about frontend-ui-engineering

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build accessible React components that meet WCAG standards?▼

Use semantic HTML elements like button instead of div, add aria-label to icon-only controls, manage focus when dialogs open, and ensure keyboard navigation works for all interactive elements. Verify contrast ratios of 4.5:1 for normal text and test with Tab navigation.

What state management approach should I use for React components?▼

Choose the simplest option that fits: useState for local UI state, lifted state for 2-3 siblings, Context for read-heavy data like theme or auth, URL searchParams for shareable filters, React Query or SWR for server data, and Zustand or Redux only for complex app-wide state.

How do I avoid the generic AI-generated look in UI design?▼

Use the project's actual color palette and design tokens instead of default purple gradients, apply consistent spacing scale values, avoid excessive border-radius and shadows, and write realistic content instead of lorem ipsum. Follow the existing design system's typography hierarchy.

Does this approach work with Tailwind CSS responsive design?▼

Yes, the Skill uses mobile-first Tailwind patterns like grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 to build responsive layouts. It recommends testing at 320px, 768px, 1024px, and 1440px breakpoints to verify behavior across devices.

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

Split components exceeding 200 lines, separate data fetching containers from presentational components, and extract custom hooks for complex state logic. Colocate tests, stories, and types in the component's own directory for maintainability.

Related Skills

Explore More Software Engineering Skills→
xpert-aixpert-ai
8

ideate

Generate three distinct on-brand UI design variants from confirmed briefs.

Official
Intermediate
gzp79gzp79

playwright-testing

Automate browser-based tests for API integrations and user journeys with Playwright.

Community
Advanced
llmh333llmh333

browser-qa

Verify web UI behavior, visuals, and accessibility against expected signals.

Community
Advanced
shinnytechshinnytech

using-shadcn-ui

Create React UI components with shadcn/ui and Tailwind CSS.

Official
Intermediate