Can I use this with my existing CSS framework?

Absolutely. The methodology focuses on design tokens and CSS custom properties, making it highly compatible with Tailwind CSS, CSS Modules, or Styled Components.

What native browser features does it utilize?

It prioritizes native web platform APIs such as the element for modals and the Popover API for tooltips and menus to reduce JavaScript overhead.

What is the 'Composition over Configuration' approach?

It encourages building smaller, flexible components that can be composed together (e.g., passing icons as props) rather than creating monolithic components with complex prop APIs.

How does it handle web accessibility?

It follows the W3C ARIA Authoring Practices Guide (APG) to ensure components like tabs, dialogs, and menus have the correct roles, attributes, and keyboard navigation.

Does this skill support the latest React version?

Yes, it specifically implements React 19 patterns, such as passing ref as a standard prop instead of using the now-deprecated forwardRef.

UI Component Design & Implementation

Name: UI Component Design & Implementation
Author: Higashi-Kota

byHigashi-Kota

0•

设计工具

Builds accessible, theme-compliant React components using design tokens, semantic HTML, and W3C ARIA standards.

This skill provides a comprehensive methodology for designing and implementing high-quality, reusable UI components within the Claude Code environment. It integrates modern React 19 patterns, such as utilizing refs as standard props, with robust accessibility standards like the W3C ARIA Authoring Practices Guide (APG). By leveraging design tokens for styling consistency and prioritizing native web APIs like the Popover API and <dialog> element, it helps developers create frontend interfaces that are performance-oriented, inclusive, and easy to maintain.

主要功能

01Native Web API utilization including Popover API, <dialog>, and the inert attribute.

020 GitHub stars

03React 19 pattern implementation, including ref-as-prop support.

04Strict semantic HTML structure following WHATWG Living Standards.

05Design Token Integration for consistent, theme-compliant CSS custom properties.

06W3C APG-compliant accessibility patterns for complex UI widgets like tabs and modals.

使用场景

01Implementing complex interactive patterns like keyboard-navigable menus and accessible dialogs.

02Refactoring legacy frontend code to meet modern WCAG accessibility requirements.

03Developing a custom enterprise design system or reusable component library.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add higashi-kota/drawing-explorer ui-component

For use in Claude.ai and ChatGPT

Download Skill