stitch::react-componentsdi Google Labs

Stitch React Components Skill.

Una skill per Claude Code e Codex per il design UI: converte o sincronizza i design Stitch in componenti React + Vite modulari.

Web & UI
Codice UI

Scarica OpenDesign Guida all'uso

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 e intestazioni di sezione letti dal file upstream il 14/09/2026 · 8.725 caratteri completi

01 Cosa fa

Cosa fa la Skill stitch::react-components 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

Questa skill trasforma un progetto Stitch in un front end React e Vite modulare, oppure sincronizza componenti React esistenti con gli ultimi design Stitch. È pensata per gli sviluppatori frontend che lavorano a partire dalle schermate Stitch: l'agente trova il prefisso Stitch MCP con list_tools, recupera ogni schermata con get_screen, scarica HTML e screenshot tramite scripts/fetch-stitch.sh, estrae i token di tailwind.config in resources/style-guide.json, quindi costruisce componenti, hook e dati mock che la validazione AST verifica.

Quattro fasi vincolate impongono quest'ordine, e npm run validate impone interfacce Readonly Props, token del tema invece di valori hex e l'assenza di file di pagina monolitici.

Che cosa produce

Asset di design scaricati in .stitch/designs/{page}.html e .stitch/designs/{page}.png per ogni schermata.
Un file .stitch/metadata.json contenente projectId, title, deviceType, una mappa screens e un campo Last Sync Time.
Un file resources/style-guide.json sovrascritto che riporta i token di colore, font, spaziatura, raggio e tipografia del progetto corrente.
Componenti React in src/components, hook in src/hooks, dati mock in src/data/mockData.ts e un entry point aggiornato che li esegue in rendering.

Vedi l'esempio di prompt ↗

Come funziona

01
Trova il Namespace di Stitch
Esegua list_tools per individuare il prefisso MCP, poi riutilizzi tale prefisso per ogni successiva chiamata a Stitch.
02
Recupera i Metadati per Ogni Schermata
Chiami get_screen per ciascuna schermata del progetto per ottenere il JSON di design e i relativi URL di download, senza saltare alcuna schermata.
03
Scarica Tramite lo Script
Gli strumenti di fetch interni possono non funzionare con Google Cloud Storage, quindi i download passano attraverso lo script bash fornito, che gestisce i redirect e gli handshake di sicurezza.
04
Estrai i Design Token
Apra ciascun file HTML scaricato e legga l'oggetto tailwind.config nel blocco di script dell'head per colori, font, spaziatura, raggio e tipografia.
05
Redigi i Componenti dal Template
Utilizzi il template di componente fornito come base e rinomini ogni istanza del nome di componente segnaposto prima di collegare l'entry point.

02 Trova la tua applicazione

Quando Usare la Skill stitch::react-components

Usa la skill stitch::react-components in Claude Code o Codex quando il lavoro è UI design di questo tipo. Idoneità e limiti qui sotto sono presi dal file della skill stessa.

Buona applicazione

Ha design Stitch e desidera codice React pulito e modulare, invece di un'unica pagina convertita in blocco.
Ha già componenti React e ha bisogno che siano riallineati con i design Stitch più recenti.
Sta assemblando un'app multi-pagina in cui ogni schermata Stitch è una pagina autonoma con link segnaposto che devono diventare rotte reali con navigazione funzionante.
Desidera controlli di qualità automatizzati sul codice generato invece di verificarlo a occhio.

Conosci i limiti

Non può essere eseguita parzialmente. La skill stabilisce che ogni passaggio è obbligatorio e ogni sezione contiene un gate che deve essere soddisfatto prima di procedere.
Non può fornirle HTML di design già scaricato saltando la fase di recupero via MCP.
Non avvierà il dev server né eseguirà audit del browser di propria iniziativa.
I componenti generati non devono contenere intestazioni di licenza Google.

Cosa fornire

Una decisione sui file di design locali esistentiSe .stitch/designs/{page}.html e .png sono già presenti, le viene chiesto se scaricarli di nuovo o riutilizzarli, e la skill non farà ipotesi.
Autorizzazione per i passaggi di verificaLe viene chiesto prima che npm run dev venga avviato o che inizi un audit visivo del browser.
I vincoli specifici del progetto targetLe decisioni sui componenti dovrebbero seguire le esigenze del progetto specifico in costruzione, invece di un layout generico.

03 Dentro la skill

Regole che la Skill stitch::react-components dà a Claude Code e Codex

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

Ogni Componente Richiede un'Interfaccia Props
Ogni file di componente, incluse le pagine, deve dichiarare un'interfaccia TypeScript Readonly con il nome del componente. Il validatore fa fallire i file che ne sono privi.
Nessun File di Pagina Monolitico
Pattern UI riutilizzabili come card, badge, paginazione e barre di ricerca ottengono ciascuno un proprio file sotto src/components; sono vietati i file unici che contengono l'intera pagina.
La Logica Vive negli Hook
I gestori di eventi e la logica di business si spostano in hook personalizzati sotto src/hooks, ad esempio la paginazione in usePagination e il filtraggio in useFilter.
Nessun Contenuto Hardcoded
Tutto il testo statico, gli URL delle immagini e gli elenchi appartengono a src/data/mockData.ts e non ai file dei componenti.
Converti gli Href Segnaposto in Route
Le schermate Stitch vengono fornite con link href="#", e ognuno di essi deve diventare un Link di React Router che punta alla route corretta.
Rendi il Logo un Link alla Home
Il logo o il titolo della TopAppBar deve essere un Link alla root, perché le barre di navigazione inferiori di Stitch usano md:hidden e sono invisibili su desktop.
Token del Tema e Dark Mode su Tutto
Le classi di colore provengono dalla guida di stile sincronizzata piuttosto che da codici hex arbitrari, e ogni classe di colore porta anche una variante dark:.
Chiedi Prima di Eseguire Qualsiasi Cosa
Gli script di validazione, il dev server e gli audit automatizzati del browser vengono eseguiti solo dopo che l'utente ha dato il permesso.

04 Mettila al lavoro

Installa stitch::react-components in Claude Code o Codex

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

Aggiungi stitch::react-components a Claude Code, Codex o il 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 stitch::react-components

Forma generica del CLI skills per plugins/stitch-build/skills/react-components/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

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.

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 validatore AST su ogni file .tsx in src/components e src/pages per segnalare la validità del componente.
Esegui tsc --noEmit per confermare che il TypeScript compili prima di considerare il lavoro terminato.
Confronta l'output con la checklist di architettura fornita.
Visualizza ogni screenshot scaricato per confermare l'intento di design e i dettagli del layout invece di darli per scontati.
Dopo aver ri-estratto i token, confermare che il colore primario, i font e la spaziatura nella guida di stile corrispondano a quanto estratto dall'HTML.
Clicca sulla navigazione e assicurati che ogni voce di navigazione porti alla pagina corretta.

In OpenDesign importa stitch::react-components dal suo link SKILL.md: Plugins → Add → Skill → Import from link, poi selezionalo 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-components/SKILL.md Checksum del contenuto registrato alla verifica; commit 0337446
License: Apache-2.0 Da LICENSE.
Stelle del repository: 8.304 Snapshot GitHub preso il 14-09-2026 per l'intero repository google-labs-code/stitch-skills, che contiene 12 skill in questo catalogo. Non è una valutazione o un conteggio di utilizzo per stitch::react-components.
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

Fase 1: recupero e networkingIndividua il prefisso MCP, recupera ogni schermata, scarica tramite script, verifica gli screenshot, scrivi i metadati.
Fase 2: estrazione dello stileEstrai i token di tailwind.config dall'head HTML corrente e sovrascrivi la guida di stile condivisa.
Fase 3: regole architetturaliFile modulari, hooks, dati mock, interfacce Props, token del tema, routing e dark mode.
Fase 4: passaggi di esecuzioneInstalla, costruisci il livello dati, crea una bozza a partire dal template, collega l'app, poi validazione opzionale approvata dall'utente.
Risoluzione dei problemiSoluzioni per errori di fetch, validazioni non riuscite, link di navigazione non funzionanti e guide di stile obsolete.

Descrizione della skill

"- Converte i design Stitch in componenti modulari Vite e React, o sincronizza/aggiorna i componenti React esistenti per allinearli agli ultimi design Stitch, usando networking a livello di sistema e validazione basata su AST."

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

06 Prima di installare

Domande sulla skill stitch::react-components

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

Ho già scaricato questi design una volta. Verranno sovrascritti?

No. Quando .stitch/designs/{page}.html e .stitch/designs/{page}.png esistono già, chiede se aggiornare dal progetto Stitch o riutilizzare i file locali, e riscarica solo dopo la tua conferma.

Stitch React Components

Esegui stitch::react-components su un Task di Design UI Reale.

Scarica OpenDesign, importa stitch::react-components 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 stitch::react-components

Cosa fa la Skill stitch::react-components in Claude Code e Codex

Nelle parole della skill

Come funziona

Quando Usare la Skill stitch::react-components

Buona applicazione

Conosci i limiti

Cosa fornire

Regole che la Skill stitch::react-components dà a Claude Code e Codex

Ogni Componente Richiede un'Interfaccia Props

Nessun File di Pagina Monolitico

La Logica Vive negli Hook

Nessun Contenuto Hardcoded

Converti gli Href Segnaposto in Route

Rendi il Logo un Link alla Home

Token del Tema e Dark Mode su Tutto

Chiedi Prima di Eseguire Qualsiasi Cosa