react:components

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

Updated Mar 26, 2026
One-click install
npx skills add https://github.com/yunusemrgrl/filament-storybook --skill react-components-yunusemrgrl
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react:components
Source: https://github.com/yunusemrgrl/filament-storybook/tree/main/.agents/skills/react-components
Command: npx skills add https://github.com/yunusemrgrl/filament-storybook --skill react-components-yunusemrgrl

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Stitch-to-React automation reduces the manual effort of turning Stitch design data into maintainable React components by providing a structured, validated pipeline.

Core Features & Use Cases

  • Modular component generation following an Atomic Design pattern.
  • System-level retrieval of design data and metadata mapping to a local style guide.
  • AST-based validation to enforce type safety and prevent hard-coded styling or invalid props.

Quick Start

Provide a Stitch design prompt describing the UI to be converted into modular React components, and run the skill to generate the component suite.

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 modular React components?▼

To convert Stitch designs into React components, provide a Stitch design prompt to generate a modular component suite through a structured pipeline that maps design data to a local style guide and scaffolds components using Atomic Design patterns.

Does this React component generation pipeline enforce TypeScript type safety?▼

Yes, React component generation enforces type safety through AST-based validation to prevent hard-coded styling and invalid props, requiring TypeScript interfaces named [ComponentName]Props to ensure strict type correctness across desktop viewports.

How does AST-based validation work for generated React components?▼

AST-based validation checks generated React components by parsing the abstract syntax tree to enforce type safety, verify style correctness against your local style guide, and prevent hard-coded styling or invalid props during the component scaffolding process.

Can I use this skill to scaffold React components following Atomic Design patterns?▼

Yes, you can scaffold React components following Atomic Design patterns. The skill transforms Stitch design data into modular components, structuring your project hierarchy into atoms, molecules, and organisms through a deterministic, tool-driven pipeline.

Do I need @swc/core installed to generate React components from Stitch?▼

Yes, @swc/core is a required dependency to generate React components from Stitch. The skill relies on this compiler infrastructure to support its deterministic, tool-driven pipeline for transforming design data into validated TypeScript React components.

What is the required file structure for React components generated from Stitch?▼

The required file structure for generated React components includes YAML frontmatter with a name and description, TypeScript interfaces named [ComponentName]Props, and a modular project layout organized with dedicated scripts and resources directories.