skills.rest
dylantarre
dylantarreCOMMUNITY
Explore all skills by this author →
Website𝕏@beatthetarGitHub

react

Create token-driven React components with TypeScript and ARIA compliance.

38|3|Updated Dec 29, 2025
Search Tags:#typescript#accessibility#react#css-variables#design-tokens#component-library#token-patterns
One-click install
npx skills add https://github.com/dylantarre/design-system-skills --skill react-dylantarre
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react
Source: https://github.com/dylantarre/design-system-skills/tree/main/skills/frameworks/react
Command: npx skills add https://github.com/dylantarre/design-system-skills --skill react-dylantarre

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams build accessible, token-driven React components for design systems, enabling consistent styling, scalable architecture, and reliable token consumption across projects.

Core Features & Use Cases

  • Token-driven primitives and composite patterns for React components, with TypeScript typings and accessibility in mind.
  • Flexible styling approaches and token consumption methods, including CSS custom properties, TS token objects, and theme context.
  • Use Case: Create a reusable React component library for a design system in Next.js, consuming design tokens and exporting a coherent API.

Quick Start

Create a new React library project and apply token-driven patterns to a Button component using CSS variables and TypeScript.

Frequently Asked Questions about react

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

FAQPage Schema
How do I build a React component library that consumes design tokens?▼

To build a React component library with design tokens, apply token-driven patterns to primitives and composites using CSS variables or theme context, enforcing TypeScript typings and accessible ARIA compliance.

What is the best way to integrate CSS variables into a Next.js component library?▼

Integrating CSS variables into a Next.js component library involves applying token-based styling methods, using custom properties to map design tokens directly to component styles while maintaining strict TypeScript typings.

Does this approach support TypeScript typings for design tokens in React?▼

Yes, building token-driven React components with this approach enforces TypeScript typings across primitives, composites, and layout components to ensure reliable token consumption and a coherent API export.

How do I add ARIA accessibility patterns to React composite components?▼

Adding ARIA accessibility patterns to React composite components requires applying accessible design system practices, enforcing proper ARIA compliance across primitives and layout components during component creation.

Can I use theme context for token consumption in a React design system?▼

Yes, you can use theme context for token consumption in a React design system alongside CSS custom properties and TS token objects to provide flexible styling approaches for your component library.

What are the limitations of using CSS variables for component library styling?▼

Using CSS variables for component library styling requires managing flexible styling approaches across multiple token consumption methods, ensuring proper exports and TypeScript typings are maintained across all component primitives.

Related Skills

Explore More Software Engineering Skills→
ashishgurpritashishgurprit

visual-design-consultant

Generate design systems with color palettes, typography, and WCAG validation.

Community
Advanced
Higashi-KotaHigashi-Kota

ui-component

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

Community
Advanced
p-o-ke-naep-o-ke-nae

design-system-patterns

Build design system foundations with tokens, theming, and component architecture.

Community
Advanced
AmidVoshakulAmidVoshakul

radix-ui-design-system

Build accessible design systems with Radix UI headless primitives.

Community
Advanced