skills.rest
assafmanor
assafmanorCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-ui-engineering

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

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

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 guides the construction of production-quality user interfaces that follow a real design system, meet WCAG 2.1 AA accessibility standards, and handle loading, error, and empty states properly. ## Core Features & Use Cases - Component Architecture Guidance: Enforces composition over configuration, colocated file structure, and separation of data fetching from presentation in React components. - Accessibility Enforcement: Provides concrete patterns for keyboard navigation, ARIA labels, focus management, and meaningful empty/error states that meet WCAG 2.1 AA. - Design System Adherence: Helps avoid the generic "AI aesthetic" (purple gradients, excessive rounding, stock card grids) by applying consistent spacing scales, typography hierarchy, and semantic color tokens. - Use Case: When building a new task list page, use this Skill to produce a responsive, keyboard-accessible component with skeleton loading states, optimistic updates via React Query, and styling that matches the project's design tokens. ## Quick Start Build a responsive, accessible task list page 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 build accessible React components that meet WCAG standards?▼

Use semantic HTML elements like button instead of div, add ARIA labels to icon-only controls, manage focus when dialogs open, and ensure keyboard navigation works for every interactive element. Test by tabbing through the page and running axe-core checks.

How to avoid AI-generated looking UI in frontend design?▼

Avoid purple/indigo default palettes, excessive gradients, uniform rounded corners, and stock card grids. Instead use the project's actual color tokens, a consistent spacing scale, content-first layouts, and realistic placeholder content that reveals real layout behavior.

What state management approach should I use in React?▼

Choose the simplest option that fits: useState for local UI state, lifted state for a few siblings, 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 state.

Does responsive design need to be built from the start?▼

Yes, retrofitting responsive layouts is significantly harder than building mobile-first. Design for small screens first, then expand with breakpoints, and verify rendering at 320px, 768px, 1024px, and 1440px widths.

Why should components separate data fetching from presentation?▼

Separating container components from presentational ones makes each easier to test and reuse. The container handles loading, error, and empty states, while the presentational component only renders given props, keeping both under reasonable size.

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
HouseGarofaloHouseGarofalo
3

cypress

Automate end-to-end and component testing for web applications with Cypress.

Official
Advanced
SufficientDaikonSufficientDaikon
8

ux-test-suite

Run UX test suites covering task completion, accessibility, and performance.

Community
Advanced
vtexdocsvtexdocs
39

vtex-io-react-apps

Builds VTEX IO React components for storefront blocks and admin panels using interfaces.json and GraphQL data fetching via useQuery.

Official
Advanced