skills.rest
TRAPZZY
TRAPZZYCOMMUNITY
Explore all skills by this author →
GitHub

frontend-ui-engineering

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

5|Updated Mar 5, 2024
Search Tags:#accessibility#frontend#react#responsive design#design system#wcag#ui components
One-click install
npx skills add https://github.com/TRAPZZY/God-Eyes --skill frontend-ui-engineering-trapzzy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/TRAPZZY/God-Eyes/tree/main/.skills/frontend-ui-engineering
Command: npx skills add https://github.com/TRAPZZY/God-Eyes --skill frontend-ui-engineering-trapzzy

SYSTEM DOCUMENTATION & REQUIREMENTS

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 disciplined component architecture, design system adherence, and WCAG 2.1 AA accessibility so UI output looks professionally engineered rather than machine-generated. ## Core Features & Use Cases - Component Architecture Patterns: Enforces colocated file structure, composition over configuration, and separation of data fetching from presentation in React/TypeScript components. - Accessibility & Responsive Standards: Applies keyboard navigation, ARIA labeling, focus management, and mobile-first breakpoints (320px to 1440px) to every component. - Anti-AI-Aesthetic Rules: Replaces generic purple gradients, excessive rounding, and stock card grids with the project's actual design tokens, spacing scale, and type hierarchy. - Use Case: When asked to build a task management dashboard, the Skill produces a TaskList with skeleton loading, optimistic updates via React Query, meaningful empty states, and full keyboard accessibility instead of a styled-but-fragile template. ## Quick Start Build a responsive, accessible task list component 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 with onClick, 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.

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

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

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

Use the project's actual color palette and spacing scale instead of purple gradients and arbitrary pixel values. Apply consistent border-radius, content-first layouts, realistic placeholder copy, and subtle shadows only when the design system specifies them.

Should I use skeleton loaders or spinners for loading states?▼

Skeleton loaders are preferred for content areas because they preserve layout and reduce perceived wait time. Mark them with aria-busy and an aria-label so screen readers announce the loading state, and combine with optimistic updates for mutations.

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

Split components exceeding roughly 200 lines, when a component handles both data fetching and rendering, or when props are drilled more than three levels deep. Separate container components that fetch data from presentational components that render it.

Related Skills

Explore More Software Engineering Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
aaaa47080aaaa47080
4

deploy

Run tests, push changes, and validate health in production deployments.

Community
Intermediate
JuanJoseGonGiJuanJoseGonGi

web-perf

Audit web page performance using Chrome DevTools MCP for Core Web Vitals and network issues.

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