react-vite-dashboarddi Google Labs

React Vite Dashboard Skill.

Una skill Claude Code e Codex per la progettazione UI: converte i design Stitch in dashboard React + Vite con TanStack Query.

Web & UI
Codice UI

Scarica OpenDesign Guida all'uso

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

Front matter e intestazioni di sezione letti dal file upstream il 14/09/2026 · 3.656 caratteri in totale

01 Cosa fa

Cosa Fa lo Skill react-vite-dashboard in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Uno skill di build per frontend engineer che converte le schermate Stitch in dashboard ad alta densità di dati su React 18, Vite, TypeScript, TanStack Query e React Router, con ethers v6 o viem opzionali per letture on-chain.

Il suo workflow si articola in sei passaggi: individuare il prefisso MCP di Stitch, recuperare la schermata, salvare l'HTML e lo screenshot in .stitch/designs/, leggere DESIGN.md e mappare colori, tipografia e spaziatura sulle variabili CSS in src/index.css, generare componenti e pagine, quindi collegare i dati tramite TanStack Query mantenendo puri i componenti di presentazione. Una tabella di mapping definisce il comportamento per tabelle, pulsanti, form, caricamento e connessione wallet, e il file si chiude con una checklist di qualità WCAG 2.2 AA.

Che cosa produce

Una dashboard React + Vite pronta per la produzione costruita a partire dalla schermata Stitch, che usa TanStack Query come livello dati.
Copie locali del design di origine conservate nel repo come .stitch/designs/{screen}.html e uno screenshot .png corrispondente.
Un albero di file separato per responsabilità, con hooks che contengono i wrapper useQuery e i wallet hook, oltre a lib per gli helper ABI e i formatter.

Vedi l'esempio di prompt ↗

Come funziona

01
Individuare il Prefisso MCP
Eseguire prima list_tools e annotare il prefisso Stitch sotto cui gli strumenti sono esposti, poiché ogni chiamata successiva viene costruita a partire da esso.
02
Recuperare la Schermata
Chiamare lo strumento get_screen sul prefisso individuato, passando sia l'ID del progetto Stitch che l'ID della schermata.
03
Collegare i Token di DESIGN.md
Leggere il DESIGN.md del progetto e tradurre le voci di colore, tipografia e spaziatura in variabili CSS all'interno di src/index.css.
04
Suddividere la UI Generata per Ruolo
Il codice generato finisce in src/components, src/pages e src/hooks invece che in un unico file monolitico.
05
Collega i dati tramite TanStack Query
I fetch asincroni passano attraverso TanStack Query, così i componenti presentazionali costruiti a partire dalla schermata Stitch restano puri.

02 Trova la tua applicazione

Quando Usare lo Skill react-vite-dashboard

Utilizzare lo skill react-vite-dashboard in Claude Code o Codex quando il lavoro è design UI di questo tipo. Ambito e limiti di seguito sono presi dal file dello skill stesso.

Buona applicazione

Trasformare le schermate Stitch in interfacce di dashboard ricche di dati piuttosto che in pagine marketing, con molti componenti per schermata.
Front end Web3 che richiedono letture on-chain tramite ethers v6 o viem insieme al resto del livello dati della dashboard.
Team il cui design system vive già in un DESIGN.md e che necessitano che la UI generata resti fedele a quei token.

Conosci i limiti

Presuppone che Stitch MCP sia già configurato; il file rimanda alla guida di configurazione esterna solo se non lo è.
Il lavoro on-chain è limitato a chiamate di contratto in sola lettura, quindi i flussi di firma o scrittura non sono descritti dallo skill.

Cosa fornire

RichiedeGoogle Stitch — indicato nel file SKILL.md come necessario.
InputStitch MCP configurato (guida al setup)
InputUn DESIGN.md di progetto (vedi lo skill design-md) per fedeltà ai token
InputScaffold Vite + React + TypeScript (npm create vite@latest)

03 Dentro la skill

Le Regole Che lo Skill react-vite-dashboard Dà a Claude Code e Codex

7 istruzioni concrete, valori predefiniti e limiti che SKILL.md definisce per l'agente — la parte del file che cambia il risultato.

Le Tabelle Restano Semantiche
I dati tabellari devono usare un vero elemento table o TanStack Table; le griglie fatte solo di div sono esplicitamente escluse.
Il Codice del Wallet È Isolato e Privo di Chiavi
La connessione del wallet vive dentro un WalletProvider, e il codice generato non deve mai includere chiavi private.
Etichetta Ogni Input e Collega gli Errori a Esso
I form abbinano label htmlFor con input id, e gli errori di validazione sono associati tramite aria-describedby piuttosto che mostrati slegati.
Mantieni l'Anello di Focus Predefinito sui Bottoni
I bottoni sono type="button" con un anello di focus visibile, e il default del browser viene preservato a meno che DESIGN.md definisca dei token di focus.
Segnala lo Stato di Caricamento in Modo Programmatico
Le schermate in fase di fetch usano componenti skeleton, con aria-busy impostato sui container mentre la richiesta è in corso.
Raggruppa le Letture nei Flussi Sensibili al Gas
Le letture vanno raggruppate e non devono essere emesse richieste eth_call ridondanti dai render loop.
Nessun Segreto nel Repository
Gli URL RPC provengono da variabili d'ambiente, e il prefisso VITE_ è riservato solo agli endpoint pubblici.

04 Mettila al lavoro

Installa react-vite-dashboard in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi react-vite-dashboard a Claude Code, Codex o al Tuo Agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

Terminal

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

Forma generica della CLI skills per plugins/stitch-build/skills/react-vite-dashboard/SKILL.md; il repository potrebbe documentare un proprio percorso.

Assegna alla skill un primo compito di progettazione UI

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

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.

Fonte: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

Esegui il linter di design.md su DESIGN.md in locale prima di pubblicare qualsiasi UI.
Il contrasto deve rispettare lo standard WCAG 2.2 AA per le coppie di componenti definite in DESIGN.md, verificato dal superamento del linter.
La navigazione da tastiera deve funzionare, con l'ordine di focus che corrisponde all'ordine visivo della dashboard.
Testate il layout a larghezze di 375px e 1280px.
TypeScript viene eseguito in modalità strict e gli ABI dei contratti non devono essere tipizzati come any.

In OpenDesign importate react-vite-dashboard dal suo link SKILL.md: Plugins → Add → Skill → Import from link, poi selezionatelo nella barra superiore.

Scarica OpenDesign Leggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author: Google Labs
Repository: github.com/google-labs-code/stitch-skills Branch main
File della skill: plugins/stitch-build/skills/react-vite-dashboard/SKILL.md Checksum del contenuto registrato alla verifica; commit 0337446
License: Apache-2.0 Da LICENSE.
Stelle del repository: 8.304 Snapshot GitHub del 2026-09-14 per l'intero repository google-labs-code/stitch-skills, che contiene 12 skill in questo catalogo. Non è una valutazione né un conteggio di utilizzo per react-vite-dashboard.
Verificato da OpenDesign: 14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

PrerequisitiStitch MCP, un file DESIGN.md e uno scaffold Vite React TypeScript
WorkflowSei passaggi, dalla scoperta del prefisso MCP alla generazione dei componenti e al collegamento dei dati
Mappatura HTML → ReactTabella che convert layout, card, tabelle, pulsanti, form, stati di caricamento e connessione wallet in markup
Integrazione con DESIGN.mdPonte di variabili CSS a partire dai token di DESIGN.md, più il comando di lint design.md
Convenzioni per dashboard Web3Chiamate a contratti in sola lettura, importi con formatUnits, errori di transazione in linguaggio semplice, letture raggruppate
Struttura dei fileCinque cartelle sorgente per componenti, pagine, hook, lib e stili
Checklist di qualitàCinque controlli che riguardano WCAG 2.2 AA, ordine di tabulazione, breakpoint, segreti e tipi strict
Nota sulla documentazione StitchUsate URL assoluti stitch.withgoogle.com quando i link relativi alla documentazione reindirizzano in modo errato

Descrizione della skill

Converte i design Stitch in dashboard React + Vite pronte per la produzione con TanStack Query, token accessibili da DESIGN.md e pattern Web3-ready (ethers/viem).

Descrizione dal front-matter di SKILL.md. Il file completo è di circa 3.656 caratteri. Leggi il file completo su GitHub.

06 Prima di installare

Domande sullo skill react-vite-dashboard

Le risposte provengono dal SKILL.md letto il 2026-09-14, non da un'esecuzione registrata.

Devo usare Tailwind per il layout?

No. La tabella di mappatura consente sia utility Tailwind sia moduli CSS, purché la spaziatura segua i token definiti in DESIGN.md.

Questo skill gestisce la scrittura su un contratto?

Le convenzioni descritte riguardano le letture e la presentazione dei risultati: gli errori di transazione devono essere spiegati in linguaggio semplice e collegati a un block explorer quando esiste un txHash. Non viene descritto nessun flusso di firma o scrittura.

C'è qualcosa di particolare nei link alla documentazione di Stitch?

Quando seguite i link su stitch.withgoogle.com/docs, usate l'URL completo https://stitch.withgoogle.com/docs/..., perché la navigazione relativa può reindirizzare in modo errato.

React Vite Dashboard

Esegui react-vite-dashboard su un task di design UI reale.

Scarica OpenDesign, importa react-vite-dashboard dal suo link SKILL.md, incolla il prompt qui sopra e leggi il piano prima del risultato.

Scarica OpenDesign Esplora tutte le skill

Terminale

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