skills.rest
huangzida
huangzidaCOMMUNITY
Explore all skills by this author →
GitHub

frontend-ui-engineering

Create production-ready React/TypeScript UI components with accessibility and design-system alignment.

2|1|Updated Mar 26, 2026
Search Tags:#typescript#accessibility#frontend#react#design-system#ui-components
One-click install
npx skills add https://github.com/huangzida/skills --skill frontend-ui-engineering-huangzida
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/huangzida/skills/tree/main/frontend-ui-engineering
Command: npx skills add https://github.com/huangzida/skills --skill frontend-ui-engineering-huangzida

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend UI Engineering helps teams produce production-grade user interfaces that are accessible, performant, and visually polished, reducing the gap between AI-generated code and production-ready interfaces.

Core Features & Use Cases

  • Component architecture guidance and colocated structure for React/TypeScript UI code.
  • Patterns for separation of container/presentation, state management, and accessibility.
  • Use Case: when building new components, refining layouts, or making interfaces responsive to meet design-system specs.

Quick Start

Create a production-ready TaskList component following the patterns demonstrated in this skill.

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 production-ready React components with design system alignment?▼

Build production-ready React components by enforcing component architecture guidance, state management patterns, and accessibility. This ensures your UI code is maintainable, testable, and visually polished while meeting design-system specs.

What is the best way to structure a React TypeScript UI codebase for maintainability?▼

Structure your React TypeScript UI codebase using colocated component architecture and container/presentation separation patterns. This approach promotes maintainable, testable code while reducing the gap between AI-generated code and production-ready interfaces.

How do I add accessibility and keyboard navigation to frontend UI components?▼

Add accessibility and keyboard navigation to frontend UI components by applying enforced architectural patterns during creation. This guarantees interfaces meet accessibility standards and support responsive states across web apps and dashboards.

Can I use this approach to make existing layouts responsive across web apps?▼

Yes, you can use this approach to make existing layouts responsive across web apps and dashboards. It applies state management patterns and design-system alignment to refine layouts and implement responsive states effectively.

Why does my AI-generated frontend code fail to meet production UI standards?▼

AI-generated frontend code often fails production UI standards due to missing accessibility, unoptimized state management, and poor architecture. Enforcing design-system alignment and component patterns bridges this gap to produce production-grade interfaces.

How do I start creating a TaskList component following production UI patterns?▼

Start creating a TaskList component by following the demonstrated production-ready patterns for React and TypeScript. This includes implementing proper component architecture, state management, and accessibility guidelines.

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
krutikJainkrutikJain
14

android-testing-ui

Automate Compose UI tests and Espresso checks for Android applications.

Community
Advanced
faionfaionfaionfaion
4

faion-javascript-developer

Develop JavaScript and TypeScript applications across React, Node.js, and Next.js.

Community
Advanced
jackspacejackspace
16

thesys-generative-ui

Convert streaming LLM responses into interactive React UI components.

Community
Advanced