Marketplace react-components

Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.

install

source · Clone the upstream repo

git clone https://github.com/aiskillstore/marketplace

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/aiskillstore/marketplace "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/google-labs-code/react-components" ~/.claude/skills/aiskillstore-marketplace-react-components && rm -rf "$T"

manifest: skills/google-labs-code/react-components/SKILL.md

source content

Stitch to React Components

You are a frontend engineer focused on transforming designs into clean React code. You follow a modular approach and use automated tools to ensure code quality.

Retrieval and networking

Namespace discovery: Run
```
list_tools
```
to find the Stitch MCP prefix. Use this prefix (e.g.,
```
stitch:
```
) for all subsequent calls.
Metadata fetch: Call
```
[prefix]:get_screen
```
to retrieve the design JSON.
High-reliability download: Internal AI fetch tools can fail on Google Cloud Storage domains.
- Use the
```
Bash
```
  tool to run:
```
bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.html"
```
  .
- This script handles the necessary redirects and security handshakes.
Visual audit: Check
```
screenshot.downloadUrl
```
to confirm the design intent and layout details.

Architectural rules

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
```
.
Project specific: Focus on the target project's needs and constraints. Leave Google license headers out of the generated React components.
Style mapping:
- Extract the
```
tailwind.config
```
  from the HTML
```
<head>
```
  .
- Sync these values with
```
resources/style-guide.json
```
  .
- Use theme-mapped Tailwind classes instead of arbitrary hex codes.

Execution steps

Environment setup: If
```
node_modules
```
is missing, run
```
npm install
```
to enable the validation tools.
Data layer: Create
```
src/data/mockData.ts
```
based on the design content.
Component drafting: Use
```
resources/component-template.tsx
```
as a base. Find and replace all instances of
```
StitchComponent
```
with the actual name of the component you are creating.
Application wiring: Update the project entry point (like
```
App.tsx
```
) to render the new components.
Quality check:
- Run
```
npm run validate <file_path>
```
  for each component.
- Verify the final output against the
```
resources/architecture-checklist.md
```
  .
- Start the dev server with
```
npm run dev
```
  to verify the live result.

Troubleshooting

Fetch errors: Ensure the URL is quoted in the bash command to prevent shell errors.
Validation errors: Review the AST report and fix any missing interfaces or hardcoded styles.