skills.rest
Higashi-Kota
Higashi-KotaCOMMUNITY
Explore all skills by this author →
GitHub

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Updated Jan 2, 2026
Search Tags:#accessibility#a11y#react#ui-components#semantic-html#design-tokens#component-library
One-click install
npx skills add https://github.com/Higashi-Kota/llm-mermaid-chat --skill ui-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-component
Source: https://github.com/Higashi-Kota/llm-mermaid-chat/tree/main/.claude/skills/ui-component
Command: npx skills add https://github.com/Higashi-Kota/llm-mermaid-chat --skill ui-component

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps developers create accessible, token-driven React UI components by standardizing design token usage, semantic HTML, and a11y patterns across a design system.

Core Features & Use Cases

  • Design Token Integration: leverage CSS custom properties to ensure consistent theming and visual language.
  • Accessibility by Default: builds components with W3C ARIA patterns to ensure keyboard operability and screen reader compatibility.
  • Semantics & Reusability: promotes semantic HTML structures and composable component APIs for reusable UI blocks like buttons, inputs, and cards.

Quick Start

To start, implement a Button component that uses design tokens, supports variants and sizes, and exposes accessible ARIA attributes; also create a Card component to demonstrate semantic markup and token-driven styling; finally, export and document the components for use in a design system and client apps.

Frequently Asked Questions about ui-component

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

FAQPage Schema
How do I build React UI components with design tokens and ARIA accessibility?▼

Build accessible React UI components by integrating CSS custom properties as design tokens for consistent theming and applying W3C ARIA patterns for keyboard operability and screen reader compatibility across your design system.

What is the best way to create a token-driven React component library?▼

Create a token-driven React component library by leveraging CSS custom properties for visual language, enforcing semantic HTML structures, and exposing composable component APIs for reusable UI blocks like buttons, inputs, and cards.

Can I use semantic HTML and CSS custom properties for React design system development?▼

Yes, you can use semantic HTML and CSS custom properties for React design system development to ensure consistent theming, visual language, and accessible markup structures across reusable UI components.

How do I implement accessible button and card components in React?▼

Implement accessible button and card components in React by applying semantic HTML markup, utilizing CSS custom properties for token-driven styling, and exposing accessible ARIA attributes to support variants and sizes.

Does this approach support exporting and documenting React components for a design system?▼

Yes, this approach supports exporting and documenting React components for a design system by providing a reusable component template with export patterns and documentation, enabling usage in client apps.

Related Skills

Explore More Software Engineering Skills→
schalkneethlingschalkneethling
7

css-tokens

Generate a tokens.css file with CSS custom properties for theming and dark mode.

Community
Basic
gudnufgudnuf
1

shadcn-ui

Install shadcn-ui components into React projects with configured aliases.

Community
Intermediate
MaxStrootmannMaxStrootmann

building-components

Guides design and implementation of accessible, composable UI components for npm.

Community
Advanced
tiantangcao1980-webtiantangcao1980-web
4

mui-base

Integrate headless MUI primitives into custom React design systems.

Community
Intermediate