Stitch vers Tableau de bord React + Vite

Tu es un ingénieur frontend construisant des tableaux de bord riches en données à partir d'écrans Stitch. Stack cible : React 18, Vite, TypeScript, TanStack Query, React Router, et optionnel ethers v6 ou viem pour les lectures on-chain.

Prérequis

Stitch MCP configuré (guide de configuration)
Un fichier DESIGN.md du projet (voir la skill design-md) pour la fidélité des tokens
Scaffold Vite + React + TypeScript (npm create vite@latest)

Flux de travail

Découvrir le préfixe MCP — exécute list_tools, note le préfixe Stitch (ex. stitch:).
Récupérer l'écran — [prefix]:get_screen avec les IDs du projet et de l'écran.
Télécharger les assets — persiste le HTML/screenshot sous .stitch/designs/{screen}.html et .png.
Lire DESIGN.md — mappe colors.*, typography.*, spacing.* aux variables CSS dans src/index.css.
Générer les composants — divise en src/components/, src/pages/, src/hooks/.
Connecter les données — utilise TanStack Query pour les récupérations asynchrones ; garde les composants de présentation purs.

Mappage HTML → React

Motif	Implémentation
Grille layout / flex	Utilitaires Tailwind ou CSS modules alignés aux tokens spacing de DESIGN.md
Cartes / panneaux	`<section>` avec border-radius tokenisée et fallbacks d'élévation pour forced-colors
Tableaux	Sémantique `<table>` ou TanStack Table ; jamais de grilles div-only pour les données tabulaires
Boutons	`<button type="button">` avec anneau focus visible (préserve le défaut du navigateur sauf si DESIGN.md définit des tokens focus)
Formulaires	`<label htmlFor>` + `<input id>` ; associe les erreurs avec `aria-describedby`
Chargement	Composants skeleton ; `aria-busy` sur les conteneurs pendant les récupérations
Wallet connect	Isole dans `WalletProvider` ; n'embarque jamais de clés privées dans le code généré

Intégration DESIGN.md

/* src/index.css — exemple de pont de tokens */
:root {
  --color-primary: /* from DESIGN.md colors.primary */;
  --font-body: /* typography.body-md.fontFamily */;
}

Exécute le linter design.md localement avant de livrer l'UI :

npx @google/design.md lint DESIGN.md

Conventions tableau de bord Web3

Appels de contrats en lecture seule via useReadContract (viem/wagmi) ou ethers Contract + TanStack Query queryFn.
Formate les montants de tokens avec formatUnits ; affiche le nom du réseau et l'ID de chaîne dans le pied de page des paramètres.
Expose les erreurs de transaction en langage clair ; crée un lien vers l'explorateur de bloc quand txHash existe.
Flux sensibles au gaz : regroupe les lectures, évite les eth_call redondants dans les boucles de rendu.

Structure des fichiers

src/
├── components/     # UI de présentation depuis Stitch
├── pages/          # Écrans au niveau des routes
├── hooks/          # Wrappers useQuery, hooks wallet
├── lib/            # Helpers ABI, formatters
└── styles/         # Variables CSS des tokens

Checklist qualité

[ ] WCAG 2.2 AA : le contraste des paires de composants de DESIGN.md passe le linter
[ ] Navigable au clavier : l'ordre du focus correspond à l'ordre visuel
[ ] Responsive : teste aux largeurs 375px et 1280px
[ ] Aucun secret dans le repo : URLs RPC depuis env (préfixe VITE_* uniquement pour les endpoints publics)
[ ] TypeScript strict : pas de any sur les ABIs de contrats

Remarque sur la documentation Stitch

En suivant les liens sur stitch.withgoogle.com/docs, utilise l'URL complète https://stitch.withgoogle.com/docs/... si la navigation relative redirige incorrectement.

react-vite-dashboard