stitch::react-nativepor Google Labs

Stitch React Native Skill.

Uma skill de Claude Code e Codex para design de apps mobile: converte ou sincroniza designs HTML do Stitch em componentes React Native.

Mobile Apps
Código de UI

Baixar OpenDesign Ver guia de 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

Front matter e títulos de seção lidos do arquivo original em 14/09/2026 · 12.389 caracteres no total

01 O que faz

O Que a Skill stitch::react-native Faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Esta skill transforma designs web em HTML/CSS do Stitch em componentes React Native prontos para produção usando StyleSheet, e também pode sincronizar componentes nativos existentes de volta com os designs mais recentes do Stitch. Ela é executada em quatro fases controladas: baixar todas as telas com scripts/fetch-stitch.sh e auditar visualmente cada captura de tela, extrair os tokens do tailwind.config para src/theme.ts, mapear elementos HTML e CSS para primitivos do React Native seguindo regras arquiteturais estritas e, então, elaborar os componentes a partir de resources/component-template.tsx.

Os componentes seguem as pastas do Atomic Design em src/components/, a lógica fica em src/hooks/, o conteúdo em src/data/mockData.ts, e cada arquivo de componente exporta uma interface readonly [ComponentName]Props. A validação via npm run validate e tsc --noEmit é opcional e requer a permissão do usuário.

O que ele produz

src/theme.ts, um arquivo de tokens em TypeScript contendo as cores, o espaçamento e a tipografia extraídos do tailwind.config do design.
src/data/mockData.ts, contendo todo o texto estático, URLs de imagens e listas para que nenhum conteúdo fique fixo (hardcoded) nos componentes.
Hooks personalizados em src/hooks/ que absorvem manipuladores de eventos, chamadas de API e lógica de negócio, deixando os componentes apenas para renderização.
Um arquivo .stitch/metadata.json escrito dentro da pasta do app e espelhado na raiz do workspace.

Veja o exemplo de prompt ↗

Como funciona

01
Descobrir o Namespace MCP
Execute list_tools para encontrar o prefixo do Stitch MCP e depois reutilize esse prefixo em todas as chamadas posteriores da sessão.
02
Faça o Download Através do Script
Ferramentas internas de busca podem falhar em domínios do Google Cloud Storage, então o HTML e as capturas de tela são baixados via scripts/fetch-stitch.sh, que trata redirecionamentos e handshakes de segurança.
03
Avalie Cada Captura de Tela
Abra o PNG baixado para confirmar a intenção de design e os detalhes de layout, em vez de supor como o design se parece.
04
Extraia o Tema
Leia o objeto tailwind.config dentro de cada bloco de script no head do HTML para obter cores, fontes, espaçamento, raios e tipografia, e então grave-os em src/theme.ts como constantes TypeScript.
05
Elabore o Rascunho a Partir do Template
Comece cada componente a partir de resources/component-template.tsx e localize e substitua toda instância do nome de componente placeholder.
06
Registrar Metadados de Sincronização
Salve a configuração do projeto em .stitch/metadata.json com um campo Last Sync Time correspondente ao horário de execução da sincronização atual.

02 Encontre o ideal para você

Quando Usar o Skill stitch::react-native

Use o skill stitch::react-native no Claude Code ou Codex quando o trabalho for design de aplicativo mobile deste tipo. A adequação e os limites abaixo são retirados do próprio arquivo do skill.

Boa Combinação

Um app React Native existente cujos componentes se desalinharam e precisam ser realinhados com os designs mais recentes do Stitch.
Um projeto Stitch com várias telas que precisa de um NavigationContainer com um stack ou tab navigator conectado no App.tsx.
Um design cujas sombras precisam parecer corretas em ambas as plataformas, tratado com Platform.select para as props de sombra do iOS e elevation do Android.
Times que querem que o resultado seja verificado contra um checklist de arquitetura escrito antes de considerar o trabalho concluído.

Conheça os Limites

Designs que dependem de efeitos CSS de hover, transition ou animação: hover e transition não têm equivalente e animações pertencem ao react-native-reanimated.
Campos dropdown ou select do design web, já que o React Native não vem com um select embutido e precisa de um picker de terceiros ou modal customizado.
Expectativas de imagem web: um Image do React Native não tem tamanho intrínseco, então width e height ou um aspectRatio devem sempre ser fornecidos.

O Que Fornecer

O projeto Stitch e seu prefixo MCPO agente executa list_tools para encontrar o prefixo MCP do Stitch e o reutiliza em todas as chamadas get_screen e get_project.
O valor de largura da telaURLs de captura de tela precisam ter =w{width} anexado usando a largura dos metadados da tela, pois o CDN do Google, caso contrário, serve miniaturas de baixa resolução.
Consentimento para validação e execução do appÉ necessária permissão antes de iniciar o packager ou disparar auditorias visuais no simulador para verificar se o app renderiza corretamente em um dispositivo.

03 Dentro da skill

Regras que o skill stitch::react-native Dá ao Claude Code e ao Codex

8 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Sem Atalhos na Recuperação
A Fase 1 só conta como concluída quando todas as telas forem baixadas pelo script e auditadas visualmente; é proibido ler arquivos de design locais sem chamar o MCP get_screen primeiro.
Peça Confirmação Antes de Atualizar Designs
Se .stitch/designs/{page}.html e .png já existirem, o agente deve perguntar se deve atualizar a partir do projeto Stitch ou reutilizar os arquivos locais, e só baixar novamente após confirmação.
Sem Cores Brutas nos Componentes
Códigos hexadecimais de cor e strings rgba são proibidos nos arquivos de componentes; todo valor de cor, espaçamento e tamanho de fonte deve vir de src/theme.ts.
Exportar uma Interface de Props Readonly
Todo arquivo de componente, incluindo telas, deve exportar uma interface chamada [ComponentName]Props com modificadores readonly, ou a validação falha.
Safe Areas do Pacote Correto
Telas de nível superior usam SafeAreaView do react-native-safe-area-context, não o padrão fornecido pelo react-native.
Dividir em Arquivos de Atomic Design
Os componentes vão em src/components/atoms/, molecules/ e organisms/; colocar toda a UI em um único arquivo de página ou tela é proibido.
Deixe os Cabeçalhos do Google de Fora
Os componentes gerados seguem as convenções do projeto de destino e não devem conter cabeçalhos de licença do Google.
Permissão Antes de Testar
Scripts de validação, empacotadores e auditorias de simulador nunca são iniciados unilateralmente; o agente deve pedir permissão ao usuário primeiro.

04 Coloque em prática

Instalar stitch::react-native no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicionar stitch::react-native ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

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

Forma genérica da CLI skills para plugins/stitch-build/skills/react-native/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê à Skill uma Primeira Tarefa de Design de Aplicativo Mobile

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu material.

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: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Execute o validador em cada arquivo .tsx em components e screens para relatar a validade dos componentes.
Execute o compilador TypeScript em modo no-emit para confirmar que o projeto ainda compila.
Confirme que as cores e fontes em src/theme.ts realmente correspondem ao que saiu do design HTML.
Verifique que nenhum texto bruto fica fora de um componente Text, pois o React Native quebra nesse caso.

No OpenDesign importe stitch::react-native a partir do link do seu SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: Google Labs
Repository: github.com/google-labs-code/stitch-skills Branch main
Arquivo da skill: plugins/stitch-build/skills/react-native/SKILL.md Checksum de conteúdo registrado na verificação; commit 0337446
License: Apache-2.0 De LICENSE.
Estrelas do repositório: 8.304 Snapshot do GitHub capturado em 14/09/2026 para todo o repositório google-labs-code/stitch-skills, que contém 12 skills neste catálogo. Não é uma classificação ou contagem de uso para stitch::react-native.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

Fase 1: Recuperação e redeEncontre o prefixo MCP, busque cada tela, baixe HTML e capturas de tela por script, faça auditoria visual, salve os metadados.
Fase 2: Extração de temaExtraia os tokens de cor, fonte, espaçamento, raio e tipografia do tailwind.config para src/theme.ts.
Fase 3: Regras arquiteturais e mapeamento de HTMLMapeie tags HTML para primitivos, converta CSS para StyleSheet, siga as regras de Atomic Design, hooks, tema e acessibilidade.
Fase 4: Etapas de execuçãoInstale as dependências, construa o tema, os dados e os componentes a partir do template, conecte a navegação e, opcionalmente, valide com permissão.
Solução de problemasCorreções para erros de busca, falhas de validação, texto não encapsulado, dimensionamento de imagem e avisos de VirtualizedList.

A Descrição da Própria Skill

"Converte designs HTML do Stitch para componentes React Native, ou sincroniza/atualiza componentes nativos existentes para alinhá-los com os designs Stitch mais recentes, usando StyleSheet."

Descrição do front-matter do SKILL.md. O arquivo completo tem cerca de 12.389 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas Sobre a Skill stitch::react-native

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

Posso pular o Stitch MCP e simplesmente entregar os arquivos HTML locais?

Não. A Fase 1 exige que cada tela seja buscada por get_screen e baixada com scripts/fetch-stitch.sh antes de qualquer leitura, e ler diretamente o HTML de design local sem chamar get_screen primeiro é listado como um antipadrão.

Isso apenas monta telas novas, ou também pode atualizar um app que eu já tenho?

Faz ambos. Além de converter HTML novo do Stitch em componentes, a skill sincroniza e atualiza componentes nativos existentes para que correspondam aos designs mais recentes do Stitch.

Ela vai iniciar um simulador ou empacotador por conta própria para verificar o resultado?

Não por padrão. A verificação da Fase 4, as auditorias e os testes com simulador ou empacotador são opcionais, e o agente precisa obter sua permissão antes de executar scripts de validação, iniciar um empacotador ou iniciar auditorias de simulador.

Stitch React Native

Execute stitch::react-native em uma Tarefa Real de Design de App Mobile.

Baixe o OpenDesign, importe stitch::react-native a partir do link do SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills