# Workflow to Sync React Components with Stitch Design Updates: 4-Phase Pipeline
> Automate syncing React components with Stitch design updates using a 4-phase pipeline covering retrieval, style extraction, architectural enforcement, and validation. Keep your codebase synchronized effortlessly.
- Repository: [Google Labs Code/stitch-skills](https://github.com/google-labs-code/stitch-skills)
- Tags: how-to-guide
- Published: 2026-07-16
---
**The `stitch::react-components` skill automates a gated four-phase pipeline—Retrieval, Style Extraction, Architectural Enforcement, and Validation—that keeps your React codebase synchronized with every Stitch design update without manual drift.**
The [google-labs-code/stitch-skills](https://github.com/google-labs-code/stitch-skills) repository provides a specialized skill for maintaining alignment between React applications and their source Stitch designs. When design tokens, layouts, or visual assets change in Stitch, this workflow ensures your components reflect the latest specifications through automated regeneration and strict validation gates.
## Phase 1: Retrieval and Design Networking
All screens are fetched via the Stitch MCP using `list_tools` → `get_screen` and saved under `.stitch/designs/`【/cache/repos/github.com/google-labs-code/stitch-skills/main/plugins/stitch-build/skills/react-components/SKILL.md#L21-L34】. The skill checks for existing local designs and **asks** whether to reuse or refresh them, preventing accidental overwrites.
The [`fetch-stitch.sh`](https://github.com/google-labs-code/stitch-skills/blob/main/fetch-stitch.sh) script handles both HTML and PNG downloads, implementing retry logic to guarantee reliable fetches despite GCS TLS quirks【/.../SKILL.md#L30-L33】. Before proceeding, you must perform a visual audit of each downloaded screenshot to confirm the UI intent matches the design【/.../SKILL.md#L34-L35】.
## Phase 2: Style Token Extraction
The HTML `` contains a `tailwind.config` object that the skill parses to extract **colors**, **fonts**, **spacing**, **radii**, and **typography** scales. These values overwrite [`resources/style-guide.json`](https://github.com/google-labs-code/stitch-skills/blob/main/resources/style-guide.json) with the fresh token set【/.../SKILL.md#L49-L58】, ensuring components use project-specific design tokens rather than stale or hard-coded values.
## Phase 3: Architectural Rules Enforcement
After syncing the style guide, the skill enforces strict conventions that every component must satisfy. Violations trigger the `npm run validate` script, stopping the pipeline until fixed【/.../SKILL.md#L80-L86】.
- **Modular components**: Each reusable UI pattern lives in `src/components/` to prevent monolithic page files【/.../SKILL.md#L68-L71】.
- **Logic isolation**: Event and business logic belongs in `src/hooks/` to keep UI pure and testable【/.../SKILL.md#L69-L70】.
- **Data decoupling**: Static content resides in [`src/data/mockData.ts`](https://github.com/google-labs-code/stitch-skills/blob/main/src/data/mockData.ts) to avoid hard-coded strings and images【/.../SKILL.md#L70-L71】.
- **Typed Props**: Every component exports a `Readonly …Props` interface; the validator fails without compile-time type safety【/.../SKILL.md#L71-L73】.
- **Navigation wiring**: Replace every `href="#"` with `` components and wire the logo to `/` for functional routing across desktop and mobile【/.../SKILL.md#L73-L76】.
- **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 guarantee visual consistency and dark-mode support【/.../SKILL.md#L77-L79】.
## Phase 4: Execution and Validation
With components drafted using the [`resources/component-template.tsx`](https://github.com/google-labs-code/stitch-skills/blob/main/resources/component-template.tsx) scaffold and the data layer in place, the skill **asks** for permission before running optional validation steps【/.../SKILL.md#L88-L101】. You can execute `npm run validate` and `tsc --noEmit` to verify type safety, then launch `npm run dev` to preview changes locally.
## Code Examples for Syncing Components
Run the following commands inside a project previously synced with Stitch:
```bash
# Refresh design files (skill prompts if files exist)
npx skills add google-labs-code/stitch-skills --skill react:components --global
# The skill automatically invokes:
# list_tools → get_screen → scripts/fetch-stitch.sh
```
Extract tokens manually for debugging:
```bash
node scripts/extract-tailwind-tokens.js
# Reads .stitch/designs/*.html → outputs resources/style-guide.json
```
Update a component to use refreshed tokens:
```typescript
import { CardProps } from '../data/mockData';
import { theme } from '../../resources/style-guide.json';
export function Card({ title, description }: Readonly) {
return (
{title}
{description}
);
}
```
Validate and serve:
```bash
# Optional validation steps (skill asks before running)
npm run validate src/components/Card.tsx
tsc --noEmit
# Launch dev server
npm run dev
```
## Summary
- The **stitch::react-components** skill provides a gated four-phase pipeline to sync React components with Stitch design updates.
- Designs download to `.stitch/designs/` via [`fetch-stitch.sh`](https://github.com/google-labs-code/stitch-skills/blob/main/fetch-stitch.sh), with visual audits required before proceeding.
- **Style tokens** extract automatically from `tailwind.config` in the HTML head and populate [`resources/style-guide.json`](https://github.com/google-labs-code/stitch-skills/blob/main/resources/style-guide.json).
- **Architectural rules** enforce modular components in `src/components/`, logic in `src/hooks/`, and typed props with `Readonly` interfaces.
- The validator halts execution on violations, ensuring only compliant code reaches the dev server.
## Frequently Asked Questions
### How does the skill prevent overwriting my existing components?
The workflow includes an interactive gate during Phase 1. If design files already exist locally in `.stitch/designs/`, the skill **asks** whether to reuse the cached version or refresh from Stitch, preventing accidental overwrites of your current work【/.../SKILL.md#L21-L34】.
### Where does the skill extract design tokens from?
The skill parses the `tailwind.config` object embedded in the `` of each downloaded HTML screen. It extracts colors, typography, spacing, and radii, then writes them to [`resources/style-guide.json`](https://github.com/google-labs-code/stitch-skills/blob/main/resources/style-guide.json) for component consumption【/.../SKILL.md#L49-L58】.
### What happens if my components violate the architectural rules?
The `npm run validate` script scans your code against the requirements defined in [`resources/architecture-checklist.md`](https://github.com/google-labs-code/stitch-skills/blob/main/resources/architecture-checklist.md). If components lack `Readonly` props interfaces, contain hard-coded styles, or violate file structure rules (such as placing logic outside `src/hooks/`), the pipeline stops and reports specific failures until you fix them【/.../SKILL.md#L80-L86】.
### Can I skip the validation steps when syncing?
Yes. The skill treats `npm run validate`, `tsc --noEmit`, and `npm run dev` as optional steps. It explicitly **asks** for your permission before executing any command that modifies or validates your local environment, preserving full control over the workflow【/.../SKILL.md#L88-L101】.