Stitch::React Components logo

Stitch::React Components

OrganizationPopular
google-labs-code
stitch::react-components

Converts Stitch designs into modular Vite and React components, or syncs/updates existing React components to align with the latest Stitch designs, using system-level networking and AST-based validation.

Overview

Publishergoogle-labs-code
Repositorystitch-skills
Skill namestitch::react-components
Stars
8.3K
Forks
1.1K
Bundled files
9
LicenseApache-2.0
Links
Skill sourceRepositoryHomepage
  • Markdown instructions

    A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

  • Works with any LLM

    AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

  • 9 bundled files

    Scripts, templates, and references the model can read while it works. Files are read-only and never executed.

  • Open source

    Published by google-labs-code on GitHub. Read the source before you install it.

Installation

Install the Stitch::React Components AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

1

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

  1. Open the app and go to Plugins → Skills.
  2. Choose "Install from GitHub".
  3. Paste the skill folder URL below and confirm.
  4. Enable the skill in any chat where you want it available.
Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.
2

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills
git clone --depth 1 https://github.com/google-labs-code/stitch-skills.git /tmp/stitch-skills
mkdir -p .claude/skills
cp -r /tmp/stitch-skills/plugins/stitch-build/skills/react-components .claude/skills/google-labs-code-stitch-react-components
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Stitch::React Components in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Stitch::React Components on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Stitch::React Components is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

  • Loaded only when it is needed

    The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

  • Switch models mid-chat

    Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

Stitch to React Components

You are a frontend engineer focused on transforming designs into clean React code or syncing/updating existing React components to align with the latest Stitch designs. You follow a modular approach and use automated tools to ensure code quality.

CRITICAL: Every step in this skill is MANDATORY. Do NOT skip any step or take shortcuts. Each section contains a GATE that must be satisfied before proceeding.

Phase 1: Retrieval and networking

GATE: Phase 1 is complete ONLY when all screens have been downloaded via scripts/fetch-stitch.sh AND visually audited. Reading local files directly without going through this phase is PROHIBITED.

  1. Namespace discovery: Run list_tools to find the Stitch MCP prefix. Use this prefix (e.g., stitch:) for all subsequent calls.
  2. Metadata fetch: Call [prefix]:get_screen for EVERY screen in the project to retrieve the design JSON with download URLs. Do NOT skip any screen.
  3. Check for existing designs: Before downloading, check if .stitch/designs/{page}.html and .stitch/designs/{page}.png already exist:
    • If files exist: Ask the user whether to refresh the designs from the Stitch project using the MCP, or reuse the existing local files. You MUST ask — do not assume. Only re-download if the user confirms.
    • If files do not exist: Proceed to step 4.
  4. High-reliability download: Internal AI fetch tools can fail on Google Cloud Storage domains. You MUST use the provided script.
    • HTML: bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" ".stitch/designs/{page}.html"
    • Screenshot: Append =w{width} to the screenshot URL first, where {width} is the width value from the screen metadata (Google CDN serves low-res thumbnails by default). Then run: bash scripts/fetch-stitch.sh "[screenshot.downloadUrl]=w{width}" ".stitch/designs/{page}.png"
    • This script handles the necessary redirects and security handshakes.
  5. Visual audit: Review the downloaded screenshot (.stitch/designs/{page}.png) to confirm design intent and layout details. You MUST view each screenshot — do not proceed based on assumptions about the design.
  6. Project metadata tracking: Retrieve project configuration using [prefix]:get_project and save it to .stitch/metadata.json (inside the app folder, and mirrored in the workspace root). Ensure it has:
    • projectId, title, deviceType
    • A Last Sync Time field matching the current sync ISO execution time
    • A screens map detailing each screen's ID, label, sourceScreen reference, dimensions, and canvasPosition.

Anti-patterns for Phase 1

  • ❌ Reading .stitch/designs/*.html directly without calling MCP get_screen first.
  • ❌ Skipping the fetch-stitch.sh download script.
  • ❌ Not asking the user when existing files are found.
  • ❌ Skipping the visual audit of .png screenshots.
  • ❌ Failing to generate or update .stitch/metadata.json and its Last Sync Time field upon syncing.

Phase 2: Style extraction

GATE: Phase 2 is complete ONLY when resources/style-guide.json has been updated with tokens extracted from the current project's HTML <head>. Tokens from a previous project are NOT acceptable.

  1. Extract tailwind.config: Open each downloaded HTML file and locate the tailwind.config object in the <head> <script> block. Extract:
    • All color tokens
    • Font families
    • Spacing values
    • Border radius values
    • Font size/typography tokens
  2. Sync resources/style-guide.json: Overwrite the file with the extracted tokens from THIS project. The style guide MUST match the Stitch project being converted.
  3. Verify sync: Confirm the primary color, font families, and spacing in the updated style-guide.json match what you extracted.

Anti-patterns for Phase 2

  • ❌ Using style-guide.json as-is without verifying it matches the current project.
  • ❌ Using hardcoded hex values in components instead of theme-mapped classes.

Phase 3: Architectural rules

GATE: Every component MUST satisfy ALL of the following rules. Violations will cause npm run validate to fail.

  • Modular components: Break the design into independent files. Each reusable UI pattern (cards, badges, pagination, search bars) MUST be extracted into its own component in src/components/. Monolithic page files that contain everything are PROHIBITED.
  • Logic isolation: Move event handlers and business logic into custom hooks in src/hooks/. Examples: pagination logic → usePagination, filtering → useFilter.
  • Data decoupling: Move ALL static text, image URLs, and lists into src/data/mockData.ts. No hardcoded content in components.
  • Type safety: EVERY component file (including pages) MUST include a Readonly TypeScript interface named [ComponentName]Props. The validator checks for this — files without a Props interface will FAIL validation.
  • Project specific: Focus on the target project's needs and constraints. Leave Google license headers out of the generated React components.
  • Navigation wiring: Stitch screens are standalone pages with href="#" placeholder links. When building a multi-page React app:
    • Replace ALL href="#" anchors with React Router <Link> components pointing to the correct routes.
    • Always make the app logo/title in the TopAppBar a <Link to="/"> so users can navigate home from any page. This is critical because Stitch bottom nav bars use md:hidden and are invisible on desktop — without a clickable logo, desktop users have no way to return to the home page.
    • Wire the bottom nav items and sidebar nav items to their corresponding routes using <Link> with active-state highlighting based on useLocation().
  • Style mapping: Use theme-mapped Tailwind classes from the synced style-guide.json. No arbitrary hex codes.
  • Dark mode: Apply dark: variants to ALL color classes throughout every component.

Anti-patterns for Phase 3

  • ❌ Putting all UI in a single monolithic page file.
  • ❌ Inline event handlers or business logic without hooks.
  • ❌ Hardcoding text, URLs, or data in component files.
  • ❌ Components without a [Name]Props interface.
  • ❌ Using hex color values instead of theme tokens.
  • ❌ Leaving href="#" links unconverted.

Phase 4: Execution steps

GATE: Phase 4 verification, audits, and validation checks are optional. You MUST ask the user's permission to proceed with validation scripts, running local dev servers, or automated browser testing.

  1. Environment setup: If node_modules is missing, run npm install to enable the validation tools.
  2. Data layer: Create src/data/mockData.ts based on the design content.
  3. Component drafting: Use resources/component-template.tsx as a base. Find and replace ALL instances of StitchComponent with the actual name of the component you are creating.
  4. Application wiring: Update the project entry point (like App.tsx) to render the new components.
  5. Quality check (Optional - Ask User first):
    • Run npm run validate <file_path> for EVERY .tsx file in src/components/ and src/pages/ to report component validity.
    • Run tsc --noEmit to verify TypeScript compile status.
    • Check output against resources/architecture-checklist.md.
    • Obtain permission before starting the dev server with npm run dev or initiating visual browser audits to verify the live result.

Anti-patterns for Phase 4

  • ❌ Commencing dev server start or browser audits without user consent.
  • ❌ Declaring task "done" without verifying code compiles.

Troubleshooting

  • Fetch errors: Ensure the URL is quoted in the bash command to prevent shell errors.
  • Validation errors: Review the AST report and fix any missing interfaces or hardcoded styles. The most common failure is a missing Props interface — every component (including pages) needs one.
  • Dead navigation links: Stitch HTML uses href="#" placeholders everywhere. Every <a href="#"> must be converted to a <Link to="/route"> with a real route. Verify all nav items are clickable and lead to the correct page.
  • Stale style-guide.json: If colors or fonts look wrong, the style-guide.json likely has tokens from a different project. Re-extract from the current HTML <head>.

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

Frequently asked questions

What does the Stitch::React Components AI skill do?

Converts Stitch designs into modular Vite and React components, or syncs/updates existing React components to align with the latest Stitch designs, using system-level networking and AST-based validation.

Why use Stitch::React Components on TypingMind?

Because you install it once and use it with any model. Stitch::React Components is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Stitch::React Components in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-build/skills/react-components. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Stitch::React Components?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Stitch::React Components?

As many as you like. As long as a model supports skills, you can use Stitch::React Components with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Stitch::React Components AI skill free?

Yes. It is published on GitHub by google-labs-code under the Apache-2.0 license. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

Related AI Skills

View all
mattpocock logo

Teach

mattpocock
CommunityPopular

Teach the user a new skill or concept, within this workspace.

22.3K
264.4K
5 files
View
affaan-m logo

Api Design

affaan-m
CommunityPopular

Patrones de diseño REST API incluyendo nomenclatura de recursos, códigos de estado, paginación, filtrado, respuestas de error, versionado y rate limiting para APIs de producción.

39.1K
261.1K
Instructions
View
affaan-m logo

Accessibility

affaan-m
CommunityPopular

WCAG 2.2 レベル AA 標準を用いてインクルーシブなデジタルプロダクトを設計・実装・監査します。Web 用のセマンティック ARIA および Web・ネイティブプラットフォーム（iOS/Android）のアクセシビリティトレイトを生成するために使用します。

39.1K
261.1K
Instructions
View
anthropics logo

Brand Guidelines

anthropics
OrganizationPopular

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual…

20.9K
176.9K
Instructions
View

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇