stitch::react-componentspor Google Labs

Stitch React Components Skill.

Uma skill para Claude Code e Codex focada em design de UI: converte ou sincroniza designs Stitch em componentes React + Vite modulares.

Web & UI
Código de UI

Baixar OpenDesign Ver guia de 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 títulos de seção lidos do arquivo upstream em 14/09/2026 · 8.725 caracteres no total

01 O que faz

O que a skill stitch::react-components 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

Essa skill transforma um projeto Stitch em um front end React e Vite modular, ou sincroniza componentes React existentes com os designs mais recentes do Stitch. É indicada para engenheiros de frontend que trabalham a partir de telas do Stitch: o agente encontra o prefixo Stitch MCP com list_tools, extrai todas as telas com get_screen, faz o download de HTML e capturas de tela através de scripts/fetch-stitch.sh, extrai os tokens de tailwind.config em resources/style-guide.json, e então constrói componentes, hooks e dados fictícios que a validação AST verifica.

Quatro fases com portões garantem essa ordem, e npm run validate impõe interfaces Readonly Props, tokens de tema em vez de valores hex, e nenhum arquivo de página monolítico.

O que ele produz

Recursos de design baixados em .stitch/designs/{page}.html e .stitch/designs/{page}.png para cada tela.
Um .stitch/metadata.json contendo projectId, title, deviceType, um mapa de screens e um campo Last Sync Time.
Um resources/style-guide.json sobrescrito, contendo os tokens de cor, fonte, espaçamento, raio e tipografia do projeto atual.
Componentes React em src/components, hooks em src/hooks, dados fictícios em src/data/mockData.ts, e um ponto de entrada atualizado que os renderiza.

Veja o exemplo de prompt ↗

Como funciona

01
Encontre o Namespace do Stitch
Execute list_tools para descobrir o prefixo do MCP e reutilize esse prefixo em toda chamada posterior ao Stitch.
02
Extraia os Metadados de Cada Tela
Chame get_screen para cada tela do projeto para obter o JSON de design e suas URLs de download, sem deixar nenhuma tela de fora.
03
Faça o Download Através do Script
As ferramentas internas de fetch podem falhar ao acessar o Google Cloud Storage, então os downloads passam pelo script bash fornecido, que trata redirecionamentos e handshakes de segurança.
04
Extraia os Tokens de Design
Abra cada arquivo HTML baixado e leia o objeto tailwind.config no bloco de script do head para obter cores, fontes, espaçamento, raio e tipografia.
05
Elabore os Componentes a Partir do Template
Use o template de componente fornecido como base e renomeie toda instância do nome de componente placeholder antes de conectar o ponto de entrada.

02 Encontre o ideal para você

Quando Usar o stitch::react-components Skill

Use o stitch::react-components skill no Claude Code ou Codex quando o trabalho for design de UI deste tipo. Adequação e limites abaixo são retirados do próprio arquivo do skill.

Boa Combinação

Você tem designs no Stitch e quer código React limpo e modular em vez de uma única página grande convertida.
Você já tem componentes React e precisa realinhá-los com os designs mais recentes do Stitch.
Você está montando um aplicativo com múltiplas páginas em que cada tela do Stitch é uma página independente com links placeholder que precisam de rotas reais e navegação funcional.
Você quer verificações automáticas de qualidade sobre o código gerado, em vez de conferir visualmente.

Conheça os Limites

Não pode ser executado parcialmente. O skill afirma que toda etapa é obrigatória e cada seção tem um portão que precisa ser satisfeito antes de avançar.
Você não pode entregar HTML de design já baixado e pular a fase de recuperação via MCP.
Ele não vai iniciar o servidor de desenvolvimento nem executar auditorias de navegador por conta própria.
Os componentes gerados não devem carregar cabeçalhos de licença do Google.

O Que Fornecer

Uma decisão sobre os arquivos de design locais existentesSe .stitch/designs/{page}.html e .png já estiverem presentes, você será perguntado se deseja baixá-los novamente ou reutilizá-los, e o skill não vai assumir por conta própria.
Permissão para as etapas de verificaçãoVocê é consultado antes que npm run dev seja iniciado ou uma auditoria visual no navegador comece.
As próprias restrições do projeto de destinoAs decisões de componentes devem seguir as necessidades do projeto específico em construção, em vez de um layout genérico.

03 Dentro da skill

Regras que a Skill stitch::react-components 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.

Todo Componente Precisa de uma Interface de Props
Cada arquivo de componente, incluindo páginas, deve declarar uma interface TypeScript Readonly com o nome do componente. O validador falha em arquivos que não têm uma.
Nenhum Arquivo de Página Monolítico
Padrões de UI reutilizáveis, como cards, badges, paginação e barras de busca, ganham cada um seu próprio arquivo em src/components; arquivos únicos contendo a página inteira são proibidos.
A Lógica Vive em Hooks
Handlers de eventos e lógica de negócio são movidos para hooks personalizados em src/hooks; por exemplo, paginação vai para usePagination e filtragem para useFilter.
Sem Conteúdo Fixo no Código
Todo texto estático, URLs de imagens e listas pertencem a src/data/mockData.ts, e não dentro dos arquivos de componentes.
Converta Hrefs de Espaço Reservado em Rotas
As telas do Stitch vêm com links href="#", e cada um deles deve se tornar um Link do React Router apontando para a rota correta.
Transforme a Logo em um Link para a Home
A logo ou título do TopAppBar deve ser um Link para a raiz, porque as barras de navegação inferiores do Stitch usam md:hidden e ficam invisíveis no desktop.
Tokens de Tema e Dark Mode em Tudo
As classes de cor vêm do guia de estilo sincronizado, em vez de códigos hexadecimais arbitrários, e cada classe de cor também tem uma variante dark:.
Pergunte Antes de Executar Qualquer Coisa
Scripts de validação, o servidor de desenvolvimento e auditorias automatizadas de navegador só são executados depois que o usuário der permissão.

04 Coloque em prática

Instale stitch::react-components no Claude Code ou Codex

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

Adicione stitch::react-components 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-components

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

Dê ao Skill uma Primeira Tarefa de Design de UI

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

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: 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 AST em cada arquivo .tsx em src/components e src/pages para relatar a validade dos componentes.
Execute tsc --noEmit para confirmar que o TypeScript compila antes de considerar o trabalho concluído.
Compare a saída com a checklist de arquitetura fornecida.
Visualize cada captura de tela baixada para confirmar a intenção de design e os detalhes de layout, em vez de assumir.
Após re-extrair os tokens, confirme se a cor primária, as fontes e o espaçamento no guia de estilo correspondem ao que você extraiu do HTML.
Clique pela navegação e certifique-se de que cada item de navegação leva à página correta.

No OpenDesign importe stitch::react-components a partir do link do 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-components/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 tirado em 2026-09-14 para todo o repositório google-labs-code/stitch-skills, que contém 12 skills neste catálogo. Não é uma avaliação ou contagem de uso para stitch::react-components.
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 redeDescubra o prefixo MCP, busque todas as telas, faça o download via script, auditore as capturas de tela e escreva os metadados.
Fase 2: Extração de estiloExtraia os tokens do tailwind.config a partir do head do HTML atual e sobrescreva o guia de estilo compartilhado.
Fase 3: Regras arquiteturaisArquivos modulares, hooks, dados simulados, interfaces Props, tokens de tema, roteamento e modo escuro.
Fase 4: Etapas de execuçãoInstale, construa a camada de dados, faça o rascunho a partir do template, conecte o aplicativo e, opcionalmente, valide com aprovação do usuário.
Solução de problemasCorreções para erros de busca, falhas de validação, links de navegação inativos e guias de estilo desatualizados.

A Descrição da Própria Skill

"- Converte designs Stitch em componentes modulares Vite e React, ou sincroniza/atualiza componentes React existentes para alinhá-los com os últimos designs Stitch, usando networking em nível de sistema e validação baseada em AST."

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

06 Antes de instalar

Perguntas sobre a Skill stitch::react-components

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

Já baixei esses designs uma vez. Isso vai sobrescrevê-los?

Não. Quando .stitch/designs/{page}.html e .stitch/designs/{page}.png já existem, ela pergunta se deseja atualizar a partir do projeto Stitch ou reutilizar os arquivos locais, e só faz o novo download após sua confirmação.

Stitch React Components

Execute stitch::react-components em uma Tarefa Real de Design de UI.

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

Baixar OpenDesign Ver todas as skills

Terminal

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

O que a skill stitch::react-components faz no Claude Code e no Codex

Nos termos do próprio skill

Como funciona

Quando Usar o stitch::react-components Skill

Boa Combinação

Conheça os Limites

O Que Fornecer

Regras que a Skill stitch::react-components dá ao Claude Code e ao Codex

Todo Componente Precisa de uma Interface de Props

Nenhum Arquivo de Página Monolítico

A Lógica Vive em Hooks

Sem Conteúdo Fixo no Código

Converta Hrefs de Espaço Reservado em Rotas

Transforme a Logo em um Link para a Home

Tokens de Tema e Dark Mode em Tudo

Pergunte Antes de Executar Qualquer Coisa