how-to-guide

Workflow for Syncing React Components with Stitch Design Updates: The 4-Phase Automated Pipeline

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

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


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

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>
  );
}

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 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 eliminates hard-coded values and supports design system evolution.
  • Strict architecture: Rules governing src/components/, src/hooks/, and 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, mandatory Readonly props interfaces, proper <Link> usage instead of href="#", and theme-mapped Tailwind classes from style-guide.json. Violations fail the npm run validate script as defined in 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 reference file.

Where does the skill store extracted design tokens?

The skill parses the tailwind.config object from each downloaded HTML file's <head> section and persists the extracted colors, fonts, spacing, and radii to resources/style-guide.json. React components then import this file to access theme values, ensuring a single source of truth for styling.

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 →