1# Stitch to React Components Skill
2 
3## Install
4 
5```bash
6npx skills add google-labs-code/stitch-skills --skill react:components --global
7```
8 
9## Example Prompt
10 
11```text
12Convert my Landing Page screen in my Podcast Stitch Project to a React component system.
13```
14 
15## Skill Structure
16 
17This repository follows the **Agent Skills** open standard. Each skill is self-contained with its own logic, validation scripts, and design tokens.
18 
19```text
20skills/react-components/
21├── SKILL.md           — Core instructions & workflow
22├── package.json       — Validator dependencies
23├── scripts/           — Networking & AST validation
24├── resources/         — Style guides & API references
25└── examples/          — Gold-standard code samples
26```
27 
28## How it Works
29 
30When activated, the agent follows a high-fidelity engineering pipeline:
31 
321. **Retrieval**: Uses a system-level `curl` script to bypass TLS/SNI issues on Google Cloud Storage.
332. **Mapping**: Cross-references Stitch metadata with the local `style-guide.json` to ensure token consistency.
343. **Generation**: Scaffolds components using a strict Atomic Design pattern.
354. **Validation**: Runs an automated AST check using `@swc/core` to prevent hardcoded hex values or missing interfaces.
365. **Audit**: Performs a final self-correction check against a 20-point architecture checklist.
37