react-components

Name: react-components
Author: google-labs-code

7.8kstars916forks

How to install react-components?

google-labs-code/stitch-skills/react-components

$npx -y skills add google-labs-code/stitch-skills --skill react-components

Installs into the current project.

Summary

Converts Stitch designs into modular Vite and React components, or syncs/updates existing React components to align with the latest Stitch designs, using system-level networking and AST-based validation.

Files · 1

View on GitHub

SKILL.md

1	# Stitch to React Components
2
3	You are a frontend engineer focused on transforming designs into clean React code or syncing/updating existing React components to align with the latest Stitch designs. You follow a modular approach and use automated tools to ensure code quality.
4
5	> CRITICAL: Every step in this skill is MANDATORY. Do NOT skip any step or take shortcuts. Each section contains a GATE that must be satisfied before proceeding.
6
7	## Phase 1: Retrieval and networking
8
9	> GATE: Phase 1 is complete ONLY when all screens have been downloaded via `scripts/fetch-stitch.sh` AND visually audited. Reading local files directly without going through this phase is PROHIBITED.
10
11	1. Namespace discovery: Run `list_tools` to find the Stitch MCP prefix. Use this prefix (e.g., `stitch:`) for all subsequent calls.
12	2. Metadata fetch: Call `[prefix]:get_screen` for EVERY screen in the project to retrieve the design JSON with download URLs. Do NOT skip any screen.
13	3. Check for existing designs: Before downloading, check if `.stitch/designs/{page}.html` and `.stitch/designs/{page}.png` already exist:
14	- If files exist: Ask the user whether to refresh the designs from the Stitch project using the MCP, or reuse the existing local files. You MUST ask — do not assume. Only re-download if the user confirms.
15	- If files do not exist: Proceed to step 4.
16	4. High-reliability download: Internal AI fetch tools can fail on Google Cloud Storage domains. You MUST use the provided script.
17	- HTML: `bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" ".stitch/designs/{page}.html"`
18	- Screenshot: Append `=w{width}` to the screenshot URL first, where `{width}` is the `width` value from the screen metadata (Google CDN serves low-res thumbnails by default). Then run: `bash scripts/fetch-stitch.sh "[screenshot.downloadUrl]=w{width}" ".stitch/designs/{page}.png"`
19	- This script handles the necessary redirects and security handshakes.
20	5. Visual audit: Review the downloaded screenshot (`.stitch/designs/{page}.png`) to confirm design intent and layout details. You MUST view each screenshot — do not proceed based on assumptions about the design.
21	6. Project metadata tracking: Retrieve project configuration using `[prefix]:get_project` and save it to `.stitch/metadata.json` (inside the app folder, and mirrored in the workspace root). Ensure it has:
22	- `projectId`, `title`, `deviceType`
23	- A `Last Sync Time` field matching the current sync ISO execution time
24	- A `screens` map detailing each screen's ID, label, sourceScreen reference, dimensions, and canvasPosition.
25
26	### Anti-patterns for Phase 1
27	- ❌ Reading `.stitch/designs/*.html` directly without calling MCP `get_screen` first.
28	- ❌ Skipping the `fetch-stitch.sh` download script.
29	- ❌ Not asking the user when existing files are found.
30	- ❌ Skipping the visual audit of `.png` screenshots.
31	- ❌ Failing to generate or update `.stitch/metadata.json` and its `Last Sync Time` field upon syncing.
32
33	## Phase 2: Style extraction
34
35	> GATE: Phase 2 is complete ONLY when `resources/style-guide.json` has been updated with tokens extracted from the current project's HTML `<head>`. Tokens from a previous project are NOT acceptable.
36
37	1. Extract `tailwind.config`: Open each downloaded HTML file and locate the `tailwind.config` object in the `<head>` `<script>` block. Extract:
38	- All color tokens
39	- Font families
40	- Spacing values
41	- Border radius values
42	- Font size/typography tokens
43	2. Sync `resources/style-guide.json`: Overwrite the file with the extracted tokens from THIS project. The style guide MUST match the Stitch project being converted.
44	3. Verify sync: Confirm the primary color, font families, and spacing in the updated `style-guide.json` match what you extracted.
45
46	### Anti-patterns for Phase 2
47	- ❌ Using `style-guide.json` as-is without verifying it matches the current project.
48	- ❌ Using hardcoded hex values in components instead of theme-mapped classes.
49
50	## Phase 3: Architectural rules
51
52	> GATE: Every component MUST satisfy ALL of the following rules. Violations will cause `npm run validate` to fail.
53
54	* Modular components: Break the design into independent files. Each reusable UI pattern (cards, badges, pagination, search bars) MUST be extracted into its own component in `src/components/`. Monolithic page files that contain everything are PROHIBITED.
55	* Logic isolation: Move event handlers and business logic into custom hooks in `src/hooks/`. Examples: pagination logic → `usePagination`, filtering → `useFilter`.
56	* Data decoupling: Move ALL static text,

People who liked this also viewed

6 picks

Type

react-components

7.8kstars916forks

View on GitHub

How to install react-components?

google-labs-code/stitch-skills/react-components

$npx -y skills add google-labs-code/stitch-skills --skill react-components

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Stitch to React Components
2
3	You are a frontend engineer focused on transforming designs into clean React code or syncing/updating existing React components to align with the latest Stitch designs. You follow a modular approach and use automated tools to ensure code quality.
4
5	> CRITICAL: Every step in this skill is MANDATORY. Do NOT skip any step or take shortcuts. Each section contains a GATE that must be satisfied before proceeding.
6
7	## Phase 1: Retrieval and networking
8
9	> GATE: Phase 1 is complete ONLY when all screens have been downloaded via `scripts/fetch-stitch.sh` AND visually audited. Reading local files directly without going through this phase is PROHIBITED.
10
11	1. Namespace discovery: Run `list_tools` to find the Stitch MCP prefix. Use this prefix (e.g., `stitch:`) for all subsequent calls.
12	2. Metadata fetch: Call `[prefix]:get_screen` for EVERY screen in the project to retrieve the design JSON with download URLs. Do NOT skip any screen.
13	3. Check for existing designs: Before downloading, check if `.stitch/designs/{page}.html` and `.stitch/designs/{page}.png` already exist:
14	- If files exist: Ask the user whether to refresh the designs from the Stitch project using the MCP, or reuse the existing local files. You MUST ask — do not assume. Only re-download if the user confirms.
15	- If files do not exist: Proceed to step 4.
16	4. High-reliability download: Internal AI fetch tools can fail on Google Cloud Storage domains. You MUST use the provided script.
17	- HTML: `bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" ".stitch/designs/{page}.html"`
18	- Screenshot: Append `=w{width}` to the screenshot URL first, where `{width}` is the `width` value from the screen metadata (Google CDN serves low-res thumbnails by default). Then run: `bash scripts/fetch-stitch.sh "[screenshot.downloadUrl]=w{width}" ".stitch/designs/{page}.png"`
19	- This script handles the necessary redirects and security handshakes.
20	5. Visual audit: Review the downloaded screenshot (`.stitch/designs/{page}.png`) to confirm design intent and layout details. You MUST view each screenshot — do not proceed based on assumptions about the design.
21	6. Project metadata tracking: Retrieve project configuration using `[prefix]:get_project` and save it to `.stitch/metadata.json` (inside the app folder, and mirrored in the workspace root). Ensure it has:
22	- `projectId`, `title`, `deviceType`
23	- A `Last Sync Time` field matching the current sync ISO execution time
24	- A `screens` map detailing each screen's ID, label, sourceScreen reference, dimensions, and canvasPosition.
25
26	### Anti-patterns for Phase 1
27	- ❌ Reading `.stitch/designs/*.html` directly without calling MCP `get_screen` first.
28	- ❌ Skipping the `fetch-stitch.sh` download script.
29	- ❌ Not asking the user when existing files are found.
30	- ❌ Skipping the visual audit of `.png` screenshots.
31	- ❌ Failing to generate or update `.stitch/metadata.json` and its `Last Sync Time` field upon syncing.
32
33	## Phase 2: Style extraction
34
35	> GATE: Phase 2 is complete ONLY when `resources/style-guide.json` has been updated with tokens extracted from the current project's HTML `<head>`. Tokens from a previous project are NOT acceptable.
36
37	1. Extract `tailwind.config`: Open each downloaded HTML file and locate the `tailwind.config` object in the `<head>` `<script>` block. Extract:
38	- All color tokens
39	- Font families
40	- Spacing values
41	- Border radius values
42	- Font size/typography tokens
43	2. Sync `resources/style-guide.json`: Overwrite the file with the extracted tokens from THIS project. The style guide MUST match the Stitch project being converted.
44	3. Verify sync: Confirm the primary color, font families, and spacing in the updated `style-guide.json` match what you extracted.
45
46	### Anti-patterns for Phase 2
47	- ❌ Using `style-guide.json` as-is without verifying it matches the current project.
48	- ❌ Using hardcoded hex values in components instead of theme-mapped classes.
49
50	## Phase 3: Architectural rules
51
52	> GATE: Every component MUST satisfy ALL of the following rules. Violations will cause `npm run validate` to fail.
53
54	* Modular components: Break the design into independent files. Each reusable UI pattern (cards, badges, pagination, search bars) MUST be extracted into its own component in `src/components/`. Monolithic page files that contain everything are PROHIBITED.
55	* Logic isolation: Move event handlers and business logic into custom hooks in `src/hooks/`. Examples: pagination logic → `usePagination`, filtering → `useFilter`.
56	* Data decoupling: Move ALL static text,

People who liked this also viewed

6 picks

Type