skills.rest
bRRRITSCOLD
bRRRITSCOLDCOMMUNITY
Explore all skills by this author →
GitHub

react-component-library

Generate a React component library from design tokens and Figma designs.

2|Updated Jun 26, 2026
Search Tags:#React#component library#design tokens#TailwindCSS#Figma
One-click install
npx skills add https://github.com/bRRRITSCOLD/compainy --skill react-component-library
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-component-library
Source: https://github.com/bRRRITSCOLD/compainy/tree/main/skills/react-component-library
Command: npx skills add https://github.com/bRRRITSCOLD/compainy --skill react-component-library

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @base-ui-components/react, tailwindcss, clsx, tailwind-merge, class-variance-authority, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill automates the process of creating a reusable, accessible, typed React component library from design tokens and Figma designs, streamlining the development of UI components and reducing manual work.

Core Features & Use Cases

  • Component Library Generation: Automatically generates a React component library from design tokens and Figma designs.
  • Accessibility: Ensures components are accessible, following best practices and standards.
  • Customization: Allows for customization of components based on project-specific requirements.

Quick Start

Build a component library by running the command: 'build-component-library'.

Frequently Asked Questions about react-component-library

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

FAQPage Schema
How do I build a React component library from Figma designs?▼

To build a React component library from Figma designs, this Skill automates the generation of typed, accessible UI components using Figma auto-layout mapping. It requires the 'figma-design-system' skill for design token generation and uses TailwindCSS for styling.

What is Figma auto-layout mapping for React components?▼

Figma auto-layout mapping is the mechanism this Skill uses to translate Figma design structures into accessible React components. It leverages design tokens and TailwindCSS to ensure the generated UI components match the intended visual layout and theming.

Do I need a Figma design system to generate React components?▼

Yes, you need the 'figma-design-system' skill to generate the design tokens required before creating your React component library. These tokens provide the foundational theming and styling variables necessary for the TailwindCSS styling process.

Can I customize generated React components based on project requirements?▼

Yes, you can customize the generated React components based on project-specific requirements. The Skill utilizes class-variance-authority, clsx, and tailwind-merge to allow flexible styling modifications while maintaining accessibility and design token consistency.

Does TailwindCSS work with design tokens for React component generation?▼

TailwindCSS works directly with design tokens to style the generated React components. The Skill integrates TailwindCSS with Base UI components to ensure the output library is robust, typed, and adheres to accessibility standards derived from your Figma designs.

What's the best way to ensure accessibility in a generated React component library?▼

The best way to ensure accessibility in a generated React component library is by using this Skill, which builds components using Base UI foundations. It automatically applies accessibility best practices and standards during the translation of Figma designs into typed React components.

Related Skills

Explore More Software Engineering Skills→
theodrosyimertheodrosyimer

figma-sync

Synchronize design tokens between Figma and local DTCG JSON files.

Community
Intermediate
hk-vkhk-vk

coss-ui

Provide reusable React components with Tailwind styling and Base UI.

Community
Advanced
OpenCovenOpenCoven
20

shadcn-ui-and-radix

Develops React UI components with Radix accessibility and Tailwind themes.

Official
Advanced
yairbedermanyairbederman

figma-to-code

Translate Figma designs into React and Vue UI components with token-driven styling.

Community
Advanced