stitch::react-components
Ce skill fait partie du plugin stitch-build du repository google-labs-code/stitch-skills, une bibliothèque de skills d'agent conçue pour s'intégrer avec le serveur Stitch MCP de Google. Il est compatible avec les agents de code tels que Claude Code, Gemini CLI, Cursor ou Codex.
Son rôle est de guider l'agent dans la transformation de maquettes Stitch en un système de composants React + Vite propre et modulaire. Le SKILL.md contient des instructions détaillées — non un simple squelette — couvrant l'ensemble du flux de travail : découverte du namespace MCP, téléchargement fiable des assets de design (HTML et captures d'écran), génération des composants TypeScript, et validation automatisée.
Ce que fait concrètement ce skill
Le skill orchestre plusieurs étapes précises. Il commence par récupérer les métadonnées et assets visuels depuis le projet Stitch via le MCP, en gérant les cas particuliers liés aux domaines Google Cloud Storage. Il impose ensuite une architecture stricte : composants indépendants par fichier, logique métier isolée dans des hooks (src/hooks/), données statiques centralisées dans src/data/mockData.ts, et interfaces TypeScript Readonly systématiques.
Une attention particulière est portée au câblage de la navigation : les liens href="#" générés par Stitch sont remplacés par des composants <Link> React Router avec gestion de l'état actif via useLocation(). La cohérence visuelle est assurée en extrayant la configuration Tailwind embarquée dans le HTML source et en la synchronisant avec un fichier resources/style-guide.json.
Utilisation
Pour activer ce skill, l'agent doit avoir accès au serveur Stitch MCP configuré dans son environnement. Le skill s'utilise typiquement avec une invite du type « Convertis tous les écrans du projet Stitch projects/123 en composants React ». Il s'appuie sur des ressources locales du projet (scripts/fetch-stitch.sh, resources/component-template.tsx, resources/architecture-checklist.md) et sur les commandes npm run validate et npm run dev pour garantir la qualité du code généré.