skills.rest
klh
klhCOMMUNITY
Explore all skills by this author →
Website𝕏@klhougesenGitHub

frontend-ui-engineering

Build accessible, performant frontend components aligned with design-system tokens and WCAG 2.1 AA.

9|Updated Apr 3, 2026
Search Tags:#ui#accessibility#frontend#react#design-system#responsive-design#component-architecture
One-click install
npx skills add https://github.com/klh/speedy-claude --skill frontend-ui-engineering-klh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/klh/speedy-claude/tree/main/skills/frontend-ui-engineering
Command: npx skills add https://github.com/klh/speedy-claude --skill frontend-ui-engineering-klh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend UI Engineering eliminates low-quality, inconsistent, or AI-styled interfaces by guiding engineers to build accessible, performant, and design-system-aligned user interfaces that read and feel like production code from a design-aware team.

Core Features & Use Cases

  • Component architecture and file structure guidance to colocate implementation, tests, stories, hooks, and types so components are easy to reason about and maintain.
  • Practical state management recommendations that match complexity to need (local state, lifted state, context, server cache, or global store).
  • Accessibility and interaction best practices covering keyboard navigation, ARIA labeling, focus management, meaningful empty/error states, and WCAG 2.1 AA requirements.
  • Responsive design, loading patterns, optimistic updates, and verification checklists to ensure components are tested and performant.
  • Use Case: Refactor a TaskList feature into a container/presentation split with keyboard-accessible task items, responsive layout across breakpoints, design-system tokens, and unit and interaction tests.

Quick Start

Implement a production-quality TaskList component following the recommended file structure, accessible keyboard navigation, responsive breakpoints, design-system tokens, and unit and interaction tests.

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 React components that meet WCAG 2.1 AA accessibility standards?▼

Build accessible React components by enforcing keyboard navigation, ARIA labeling, focus management, and meaningful empty or error states to meet WCAG 2.1 AA requirements. Colocating tests and hooks ensures these accessibility patterns remain maintainable.

What is the best way to structure a React component for state management and testability?▼

The best way to structure React components is colocating implementation, tests, stories, hooks, and types. Match state management complexity to need using local state, lifted state, context, server cache, or global stores to ensure components are easy to reason about.

How do I implement responsive design using design-system tokens in a web frontend?▼

Implement responsive design by applying design-system tokens across responsive breakpoints. This ensures visual consistency and performance, eliminating low-quality or inconsistent interfaces while maintaining production-quality component architecture.

Does this frontend UI engineering approach support container and presentation component splits?▼

Yes, this frontend UI engineering approach supports container and presentation component splits. It guides you to refactor features into separated components with accessible keyboard navigation, responsive layouts, and interaction tests.

When should I not use global state stores for React component state management?▼

You should not use global state stores when local state, lifted state, or server cache sufficiently match your complexity needs. This frontend UI engineering approach recommends matching state management to the actual needs of the component.

Related Skills

Explore More Software Engineering Skills→
PiercingXXPiercingXX
1

sleek

Generate implementation-ready minimalist design-system guidance with tokens, component rules, and WCAG 2.2 AA acceptance criteria.

Community
Intermediate
vinvcnvinvcn
23

frontend-ui-engineering

Standardize accessible, responsive UI components with WCAG 2.1 AA compliance.

Community
Advanced
00PrabalK0000PrabalK00
1

component-storybook-generator

Generate Storybook stories with states, controls, and edge-case variants.

Community
Intermediate
superpollo02superpollo02

shadcn

Generate shadcn/ui-inspired component guidance with token-first rules and WCAG 2.2 AA constraints.

Community
Intermediate