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.
stitch*:*bashreadwriteweb_fetchen todo el repo
0–100, la ruta de este skill
último commit aquí
últimos 90 días
51 tok en reposo
26 KB
Funciona con cualquier agente que lea SKILL.md
npx -y skills add google-labs-code/stitch-skills --skill react-components --agent claude-codeSe instala solo en este repositorio.
Este skill runs shell commands, writes to your files, makes network requests, reads environment config.
Di cualquiera de estas frases y el agente debería cargar este skill.
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.
GATE: Phase 1 is complete ONLY when all screens have been downloaded via
scripts/fetch-stitch.shAND visually audited. Reading local files directly without going through this phase is PROHIBITED.
list_tools to find the Stitch MCP prefix. Use this prefix (e.g., stitch:) for all subsequent calls.[prefix]:get_screen for EVERY screen in the project to retrieve the design JSON with download URLs. Do NOT skip any screen..stitch/designs/{page}.html and .stitch/designs/{page}.png already exist:bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" ".stitch/designs/{page}.html"=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".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.[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, deviceTypeLast Sync Time field matching the current sync ISO execution timescreens map detailing each screen's ID, label, sourceScreen reference, dimensions, and canvasPosition..stitch/designs/*.html directly without calling MCP get_screen first.fetch-stitch.sh download script..png screenshots..stitch/metadata.json and its Last Sync Time field upon syncing.GATE: Phase 2 is complete ONLY when
resources/style-guide.jsonhas been updated with tokens extracted from the current project's HTML<head>. Tokens from a previous project are NOT acceptable.
tailwind.config: Open each downloaded HTML file and locate the tailwind.config object in the <head> <script> block. Extract:resources/style-guide.json: Overwrite the file with the extracted tokens from THIS project. The style guide MUST match the Stitch project being converted.style-guide.json match what you extracted.style-guide.json as-is without verifying it matches the current project.GATE: Every component MUST satisfy ALL of the following rules. Violations will cause
npm run validateto fail.
src/components/. Monolithic page files that contain everything are PROHIBITED.src/hooks/. Examples: pagination logic → usePagination, filtering → useFilter.src/data/mockData.ts. No hardcoded content in components.Readonly TypeScript interface named [ComponentName]Props. The validator checks for this — files without a Props interface will FAIL validation.href="#" placeholder links. When building a multi-page React app:href="#" anchors with React Router <Link> components pointing to the correct routes.<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.<Link> with active-state highlighting based on useLocation().style-guide.json. No arbitrary hex codes.dark: variants to ALL color classes throughout every component.[Name]Props interface.href="#" links unconverted.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.
node_modules is missing, run npm install to enable the validation tools.src/data/mockData.ts based on the design content.resources/component-template.tsx as a base. Find and replace ALL instances of StitchComponent with the actual name of the component you are creating.App.tsx) to render the new components.npm run validate <file_path> for EVERY .tsx file in src/components/ and src/pages/ to report component validity.tsc --noEmit to verify TypeScript compile status.resources/architecture-checklist.md.npm run dev or initiating visual browser audits to verify the live result.Props interface — every component (including pages) needs one.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.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.
11 archivos en el paquete. Solo se lee SKILL.md al activarse — las referencias se cargan si el skill decide que las necesita.
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
Este repo incluye 15 skills. Si instalas uno, normalmente ya tienes los demás. Ver el pack stitch-skills entero y su comando de instalación
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.
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.
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.
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.
Guía experta para integrar y construir aplicaciones con componentes de shadcn/ui: descubrimiento, instalación, personalización y buenas prácticas.
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.
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.
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).
Guía completa para integrar servidores Model Context Protocol en plugins de Claude Code, para conectar herramientas y servicios externos.
