react-vite-dashboardpor Google Labs

React Vite Dashboard Skill.

Uma skill de Claude Code e Codex para design de UI: converte designs Stitch em dashboards React + Vite com TanStack Query.

Web & UI
Código de UI

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

Cabeçalho e títulos de seção lidos do arquivo original em 14/09/2026 · 3.656 caracteres no total

01 O que faz

O que o skill react-vite-dashboard 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

Um skill de build para engenheiros frontend que converte telas do Stitch em dashboards densos em dados sobre React 18, Vite, TypeScript, TanStack Query e React Router, com ethers v6 ou viem opcionais para leituras on-chain.

Seu workflow executa seis etapas: descobrir o prefixo MCP do Stitch, buscar a tela, persistir o HTML e o screenshot em .stitch/designs/, ler o DESIGN.md e mapear cores, tipografia e espaçamento para variáveis CSS em src/index.css, gerar componentes e páginas, e então conectar os dados via TanStack Query mantendo os componentes de apresentação puros. Uma tabela de mapeamento fixa o comportamento para tabelas, botões, formulários, carregamento e conexão de carteira, e o arquivo se encerra com uma checklist de qualidade WCAG 2.2 AA.

O que ele produz

Um dashboard React + Vite de produção construído a partir da tela do Stitch, usando TanStack Query como camada de dados.
Cópias locais do design de origem mantidas no repositório como .stitch/designs/{screen}.html e um screenshot .png correspondente.
Uma árvore de código-fonte separada por responsabilidade, com hooks contendo wrappers de useQuery e hooks de carteira, além de lib para helpers de ABI e formatadores.

Veja o exemplo de prompt ↗

Como funciona

01
Descobrir o Prefixo MCP
Execute list_tools primeiro e anote o prefixo do Stitch sob o qual as ferramentas são expostas, já que toda chamada posterior é construída a partir dele.
02
Buscar a Tela
Chame a ferramenta get_screen no prefixo descoberto, passando tanto o ID do projeto Stitch quanto o ID da tela.
03
Conectar os Tokens do DESIGN.md
Leia o DESIGN.md do projeto e traduza suas entradas de cor, tipografia e espaçamento em variáveis CSS dentro de src/index.css.
04
Dividir a UI Gerada por Papel
O código gerado é distribuído em src/components, src/pages e src/hooks em vez de um único arquivo plano.
05
Conecte os Dados via TanStack Query
As requisições assíncronas passam pelo TanStack Query, para que os componentes de apresentação construídos a partir da tela do Stitch permaneçam puros.

02 Encontre o ideal para você

Quando Usar o Skill react-vite-dashboard

Use a skill react-vite-dashboard no Claude Code ou Codex quando o trabalho for design de UI desse tipo. Adequação e limites abaixo são retirados do próprio arquivo da skill.

Boa Combinação

Transformar telas do Stitch em interfaces de dashboard ricas em dados em vez de páginas de marketing, com muitos componentes por tela.
Front ends Web3 que precisam de leituras on-chain via ethers v6 ou viem junto com o restante da camada de dados do dashboard.
Equipes cujo design system já vive em um DESIGN.md e que precisam que a UI gerada permaneça fiel a esses tokens.

Conheça os Limites

Assume-se que o Stitch MCP já esteja configurado; o arquivo só aponta para o guia de configuração externo se não estiver.
O trabalho on-chain se limita a chamadas de contrato somente leitura, então fluxos de assinatura ou escrita ficam fora do que a skill descreve.

O Que Fornecer

RequerGoogle Stitch — nomeado no SKILL.md como obrigatório.
EntradaStitch MCP configurado (guia de configuração)
EntradaUm arquivo DESIGN.md do projeto (veja a skill design-md) para fidelidade dos tokens
EntradaScaffold Vite + React + TypeScript (npm create vite@latest)

03 Dentro da skill

Regras que a Skill react-vite-dashboard Dá ao Claude Code e ao Codex

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

Tabelas Permanecem Semânticas
Dados tabulares devem usar um elemento table real ou o TanStack Table; grids feitas apenas com div são explicitamente descartadas para isso.
O Código da Wallet É Isolado e Livre de Chaves
A conexão da wallet fica dentro de um WalletProvider, e o código gerado nunca deve embutir chaves privadas.
Rotule Todo Input e Vincule os Erros a Ele
Os formulários pareiam label htmlFor com input id, e os erros de validação são associados via aria-describedby em vez de exibidos de forma solta.
Mantenha o Anel de Foco Padrão nos Botões
Os botões são type="button" com um anel de foco visível, e o padrão do navegador é preservado a menos que o DESIGN.md defina tokens de foco.
Sinalize o Estado de Carregamento Programaticamente
As telas em carregamento usam componentes skeleton, com aria-busy definido nos containers enquanto a requisição está em andamento.
Agrupe Leituras em Fluxos Sensíveis a Gas
As leituras devem ser agrupadas em lote, e requisições eth_call redundantes não devem ser emitidas a partir de loops de renderização.
Nenhum Segredo no Repositório
As URLs de RPC vêm de variáveis de ambiente, e o prefixo VITE_ é apenas para endpoints públicos.

04 Coloque em prática

Instale react-vite-dashboard no Claude Code ou Codex

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

Adicionar react-vite-dashboard 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 react-vite-dashboard

Formato genérico da CLI skills para plugins/stitch-build/skills/react-vite-dashboard/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

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: 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 linter do design.md contra o DESIGN.md localmente antes de publicar qualquer UI.
O contraste deve atender ao WCAG 2.2 AA para os pares de componentes definidos em DESIGN.md, verificado pela aprovação do linter.
A navegação por teclado deve funcionar, com a ordem de foco correspondendo à ordem visual do dashboard.
Teste o layout nas larguras de 375px e 1280px.
O TypeScript é executado em modo estrito e as ABIs de contrato não podem ser tipadas como any.

No OpenDesign importe react-vite-dashboard 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-vite-dashboard/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 obtido 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 react-vite-dashboard.
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

Pré-requisitosStitch MCP, um DESIGN.md e um scaffold Vite React TypeScript
WorkflowSeis etapas, da descoberta do prefixo MCP até a geração de componentes e a conexão de dados
Mapeamento HTML → ReactTabela que converte layout, cards, tabelas, botões, formulários, carregamento e conexão de carteira em markup
Integração com DESIGN.mdPonte de variáveis CSS a partir dos tokens do DESIGN.md, além do comando de lint do design.md
Convenções de dashboards Web3Chamadas de contrato somente leitura, valores com formatUnits, erros de transação em linguagem simples, leituras em lote
Estrutura de arquivosCinco pastas de origem para componentes, páginas, hooks, lib e estilos
Checklist de qualidadeCinco verificações cobrindo WCAG 2.2 AA, ordem de teclado, breakpoints, segredos e tipos estritos
Observação sobre a documentação do StitchUse URLs absolutas de stitch.withgoogle.com quando links relativos de documentação redirecionarem incorretamente

A Descrição da Própria Skill

"Converte designs Stitch em dashboards React + Vite para produção com TanStack Query, tokens acessíveis do DESIGN.md e padrões prontos para Web3 (ethers/viem)."

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

06 Antes de instalar

Perguntas Sobre a Skill react-vite-dashboard

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

Sou obrigado a usar Tailwind para o layout?

Não. A tabela de mapeamento permite tanto utilitários Tailwind quanto CSS modules, desde que o espaçamento siga os tokens definidos em DESIGN.md.

Essa skill trata de escrita em contratos?

As convenções definidas tratam de leituras e de apresentação de resultados: erros de transação devem ser explicados em linguagem simples e vinculados a um explorador de blocos quando houver um txHash. Nenhum fluxo de assinatura ou escrita é descrito.

Há algo de diferente nos links da documentação do Stitch?

Ao seguir links em stitch.withgoogle.com/docs, use a URL completa https://stitch.withgoogle.com/docs/..., pois a navegação relativa pode redirecionar incorretamente.

React Vite Dashboard

Execute react-vite-dashboard em uma tarefa real de design de UI.

Baixe OpenDesign, importe react-vite-dashboard do link SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills