# How to Sync Existing React Components with Updated Stitch Designs
> Automate syncing React components with Stitch designs. Learn how the stitch::react-components skill transforms your workflow, extracts tokens, and validates changes.
- Repository: [Google Labs Code/stitch-skills](https://github.com/google-labs-code/stitch-skills)
- Tags: how-to-guide
- Published: 2026-07-12
---
**The stitch::react-components skill provides a fully automated four-phase pipeline that retrieves updated Stitch designs, extracts Tailwind tokens, enforces architectural rules, and validates changes to keep your React codebase synchronized.**
When your Stitch designs evolve, the **google-labs-code/stitch-skills** repository provides a deterministic workflow to sync existing React components with updated Stitch designs without manual refactoring. This skill leverages the Stitch MCP (Model Context Protocol) to download fresh assets, extract design tokens from HTML headers, and enforce strict architectural conventions that prevent technical debt from accumulating during updates.
## Phase 1: Retrieval & Networking
The sync process begins by fetching all screens via the Stitch MCP using the `list_tools` → `get_screen` sequence. According to the source code in [`plugins/stitch-build/skills/react-components/SKILL.md`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-build/skills/react-components/SKILL.md), these assets are saved under `.stitch/designs/`.
The skill implements safeguards to prevent accidental data loss:
- **Collision detection**: If designs already exist locally, the skill explicitly asks whether to reuse them or refresh them, preventing accidental overwrites.
- **Reliable downloads**: The [`fetch-stitch.sh`](https://github.com/google-labs-code/stitch-skills/blob/main/fetch-stitch.sh) script handles GCS TLS quirks to guarantee successful downloads of both HTML and PNG assets.
- **Visual verification**: A manual audit of each downloaded screenshot is required before proceeding, ensuring the UI intent matches the design.
## Phase 2: Style Extraction
Once assets are local, the skill parses the `tailwind.config` object embedded in the HTML `` of each design file. This extraction process captures colors, fonts, spacing values, border radii, and typography scales.
The skill then overwrites [`resources/style-guide.json`](https://github.com/google-labs-code/stitch-skills/blob/main/resources/style-guide.json) with this fresh token set. This guarantees that every component uses project-specific design tokens rather than stale or hard-coded values, ensuring visual consistency across the application.
## Phase 3: Architectural Rules
After syncing the style guide, the skill enforces strict conventions that every component must satisfy. Violations trigger the `npm run validate` script, which stops the pipeline until resolved.
The architectural requirements include:
- **Modular components** – Each reusable UI pattern must live in `src/components/` to prevent monolithic page files.
- **Logic isolation** – Event and business logic belongs in `src/hooks/` to keep UI pure and testable.
- **Data decoupling** – Static content resides in [`src/data/mockData.ts`](https://github.com/google-labs-code/stitch-skills/blob/main/src/data/mockData.ts), avoiding hard-coded strings or images.
- **Typed Props** – Every component must export a `Readonly …Props` interface. The validator fails without compile-time type safety.
- **Navigation wiring** – Replace every `href="#"` with `` components and wire the logo to `/` for functional routing across desktop and mobile viewports.
- **Theme-mapped Tailwind** – Use classes from [`style-guide.json`](https://github.com/google-labs-code/stitch-skills/blob/main/style-guide.json), never raw hex values, to ensure visual consistency and dark-mode support.
## Phase 4: Execution & Validation
With components scaffolded using the [`resources/component-template.tsx`](https://github.com/google-labs-code/stitch-skills/blob/main/resources/component-template.tsx) boilerplate and the data layer in place, the skill enters the final phase. You can optionally run the validation suite (`npm run validate`, `tsc --noEmit`) and launch the dev server (`npm run dev`).
The skill **asks** for explicit permission before executing these optional steps, preserving your control over the workflow. This gated approach ensures you review changes before TypeScript compilation or runtime verification.
## Practical Implementation
Run these commands inside a project that already contains React components generated from a previous Stitch sync:
```bash
# 1️⃣ Refresh the design files (the skill will prompt you if files already exist)
npx skills add google-labs-code/stitch-skills --skill react:components --global
# The skill invokes:
# list_tools → get_screen → scripts/fetch-stitch.sh (Phase 1 implementation)
# 2️⃣ Re-extract Tailwind tokens manually for debugging
node scripts/extract-tailwind-tokens.js
# Reads .stitch/designs/*.html → resources/style-guide.json
```
Update your components to consume the refreshed tokens and interfaces:
```typescript
// src/components/Card.tsx
import { CardProps } from '../data/mockData';
import { theme } from '../../resources/style-guide.json';
export function Card({ title, description }: Readonly) {
return (
{title}
{description}
);
}
```
Run validation and start the dev server:
```bash
# 4️⃣ Validate the updated code (optional - skill will ask before running)
npm run validate src/components/Card.tsx
tsc --noEmit
# 5️⃣ Run the dev server to see changes live (optional)
npm run dev
```
## Summary
- The **stitch::react-components** skill automates syncing through four gated phases: Retrieval, Style Extraction, Architectural Enforcement, and Validation.
- Design assets download to `.stitch/designs/` with collision checking via [`fetch-stitch.sh`](https://github.com/google-labs-code/stitch-skills/blob/main/fetch-stitch.sh).
- Style tokens extract from HTML `` into [`resources/style-guide.json`](https://github.com/google-labs-code/stitch-skills/blob/main/resources/style-guide.json) for token-based styling.
- Strict rules enforce modular components in `src/components/`, logic in `src/hooks/`, and data in [`src/data/mockData.ts`](https://github.com/google-labs-code/stitch-skills/blob/main/src/data/mockData.ts).
- The `npm run validate` script blocks the pipeline until all `Readonly` prop interfaces and navigation wiring comply with standards.
## Frequently Asked Questions
### Will the skill overwrite my existing design files?
No. According to the source code in [`plugins/stitch-build/skills/react-components/SKILL.md`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-build/skills/react-components/SKILL.md), the skill detects existing files in `.stitch/designs/` and explicitly asks whether to reuse them or refresh them, preventing accidental overwrites during the sync process.
### Why does my build fail after syncing components?
The `npm run validate` script enforces strict architectural rules. If components violate conventions—such as missing `Readonly` type exports, hard-coded hex values instead of theme tokens, or navigation links using `href="#"` instead of `` components—the pipeline stops until you fix them.
### How do I update style tokens without regenerating components?
You can manually run `node scripts/extract-tailwind-tokens.js` to parse the HTML files in `.stitch/designs/` and regenerate [`resources/style-guide.json`](https://github.com/google-labs-code/stitch-skills/blob/main/resources/style-guide.json) without triggering the full four-phase workflow. This is useful when you need to refresh only the design tokens.
### Where does the skill place downloaded screen assets?
The MCP retrieves screens via `get_screen` and saves them under `.stitch/designs/`, with the [`fetch-stitch.sh`](https://github.com/google-labs-code/stitch-skills/blob/main/fetch-stitch.sh) script handling reliable downloads despite GCS TLS quirks. A visual audit of these screenshots is required before proceeding to style extraction.