react-ui

Provide React UI guidance for component architecture, accessibility, and design-system adherence.

1|Updated Mar 22, 2026

Search Tags:#ui #accessibility #frontend #react #components #design-system

Ready to run

npx skills add https://github.com/caraya/agent-skills --skill react-ui-caraya

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-ui
Source: https://github.com/caraya/agent-skills/tree/main/skills/react-ui
Command: npx skills add https://github.com/caraya/agent-skills --skill react-ui-caraya

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Build production-quality, accessible React UIs with design-system alignment to bridge the gap between prototypes and polished products.

Core Features & Use Cases

Component architecture guidance for encapsulated, reusable UI in React (TSX), including patterns for composition, state, and separation of concerns.
Accessibility-first design with keyboard navigation, semantic markup, and WCAG-aligned guidance.
Design-system adherence and responsive, production-ready styling with tokens and practical examples across common workflows.

Quick Start

Build a production-ready React component by applying the patterns above to a real UI task.

Frequently Asked Questions about react-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build accessible React components that align with WCAG standards?▼

Build accessible React components by applying semantic HTML markup, implementing keyboard navigation, and following WCAG-aligned guidance. This approach delivers concrete patterns ensuring your UI satisfies design-system adherence and accessibility requirements.

What is the best way to structure React component architecture for scalability?▼

Structure React component architecture by prioritizing composition, state management, and separation of concerns. Using encapsulated, reusable TSX patterns ensures scalable component composition across common React workflows.

How do I apply design tokens for production-ready styling in React?▼

Apply design tokens for production-ready styling by aligning component styles with your design system. This method provides responsive, production-quality UI components that bridge the gap between prototypes and polished products.

Can I use these React UI patterns for both state management and separation of concerns?▼

Yes, you can use these React UI patterns for both state management and separation of concerns. The guidance covers component architecture that encapsulates state and logic, ensuring reusable UI in React TSX.

Does this React UI guidance include practical examples for common workflows?▼

Yes, this React UI guidance includes practical examples across common workflows. It delivers concrete rules, patterns, and best practices to help you build production-grade interfaces with design-system alignment.

Why does my React prototype fail to meet production-quality design-system standards?▼

Your React prototype may fail production standards due to missing design-system alignment and accessibility patterns. Applying encapsulated component architecture and design tokens bridges the gap to polished products.