# Workflow for Syncing React Components with Stitch Design Updates: The 4-Phase Automated Pipeline
> Automate syncing React components with Stitch design updates. Discover the 4-phase pipeline for seamless synchronization and style consistency without manual effort. Learn more now.
- Repository: [Google Labs Code/stitch-skills](https://github.com/google-labs-code/stitch-skills)
- Tags: how-to-guide
- Published: 2026-07-18
---
**The `stitch::react-components` skill automates a gated four-phase process—retrieval, style extraction, architectural enforcement, and validation—that keeps React codebases synchronized with updated Stitch designs without manual file comparison or style drift.**
The `stitch::react-components` skill in the `google-labs-code/stitch-skills` repository provides a fully automated pipeline for syncing existing React components whenever a source Stitch design changes. This workflow ensures that token-level styling, component architecture, and navigation logic remain consistent with the latest design intent. By following the four gated phases defined 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), development teams can reliably refresh entire component libraries while enforcing strict code quality standards.
## Phase 1: Retrieval and Design Networking
All screens are fetched via the Stitch MCP (Model Context Protocol) using the `list_tools` → `get_screen` sequence and stored under `.stitch/designs/`. The [`scripts/fetch-stitch.sh`](https://github.com/google-labs-code/stitch-skills/blob/main/scripts/fetch-stitch.sh) script handles the download of both HTML and PNG assets, incorporating retry logic to guarantee reliable transfers despite GCS TLS quirks.
Before proceeding, the skill checks for existing local designs and explicitly asks whether to reuse them or perform a full refresh, preventing accidental overwrites. A mandatory visual audit of each downloaded screenshot confirms that the UI intent matches the design expectations.
## Phase 2: Style Token Extraction
The HTML `` of each downloaded screen contains an embedded `tailwind.config` object. The skill parses this configuration block to extract colors, fonts, spacing values, border 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, ensuring that every downstream component uses project-specific design tokens rather than hard-coded hex values or stale references.
This extraction guarantees that updates to the Stitch design system—such as new brand colors or adjusted spacing scales—immediately propagate to the React codebase through the centralized style guide.
## Phase 3: Architectural Enforcement and Rules
After refreshing the style guide, the skill enforces strict architectural conventions defined 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). Violations trigger the `npm run validate` script, halting the pipeline until resolved.
**Modular Component Structure**
Each reusable UI pattern must live in `src/components/`, preventing monolithic page files that mix concerns.
**Logic Isolation**
All event handling and business logic must reside in `src/hooks/`, keeping presentational components pure and testable.
**Data Decoupling**
Static content and mock datasets belong in [`src/data/mockData.ts`](https://github.com/google-labs-code/stitch-skills/blob/main/src/data/mockData.ts), eliminating hard-coded strings or image URLs inside components.
**Typed Props Interface**
Every component must export a `Readonly …Props` interface. The validator fails compilation without this contract, ensuring compile-time type safety across the application.
**Navigation Wiring**
All placeholder links (`href="#"`) must be replaced with the `` component, and the logo must explicitly route to `/`. This ensures functional routing across desktop and mobile breakpoints.
**Theme-Mapped Tailwind Classes**
Components must reference classes via [`style-guide.json`](https://github.com/google-labs-code/stitch-skills/blob/main/style-guide.json) mappings rather than raw utility classes. This guarantees visual consistency and enables dark-mode support through token abstraction.
## Phase 4: Validation and Execution
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 workflow enters optional validation and execution steps. The skill explicitly asks for permission before running any of these potentially destructive operations.
The validation suite executes `npm run validate` followed by `tsc --noEmit` to perform static analysis and type checking. After successful validation, the development server launches via `npm run dev` to render the updated components in the browser.
```bash
# Refresh design files (skill prompts if files exist)
npx skills add google-labs-code/stitch-skills --skill react:components --global
# Manual token extraction for debugging
node scripts/extract-tailwind-tokens.js
# Validate specific components
npm run validate src/components/Card.tsx
tsc --noEmit
# Launch development server
npm run dev
```
The following example demonstrates how a synced component consumes the refreshed tokens from [`resources/style-guide.json`](https://github.com/google-labs-code/stitch-skills/blob/main/resources/style-guide.json):
```typescript
import { CardProps } from '../data/mockData';
import { theme } from '../../resources/style-guide.json';
export function Card({ title, description }: Readonly) {
return (
{title}
{description}
);
}
```
## Summary
- **Four-phase pipeline**: Retrieval, style extraction, architectural enforcement, and validation ensure complete synchronization between Stitch designs and React codebases.
- **Automated safety**: The [`scripts/fetch-stitch.sh`](https://github.com/google-labs-code/stitch-skills/blob/main/scripts/fetch-stitch.sh) script handles network reliability, while explicit user prompts prevent accidental overwrites of existing design files.
- **Token-driven styling**: Parsing the `tailwind.config` block into [`resources/style-guide.json`](https://github.com/google-labs-code/stitch-skills/blob/main/resources/style-guide.json) eliminates hard-coded values and supports design system evolution.
- **Strict architecture**: Rules governing `src/components/`, `src/hooks/`, and [`src/data/mockData.ts`](https://github.com/google-labs-code/stitch-skills/blob/main/src/data/mockData.ts) maintain separation of concerns and type safety through `Readonly` interfaces.
- **Gated execution**: Optional validation (`npm run validate`, `tsc --noEmit`) and development server startup require explicit permission, preserving developer control.
## Frequently Asked Questions
### How does the skill prevent overwriting existing design files?
The `stitch::react-components` skill checks the `.stitch/designs/` directory before downloading. If screens already exist locally, it explicitly asks whether to reuse the cached versions or refresh them from the Stitch MCP. This interactive gate prevents accidental data loss while allowing teams to work offline or update selectively.
### What specific validation rules enforce architectural standards?
The validator enforces six core rules: modular components in `src/components/`, logic isolation in `src/hooks/`, data decoupling in [`src/data/mockData.ts`](https://github.com/google-labs-code/stitch-skills/blob/main/src/data/mockData.ts), mandatory `Readonly` props interfaces, proper `` usage instead of `href="#"`, and theme-mapped Tailwind classes from [`style-guide.json`](https://github.com/google-labs-code/stitch-skills/blob/main/style-guide.json). Violations fail the `npm run validate` script as defined 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).
### Can developers run validation manually outside the automated workflow?
Yes. While the skill offers to run `npm run validate` and `tsc --noEmit` automatically during Phase 4, developers can execute these commands independently at any time. The validation script checks against the architecture rules and the [`resources/architecture-checklist.md`](https://github.com/google-labs-code/stitch-skills/blob/main/resources/architecture-checklist.md) reference file.
### Where does the skill store extracted design tokens?
The skill parses the `tailwind.config` object from each downloaded HTML file's `` section and persists the extracted colors, fonts, spacing, and radii to [`resources/style-guide.json`](https://github.com/google-labs-code/stitch-skills/blob/main/resources/style-guide.json). React components then import this file to access theme values, ensuring a single source of truth for styling.