stitch::react-native
Ce skill appartient au repository google-labs-code/stitch-skills, une bibliothèque de skills compatibles avec le standard ouvert Agent Skills et conçus pour fonctionner avec le serveur MCP de Google Stitch. Il s'adresse aux ingénieurs mobiles qui souhaitent transformer des maquettes web produites dans Stitch en composants React Native prêts pour la production.
Ce que fait ce skill
Le skill guide l'agent à travers l'ensemble du pipeline de conversion : récupération du design via le serveur MCP Stitch (HTML exporté et screenshot), mapping des éléments HTML vers les primitives React Native (View, Text, Image, Pressable, etc.), et réécriture des styles CSS/Tailwind en StyleSheet.create(). Il prend également en charge les spécificités de la plateforme (ombres iOS/Android via Platform.select()), le dimensionnement responsive sans vw/vh, et les règles typographiques propres à React Native.
Architecture générée
Le skill impose une organisation en Atomic Design (atoms/, molecules/, organisms/), une séparation stricte entre logique métier (custom hooks dans src/hooks/) et rendu, ainsi qu'un fichier src/theme.ts centralisant couleurs, espacements et typographie extraits de la config Tailwind du design. Les données statiques sont déplacées dans src/data/mockData.ts et chaque composant expose une interface TypeScript [ComponentName]Props avec des propriétés readonly.
Comment l'utiliser
Ce skill s'installe via la commande npx skills add google-labs-code/stitch-skills ou en ajoutant le repository comme source de plugins dans votre agent (Claude Code, Gemini CLI, Cursor, etc.). Une fois activé, il suffit d'indiquer à l'agent quel écran Stitch convertir : le skill orchestre lui-même la découverte du préfixe MCP, le téléchargement des assets via scripts/fetch-stitch.sh, la génération des composants et la validation avec npm run validate.
Prérequis
Le serveur Stitch MCP doit être configuré et actif dans l'environnement de votre agent, conformément aux instructions d'installation Stitch MCP. Un projet React Native ou Expo fonctionnel avec les dépendances installées (npm install) est également nécessaire pour exécuter les étapes de validation et de prévisualisation sur simulateur ou appareil.