# Stitch::react Components

> Convierte diseños de Stitch en componentes modulares de Vite y React, o sincroniza/actualiza componentes React existentes con los últimos diseños de Stitch, usando red a nivel de sistema y validación basada en AST.

Fuente: https://skillsagentes.com/skills/google-labs-code/stitch-skills/stitch-react-components
Markdown: https://skillsagentes.com/skills/google-labs-code/stitch-skills/stitch-react-components.md

Repositorio: https://github.com/google-labs-code/stitch-skills
Autor: google-labs-code
Licencia: Apache-2.0
Actualizado: hace 2 meses
Coste de contexto: 51 tok instalada, 2.2k tok al activarse, 6.7k tok con todos los archivos del bundle
Bundle: 11 archivos, 26 KB
Permisos que pide: stitch*:*, bash, read, write, web_fetch

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add google-labs-code/stitch-skills --skill react-components --agent claude-code
# Cursor
npx -y skills add google-labs-code/stitch-skills --skill react-components --agent cursor
# Codex
npx -y skills add google-labs-code/stitch-skills --skill react-components --agent codex
# Gemini CLI
npx -y skills add google-labs-code/stitch-skills --skill react-components --agent gemini
# Windsurf
npx -y skills add google-labs-code/stitch-skills --skill react-components --agent windsurf
# Cline
npx -y skills add google-labs-code/stitch-skills --skill react-components --agent cline
```

## Qué hace

- Descarga screens de Stitch vía MCP y `scripts/fetch-stitch.sh`, con auditoría visual obligatoria
- Extrae tokens de `tailwind.config` y sincroniza `resources/style-guide.json`
- Genera componentes React modulares con hooks propios, `mockData.ts` y interfaces `Props` con TypeScript
- Convierte enlaces `href="#"` de Stitch en rutas reales con React Router `<Link>`
- Ejecuta `npm run validate` y `tsc --noEmit` para verificar la arquitectura y el tipado (con permiso del usuario)

## Cuándo usarla

- Convertir un diseño de Stitch en componentes Vite/React modulares
- Sincronizar o actualizar componentes React existentes para que coincidan con los últimos diseños de Stitch

## Qué la activa

- "Convierte este diseño de Stitch en componentes React"
- "Sincroniza mis componentes React con el último diseño de Stitch"
- "Actualiza la app para que use los nuevos screens de Stitch"

## Antes de instalar

- Requiere acceso al MCP de Stitch (prefijo detectado con `list_tools`), Node/npm instalados y el script `scripts/fetch-stitch.sh`.
- Necesita en el PATH: curl
- Variables de entorno: OUTPUT
- runs shell commands
- writes to your files
- makes network requests
- reads environment config

## Archivos

- README.md — 1 KB
- SKILL.md — 9 KB
- examples/gold-standard-card.tsx — 2 KB
- package-lock.json — 7 KB
- package.json — 355 B
- resources/architecture-checklist.md — 613 B
- resources/component-template.tsx — 1 KB
- resources/stitch-api-reference.md — 1 KB
- resources/style-guide.json — 496 B
- scripts/fetch-stitch.sh — 1009 B
- scripts/validate.js — 3 KB

## SKILL.md

Reproducido tal cual desde google-labs-code/stitch-skills bajo Apache-2.0. Esta sección es el documento original y está en inglés.

# 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>`.

## Dónde encaja

- Categoría: [Desarrollo de APIs](https://skillsagentes.com/categorias/desarrollo-apis.md) — Diseña, prueba y documenta APIs HTTP y GraphQL.
- Creador: [google-labs-code](https://skillsagentes.com/creators/google-labs-code.md) — 15 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Stitch::react Native](https://skillsagentes.com/skills/google-labs-code/stitch-skills/stitch-react-native.md): Convierte diseños HTML de Stitch en componentes React Native, o sincroniza/actualiza componentes nativos existentes según los últimos diseños de Stitch, usando StyleSheet.
- [Stitch::extract Static Html](https://skillsagentes.com/skills/google-labs-code/stitch-skills/stitch-extract-static-html.md): Extrae HTML estático autocontenido de una app web o componentes React, inlineando CSS e imágenes, para capturar una vista o subirla a Stitch.
- [Stitch::code To Design](https://skillsagentes.com/skills/google-labs-code/stitch-skills/stitch-code-to-design.md): Convierte código frontend (Vite, React, Angular, Vue, etc.) en un Stitch Design encadenando extracción de HTML estático, extracción del sistema de diseño y subida de archivos.
- [Stitch::upload To Stitch](https://skillsagentes.com/skills/google-labs-code/stitch-skills/stitch-upload-to-stitch.md): Sube assets locales (imágenes, mockups, HTML extraído, markdown de diseño) a un proyecto de Stitch, útil cuando las llamadas MCP fallan o se truncan por límites de tokens en base64.
- [Shadcn Ui](https://skillsagentes.com/skills/google-labs-code/stitch-skills/shadcn-ui.md): Guía experta para integrar y construir aplicaciones con componentes de shadcn/ui: descubrimiento, instalación, personalización y buenas prácticas.

## Skills relacionadas

- [Claude Api](https://skillsagentes.com/skills/anthropics/skills/claude-api.md): Referencia para la API de Claude / SDK de Anthropic — IDs de modelo, precios, parámetros, streaming, tool use, MCP, agentes, caching, conteo de tokens y migración de modelos.
- [Claude To Deerflow](https://skillsagentes.com/skills/bytedance/deer-flow/claude-to-deerflow.md): Interactúa con la plataforma de agentes DeerFlow vía su API HTTP: envía mensajes, inicia threads, revisa estado, lista modelos/skills/agentes, gestiona memoria y sube archivos, o delega tareas de investigación.
- [Kling Official](https://skillsagentes.com/skills/calesthio/openmontage/kling-official.md): Guía oficial de la API directa de Kling para los proveedores de OpenMontage. Úsala antes de llamar a kling_official_video, kling_official_image, kling_tts, kling_avatar o kling_lip_sync.
- [Dashscope](https://skillsagentes.com/skills/calesthio/openmontage/dashscope.md): Integración con DashScope (Alibaba Cloud Bailian / 阿里云百炼): generación de imágenes (qwen-image-2.0-pro), texto a voz (qwen3-tts-flash) y ASR con marcas de tiempo por palabra (qwen3-asr-flash-filetrans).
- [Bfl Api](https://skillsagentes.com/skills/calesthio/openmontage/bfl-api.md): Guía de integración de la API BFL FLUX: endpoints, polling asíncrono, límites de tasa, manejo de errores, webhooks y endpoints regionales, con ejemplos en Python y TypeScript.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)