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*:*bashreadwriteweb_fetchen todo el repo
0–100, la ruta de este skill
último commit aquí
últimos 90 días
40 tok en reposo
34 KB
Funciona con cualquier agente que lea SKILL.md
npx -y skills add google-labs-code/stitch-skills --skill react-native --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 mobile engineer focused on transforming Stitch web designs into clean, production-ready React Native code or syncing/updating existing native components to align with the latest Stitch designs. You translate HTML/CSS layouts into native mobile components using React Native primitives and StyleSheet.
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
src/theme.tshas been created or updated with tokens extracted from the current project's HTML<head>. Hardcoding color hex codes or using themes from a different project is NOT acceptable.
tailwind.config: Open each downloaded HTML file and locate the tailwind.config object in the <head> <script> block. Extract:src/theme.ts: Write the extracted tokens to src/theme.ts as TypeScript constants. Ensure every color, spacing, and typography value has a corresponding token.src/theme.ts match what you extracted from the HTML design.src/theme.ts.GATE: Every component MUST satisfy ALL of the following rules. Violations will cause
npm run validateto fail.
Map HTML elements to React Native components using these rules:
| HTML | React Native | Notes |
|---|---|---|
<div> |
View |
Default container |
<span>, <p>, <h1>-<h6> |
Text |
All text must be wrapped in Text. Nest Text for inline styling. |
<img> |
Image |
Use source={{ uri }} for remote images, require() for local assets. |
<button>, <a> |
Pressable |
Prefer Pressable over TouchableOpacity. Use onPress instead of onClick. |
<input> |
TextInput |
Map placeholder, value, onChangeText. |
<scroll container> |
ScrollView |
For short lists only. Use FlatList for long or dynamic lists. |
<ul>/<ol> with many items |
FlatList |
Requires data, renderItem, keyExtractor. |
<section> with grouped data |
SectionList |
For grouped data with headers. Use tab navigator for tab-based layouts. |
<select> |
Third-party picker or custom modal | React Native has no built-in select. |
<svg> |
react-native-svg |
Convert SVG markup to Svg, Path, Circle, etc. |
| Root wrapper | SafeAreaView |
Wrap top-level screens to avoid notch/status bar overlap. |
CSS and Tailwind classes do not work in React Native. Convert all styles to StyleSheet.create():
flexDirection defaults to 'column' (not 'row' like web CSS).display: flex is implicit on every View.justify-content maps to justifyContent.align-items maps to alignItems.gap maps to gap (React Native 0.71+). For older versions, use marginBottom on children.width: 100 means 100 density-independent pixels.width: '100%'.useWindowDimensions() from react-native.vw/vh. Calculate from Dimensions.get('window').Text components, never on View.font-size maps to fontSize (number, not string).font-weight maps to fontWeight (string: '400', '700', 'bold').line-height maps to lineHeight (number).letter-spacing maps to letterSpacing.text-transform maps to textTransform.color applies to Text only.border-radius maps to borderRadius.box-shadow does not exist. Use elevation (Android) and shadowColor/shadowOffset/shadowOpacity/shadowRadius (iOS). Use Platform.select() to apply platform-specific shadow styles.hover, transition, animation (use react-native-reanimated for animations), or position: fixed (use absolute positioning instead).src/components/atoms/, src/components/molecules/, and src/components/organisms/. Monolithic page/screen files are PROHIBITED.src/hooks/. Components should only handle rendering.src/data/mockData.ts. No hardcoded content in components.[ComponentName]Props with readonly property modifiers. The validator requires the interface to be exported — files without an exported Props interface will FAIL validation.src/theme.ts. Reference them in StyleSheet.create(). Absolutely no raw color hex codes or rgba strings are allowed in component files.NativeStackScreenProps or BottomTabScreenProps.accessibilityLabel and accessibilityRole. Images need accessibilityLabel. Use accessibilityState for toggles and checkboxes.SafeAreaView from react-native-safe-area-context (not the default one from react-native).When the design requires different behavior on iOS and Android:
import { Platform } from 'react-native';
const styles = StyleSheet.create({
shadow: Platform.select({
ios: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 4,
},
android: {
elevation: 4,
},
}),
});
div, span, p) instead of React Native components.[Name]Props interface.StyleSheet.create().GATE: Phase 4 verification, audits, and simulator/packager testing are optional. You MUST ask the user's permission to proceed with validation scripts, starting packagers, or simulator audits.
node_modules is missing, run npm install to enable the validation tools.src/theme.ts from the extracted Tailwind config.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 component name. Map HTML elements to React Native primitives.NavigationContainer with a stack or tab navigator in App.tsx.npm run validate <file_path> for EVERY .tsx file in components and screens to report component validity.tsc --noEmit to verify TypeScript compile status.resources/architecture-checklist.md.npx react-native start or npx expo start) or starting visual simulator audits to verify the app renders correctly on a simulator/device.Props interface or leaving raw hex colors in StyleSheet.create().<Text>. Verify all text nodes are wrapped.<img>, React Native Image has no intrinsic size. Always specify width and height in styles or use aspectRatio.ScrollView with a plain View or use FlatList ListHeaderComponent/ListFooterComponent.Reproducido de google-labs-code/stitch-skills bajo licencia Apache-2.0. Leer esta página en markdown.
9 archivos en el paquete. Solo se lee SKILL.md al activarse — las referencias se cargan si el skill decide que las necesita.
Requiere el MCP de Stitch, node_modules instalado (npm install) y el script scripts/fetch-stitch.sh para descargas confiables.
Necesita en el PATH:curl
Variables de entorno:OUTPUT
Este repo incluye 15 skills. Si instalas uno, normalmente ya tienes los demás.
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.
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 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.
Úsalo al empezar trabajo de feature que necesita aislamiento del workspace actual, o antes de ejecutar planes de implementación: asegura un workspace aislado vía herramientas nativas o fallback a git worktree.
Úsala al crear nuevas skills, editar skills existentes o verificar que funcionan antes de desplegarlas.
Parte un plan, una spec o la conversación actual en tickets tracer-bullet, cada uno declarando sus aristas de bloqueo, publicados en el tracker configurado.
