skills.rest
JacobThree
JacobThreeCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-ui-engineering

Builds accessible, responsive, production-quality UI components following design system standards.

Updated Apr 28, 2026
Search Tags:#accessibility#frontend#react#responsive design#design system#wcag#ui components
One-click install
npx skills add https://github.com/JacobThree/zero-bloat-mcp-stack --skill frontend-ui-engineering-jacobthree
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/JacobThree/zero-bloat-mcp-stack/tree/main/ai_blueprints/agent-skills/skills/frontend-ui-engineering
Command: npx skills add https://github.com/JacobThree/zero-bloat-mcp-stack --skill frontend-ui-engineering-jacobthree

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? AI-generated interfaces often look generic, ignore accessibility requirements, and lack proper loading, error, and empty states. This Skill enforces production-grade UI engineering practices so components are accessible, responsive, and consistent with the project's design system. ## Core Features & Use Cases - Component Architecture Guidance: Enforces composition over configuration, colocated file structures, and separation of data fetching from presentation in React/TypeScript components. - Accessibility Compliance (WCAG 2.1 AA): Provides concrete patterns for keyboard navigation, ARIA labels, focus management, and meaningful empty/error states. - Design System Adherence: Eliminates the generic "AI aesthetic" (purple gradients, excessive rounding, stock card grids) by enforcing spacing scales, typography hierarchy, and semantic color tokens. - Use Case: When asked to build a task list page, the Skill produces a component with skeleton loading states, optimistic updates via React Query, keyboard-accessible controls, and responsive layouts tested at 320px through 1440px breakpoints. ## Quick Start Ask the AI to build a responsive, accessible task list component with loading, error, and empty states that follows the project's 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-label to icon-only controls, associate labels with form inputs via htmlFor, and manage focus when dialogs open. Verify by tabbing through the page and running axe-core checks.

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

Avoid default purple/indigo palettes, excessive gradients, uniform rounded-2xl corners, and stock card grids. Instead use the project's actual color tokens, consistent spacing scale, typography hierarchy, and content-first layouts with realistic placeholder text.

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 values like theme, URL search params for shareable filters, React Query or SWR for server data, and Zustand or Redux only for complex app-wide state.

Does this approach work with Tailwind CSS responsive design?▼

Yes, it uses mobile-first Tailwind breakpoints such as grid-cols-1 scaling to sm:grid-cols-2 and lg:grid-cols-3. Layouts should be verified at 320px, 768px, 1024px, and 1440px viewport widths.

When should a component be split into smaller components?▼

Split components exceeding roughly 200 lines, components doing more than one thing, or when prop drilling goes deeper than three levels. Separate data-fetching container components from pure presentation components.

Related Skills

Explore More Software Engineering Skills→
booklib-aibooklib-ai
35

refactoring-ui

Apply Refactoring UI principles to improve visual hierarchy in UI designs.

Official
Intermediate
pedronauckpedronauck
567

a11y-testing

Automate accessibility testing with jest-axe and Playwright axe-core.

Community
Intermediate
PremModhaOfficialPremModhaOfficial
1

tanstack-query-patterns

Generate typed TanStack Query v5 hooks and service-layer code for DuckDB data integration.

Community
Advanced
quanngynxquanngynx

react-server-components

Render React Server Components on the server to reduce client-side JavaScript in Next.js App Router.

Community
Intermediate