how-to-guide

Workflow to Sync React Components with Stitch Design Updates: 4-Phase Pipeline

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

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 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 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 <head> 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 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 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 <Link> 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, 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 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:


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

node scripts/extract-tailwind-tokens.js

# Reads .stitch/designs/*.html → outputs resources/style-guide.json

Update a component to use refreshed tokens:

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 and serve:


# 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, with visual audits required before proceeding.
  • Style tokens extract automatically from tailwind.config in the HTML head and populate 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 <head> of each downloaded HTML screen. It extracts colors, typography, spacing, and radii, then writes them to 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. 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】.

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 →