stitch::react-nativepor Google Labs

Stitch React Native Skill.

Un skill de Claude Code y Codex para diseño de apps móviles: convierte o sincroniza diseños HTML de Stitch a componentes de React Native.

Mobile Apps
Código UI

Descargar OpenDesign Ver guía de uso

google-labs-code/stitch-skills · plugins/stitch-build/skills/react-native/SKILL.mdSKILL.md

--- name: stitch::react-native description: - Convert Stitch HTML designs to React Native components, or syncs/updates existing native components to align with the latest Stitch designs, using StyleSheet. --- ## Phase 1: Retrieval and networking ## Phase 2: Theme extraction ## Phase 3: Architectural rules and HTML mapping ## Phase 4: Execution steps

Encabezado y títulos de sección leídos del archivo original el 14/09/2026 · 12 389 caracteres completos

01 Qué hace

Qué Hace el Skill stitch::react-native en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Este skill convierte diseños web de Stitch en HTML/CSS en componentes React Native listos para producción usando StyleSheet, y también puede sincronizar componentes nativos existentes con los diseños más recientes de Stitch. Se ejecuta en cuatro fases controladas: descarga cada pantalla con scripts/fetch-stitch.sh y audita visualmente cada captura, extrae los tokens de tailwind.config a src/theme.ts, mapea elementos HTML y CSS a primitivas de React Native siguiendo reglas arquitectónicas estrictas, y luego redacta los componentes a partir de resources/component-template.tsx.

Los componentes siguen las carpetas de Atomic Design bajo src/components/, la lógica vive en src/hooks/, el contenido en src/data/mockData.ts, y cada archivo de componente exporta una interfaz readonly [ComponentName]Props. La validación mediante npm run validate y tsc --noEmit es opcional y requiere el permiso del usuario.

Qué produce

src/theme.ts, un archivo de tokens en TypeScript que contiene los colores, el espaciado y la tipografía extraídos del tailwind.config del diseño.
src/data/mockData.ts, que contiene todo el texto estático, las URLs de imágenes y las listas para que ningún contenido esté codificado en los componentes.
Hooks personalizados bajo src/hooks/ que absorben los manejadores de eventos, las llamadas a la API y la lógica de negocio, dejando que los componentes solo se encarguen del renderizado.
Un archivo .stitch/metadata.json escrito dentro de la carpeta de la app y reflejado en la raíz del workspace.

Ver el ejemplo de prompt ↗

Cómo funciona

01
Descubrir el Namespace de MCP
Ejecute list_tools para encontrar el prefijo MCP de Stitch, y luego reutilice ese prefijo en cada llamada posterior de la sesión.
02
Descargue a Través del Script
Las herramientas internas de fetch pueden fallar en dominios de Google Cloud Storage, así que el HTML y las capturas se descargan mediante scripts/fetch-stitch.sh, que gestiona las redirecciones y los handshakes de seguridad.
03
Audite Cada Captura de Pantalla
Abra el PNG descargado para confirmar la intención de diseño y los detalles de maquetación, en lugar de asumir cómo se ve el diseño.
04
Extraiga el Tema
Lea el objeto tailwind.config dentro de cada bloque de script del head del HTML para obtener colores, fuentes, espaciado, radios y tipografía, y luego escríbalos en src/theme.ts como constantes de TypeScript.
05
Redacte a Partir de la Plantilla
Empieza cada componente a partir de resources/component-template.tsx y busca y reemplaza cada instancia del nombre de componente de marcador de posición.
06
Registrar los metadatos de sincronización
Guarda la configuración del proyecto en .stitch/metadata.json con un campo Last Sync Time que coincida con el momento actual de ejecución de la sincronización.

02 Encuentra tu caso de uso

Cuándo usar el skill stitch::react-native

Usa el skill stitch::react-native en Claude Code o Codex cuando el trabajo sea diseño de aplicaciones móviles de este tipo. El alcance y los límites a continuación están tomados del propio archivo del skill.

Buen caso de uso

Una app de React Native existente cuyos componentes se han desalineado y deben ajustarse a los diseños más recientes de Stitch.
Un proyecto de Stitch con varias pantallas que necesita un NavigationContainer con un stack o tab navigator configurado en App.tsx.
Un diseño cuyas sombras deben verse correctas en ambas plataformas, gestionado con Platform.select para las propiedades de sombra de iOS y elevation en Android.
Equipos que quieren que el resultado se compruebe contra una checklist de arquitectura escrita antes de considerar el trabajo terminado.

Conozca los límites

Diseños que dependen de efectos hover, transition o animation de CSS: hover y transition no tienen equivalente y las animaciones deben implementarse con react-native-reanimated.
Campos desplegables o de selección del diseño web, ya que React Native no incluye ningún select integrado y requiere un picker de terceros o un modal personalizado.
Expectativas de imagen propias de la web: un Image de React Native no tiene tamaño intrínseco, así que siempre hay que indicar width y height, o bien un aspectRatio.

Qué proporcionar

El proyecto Stitch y su prefijo MCPEl agente ejecuta list_tools para encontrar el prefijo MCP de Stitch y lo reutiliza en todas las llamadas a get_screen y get_project.
El valor de ancho de la pantallaA las URLs de las capturas de pantalla hay que añadirles =w{width} usando el ancho de los metadatos de la pantalla, porque de lo contrario el CDN de Google entrega miniaturas de baja resolución.
Consentimiento para validar y ejecutar la appSe requiere permiso antes de iniciar el packager o de lanzar auditorías visuales en el simulador para comprobar que la app se renderiza en un dispositivo.

03 Dentro del skill

Reglas que la Skill stitch::react-native da a Claude Code y Codex

8 instrucciones concretas, valores por defecto y límites que SKILL.md fija para el agente: la parte del archivo que cambia el resultado.

Sin atajos en la recuperación
La Fase 1 solo se considera completa una vez que todas las pantallas se han descargado mediante el script y se han auditado visualmente; está prohibido leer archivos de diseño locales sin llamar antes al get_screen del MCP.
Pedir confirmación antes de actualizar los diseños
Si .stitch/designs/{page}.html y .png ya existen, el agente debe preguntar si actualizar desde el proyecto Stitch o reutilizar los archivos locales, y solo volver a descargarlos tras la confirmación.
Sin colores en bruto en los componentes
Los códigos hexadecimales de color y las cadenas rgba están prohibidos en los archivos de componentes; todo valor de color, espaciado y tamaño de fuente debe provenir de src/theme.ts.
Exportar una interfaz de props de solo lectura
Todo archivo de componente, incluidas las pantallas, debe exportar una interfaz llamada [ComponentName]Props con modificadores readonly, o la validación falla.
Áreas seguras desde el paquete correcto
Las pantallas de nivel superior se envuelven en SafeAreaView de react-native-safe-area-context, no en el que viene por defecto con react-native.
Dividir en archivos de Atomic Design
Los componentes se colocan en src/components/atoms/, molecules/ y organisms/; queda prohibido poner toda la UI en un único archivo de página o pantalla.
Omitir las cabeceras de Google
Los componentes generados siguen las convenciones del proyecto de destino y no deben llevar cabeceras de licencia de Google.
Permiso antes de las pruebas
Los scripts de validación, los empaquetadores y las auditorías en simulador nunca se inician de forma unilateral; el agente debe pedir primero permiso al usuario.

04 Ponlo a trabajar

Instalar stitch::react-native en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Añadir stitch::react-native a Claude Code, Codex o tu agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::react-native

Forma genérica de CLI de skills para plugins/stitch-build/skills/react-native/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al skill una primera tarea de diseño de aplicación móvil

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su material.

Starter prompt

Convert the Stitch designs in project [project ID] to React Native. Download every screen with scripts/fetch-stitch.sh, visually audit the screenshots, extract the tailwind.config tokens into src/theme.ts, and build the components from resources/component-template.tsx using the atoms, molecules and organisms folders. Please hold off on starting the packager or a simulator audit for now.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

Ejecute el validador sobre todos los archivos .tsx de components y screens para informar de la validez de los componentes.
Ejecute el compilador de TypeScript en modo no-emit para confirmar que el proyecto sigue compilando.
Confirme que los colores y las fuentes de src/theme.ts coinciden realmente con lo que salió del diseño HTML.
Compruebe que ningún texto sin formato queda fuera de un componente Text, porque React Native falla en ese caso.

En OpenDesign importe stitch::react-native desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, y luego selecciónelo en la barra superior.

Descargar OpenDesign Leer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author: Google Labs
Repository: github.com/google-labs-code/stitch-skills Rama main
Archivo de skill: plugins/stitch-build/skills/react-native/SKILL.md Suma de verificación del contenido registrada en la verificación; commit 0337446
License: Apache-2.0 De LICENSE.
Estrellas del repositorio: 8.304 Instantánea de GitHub tomada el 14/09/2026 para todo el repositorio google-labs-code/stitch-skills, que contiene 12 skills en este catálogo. No es una calificación ni un recuento de uso para stitch::react-native.
Verificado por OpenDesign: 14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

Fase 1: Obtención y redLocalice el prefijo MCP, obtenga cada pantalla, descargue el HTML y las capturas por script, audite visualmente y guarde los metadatos.
Fase 2: Extracción del temaExtraiga los tokens de color, fuente, espaciado, radio y tipografía de tailwind.config a src/theme.ts.
Fase 3: Reglas arquitectónicas y mapeo de HTMLAsigne las etiquetas HTML a primitivas, convierta el CSS a StyleSheet y siga las reglas de Atomic Design, hooks, tema y accesibilidad.
Fase 4: Pasos de ejecuciónInstale las dependencias, construya el tema, los datos y los componentes a partir de la plantilla, conecte la navegación y, opcionalmente, valide con permiso.
Solución de problemasCorrecciones para errores de obtención, fallos de validación, texto sin envolver, dimensionado de imágenes y advertencias de VirtualizedList.

La descripción propia del Skill

"- Convierte diseños HTML de Stitch en componentes de React Native, o sincroniza/actualiza componentes nativos existentes para alinearlos con los últimos diseños de Stitch, usando StyleSheet."

Descripción del front-matter desde SKILL.md. El archivo completo tiene aproximadamente 12.389 caracteres. Lea el archivo completo en GitHub.

06 Antes de instalar

Preguntas sobre el skill stitch::react-native

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

¿Puedo omitir el Stitch MCP y simplemente entregarle los archivos HTML locales?

No. La Fase 1 exige que cada pantalla se obtenga mediante get_screen y se descargue con scripts/fetch-stitch.sh antes de leer nada, y leer directamente el HTML de diseño local sin llamar antes a get_screen figura como un antipatrón.

¿Esto solo genera pantallas nuevas desde cero, o puede actualizar una app que ya tengo?

Hace ambas cosas. Además de convertir el HTML nuevo de Stitch en componentes, el skill sincroniza y actualiza los componentes nativos existentes para que coincidan con los diseños más recientes de Stitch.

¿Lanzará por sí solo un simulador o un empaquetador para comprobar el resultado?

No por defecto. La verificación de la Fase 4, las auditorías y las pruebas en simulador o empaquetador son opcionales, y el agente debe obtener su permiso antes de ejecutar scripts de validación, iniciar un empaquetador o iniciar auditorías en simulador.

Stitch React Native

Ejecute stitch::react-native en una tarea de diseño de aplicación móvil real.

Descarga OpenDesign, importa stitch::react-native desde su enlace SKILL.md, pega el prompt de arriba y lee el plan antes del resultado.

Descargar OpenDesign Ver todas las skills