Does it use native web APIs?

Yes, it prioritizes modern standards like the Popover API, native element, and the inert attribute for better performance and less JavaScript overhead.

Can I use it with my existing design tokens?

Absolutely. The skill is designed to integrate CSS custom properties from your design tokens rather than using hardcoded color or spacing values.

How does it handle accessibility?

It follows the W3C ARIA Authoring Practices Guide (APG) to ensure components like tabs, dialogs, and menus are fully keyboard navigable and screen-reader friendly.

Does this skill support React 19?

Yes, it follows React 19 patterns, such as passing ref as a regular prop instead of using the deprecated forwardRef API.

UI Component Architect

Name: UI Component Architect
Author: Higashi-Kota

byHigashi-Kota

Design Tools

Standardizes the creation of accessible, theme-compliant React components using modern web APIs and W3C best practices.

About

This skill provides Claude with a comprehensive methodology for designing and implementing high-quality UI components. It prioritizes accessibility through W3C ARIA Authoring Practices, utilizes modern CSS design tokens for consistent styling, and leverages the latest React 19 patterns. By integrating native web platform APIs like Popover and <dialog>, it ensures performance and standards-compliance, making it an essential tool for developers building production-grade frontend libraries and design systems that meet WCAG requirements.

Key Features

React 19 component templates with modern ref usage
WCAG compliance for touch targets and focus indicators
W3C APG-compliant accessibility patterns for complex UI
Native Web API implementation including Popover and inert
Design token integration for theme-compliant styling
0 GitHub stars

Use Cases

Building a reusable design system or UI library from scratch
Auditing and refactoring existing components for W3C accessibility compliance
Implementing complex UI patterns like modal dialogs or tabbed interfaces using semantic HTML

About

Key Features

React 19 component templates with modern ref usage
WCAG compliance for touch targets and focus indicators
W3C APG-compliant accessibility patterns for complex UI
Native Web API implementation including Popover and inert
Design token integration for theme-compliant styling
0 GitHub stars

Use Cases

Building a reusable design system or UI library from scratch
Auditing and refactoring existing components for W3C accessibility compliance
Implementing complex UI patterns like modal dialogs or tabbed interfaces using semantic HTML