Stitch::react Components

Name: Stitch::react Components
Author: google-labs-code

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.

Oficial

Solicitastitch*:*bashreadwriteweb_fetch

Estrellas: 8k
Actividad: 64
Actualizado: hace 24 días
Commits: 8
Contexto: 2.2k tok
Paquete: 11 archivos

Instalar

Funciona con cualquier agente que lea SKILL.md

npx -y skills add google-labs-code/stitch-skills --skill react-components --agent claude-code

Se instala solo en este repositorio.

Este skill runs shell commands, writes to your files, makes network requests, reads environment config.

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)

Úsalo cuando

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

No lo uses cuando

Qué lo activa

Di cualquiera de estas frases y el agente debería cargar este skill.

“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”

SKILL.md

En inglés

conClaude ChatGPT Perplexity

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.

Namespace discovery: Run list_tools to find the Stitch MCP prefix. Use this prefix (e.g., stitch:) for all subsequent calls.
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.
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.
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.
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.
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.

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

Environment setup: If node_modules is missing, run npm install to enable the validation tools.
Data layer: Create src/data/mockData.ts based on the design content.
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.
Application wiring: Update the project entry point (like App.tsx) to render the new components.
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>.

Reproducido de google-labs-code/stitch-skills bajo licencia Apache-2.0. Leer esta página en markdown.

Archivos

11 archivos en el paquete. Solo se lee SKILL.md al activarse — las referencias se cargan si el skill decide que las necesita.

README.md1 KB
SKILL.md9 KB
examples/gold-standard-card.tsx2 KB
package-lock.json7 KB
package.json355 B
resources/architecture-checklist.md613 B
resources/component-template.tsx1 KB
resources/stitch-api-reference.md1 KB
resources/style-guide.json496 B
scripts/fetch-stitch.sh1009 B
scripts/validate.js3 KB

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

Detalles

Creador: google-labs-code
Categoría: Desarrollo de APIs
Licencia: Apache-2.0
Recursos incluidos: scripts en bash, javascript
Repositorio: google-labs-code/stitch-skills
Código fuente: Ver SKILL.md

Más de google-labs-code/stitch-skills

Este repo incluye 15 skills. Si instalas uno, normalmente ya tienes los demás.

Stitch::react Native

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.

Costo de contexto al activarse: 3.1k tok
Tamaño del paquete: 9 archivos
Última actualización: hace 24 días
Permisos

Oficialherramientas desarrollo

Stitch::extract Static Html

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.

Costo de contexto al activarse: 2.7k tok
Tamaño del paquete: 4 archivos
Última actualización: hace 16 días
Permisos

Oficialherramientas desarrollo

Stitch::code To Design

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.

Costo de contexto al activarse: 912 tok
Tamaño del paquete: 1 archivo
Última actualización: hace 16 días
Permisos

Oficialdiseno ui

Stitch::upload To Stitch

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.

Costo de contexto al activarse: 1.1k tok
Tamaño del paquete: 2 archivos
Última actualización: hace 16 días
Permisos

Oficialherramientas desarrollo

Shadcn Ui

Guía experta para integrar y construir aplicaciones con componentes de shadcn/ui: descubrimiento, instalación, personalización y buenas prácticas.

Costo de contexto al activarse: 2.3k tok
Tamaño del paquete: 10 archivos
Última actualización: hace 24 días
Permisos

Oficialdiseno ui

Stitch::extract Design Md

Extrae un sistema de diseño completo (DESIGN.md) directamente del código fuente frontend —React, Vue, Svelte, Angular, HTML/CSS— analizando componentes, hojas de estilo, configs de Tailwind y tokens de diseño.

Costo de contexto al activarse: 3.5k tok
Tamaño del paquete: 7 archivos
Última actualización: hace 16 días
Permisos

Oficialdiseno ui

Skills relacionados

Claude Api

168k

Referencia de la API de Claude y el SDK de Anthropic — ids de modelo, precios, parámetros, streaming, tool use, MCP, agentes, caching, conteo de tokens y migración entre modelos.

Costo de contexto al activarse: 18.2k tok
Tamaño del paquete: 66 archivos
Última actualización: hace 7 días

Oficialdesarrollo apis

Mcp Builder

168k

Guía para crear servidores MCP de calidad que permitan a los LLMs interactuar con servicios externos. Úsalo al construir servidores MCP en Python (FastMCP) o Node/TypeScript (MCP SDK).

Costo de contexto al activarse: 2.3k tok
Tamaño del paquete: 10 archivos
Última actualización: hace 3 meses

Oficialdesarrollo apis

MCP Integration

141k

Guía completa para integrar servidores Model Context Protocol en plugins de Claude Code, para conectar herramientas y servicios externos.

Costo de contexto al activarse: 3.1k tok
Tamaño del paquete: 7 archivos
Última actualización: hace 9 meses

Oficialdesarrollo apis