En los propios términos del Skill
Este skill convierte un proyecto de Stitch en un front end React y Vite modular, o sincroniza componentes React existentes con los últimos diseños de Stitch. Está pensado para ingenieros frontend que trabajan a partir de pantallas de Stitch: el agente encuentra el prefijo Stitch MCP con list_tools, extrae cada pantalla con get_screen, descarga HTML y capturas de pantalla mediante scripts/fetch-stitch.sh, extrae los tokens de tailwind.config en resources/style-guide.json, y luego construye componentes, hooks y datos simulados que la validación AST comprueba.
Cuatro fases con control de acceso imponen ese orden, y npm run validate exige interfaces Readonly Props, tokens de tema en lugar de valores hex, y ningún archivo de página monolítico.
Qué produce
- Activos de diseño descargados en .stitch/designs/{page}.html y .stitch/designs/{page}.png para cada pantalla.
- Un archivo .stitch/metadata.json con projectId, title, deviceType, un mapa de screens y un campo Last Sync Time.
- Un resources/style-guide.json sobrescrito que contiene los tokens de color, tipografía, espaciado, radio y tipografía del proyecto actual.
- Componentes de React en src/components, hooks en src/hooks, datos simulados en src/data/mockData.ts, y un punto de entrada actualizado que los renderiza.
Cómo funciona
- 01Encuentre el Stitch Namespace
Ejecute list_tools para descubrir el prefijo MCP y luego reutilice ese prefijo en cada llamada posterior a Stitch.
- 02Extraiga los Metadatos de Cada Pantalla
Llame a get_screen para cada pantalla del proyecto y obtenga el JSON de diseño y sus URLs de descarga, sin omitir ninguna pantalla.
- 03Descargue a Través del Script
Las herramientas internas de fetch pueden fallar frente a Google Cloud Storage, así que las descargas pasan por el script bash proporcionado, que gestiona las redirecciones y los intercambios de seguridad.
- 04Extraiga los Tokens de Diseño
Abra cada archivo HTML descargado y lea el objeto tailwind.config en el bloque de script del head para obtener colores, tipografías, espaciado, radio y tipografía.
- 05Redacte los Componentes a Partir de la Plantilla
Use la plantilla de componente incluida como base y renombre cada instancia del nombre de componente de marcador de posición antes de conectar el punto de entrada.