react:components

Convert Stitch HTML designs into modular React components with shadcn/ui and Tailwind.

59|14|Updated Mar 1, 2026
One-click install
npx skills add https://github.com/vobase/vobase --skill react-components-vobase
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react:components
Source: https://github.com/vobase/vobase/tree/main/.agents/skills/react-components
Command: npx skills add https://github.com/vobase/vobase --skill react-components-vobase

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @swc/core, and includes scripts (resource) components.

What problem does it solve?

Converts verbose Stitch design exports into production-ready, modular React components styled with Tailwind and using shadcn/ui, eliminating manual translation of large HTML design artifacts into maintainable UI code.

Core Features & Use Cases

  • Reliable Stitch retrieval: Enforces system-level download of Stitch HTML to disk and parsing for accurate DOM, tokens, and assets.
  • Design-to-code workflow: Breaks screens into atomic components, extracts design tokens to src/globals.css, and generates mock data in src/data/mockData.ts.
  • Quality and validation: Provides AST-based validation, architecture checklists, and a code-quality guide to ensure type safety, accessibility, and consistent theming.
  • Use Case: Given a Stitch screen download URL, produce a suite of shadcn/ui + Tailwind components wired into the app with hooks, mock data, and validation scripts.

Quick Start

Convert the Stitch HTML download URL into modular shadcn/ui React components with Tailwind styling, extract design tokens into src/globals.css, create src/data/mockData.ts, and run the provided validation script.

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 to React components?

Yes, you can map Stitch design tokens to Tailwind CSS variables by extracting them from the downloaded HTML and writing them into src/globals.css. This ensures consistent theming across the generated shadcn/ui React components.

How does AST validation work for generated React components?

AST validation for generated React components works by using @swc/core to parse the code and verify syntax integrity. This ensures type safety and structural correctness in the shadcn/ui components extracted from Stitch HTML designs.

Do I need to download Stitch HTML to disk before converting to React?

Yes, you need to download Stitch HTML to disk before converting to React. The system enforces disk-based retrieval to accurately parse the DOM, extract design assets, and map the structure to modular shadcn/ui components with Tailwind styling.

What is the best way to structure mock data for shadcn/ui components?

The best way to structure mock data for shadcn/ui components is to generate a centralized src/data/mockData.ts file. This approach wires data into the extracted React components through hooks, maintaining separation of concerns and production-ready architecture.

Does this design-to-code workflow support atomic component generation?

Yes, this design-to-code workflow supports atomic component generation by breaking down Stitch screen exports into individual, modular React components. It utilizes shadcn/ui primitives and Tailwind CSS to ensure each UI element is maintainable and reusable.