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

0•

디자인 도구

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

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.

주요 기능

01React 19 component templates with modern ref usage

02WCAG compliance for touch targets and focus indicators

03W3C APG-compliant accessibility patterns for complex UI

04Native Web API implementation including Popover and inert

05Design token integration for theme-compliant styling

060 GitHub stars

사용 사례

01Building a reusable design system or UI library from scratch

02Auditing and refactoring existing components for W3C accessibility compliance

03Implementing complex UI patterns like modal dialogs or tabbed interfaces using semantic HTML

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add higashi-kota/llm-internal-rag-chat ui-component

For use in Claude.ai and ChatGPT

Download Skill