stitch::react-componentspar Google Labs

Stitch React Components Skill.

Un skill Claude Code et Codex pour le design UI : convertit ou synchronise les designs Stitch en composants React + Vite modulaires.

Web et UI
Code UI

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

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

--- name: stitch::react-components description: - Converts Stitch designs into modular Vite and React components, or syncs/updates existing React components to align with the latest Stitch designs, using system-level networking and AST-based validation. --- ## Phase 1: Retrieval and networking ## Phase 2: Style extraction ## Phase 3: Architectural rules ## Phase 4: Execution steps

Front matter et titres de section lus depuis le fichier source le 14/09/2026 · 8 725 caractères au total

01 Ce qu'il fait

Ce que fait le Skill stitch::react-components 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 un projet Stitch en un front-end React et Vite modulaire, ou synchronise des composants React existants avec les dernières maquettes Stitch. Il est destiné aux ingénieurs frontend travaillant à partir d'écrans Stitch : l'agent trouve le préfixe Stitch MCP avec list_tools, récupère chaque écran avec get_screen, télécharge le HTML et les captures d'écran via scripts/fetch-stitch.sh, extrait les tokens de tailwind.config dans resources/style-guide.json, puis construit des composants, des hooks et des données factices que la validation AST vérifie.

Quatre phases verrouillées imposent cet ordre, et npm run validate impose des interfaces Readonly Props, des tokens de thème plutôt que des valeurs hexadécimales, et l'absence de fichiers de page monolithiques.

Ce qu'il produit

Les assets de design téléchargés se trouvent dans .stitch/designs/{page}.html et .stitch/designs/{page}.png pour chaque écran.
Un fichier .stitch/metadata.json contenant projectId, title, deviceType, une carte screens et un champ Last Sync Time.
Un fichier resources/style-guide.json écrasé, portant les tokens de couleur, police, espacement, rayon et typographie du projet actuel.
Des composants React dans src/components, des hooks dans src/hooks, des données fictives dans src/data/mockData.ts, et un point d'entrée mis à jour qui les rend.

Voir l'exemple de prompt ↗

Fonctionnement

01
Trouver l'espace de noms Stitch
Exécutez list_tools pour découvrir le préfixe MCP, puis réutilisez ce préfixe pour chaque appel Stitch suivant.
02
Récupérer les métadonnées de chaque écran
Appelez get_screen pour chaque écran du projet afin d'obtenir le JSON de design et ses URLs de téléchargement, sans qu'aucun écran ne soit omis.
03
Télécharger via le script
Les outils de récupération internes peuvent échouer face à Google Cloud Storage, donc les téléchargements passent par le script bash fourni, qui gère les redirections et les échanges de sécurité.
04
Extraire les tokens de design
Ouvrez chaque fichier HTML téléchargé et lisez l'objet tailwind.config dans le bloc script du head pour les couleurs, polices, espacements, rayons et typographie.
05
Ébaucher les composants à partir du modèle
Utilisez le modèle de composant fourni comme base et renommez chaque occurrence du nom de composant provisoire avant de connecter le point d'entrée.

02 Trouvez celui qui vous convient

Quand utiliser le Skill stitch::react-components

Utilisez le skill stitch::react-components dans Claude Code ou Codex lorsque le travail concerne ce type de design UI. La portée et les limites ci-dessous sont tirées du fichier propre au skill.

Bon choix

Vous avez des designs Stitch et souhaitez un code React propre et modulaire plutôt qu'une seule grande page convertie.
Vous avez déjà des composants React et devez les réaligner avec les derniers designs Stitch.
Vous assemblez une application multi-pages où chaque écran Stitch est une page autonome avec des liens provisoires qui doivent devenir de vraies routes et une navigation fonctionnelle.
Vous voulez des contrôles qualité automatisés sur le code généré plutôt que de vérifier à l'œil.

Connaître les limites

Il ne peut pas être exécuté partiellement. Le skill précise que chaque étape est obligatoire et que chaque section comporte un jalon qui doit être satisfait avant de passer à la suivante.
Vous ne pouvez pas lui fournir un HTML de design déjà téléchargé et sauter la phase de récupération MCP.
Il ne démarrera pas le serveur de développement ni ne lancera d'audits navigateur de sa propre initiative.
Les composants générés ne doivent pas porter d'en-têtes de licence Google.

Quoi fournir

Une décision concernant les fichiers de design locaux existantsSi .stitch/designs/{page}.html et .png sont déjà présents, on vous demande de retélécharger ou de les réutiliser, et le skill ne présume de rien.
Autorisation pour les étapes de vérificationOn vous demande votre accord avant que npm run dev ne démarre ou qu'un audit visuel du navigateur ne commence.
Les contraintes propres du projet cibleLes décisions relatives aux composants doivent suivre les besoins du projet spécifique en cours de construction plutôt qu'une mise en page générique.

03 Dans le skill

Règles que le skill stitch::react-components impose à 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.

Chaque composant a besoin d'une interface Props
Chaque fichier de composant, pages incluses, doit déclarer une interface TypeScript Readonly nommée d'après le composant. Le validateur rejette les fichiers qui n'en ont pas.
Pas de fichiers de page monolithiques
Les modèles d'UI réutilisables tels que les cartes, badges, pagination et barres de recherche ont chacun leur propre fichier sous src/components ; les fichiers uniques contenant toute la page sont interdits.
La logique vit dans les hooks
Les gestionnaires d'événements et la logique métier passent dans des hooks personnalisés sous src/hooks, par exemple la pagination dans usePagination et le filtrage dans useFilter.
Pas de contenu codé en dur
Tout le texte statique, les URL d'images et les listes appartiennent à src/data/mockData.ts plutôt qu'aux fichiers de composants.
Convertir les hrefs placeholder en routes
Les écrans Stitch sont livrés avec des liens href="#", et chacun doit devenir un Link de React Router pointant vers la route correcte.
Faire du logo un lien vers l'accueil
Le logo ou le titre du TopAppBar doit être un Link vers la racine, car les barres de navigation inférieures de Stitch utilisent md:hidden et sont invisibles sur bureau.
Tokens de thème et mode sombre sur tout
Les classes de couleur proviennent du guide de style synchronisé plutôt que de codes hexadécimaux arbitraires, et chaque classe de couleur comporte aussi une variante dark:.
Demander avant d'exécuter quoi que ce soit
Les scripts de validation, le serveur de développement et les audits automatisés du navigateur ne s'exécutent qu'une fois que l'utilisateur a donné son autorisation.

04 Mettez-le en pratique

Installez stitch::react-components 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.

Ajoutez stitch::react-components à 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-components

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

Donnez au skill une première tâche de design UI

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

Starter prompt

Convert the screens in my Stitch project [project name] into a modular React + Vite app. Use scripts/fetch-stitch.sh to download every screen, sync the Tailwind tokens into resources/style-guide.json, then split the layout into components under src/components with logic in src/hooks and content in src/data/mockData.ts. Wire all the href="#" navigation links to React Router routes with dark mode variants, and ask me before running validation or the dev server.

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écuter le validateur AST sur chaque fichier .tsx dans src/components et src/pages pour signaler la validité des composants.
Exécuter tsc --noEmit pour confirmer que le TypeScript compile avant de déclarer le travail terminé.
Comparer le résultat à la checklist d'architecture fournie.
Consulter chaque capture d'écran téléchargée pour confirmer l'intention de design et les détails de mise en page plutôt que de supposer.
Après avoir réextrait les tokens, confirmer que la couleur principale, les polices et l'espacement dans le guide de style correspondent à ce qui a été extrait du HTML.
Parcourir la navigation et s'assurer que chaque élément de navigation mène à la bonne page.

Dans OpenDesign, importez stitch::react-components 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-components/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 14/09/2026 pour l'ensemble du dépôt google-labs-code/stitch-skills, qui contient 12 skills dans ce catalogue. Ce n'est pas une note ni un compteur d'utilisation pour stitch::react-components.
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éseauDécouvrez le préfixe MCP, récupérez chaque écran, téléchargez via script, auditez les captures d’écran, rédigez les métadonnées.
Phase 2 : extraction du styleExtrayez les tokens tailwind.config depuis le head HTML actuel et remplacez le guide de style partagé.
Phase 3 : règles d’architectureFichiers modulaires, hooks, données fictives, interfaces Props, tokens de thème, routage et mode sombre.
Phase 4 : étapes d’exécutionInstallez, construisez la couche de données, ébauchez à partir du modèle, connectez l’application, puis validation optionnelle approuvée par l’utilisateur.
Résolution de problèmesCorrectifs pour les erreurs de récupération, les échecs de validation, les liens de navigation morts et les guides de style obsolètes.

Description du skill lui-même

« Convertit les designs Stitch en composants Vite et React modulaires, ou synchronise/met à jour les composants React existants pour les aligner avec les derniers designs Stitch, en utilisant le réseau au niveau système et la validation basée sur AST. »

Description du front-matter de SKILL.md. Le fichier complet fait environ 8 725 caractères. Lisez le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill stitch::react-components

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

J’ai déjà téléchargé ces designs une fois. Vont-ils être écrasés ?

Non. Lorsque .stitch/designs/{page}.html et .stitch/designs/{page}.png existent déjà, il demande s’il faut actualiser depuis le projet Stitch ou réutiliser les fichiers locaux, et il ne les retélécharge qu’après votre confirmation.

Stitch React Components

Exécutez stitch::react-components sur une vraie tâche de design UI.

Téléchargez OpenDesign, importez stitch::react-components depuis 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

Terminal

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

Ce que fait le Skill stitch::react-components dans Claude Code et Codex

Dans les termes du Skill

Fonctionnement

Quand utiliser le Skill stitch::react-components

Bon choix

Connaître les limites

Quoi fournir

Règles que le skill stitch::react-components impose à Claude Code et Codex

Chaque composant a besoin d'une interface Props

Pas de fichiers de page monolithiques

La logique vit dans les hooks

Pas de contenu codé en dur

Convertir les hrefs placeholder en routes

Faire du logo un lien vers l'accueil

Tokens de thème et mode sombre sur tout

Demander avant d'exécuter quoi que ce soit