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

Ready to run

npx skills add https://github.com/dylantarre/design-system-skills --skill react-dylantarre

💬 Prompt for ChatGPT / Claude Chat▼

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.