how-to-guide

How to Sync Existing React Components with Stitch Design Updates

July 17, 2026 google-labs-code/stitch-skills ↗

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.

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 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 <head> of each downloaded screen. It extracts colors, fonts, spacing, radii, and typography, then overwrites 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, 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 <Link> component and wire the logo to / for functional routing across viewports.
  • Theme-mapped Tailwind – Use classes derived from 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 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:


# 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:

// src/components/Card.tsx
import { CardProps } from '../data/mockData';
import { theme } from '../../resources/style-guide.json';

export function Card({ title, description }: Readonly<CardProps>) {
  return (
    <div className={`bg-${theme.colors.primary} p-${theme.spacing[4]} rounded-${theme.borderRadius.md}`}>
      <h2 className={`text-${theme.fontSize.lg} font-${theme.fontFamily.sans}`}>{title}</h2>
      <p>{description}</p>
    </div>
  );
}

Validate the synchronization:

npm run validate src/components/Card.tsx
tsc --noEmit
npm run dev

Summary

  • Automated retrieval via fetch-stitch.sh downloads fresh HTML and PNG assets to .stitch/designs/.
  • Token extraction updates 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.
  • 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.

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, while the checklist used by the validator is stored in resources/architecture-checklist.md. Component scaffolding uses resources/component-template.tsx as the boilerplate for new or updated components.

Have a question about this repo?

These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:

Share the following with your agent to get started:
curl -s "https://instagit.com/install.md"
Works with
Claude Codex Cursor VS Code OpenClaw Any MCP Client

Maintain an open-source project? Get it listed too →