react:components

Convert Stitch designs into modular React components with AST validation.

Updated Apr 5, 2026

Search Tags:#react #vite #component-generation #style-guide #design-systems #stitch #ast-validation

Ready to run

npx skills add https://github.com/phamhuutri108/script-lining --skill react-components-phamhuutri108

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react:components
Source: https://github.com/phamhuutri108/script-lining/tree/main/stitch-skills-main/react-components
Command: npx skills add https://github.com/phamhuutri108/script-lining --skill react-components-phamhuutri108

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Converts Stitch designs into modular React components by automating the generation and validation pipeline, reducing manual coding time and ensuring consistency.

Core Features & Use Cases

Modular Component Scaffold: Generate a component system using an Atomic Design approach from Stitch designs.
Automated Validation: Enforce AST checks and style-guide alignment to prevent hard-coded values.
Use Case: When converting a Stitch project, automatically generate a Vite-based React component library ready for integration.

Quick Start

Invoke the React components skill to generate modular React components from a Stitch design and scaffold them in a Vite project.

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, this skill automates the generation pipeline to create modular component hierarchies. It scaffolds the generated components directly into a Vite-based React project, ensuring structural consistency.

How does AST validation work for generated React components?▼

AST validation for React components works by using @swc/core to parse and enforce structural checks. This automated validation ensures the generated code adheres to the style-guide and prevents hard-coded values within the component hierarchy.

Can I use this to generate a Vite-based React component library?▼

Yes, you can generate a Vite-based React component library ready for integration. The skill uses an Atomic Design approach to scaffold a modular component system directly from your Stitch project designs.

Do I need a style-guide to generate React components from Stitch?▼

A style-guide is required to apply accurate style mappings during React component generation. Integrating the style-guide ensures the generated components maintain design consistency and prevents hard-coded styling values.

What is the best way to structure React components from design systems?▼

The best way to structure React components from design systems is using an Atomic Design approach. This skill applies metadata-driven generation to build a modular component hierarchy that aligns with your project's specific design system.

Why does the React component generation enforce style-guide alignment?▼

React component generation enforces style-guide alignment to prevent hard-coded values and ensure design consistency. By validating with AST checks via @swc/core, the pipeline guarantees the output matches the established design system rules.