react:components

Transform Stitch-generated designs into modular React components with token mapping.

2|Updated Apr 7, 2026

Search Tags:#automation #frontend #react #validation #components #design-tokens #stitch

Ready to run

npx skills add https://github.com/eliuhads/stitch2elementor --skill react-components-eliuhads

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react:components
Source: https://github.com/eliuhads/stitch2elementor/tree/main/.agent/skills/react-components
Command: npx skills add https://github.com/eliuhads/stitch2elementor --skill react-components-eliuhads

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Automatically transforms Stitch-generated designs into modular React components, reducing manual coding time and ensuring consistent structure across projects.

Core Features & Use Cases

Automated component scaffolding: Breaks designs into atomic and composite React components with token-driven theming.
Design-token alignment: Maps design tokens from Stitch outputs to project style guides and Tailwind configurations.
Validation & safety: Enforces type safety with Readonly interfaces and AST-based checks to prevent hardcoded values and missing typings.

Quick Start

Convert a Stitch design into a modular React component system using the agent's pipeline.

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?▼

To convert Stitch designs into React components, the Skill transforms Stitch-generated HTML into modular component scaffolds, mapping design tokens to your Tailwind config and validating the output with AST checks.

How do you map Stitch design tokens to a Tailwind configuration?▼

Mapping Stitch design tokens to Tailwind involves extracting token data from the design HTML and merging it with your local Tailwind config to ensure consistent theming across the generated React components.

Can I enforce atomic architecture when scaffolding React components from design files?▼

Yes, you can enforce an Atomic architecture when scaffolding React components. The Skill breaks designs down into atomic and composite components while enforcing Readonly interfaces for type safety.

Does the component generation pipeline validate against hardcoded values?▼

The component generation pipeline validates code using AST-based checks to prevent hardcoded values and missing typings, ensuring all styles rely on mapped design tokens rather than inline strings.

What is needed to automate React component scaffolding from Stitch UI assets?▼

Automating React component scaffolding from Stitch UI assets requires the @swc/core dependency for compilation and a local Tailwind configuration to merge with the extracted design tokens.

Are there limitations when migrating Stitch outputs to a React project?▼

A key limitation is that the migration enforces strict AST checks and Readonly interfaces, meaning any hardcoded values or missing typings in your Stitch outputs will be rejected during the component generation process.