stitch::react-nativedi Google Labs

Stitch React Native Skill.

Una skill per Claude Code e Codex per il design di app mobile: converte o sincronizza i design HTML di Stitch in componenti React Native.

Mobile Apps
Codice UI

Scarica OpenDesign Guida all'uso

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

--- name: stitch::react-native description: - Convert Stitch HTML designs to React Native components, or syncs/updates existing native components to align with the latest Stitch designs, using StyleSheet. --- ## Phase 1: Retrieval and networking ## Phase 2: Theme extraction ## Phase 3: Architectural rules and HTML mapping ## Phase 4: Execution steps

Intestazione e sezioni lette dal file originale il 14/09/2026 · 12.389 caratteri in totale

01 Cosa fa

Cosa fa la Skill stitch::react-native 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 i design web Stitch HTML/CSS in componenti React Native pronti per la produzione utilizzando StyleSheet, e può anche sincronizzare i componenti nativi esistenti con gli ultimi design Stitch. Funziona in quattro fasi vincolate: scaricare ogni schermata con scripts/fetch-stitch.sh e verificare visivamente ogni screenshot, estrarre i token di tailwind.config in src/theme.ts, mappare gli elementi HTML e il CSS sui primitivi React Native seguendo regole architetturali rigide, quindi redigere i componenti a partire da resources/component-template.tsx.

I componenti seguono le cartelle Atomic Design sotto src/components/, la logica risiede in src/hooks/, i contenuti in src/data/mockData.ts, e ogni file di componente esporta un'interfaccia readonly [ComponentName]Props. La validazione tramite npm run validate e tsc --noEmit è opzionale e richiede l'autorizzazione dell'utente.

Che cosa produce

src/theme.ts, un file di token TypeScript che contiene i colori, la spaziatura e la tipografia estratti dal tailwind.config del design.
src/data/mockData.ts, che contiene tutto il testo statico, gli URL delle immagini e gli elenchi, in modo che nessun contenuto sia hardcoded nei componenti.
Hook personalizzati sotto src/hooks/ che assorbono i gestori di eventi, le chiamate API e la logica di business, lasciando ai componenti solo il rendering.
Un file .stitch/metadata.json scritto all'interno della cartella dell'app e replicato nella radice del workspace.

Vedi l'esempio di prompt ↗

Come funziona

01
Scoprire il Namespace MCP
Eseguire list_tools per trovare il prefisso Stitch MCP, quindi riutilizzare quel prefisso per ogni chiamata successiva nella sessione.
02
Scarica Tramite lo Script
Gli strumenti di fetch interni possono fallire sui domini Google Cloud Storage, quindi l'HTML e gli screenshot vengono scaricati tramite scripts/fetch-stitch.sh, che gestisce i redirect e gli handshake di sicurezza.
03
Verificare Ogni Screenshot
Aprire il PNG scaricato per confermare l'intento del design e i dettagli di layout, senza supporre l'aspetto del design.
04
Estrarre il Tema
Leggere l'oggetto tailwind.config all'interno di ogni blocco script nell'head dell'HTML per colori, font, spaziatura, raggi e tipografia, quindi scriverli in src/theme.ts come costanti TypeScript.
05
Redigere una Bozza dal Template
Avviare ogni componente da resources/component-template.tsx e trovare e sostituire ogni occorrenza del nome del componente segnaposto.
06
Registrare i metadati di sincronizzazione
Salvare la configurazione del progetto in .stitch/metadata.json con un campo Last Sync Time corrispondente all'orario di esecuzione della sincronizzazione corrente.

02 Trova la tua applicazione

Quando Usare la Skill stitch::react-native

Usa la skill stitch::react-native in Claude Code o Codex quando il lavoro è di design per mobile app di questo tipo. Ambito e limiti qui sotto sono presi dal file della skill stessa.

Buona applicazione

Un'app React Native esistente i cui componenti si sono discostati e devono essere riportati in linea con i design Stitch più recenti.
Un progetto Stitch multi-schermata che necessita di un NavigationContainer con uno stack o tab navigator collegato in App.tsx.
Un design le cui ombre devono avere un aspetto corretto su entrambe le piattaforme, gestite con Platform.select per le proprietà shadow di iOS e elevation di Android.
Team che desiderano che il risultato venga verificato rispetto a una checklist di architettura scritta prima di considerare il lavoro concluso.

Conosci i limiti

Design che si basano su effetti CSS hover, transition o animation: hover e transition non hanno equivalenti e le animazioni appartengono a react-native-reanimated.
Campi dropdown o select dal design web, poiché React Native non include un select integrato e richiede un picker di terze parti o una modale personalizzata.
Aspettative delle immagini web: un'Image di React Native non ha una dimensione intrinseca, quindi è sempre necessario specificare width e height oppure un aspectRatio.

Cosa fornire

Il progetto Stitch e il suo prefisso MCPL'agente esegue list_tools per trovare il prefisso MCP di Stitch e lo riutilizza per tutte le chiamate get_screen e get_project.
Il valore width della schermataAgli URL degli screenshot occorre aggiungere =w{width} usando la width dai metadati della schermata, perché altrimenti il CDN di Google serve miniature a bassa risoluzione.
Consenso per la validazione e l'esecuzione dell'appÈ necessaria l'autorizzazione prima di avviare il packager o lanciare audit visivi del simulatore per verificare che l'app venga renderizzata su un dispositivo.

03 Dentro la skill

Regole che la Skill stitch::react-native impone 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.

Nessuna scorciatoia nel recupero
La Fase 1 si considera completa solo quando tutte le schermate sono state scaricate tramite lo script e verificate visivamente; è vietato leggere i file di design locali senza aver prima chiamato get_screen tramite MCP.
Chiedere prima di aggiornare i design
Se .stitch/designs/{page}.html e .png esistono già, l'agente deve chiedere se aggiornare dal progetto Stitch o riutilizzare i file locali, e riscaricare solo dopo confermare.
Nessun colore grezzo nei componenti
I codici colore hex e le stringhe rgba sono vietati nei file dei componenti; ogni valore di colore, spaziatura e dimensione del font deve provenire da src/theme.ts.
Esportare un'interfaccia Props readonly
Ogni file di componente, incluse le schermate, deve esportare un'interfaccia denominata [ComponentName]Props con modificatori readonly, altrimenti la validazione fallisce.
Safe area dal pacchetto giusto
Le schermate di primo livello si racchiudono in SafeAreaView da react-native-safe-area-context, non in quella predefinita fornita da react-native.
Suddividere in file Atomic Design
I componenti vanno in src/components/atoms/, molecules/ e organisms/; inserire l'intera UI in un unico file di pagina o schermata è vietato.
Omettere le intestazioni Google
I componenti generati seguono le convenzioni del progetto di destinazione e non devono contenere intestazioni di licenza Google.
Permesso prima dei test
Script di validazione, packager e audit del simulatore non vengono mai avviati unilateralmente; l'agente deve prima chiedere il permesso all'utente.

04 Mettila al lavoro

Installa stitch::react-native 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-native a Claude Code, Codex o il Tuo Agent

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

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

Dai Allo Skill Un Primo Task Di Design Di App Mobile

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

Starter prompt

Convert the Stitch designs in project [project ID] to React Native. Download every screen with scripts/fetch-stitch.sh, visually audit the screenshots, extract the tailwind.config tokens into src/theme.ts, and build the components from resources/component-template.tsx using the atoms, molecules and organisms folders. Please hold off on starting the packager or a simulator audit for now.

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:

Eseguire il validatore su ogni file .tsx in components e screens per segnalare la validità dei componenti.
Eseguire il compilatore TypeScript in modalità no-emit per confermare che il progetto compili ancora.
Confermare che i colori e i font in src/theme.ts corrispondano davvero a quanto risultante dal design HTML.
Verificare che nessun testo grezzo si trovi fuori da un componente Text, perché React Native va in crash in tal caso.

In OpenDesign importate stitch::react-native dal suo link SKILL.md: Plugins → Add → Skill → Import from link, quindi 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-native/SKILL.md Checksum del contenuto registrato alla verifica; commit 0337446
License: Apache-2.0 Da LICENSE.
Stelle del repository: 8.304 Snapshot GitHub acquisito il 14-09-2026 per l'intero repository google-labs-code/stitch-skills, che contiene 12 skill in questo catalogo. Non è un punteggio o un conteggio di utilizzo per stitch::react-native.
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 reteTrovare il prefisso MCP, recuperare ogni schermata, scaricare HTML e screenshot tramite script, effettuare un audit visivo, salvare i metadati.
Fase 2: Estrazione del temaEstrarre i token di colore, font, spaziatura, raggio e tipografia da tailwind.config in src/theme.ts.
Fase 3: Regole architetturali e mappatura HTMLMappare i tag HTML sui primitivi, convertire il CSS in StyleSheet, seguire le regole di Atomic Design, hook, tema e accessibilità.
Fase 4: Passaggi di esecuzioneInstallare le dipendenze, costruire tema, dati e componenti dal template, collegare la navigazione, quindi eventualmente validare con permesso.
Risoluzione dei problemiCorrezioni per errori di fetch, fallimenti di validazione, testo non racchiuso, dimensionamento delle immagini e avvisi VirtualizedList.

Descrizione della skill

"Converte i design HTML Stitch in componenti React Native, oppure sincronizza/aggiorna i componenti nativi esistenti per allinearli agli ultimi design Stitch, utilizzando StyleSheet."

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

06 Prima di installare

Domande sulla skill stitch::react-native

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

Posso saltare Stitch MCP e fornirle direttamente i file HTML locali?

No. La Fase 1 richiede che ogni schermata venga recuperata tramite get_screen e scaricata con scripts/fetch-stitch.sh prima che qualcosa venga letto, e leggere direttamente l'HTML del design locale senza prima chiamare get_screen è elencato come un anti-pattern.

Questo crea solo l'impalcatura per schermate nuove, o può aggiornare un'app che ho già?

Fa entrambe le cose. Oltre a convertire nuovo HTML di Stitch in componenti, la skill sincronizza e aggiorna i componenti nativi esistenti in modo che corrispondano agli ultimi design di Stitch.

Avvierà un simulatore o un packager per proprio conto per verificare il risultato?

Non per impostazione predefinita. La verifica della Fase 4, gli audit e i test con simulatore o packager sono opzionali, e l'agente deve ottenere il vostro permesso prima di eseguire script di validazione, avviare un packager o iniziare audit del simulatore.

Stitch React Native

Esegui stitch::react-native su un task di design di app mobile reale.

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

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

Nelle parole della skill

Come funziona

Quando Usare la Skill stitch::react-native

Buona applicazione

Conosci i limiti

Cosa fornire

Regole che la Skill stitch::react-native impone a Claude Code e Codex

Nessuna scorciatoia nel recupero

Chiedere prima di aggiornare i design

Nessun colore grezzo nei componenti

Esportare un'interfaccia Props readonly

Safe area dal pacchetto giusto

Suddividere in file Atomic Design

Omettere le intestazioni Google

Permesso prima dei test