react:components — Skills — getagentictools

What it does

If files do not exist: Proceed to step 4.

HTML: bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" ".stitch/designs/{page}.html"

This script handles the necessary redirects and security handshakes.

Modular components: Break the design into independent files. Avoid large, single-file outputs.

Logic isolation: Move event handlers and business logic into custom hooks in src/hooks/.

Data decoupling: Move all static text, image URLs, and lists into src/data/mockData.ts.

Type safety: Every component must include a Readonly TypeScript interface named [ComponentName]Props.

Source

Repository: https://github.com/google-labs-code/stitch-skills

react:components FAQ

What does the react:components skill do?

Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation. If files do not exist: Proceed to step 4. HTML: bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" ".stitch/designs/{page}.html"

What does react:components require?

Project specific: Focus on the target project's needs and constraints. Leave Google license headers out of the generated React components.

How do I install react:components?

Run: npx -y skills add https://github.com/google-labs-code/stitch-skills --skill react:components --agent claude-code — the source lives at github.com/google-labs-code/stitch-skills.

Maintain react:components?

Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.

[![react:components on getagentictools](https://getagentictools.com/badge/skills/google-labs-code-stitch-skills-react-components.svg)](https://getagentictools.com/skills/google-labs-code-stitch-skills-react-components?ref=badge)

npx agentictools info skills/google-labs-code-stitch-skills-react-components

The second line is the CLI lookup for this page — handy in READMEs and docs.