skills.rest
jankneumann
jankneumannCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-ui-engineering

Design accessible React/TypeScript interfaces with WCAG 2.1 AA compliance.

Updated Apr 12, 2026
Search Tags:#performance#accessibility#state management#react#design system#ui engineering#wcag 2.1 aa
One-click install
npx skills add https://github.com/jankneumann/agentic-assistant --skill frontend-ui-engineering-jankneumann
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/jankneumann/agentic-assistant/tree/main/.agents/skills/frontend-ui-engineering
Command: npx skills add https://github.com/jankneumann/agentic-assistant --skill frontend-ui-engineering-jankneumann

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents user-facing React UI from shipping as inaccessible, slow, inconsistent, or visibly “AI-generated,” which otherwise creates rework during reviews and bad user experiences.

Core Features & Use Cases

  • Accessible UI engineering (WCAG 2.1 AA): Keyboard navigation, ARIA labeling, focus management, and meaningful empty/error states that work for real users.
  • Production-grade component architecture: Colocation patterns, container/presentation separation, composition over configuration, and practical file structure guidance.
  • Reliable state-management decisions: A state-management ladder that directs engineers to local, lifted, context, URL, server-state, or global state only when appropriate.
  • Performance and UX quality defaults: Loading skeletons (not spinners), optimistic updates, and responsive layout guidance to avoid common regressions.

Use Case Example: When adding a “TaskList” screen, use this skill to design components, choose where state belongs, implement loading/empty/error UI, and ensure keyboard + screen-reader usability instead of leaving the page with placeholders.

Quick Start

Use the frontend-ui-engineering skill to design and implement a React/TypeScript TaskList component that follows WCAG 2.1 AA, uses the state-management ladder correctly, includes loading/empty/error states, and avoids AI-aesthetic styling patterns.

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 2.1 AA standards?▼

Accessible React components meeting WCAG 2.1 AA require proper keyboard navigation, ARIA labeling, focus management, and meaningful empty or error states. This ensures usability for screen reader and keyboard users.

What's the best way to decide where to put state in a React application?▼

State management decisions use a decision ladder directing engineers to local, lifted, context, URL, server-state, or global state only when appropriate. This prevents over-engineering and keeps React data flow predictable.

Why do my AI-generated React UI components look unnatural and fail design reviews?▼

AI-generated React UI often looks unnatural due to AI-aesthetic styling pitfalls and inconsistent design system usage. Production UI patterns enforce composition over configuration and design system consistency to avoid this rework.

How do I handle loading and error states in React without using spinners?▼

React loading and error states should use loading skeletons instead of spinners alongside optimistic updates. This provides a production-grade UX quality default that prevents common performance and visual regressions.

What production patterns should I use for structuring React component files?▼

React component file structure uses colocation patterns, container and presentation separation, and composition over configuration. This architecture creates maintainable, production-grade component hierarchies.

Does this UI engineering approach work for adding new screens to existing React applications?▼

UI engineering applies to building or modifying React components and pages including layouts, responsive behavior, interactive state, and loading/empty/error handling. It integrates into existing applications without requiring full rewrites.

Related Skills

Explore More Software Engineering Skills→
Mischio95Mischio95
1

shadcn-ui

Set up shadcn/ui components and forms with React Hook Form and Zod.

Community
Advanced
timsvoicetimsvoice

specimin-ui-accessibility

Audit and fix generated UI code for WCAG 2.1 AA compliance.

Community
Advanced
NextSpark-jsNextSpark-js

tanstack-query

Implement TanStack Query patterns for data fetching and caching in Next.js.

Official
Advanced
weebcoder101weebcoder101
3

frontend

Provide React frontend development guidelines for component architecture, state management, and TailwindCSS styling.

Community
Intermediate