react:components

Convert Stitch design data into modular React components with AST validation.

Updated Mar 5, 2026

Search Tags:#typescript #frontend #react #validation #component-generation #ast #stitch

Ready to run

npx skills add https://github.com/stephanesoares/dotfiles --skill react-components-stephanesoares

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react:components
Source: https://github.com/stephanesoares/dotfiles/tree/main/config/claude/skills/react-components
Command: npx skills add https://github.com/stephanesoares/dotfiles --skill react-components-stephanesoares

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Stitch-to-React conversion often requires manual translation of design tokens and layouts into reusable React components, slowing design-to-code handoffs and introducing inconsistencies.

Core Features & Use Cases

Automated Component Generation: Transforms Stitch designs into modular React components with a clear Atomic Design structure.
Validation & Theming: Enforces TypeScript interfaces, AST-based validation, and theme-aware styling via Tailwind-like tokens.
Use Case: When a Stitch design JSON is available, this skill generates a library of React components ready for a Vite project.

Quick Start

Turn Stitch designs into modular React components with a single command.

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 designs into React components automatically?▼

Stitch design data is converted into modular React components through an automated pipeline spanning retrieval, mapping, generation, validation, and audit stages. It outputs components with explicit props interfaces and theme-aware styling for Vite projects.

What is AST-based validation in React component generation?▼

AST-based validation uses Abstract Syntax Trees to verify generated component code structure and enforce explicit TypeScript props interfaces. This ensures modular component architecture and code consistency throughout the design-to-code conversion pipeline.

Does the generated React component library work with Vite and TypeScript?▼

Yes, the generated React components are configured for Vite projects and enforce explicit TypeScript props interfaces. The pipeline outputs theme-aware components styled with Tailwind-like tokens, ensuring compatibility with modern TypeScript frontend setups.

How do I ensure consistent theming when converting Stitch designs to React?▼

Consistent theming is enforced by mapping Stitch design data into theme-aware styling using Tailwind-like tokens. This ensures visual consistency and standardized styling tokens across the generated modular React component library.

What are the limitations of automated Stitch to React component conversion?▼

Limitations include the strict dependency on available Stitch design JSON as the input format. The pipeline also enforces a rigid Atomic Design structure and specific Tailwind-like token theming, which may require manual refactoring for non-standard layouts.