skills.rest
leadmind-ai
leadmind-aiOFFICIAL
Explore all skills by this author →
GitHub

react-components

Convert Stitch HTML designs into React components using DESIGN.md tokens.

Updated Mar 25, 2026
Search Tags:#frontend#react#tailwind#design-system#shadcn-ui#component-library#stitch-html
One-click install
npx skills add https://github.com/leadmind-ai/leadmind-ai-website --skill react-components-leadmind-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-components
Source: https://github.com/leadmind-ai/leadmind-ai-website/tree/main/.claude/skills/developpeur/react-components
Command: npx skills add https://github.com/leadmind-ai/leadmind-ai-website --skill react-components-leadmind-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Convert Stitch HTML designs and DESIGN.md into production-ready React components using shadcn/ui and Tailwind CSS, ensuring design tokens are respected and accessibility is considered.

Core Features & Use Cases

  • Design-to-Component Pipeline: transform HTML Stitch pages and DESIGN.md specs into typed, reusable React components.
  • Token-Driven Styling: apply design system tokens (colors, typography, spacing) via Tailwind/shadcn-ui.
  • Test-Driven Development: enforce tests before implementation with a clear component map and naming conventions.

Quick Start

Generate the first production-ready React component from Stitch HTML using DESIGN.md tokens.

Frequently Asked Questions about react-components

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

FAQPage Schema
How do I convert Stitch HTML designs into production-ready React components?▼

To convert Stitch HTML into production-ready React components, you apply a design-to-component pipeline that reads DESIGN.md tokens and maps visual elements into typed, reusable React structures using Tailwind CSS and shadcn/ui.

What is the process for applying design system tokens to React components?▼

Applying design system tokens involves reading color, typography, and spacing specifications from DESIGN.md and enforcing them via Tailwind CSS and shadcn-ui mappings, ensuring strict adherence to the visual design system during component generation.

Can I use shadcn-ui and Tailwind CSS to build React components from HTML designs?▼

Yes, you can use shadcn-ui and Tailwind CSS to build React components from HTML designs. The pipeline maps HTML structures to shadcn-ui primitives and applies Tailwind utility classes based on extracted design tokens.

How do I set up a test-driven workflow for React component generation?▼

You set up a test-driven workflow by enforcing tests before implementation. The pipeline requires a clear component map and naming conventions to be established first, ensuring accessibility and functionality are validated before final component generation.

What's the best way to ensure accessibility when converting HTML designs to React?▼

The best way to ensure accessibility during HTML to React conversion is using a rigid, test-driven pipeline. This approach enforces accessibility considerations alongside design token adherence before the final component implementation is generated.

Related Skills

Explore More Software Engineering Skills→
RenyEnnosRenyEnnos
1

design-md

Generate DESIGN.md design-system documentation from Stitch project assets.

Community
Advanced
berkcangumusisikberkcangumusisik
11

component-gen

Generate typed props, tests, and stories for React, Vue, or Svelte components.

Community
Intermediate
lildibbblildibbb

shadcn-ui

Build React UI components with shadcn/ui, Radix UI, and Tailwind CSS.

Community
Intermediate
tdiminotdimino
41

figma-mcp

Convert Figma designs into HTML, CSS, React, or Vue code.

Community
Advanced