react-vite-dashboardpar Google Labs

React Vite Dashboard Skill.

Un skill pour Claude Code et Codex destiné à la conception d'interfaces : convertit les designs Stitch en tableaux de bord React + Vite avec TanStack Query.

Web et UI
Code UI

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

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

--- name: react-vite-dashboard description: Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/viem). --- ## Prerequisites ## Workflow ## HTML → React mapping ## DESIGN.md integration ## Web3 dashboard conventions ## File structure

Matière préliminaire et titres de section lus depuis le fichier source le 14/09/2026 · 3 656 caractères au total

01 Ce qu'il fait

Ce que fait le skill react-vite-dashboard 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

Un skill de build pour les ingénieurs frontend convertissant des écrans Stitch en tableaux de bord denses en données sur React 18, Vite, TypeScript, TanStack Query et React Router, avec ethers v6 ou viem en option pour les lectures on-chain.

Son workflow se déroule en six étapes : découvrir le préfixe MCP de Stitch, récupérer l'écran, conserver le HTML et la capture d'écran sous .stitch/designs/, lire DESIGN.md et mapper les couleurs, la typographie et les espacements sur des variables CSS dans src/index.css, générer les composants et les pages, puis connecter les données via TanStack Query en gardant les composants de présentation purs. Un tableau de correspondance fixe le comportement pour les tableaux, boutons, formulaires, chargement et connexion de wallet, et le fichier se termine par une checklist de qualité WCAG 2.2 AA.

Ce qu'il produit

Un tableau de bord React + Vite de production construit à partir de l'écran Stitch, utilisant TanStack Query pour sa couche de données.
Copies locales du design source conservées dans le dépôt sous forme de .stitch/designs/{screen}.html et d'une capture d'écran .png correspondante.
Une arborescence source séparée par responsabilité, avec hooks contenant les wrappers useQuery et les hooks de wallet, plus lib pour les helpers ABI et les formatters.

Voir l'exemple de prompt ↗

Fonctionnement

01
Découvrir le préfixe MCP
Exécutez d'abord list_tools et notez le préfixe Stitch sous lequel les outils sont exposés, car chaque appel ultérieur est construit à partir de celui-ci.
02
Récupérer l'écran
Appelez l'outil get_screen sur le préfixe découvert, en passant à la fois l'ID du projet Stitch et l'ID de l'écran.
03
Faire le pont avec les tokens DESIGN.md
Lisez le fichier DESIGN.md du projet et traduisez ses entrées de couleur, typographie et espacement en variables CSS dans src/index.css.
04
Diviser l'interface générée par rôle
Le code généré aboutit dans src/components, src/pages et src/hooks plutôt que dans un seul fichier plat.
05
Faire circuler les données via TanStack Query
Les requêtes asynchrones passent par TanStack Query afin que les composants de présentation construits à partir de l'écran Stitch restent purs.

02 Trouvez celui qui vous convient

Quand utiliser le skill react-vite-dashboard

Utilisez le skill react-vite-dashboard dans Claude Code ou Codex lorsque le travail est une conception UI de ce type. L'adéquation et les limites ci-dessous sont tirées du fichier du skill lui-même.

Bon choix

Transformer les écrans Stitch en interfaces de tableau de bord riches en données plutôt qu'en pages marketing, avec de nombreux composants par écran.
Front-ends Web3 nécessitant des lectures on-chain via ethers v6 ou viem, en complément du reste de la couche de données du tableau de bord.
Équipes dont le design system vit déjà dans un DESIGN.md et qui ont besoin que l'UI générée reste fidèle à ces tokens.

Connaître les limites

Cela suppose que Stitch MCP est déjà configuré ; le fichier ne renvoie vers le guide de configuration externe que si ce n'est pas le cas.
Le travail on-chain se limite aux appels de contrat en lecture seule ; les flux de signature ou d'écriture ne font pas partie de ce que décrit le skill.

Quoi fournir

NécessiteGoogle Stitch — nommé dans le SKILL.md comme requis.
EntréeStitch MCP configuré (guide de configuration)
EntréeUn fichier DESIGN.md de projet (voir le skill design-md) pour la fidélité des tokens
EntréeÉchafaudage Vite + React + TypeScript (npm create vite@latest)

03 Dans le skill

Règles que le skill react-vite-dashboard donne à Claude Code et Codex

7 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.

Les tableaux restent sémantiques
Les données tabulaires doivent utiliser un véritable élément table ou TanStack Table ; les grilles composées uniquement de div en sont explicitement exclues.
Le code de wallet est isolé et sans clé
La connexion au wallet se trouve à l'intérieur d'un WalletProvider, et le code généré ne doit jamais intégrer de clés privées.
Étiquetez chaque champ et liez-lui ses erreurs
Les formulaires associent label htmlFor à input id, et les erreurs de validation sont liées via aria-describedby plutôt qu'affichées séparément.
Conservez l'anneau de focus par défaut sur les boutons
Les boutons sont de type="button" avec un anneau de focus visible, et le comportement par défaut du navigateur est conservé sauf si DESIGN.md définit des tokens de focus.
Signalez l'état de chargement de façon programmatique
Les écrans en cours de chargement utilisent des composants skeleton, avec aria-busy défini sur les conteneurs pendant que la requête est en cours.
Regroupez les lectures dans les flux sensibles au gaz
Les lectures doivent être regroupées, et aucune requête eth_call redondante ne doit être émise depuis des boucles de rendu.
Aucun secret dans le dépôt
Les URL RPC proviennent de variables d'environnement, et le préfixe VITE_ n'est réservé qu'aux points d'accès publics.

04 Mettez-le en pratique

Installer react-vite-dashboard 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 react-vite-dashboard à 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 react-vite-dashboard

Forme générique de la CLI skills pour plugins/stitch-build/skills/react-vite-dashboard/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

Turn the Stitch screen [screen ID] in project [project ID] into a React + Vite dashboard page. Pull the numbers through the TanStack Query hooks in src/hooks instead of fetching in the component, and bridge the tokens from DESIGN.md into src/index.css so the colors and spacing match. Add a read-only balance card for [token contract] that shows the network name and chain ID in the settings footer.

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 linter design.md sur DESIGN.md localement avant de livrer une quelconque UI.
Le contraste doit respecter la norme WCAG 2.2 AA pour les paires de composants définies dans DESIGN.md, ce qui doit être vérifié par le linter.
La navigation au clavier doit fonctionner, avec un ordre de focus correspondant à l'ordre visuel du tableau de bord.
Testez la mise en page à des largeurs de 375px et 1280px.
TypeScript s'exécute en mode strict et les ABI de contrat ne doivent pas être typées en any.

Dans OpenDesign, importez react-vite-dashboard 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-vite-dashboard/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 Snapshot GitHub pris le 14/09/2026 pour l'ensemble du dépôt google-labs-code/stitch-skills, qui contient 12 compétences dans ce catalogue. Ce n'est ni une note ni un nombre d'utilisations pour react-vite-dashboard.
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

PrérequisStitch MCP, un fichier DESIGN.md, et une structure Vite React TypeScript
WorkflowSix étapes, de la découverte du préfixe MCP jusqu'à la génération des composants et le câblage des données
Correspondance HTML → ReactTableau convertissant mise en page, cartes, tableaux, boutons, formulaires, chargement et connexion de portefeuille en balisage
Intégration DESIGN.mdPont de variables CSS à partir des tokens de DESIGN.md ainsi que la commande de lint design.md
Conventions pour tableaux de bord Web3Appels de contrat en lecture seule, montants via formatUnits, erreurs de transaction en langage clair, lectures groupées
Structure des fichiersCinq dossiers source pour les composants, les pages, les hooks, la lib et les styles
Liste de contrôle qualitéCinq vérifications couvrant WCAG 2.2 AA, l'ordre du clavier, les points de rupture, les secrets et les types stricts
Remarque sur la documentation StitchUtilisez des URL absolues stitch.withgoogle.com lorsque les liens de documentation relatifs redirigent de manière incorrecte

Description du skill lui-même

« Convertit les designs Stitch en tableaux de bord React + Vite de production avec TanStack Query, tokens accessibles depuis DESIGN.md et patterns Web3-ready (ethers/viem). »

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

06 Avant d'installer

Questions sur le Skill react-vite-dashboard

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

Dois-je utiliser Tailwind pour la mise en page ?

Non. Le tableau de correspondance permet d'utiliser soit les utilitaires Tailwind, soit des modules CSS, à condition que l'espacement respecte les tokens définis dans DESIGN.md.

Ce skill gère-t-il l'écriture vers un contrat ?

Les conventions qu'il définit concernent les lectures et la présentation des résultats : les erreurs de transaction doivent être expliquées en langage clair et liées à un explorateur de blocs lorsqu'un txHash existe. Aucun flux de signature ou d'écriture n'est décrit.

Y a-t-il quelque chose d'inhabituel concernant les liens de documentation Stitch ?

Lorsque vous suivez des liens sur stitch.withgoogle.com/docs, utilisez l'URL complète https://stitch.withgoogle.com/docs/..., car la navigation relative peut rediriger de manière incorrecte.

React Vite Dashboard

Exécutez react-vite-dashboard sur une vraie tâche de conception UI.

Téléchargez OpenDesign, importez react-vite-dashboard depuis son lien SKILL.md, collez l'invite ci-dessus et lisez le plan avant le résultat.

Télécharger OpenDesign Parcourir tous les skills