# Convert Stitch Designs to React Components

Turning Stitch designs into maintainable React code can be slow and inconsistent. This skill guides Claude, Codex, or Claude Code through retrieval, component structure, token mapping, and validation.

## Install

```bash
npx skillstore add google-labs-code/react-components
```

## Metadata

- Status: approved
- Slug: google-labs-code-react-components
- Skillstore revision: r1
- Version status: missing
- Tree hash: 6c6f138fb2acb39044adf957fa66ce11451636a65cab90e14f9e8c49fbd1ea7e
- Author: google-labs-code
- GitHub username: google-labs-code
- License: MIT
- Repository: https://github.com/google-labs-code/stitch-skills/tree/main/skills/react-components/
- Ref: 30c73eac2afe762f6aa9c4553158769369d47351
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: confirmation\_required
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands, network, filesystem
- Quality score: 38
- Quality tier: warning
- Public page: https://skillstore.pages.dev/skills/google-labs-code-react-components
- Manifest: https://skillstore.pages.dev/api/skills/google-labs-code-react-components/manifest

## Capabilities

- Uses Stitch MCP screen metadata and signed download URLs as design inputs.
- Downloads Stitch HTML through a provided curl helper when normal fetch tools fail.
- Scaffolds modular React and Vite components from a TypeScript template.
- Maps Tailwind theme values against the included style guide.
- Runs SWC-based validation for props interfaces and hardcoded hex colors.
- Guides separation of components, hooks, mock data, and app wiring.

## Use Cases

- Convert Design Screens: Turn a Stitch screen into modular React components with mapped Tailwind tokens and validation steps.
- Standardize UI Outputs: Apply consistent component structure, data separation, and theme usage across generated interface work.
- Prototype Product Flows: Create a Vite-based component scaffold from a design so teams can review layout and interactions sooner.

## Prompt Templates

### Convert One Screen

```
Use the react-components skill to convert my Stitch screen named [screen] into modular React components. Validate each component after generation.
```

### Apply Project Tokens

```
Convert [screen] into React components and map colors, spacing, and fonts to my project Tailwind theme. Avoid hardcoded hex values.
```

### Build Component System

```
Convert [flow] into a component system. Separate mock data, hooks, reusable components, and app wiring before running validation.
```

### Refine Generated UI

```
Audit the generated React components against the architecture checklist. Fix structure, props typing, theme mapping, and validation failures.
```

## Limitations

- Requires access to a working Stitch MCP server and valid screen metadata.
- Uses Bash and curl, so restricted environments may need approval.
- Validation checks only props interfaces and hardcoded hex colors.
- Generated components still need visual review in the target application.

## Best Practices

- Confirm the Stitch screen, viewport, and project theme before generating files.
- Review every network fetch and command before allowing the workflow to run.
- Run visual checks after validation because AST checks cannot verify layout fidelity.

## Anti Patterns

- Do not paste untrusted design URLs into Bash commands without review.
- Do not keep large generated screens as single React files.
- Do not treat validation success as proof of visual accuracy.

## Security Audit

- Audited at: 2026-07-05T16:15:41.681\+00:00
- Summary: Most static findings are false positives caused by Markdown code spans, JSX template literals, Apache license URLs, and ordinary relative imports. The confirmed risks are the intentional Bash and npm workflow, an unconstrained curl download helper, and validator file reads from CLI-supplied paths. No prompt injection attempt was found in the reviewed files.

## Stats

- Views: 180
- Downloads: 12
- Favorites: 0
- Popularity score: 0