react-vite-dashboardpor Google Labs

React Vite Dashboard Skill.

Una skill de Claude Code y Codex para diseño de UI: convierte diseños de Stitch en dashboards React + Vite con TanStack Query.

Web y UI
Código UI

Descargar OpenDesign Ver guía 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

Encabezados de sección y metadatos leídos del archivo original el 14/09/2026 · 3656 caracteres completos

01 Qué hace

Qué hace el Skill react-vite-dashboard en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Un skill de construcción para ingenieros frontend que convierte pantallas de Stitch en paneles densos en datos sobre React 18, Vite, TypeScript, TanStack Query y React Router, con soporte opcional para ethers v6 o viem en lecturas on-chain.

Su workflow ejecuta seis pasos: descubre el prefijo MCP de Stitch, obtiene la pantalla, guarda el HTML y la captura de pantalla en .stitch/designs/, lee DESIGN.md y mapea colores, tipografía y espaciado a variables CSS en src/index.css, genera componentes y páginas, y luego conecta los datos mediante TanStack Query manteniendo puros los componentes de presentación. Una tabla de mapeo fija el comportamiento para tablas, botones, formularios, carga y conexión de wallet, y el archivo cierra con una lista de verificación de calidad WCAG 2.2 AA.

Qué produce

Un panel de producción en React + Vite construido a partir de la pantalla de Stitch, usando TanStack Query como capa de datos.
Copias locales del diseño de origen conservadas en el repositorio como .stitch/designs/{screen}.html y una captura .png correspondiente.
Un árbol de código fuente separado por responsabilidad, con hooks que contienen wrappers de useQuery y hooks de wallet, además de lib para helpers de ABI y formateadores.

Ver el ejemplo de prompt ↗

Cómo funciona

01
Descubrir el Prefijo MCP
Ejecute list_tools primero y anote el prefijo de Stitch bajo el que se exponen las herramientas, ya que cada llamada posterior se construye a partir de él.
02
Obtener la Pantalla
Llame a la herramienta get_screen sobre el prefijo descubierto, pasando tanto el ID del proyecto de Stitch como el ID de la pantalla.
03
Vincular los Tokens de DESIGN.md
Lea el archivo DESIGN.md del proyecto y traduzca sus entradas de color, tipografía y espaciado a variables CSS dentro de src/index.css.
04
Dividir la UI Generada por Rol
El código generado se ubica en src/components, src/pages y src/hooks en lugar de un solo archivo plano.
05
Conectar Datos a Través de TanStack Query
Las peticiones asíncronas pasan por TanStack Query para que los componentes de presentación construidos a partir de la pantalla de Stitch permanezcan puros.

02 Encuentra tu caso de uso

Cuándo Usar el Skill react-vite-dashboard

Usa el skill react-vite-dashboard en Claude Code o Codex cuando el trabajo sea diseño de UI de este tipo. El alcance y los límites se toman del propio archivo del skill.

Buen caso de uso

Convertir pantallas de Stitch en interfaces de panel con muchos datos en lugar de páginas de marketing, con muchos componentes por pantalla.
Front ends de Web3 que necesitan lecturas on-chain mediante ethers v6 o viem junto con el resto de la capa de datos del panel.
Equipos cuyo sistema de diseño ya vive en un DESIGN.md y que necesitan que la interfaz generada se mantenga fiel a esos tokens.

Conozca los límites

Se asume que Stitch MCP ya está configurado; el archivo solo remite a la guía de configuración externa si no lo está.
El trabajo on-chain se limita a llamadas de contrato de solo lectura, por lo que la firma o los flujos de escritura quedan fuera de lo que describe el skill.

Qué proporcionar

NecesitaGoogle Stitch — nombrado en el SKILL.md como requerido.
EntradaStitch MCP configurado (guía de configuración)
EntradaUn DESIGN.md del proyecto (vea el skill design-md) para fidelidad de tokens
EntradaScaffold Vite + React + TypeScript (npm create vite@latest)

03 Dentro del skill

Reglas que el Skill react-vite-dashboard Da a Claude Code y Codex

7 instrucciones concretas, valores predeterminados y límites que el SKILL.md establece para el agente: la parte del archivo que cambia el resultado.

Las Tablas Permanecen Semánticas
Los datos tabulares deben usar un elemento table real o TanStack Table; las cuadrículas hechas solo con div quedan explícitamente descartadas.
El Código de la Wallet Está Aislado y sin Claves
La conexión de la wallet vive dentro de un WalletProvider, y el código generado nunca debe incrustar claves privadas.
Etiquete Cada Campo y Vincule los Errores a Él
Los formularios emparejan label htmlFor con input id, y los errores de validación se asocian con aria-describedby en lugar de mostrarse sueltos.
Mantenga el Anillo de Foco Predeterminado en los Botones
Los botones son type="button" con un anillo de foco visible, y el valor predeterminado del navegador se conserva a menos que DESIGN.md defina tokens de foco.
Señale el Estado de Carga de Forma Programática
Las pantallas que hacen fetch usan componentes skeleton, con aria-busy establecido en los contenedores mientras la solicitud está en curso.
Agrupe las Lecturas en Flujos Sensibles al Gas
Las lecturas deben agruparse y no deben emitirse solicitudes eth_call redundantes desde los bucles de renderizado.
Sin Secretos en el Repositorio
Las URL de RPC provienen de variables de entorno, y el prefijo VITE_ es solo para endpoints públicos.

04 Ponlo a trabajar

Instalar react-vite-dashboard en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Agregar react-vite-dashboard a Claude Code, Codex o Su Agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal

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

Forma genérica de la CLI skills para plugins/stitch-build/skills/react-vite-dashboard/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al skill una primera tarea de diseño de interfaz

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su 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.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

Ejecute el linter de design.md contra DESIGN.md localmente antes de publicar cualquier interfaz.
El contraste debe cumplir WCAG 2.2 AA para los pares de componentes definidos en DESIGN.md, verificado al pasar el linter.
La navegación con teclado debe funcionar, con un orden de foco que coincida con el orden visual del panel.
Pruebe el diseño en anchos de 375px y 1280px.
TypeScript se ejecuta en modo estricto y los ABI de los contratos no deben tiparse como any.

En OpenDesign importe react-vite-dashboard desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, y luego selecciónelo en la barra superior.

Descargar OpenDesign Leer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author: Google Labs
Repository: github.com/google-labs-code/stitch-skills Rama main
Archivo de skill: plugins/stitch-build/skills/react-vite-dashboard/SKILL.md Checksum de contenido registrado al verificar; commit 0337446
License: Apache-2.0 De LICENSE.
Estrellas del repositorio: 8.304 Instantánea de GitHub tomada el 2026-09-14 para todo el repositorio google-labs-code/stitch-skills, que contiene 12 skills en este catálogo. No es una calificación ni un conteo de uso para react-vite-dashboard.
Verificado por OpenDesign: 14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

Requisitos previosStitch MCP, un DESIGN.md y un scaffold de Vite React TypeScript
Flujo de trabajoSeis pasos desde el descubrimiento del prefijo MCP hasta la generación de componentes y la conexión de datos
Mapeo HTML → ReactTabla que convierte diseño, tarjetas, tablas, botones, formularios, carga y conexión de wallet en markup
Integración con DESIGN.mdPuente de variables CSS a partir de los tokens de DESIGN.md, más el comando de lint de design.md
Convenciones de panel Web3Llamadas de contrato de solo lectura, cantidades con formatUnits, errores de transacción en lenguaje sencillo, lecturas por lotes
Estructura de archivosCinco carpetas de origen para componentes, páginas, hooks, lib y estilos
Lista de verificación de calidadCinco comprobaciones que abarcan WCAG 2.2 AA, orden de teclado, breakpoints, secretos y tipos estrictos
Nota sobre la documentación de StitchUse URLs absolutas de stitch.withgoogle.com cuando los enlaces relativos de la documentación redirijan incorrectamente

La descripción propia del Skill

"Convierte diseños de Stitch en dashboards de producción React + Vite con TanStack Query, tokens accesibles desde DESIGN.md y patrones Web3 (ethers/viem)."

Descripción del front-matter de SKILL.md. El archivo completo tiene aproximadamente 3.656 caracteres. Lea el archivo completo en GitHub.

06 Antes de instalar

Preguntas sobre el Skill react-vite-dashboard

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

¿Tengo que usar Tailwind para el diseño?

No. La tabla de mapeo permite tanto utilidades de Tailwind como módulos CSS, siempre que el espaciado siga los tokens de DESIGN.md.

¿Este skill se encarga de escribir en un contrato?

Las convenciones que establece son sobre lecturas y sobre la presentación de resultados: los errores de transacción deben explicarse en lenguaje sencillo y enlazarse a un explorador de bloques cuando exista un txHash. No se describe ningún flujo de firma o escritura.

¿Hay algo inusual respecto a los enlaces de documentación de Stitch?

Al seguir enlaces en stitch.withgoogle.com/docs, use la URL completa https://stitch.withgoogle.com/docs/..., porque la navegación relativa puede redirigir incorrectamente.

React Vite Dashboard

Ejecutar react-vite-dashboard en una tarea de diseño UI real.

Descarga OpenDesign, importa react-vite-dashboard desde su enlace SKILL.md, pega el prompt de arriba y lee el plan antes del resultado.

Descargar OpenDesign Ver todas las skills