# How to Sync Existing React Components with Stitch Design Updates
> Sync existing React components with Stitch design updates effortlessly. The stitch::react-components skill automates retrieval, style extraction, and validation for seamless synchronization.
- Repository: [Google Labs Code/stitch-skills](https://github.com/google-labs-code/stitch-skills)
- Tags: how-to-guide
- Published: 2026-07-17
---
**TLDR:** The **stitch::react-components** skill automates a four-phase pipeline—retrieval, style extraction, architectural enforcement, and validation—to keep your React codebase synchronized with evolving Stitch designs.
The `google-labs-code/stitch-skills` repository provides a purpose-built automation layer for React projects that originate from Stitch designs. When your design system receives updates, the **stitch::react-components** skill ensures your existing components inherit fresh tokens, structural patterns, and navigation logic without manual drift. This guide explains how to sync existing React components with Stitch design updates using the official skill workflow 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).
## Phase 1 – Retrieval & Networking
All screens are fetched via the Stitch MCP (`list_tools` → `get_screen`) and saved under `.stitch/designs/` according to the source code. If a design already exists locally, the skill prompts you to reuse or refresh it, preventing accidental overwrites.
The [`fetch-stitch.sh`](https://github.com/google-labs-code/stitch-skills/blob/main/fetch-stitch.sh) script handles HTML and PNG downloads, accounting for GCS TLS quirks to ensure reliable transfers. Before proceeding, a visual audit of each downloaded screenshot is required to confirm the UI intent matches the design.
## Phase 2 – Style Extraction
The skill parses the `tailwind.config` object embedded in the HTML `` of each downloaded screen. It extracts colors, fonts, spacing, radii, and typography, then overwrites [`resources/style-guide.json`](https://github.com/google-labs-code/stitch-skills/blob/main/resources/style-guide.json) with the refreshed token set. This guarantees that components consume project-specific design tokens rather than stale or hard-coded values.
## Phase 3 – Architectural Rules
After syncing the style guide, the skill enforces strict conventions that prevent architectural decay:
- **Modular components** – Each reusable UI pattern must live in `src/components/`, preventing monolithic page files.
- **Logic isolation** – Event and business logic belongs in `src/hooks/`, keeping 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 compilation without it.
- **Navigation wiring** – Replace every `href="#"` with a proper `` component and wire the logo to `/` for functional routing across viewports.
- **Theme-mapped Tailwind** – Use classes derived from [`style-guide.json`](https://github.com/google-labs-code/stitch-skills/blob/main/style-guide.json), never raw hex values, ensuring visual consistency and dark-mode support.
Violations trigger the `npm run validate` script, halting the pipeline until resolved.
## Phase 4 – Execution & Validation
With components scaffolded using [`resources/component-template.tsx`](https://github.com/google-labs-code/stitch-skills/blob/main/resources/component-template.tsx) and the data layer in place, the skill optionally runs validation and development commands. It explicitly asks for permission before executing `npm run validate`, `tsc --noEmit`, or `npm run dev`, preserving control over the workflow.
## Implementation Commands
To sync an existing React project with updated Stitch designs, execute these commands:
```bash
# Install the skill globally (if not already present)
npx skills add google-labs-code/stitch-skills --skill react:components --global
# The skill automatically triggers Phase 1-3. For manual token extraction:
node scripts/extract-tailwind-tokens.js
```
Update your components to consume the refreshed tokens:
```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}
);
}
```
Validate the synchronization:
```bash
npm run validate src/components/Card.tsx
tsc --noEmit
npm run dev
```
## Summary
- **Automated retrieval** via [`fetch-stitch.sh`](https://github.com/google-labs-code/stitch-skills/blob/main/fetch-stitch.sh) downloads fresh HTML and PNG assets to `.stitch/designs/`.
- **Token extraction** updates [`resources/style-guide.json`](https://github.com/google-labs-code/stitch-skills/blob/main/resources/style-guide.json) directly from the Tailwind config in Stitch exports.
- **Architectural enforcement** requires modular components in `src/components/`, isolated logic in `src/hooks/`, and decoupled data in [`src/data/mockData.ts`](https://github.com/google-labs-code/stitch-skills/blob/main/src/data/mockData.ts).
- **Validation gate** ensures `Readonly` props, proper navigation wiring, and theme-mapped Tailwind classes before code execution.
## Frequently Asked Questions
### How does the skill handle existing design files?
The skill detects existing files in `.stitch/designs/` and prompts you to choose between reusing the cached version or refreshing from the Stitch source. This prevents accidental overwrites while allowing deliberate updates when designs change.
### What happens if my components violate the architectural rules?
The `npm run validate` script (triggered in Phase 3) fails with specific errors pointing to violations such as missing `Readonly` interfaces, hard-coded colors, or logic embedded in components. The pipeline halts until you refactor the code to comply with the rules defined in [`resources/architecture-checklist.md`](https://github.com/google-labs-code/stitch-skills/blob/main/resources/architecture-checklist.md).
### Can I run the validation and dev server automatically?
No. The skill explicitly **asks** for permission before running `npm run validate`, `tsc --noEmit`, or `npm run dev` during Phase 4. This gated approach ensures you review generated code before executing potentially destructive or time-consuming commands.
### Where do I find the validation rules and component templates?
The core rules reside 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), while the checklist used by the validator is stored in [`resources/architecture-checklist.md`](https://github.com/google-labs-code/stitch-skills/blob/main/resources/architecture-checklist.md). Component scaffolding uses [`resources/component-template.tsx`](https://github.com/google-labs-code/stitch-skills/blob/main/resources/component-template.tsx) as the boilerplate for new or updated components.