stitch::react-nativepar Google Labs

Stitch React Native Skill.

Un skill Claude Code et Codex pour la conception d'applications mobiles : convertit ou synchronise les designs HTML Stitch en composants React Native.

Applications mobiles
Code UI

Télécharger OpenDesign Voir le guide d'utilisation

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

En-tête et titres de section lus depuis le fichier d'origine le 14/09/2026 · 12 389 caractères au total

01 Ce qu'il fait

Ce que fait le skill stitch::react-native dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Ce skill transforme les designs web Stitch HTML/CSS en composants React Native prêts pour la production à l'aide de StyleSheet, et peut également synchroniser les composants natifs existants avec les derniers designs Stitch. Il s'exécute en quatre phases contrôlées : téléchargez chaque écran avec scripts/fetch-stitch.sh et auditez visuellement chaque capture d'écran, extrayez les tokens tailwind.config dans src/theme.ts, mappez les éléments HTML et le CSS sur les primitives React Native selon des règles architecturales strictes, puis rédigez les composants à partir de resources/component-template.tsx.

Les composants suivent les dossiers Atomic Design sous src/components/, la logique réside dans src/hooks/, le contenu dans src/data/mockData.ts, et chaque fichier de composant exporte une interface [ComponentName]Props en lecture seule (readonly). La validation via npm run validate et tsc --noEmit est optionnelle et nécessite l'autorisation de l'utilisateur.

Ce qu'il produit

src/theme.ts, un fichier de tokens TypeScript contenant les couleurs, espacements et typographies extraits du tailwind.config du design.
src/data/mockData.ts, contenant tout le texte statique, les URL d'images et les listes afin qu'aucun contenu ne soit codé en dur dans les composants.
Des hooks personnalisés sous src/hooks/ qui absorbent les gestionnaires d'événements, les appels API et la logique métier, laissant les composants se contenter du rendu.
Un fichier .stitch/metadata.json écrit dans le dossier de l'application et reflété à la racine de l'espace de travail.

Voir l'exemple de prompt ↗

Fonctionnement

01
Découvrir l'espace de noms MCP
Exécutez list_tools pour trouver le préfixe MCP de Stitch, puis réutilisez ce préfixe pour chaque appel ultérieur dans la session.
02
Télécharger via le script
Les outils de récupération internes peuvent échouer sur les domaines Google Cloud Storage, donc le HTML et les captures d'écran sont téléchargés via scripts/fetch-stitch.sh, qui gère les redirections et les échanges de sécurité.
03
Auditer chaque capture d'écran
Ouvrez le PNG téléchargé pour confirmer l'intention de design et les détails de mise en page plutôt que de supposer à quoi ressemble le design.
04
Extraire le thème
Lisez l'objet tailwind.config dans le bloc de script de l'en-tête de chaque HTML pour les couleurs, polices, espacements, rayons et typographie, puis écrivez-les dans src/theme.ts sous forme de constantes TypeScript.
05
Rédiger à partir du modèle
Faites démarrer chaque composant à partir de resources/component-template.tsx, puis recherchez et remplacez chaque occurrence du nom de composant fictif.
06
Enregistrer les métadonnées de synchronisation
Enregistrez la configuration du projet dans .stitch/metadata.json avec un champ Last Sync Time correspondant à l'heure d'exécution de la synchronisation en cours.

02 Trouvez celui qui vous convient

Quand utiliser le skill stitch::react-native

Utilisez le skill stitch::react-native dans Claude Code ou Codex lorsque le travail concerne la conception d'application mobile de ce type. L'adéquation et les limites ci-dessous sont tirées du fichier du skill.

Bon choix

Une application React Native existante dont les composants ont dérivé et doivent être remis en conformité avec les derniers designs Stitch.
Un projet Stitch multi-écrans qui nécessite un NavigationContainer avec un stack ou tab navigator câblé dans App.tsx.
Un design dont les ombres doivent s'afficher correctement sur les deux plateformes, géré via Platform.select pour les propriétés d'ombre iOS et l'elevation Android.
Les équipes qui souhaitent que le résultat soit passé au crible d'une checklist d'architecture écrite avant de considérer le travail comme terminé.

Connaître les limites

Les designs qui s'appuient sur des effets CSS de hover, transition ou animation : hover et transition n'ont pas d'équivalent, et les animations relèvent de react-native-reanimated.
Les champs dropdown ou select issus du design web, car React Native ne propose pas de select intégré et nécessite un picker tiers ou une modal personnalisée.
Les attentes de taille propres au web : une Image React Native n'a pas de taille intrinsèque, il faut donc toujours indiquer width et height ou un aspectRatio.

Quoi fournir

Le projet Stitch et son préfixe MCPL'agent exécute list_tools pour trouver le préfixe MCP Stitch et le réutilise pour tous les appels get_screen et get_project.
La valeur de largeur de l'écranLes URLs de capture d'écran nécessitent l'ajout de =w{width} en utilisant la largeur issue des métadonnées de l'écran, sinon le CDN de Google fournit des miniatures basse résolution.
Consentement pour la validation et l'exécution de l'applicationUne autorisation est requise avant de démarrer le packager ou de lancer des audits visuels sur simulateur pour vérifier le rendu de l'application sur un appareil.

03 Dans le skill

Règles que le Skill stitch::react-native donne à Claude Code et Codex

8 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

Pas de raccourci sur la récupération
La Phase 1 n'est considérée comme terminée que lorsque tous les écrans ont été téléchargés via le script et audités visuellement ; il est interdit de lire les fichiers de design locaux sans avoir d'abord appelé get_screen du MCP.
Demander avant de rafraîchir les designs
Si .stitch/designs/{page}.html et .png existent déjà, l'agent doit demander s'il faut rafraîchir depuis le projet Stitch ou réutiliser les fichiers locaux, et ne retélécharger qu'après confirmation.
Pas de couleurs brutes dans les composants
Les codes couleur hexadécimaux et les chaînes rgba sont interdits dans les fichiers de composants ; chaque valeur de couleur, d'espacement et de taille de police doit provenir de src/theme.ts.
Exporter une interface de props en lecture seule
Chaque fichier de composant, écrans inclus, doit exporter une interface nommée [ComponentName]Props avec des modificateurs readonly, sous peine d'échec de la validation.
Zones sûres issues du bon package
Les écrans de premier niveau doivent être encapsulés dans le SafeAreaView de react-native-safe-area-context, et non celui fourni par défaut par react-native.
Diviser en fichiers Atomic Design
Les composants vont dans src/components/atoms/, molecules/ et organisms/ ; regrouper toute l'UI dans un seul fichier de page ou d'écran est interdit.
Ne pas inclure les en-têtes Google
Les composants générés suivent les conventions du projet cible et ne doivent pas porter d'en-têtes de licence Google.
Autorisation avant les tests
Les scripts de validation, les packagers et les audits de simulateur ne sont jamais lancés unilatéralement ; l'agent doit d'abord demander l'autorisation de l'utilisateur.

04 Mettez-le en pratique

Installer stitch::react-native dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter stitch::react-native à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal

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

Forme générique de la CLI skills pour plugins/stitch-build/skills/react-native/SKILL.md ; le dépôt peut documenter son propre chemin.

Donner au skill une première tâche de conception d'application mobile

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

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.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

Exécutez le validateur sur chaque fichier .tsx des composants et des écrans pour signaler la validité des composants.
Exécutez le compilateur TypeScript en mode no-emit pour confirmer que le projet compile toujours.
Confirmez que les couleurs et les polices dans src/theme.ts correspondent vraiment à ce qui est issu du design HTML.
Vérifiez qu'aucun texte brut ne se trouve hors d'un composant Text, car React Native plante dans ce cas.

Dans OpenDesign, importez stitch::react-native depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

Télécharger OpenDesign Lire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author: Google Labs
Repository: github.com/google-labs-code/stitch-skills Branche main
Fichier du skill: plugins/stitch-build/skills/react-native/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 0337446
License: Apache-2.0 D'après LICENSE.
Étoiles du dépôt: 8 304 Instantané GitHub pris le 2026-09-14 pour l'ensemble du dépôt google-labs-code/stitch-skills, qui contient 12 skills dans ce catalogue. Il ne s'agit ni d'une note ni d'un décompte d'usage pour stitch::react-native.
Vérifié par OpenDesign: 2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

Phase 1 : récupération et réseauTrouver le préfixe MCP, récupérer chaque écran, télécharger le HTML et les captures d'écran par script, auditer visuellement, sauvegarder les métadonnées.
Phase 2 : extraction du thèmeExtraire les tokens de couleur, de police, d'espacement, de rayon et de typographie de tailwind.config dans src/theme.ts.
Phase 3 : règles architecturales et mappage HTMLMapper les balises HTML vers des primitives, convertir le CSS en StyleSheet, suivre les règles Atomic Design, hook, thème et accessibilité.
Phase 4 : étapes d'exécutionInstaller les dépendances, construire le thème, les données et les composants à partir du modèle, connecter la navigation, puis éventuellement valider avec autorisation.
Résolution de problèmesCorrections pour les erreurs de récupération, les échecs de validation, le texte non enveloppé, le dimensionnement des images et les avertissements VirtualizedList.

Description du skill lui-même

« Convertit les designs HTML Stitch en composants React Native, ou synchronise/met à jour les composants natifs existants pour les aligner avec les derniers designs Stitch, en utilisant StyleSheet. »

Description du front-matter extraite de SKILL.md. Le fichier complet fait environ 12 389 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill stitch::react-native

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Puis-je ignorer le MCP Stitch et simplement lui donner les fichiers HTML locaux ?

Non. La phase 1 exige que chaque écran soit récupéré via get_screen et téléchargé avec scripts/fetch-stitch.sh avant toute lecture, et lire directement le HTML de design local sans appeler get_screen au préalable est répertorié comme un anti-pattern.

Cela permet-il uniquement de créer de nouveaux écrans, ou peut-il mettre à jour une application que j'ai déjà ?

Il fait les deux. Outre la conversion du HTML Stitch récent en composants, le skill synchronise et met à jour les composants natifs existants pour qu'ils correspondent aux derniers designs Stitch.

Va-t-il lancer un simulateur ou un packager de lui-même pour vérifier le résultat ?

Pas par défaut. La vérification de la phase 4, les audits et les tests de simulateur ou de packager sont optionnels, et l'agent doit obtenir votre autorisation avant d'exécuter des scripts de validation, de démarrer un packager ou de lancer des audits de simulateur.

Stitch React Native

Exécutez stitch::react-native sur une vraie tâche de design d'application mobile.

Téléchargez OpenDesign, importez stitch::react-native à partir de son lien SKILL.md, collez le prompt ci-dessus et lisez le plan avant le résultat.

Télécharger OpenDesign Parcourir tous les skills