# React Vite Dashboard

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

Fuente: https://skillsagentes.com/skills/google-labs-code/stitch-skills/react-vite-dashboard
Markdown: https://skillsagentes.com/skills/google-labs-code/stitch-skills/react-vite-dashboard.md

Repositorio: https://github.com/google-labs-code/stitch-skills
Autor: google-labs-code
Licencia: Apache-2.0
Actualizado: hace 3 meses
Coste de contexto: 39 tok instalada, 926 tok al activarse, 1.1k tok con todos los archivos del bundle
Bundle: 2 archivos, 4 KB
Permisos que pide: stitch*:*, read, write, bash, web_fetch

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add google-labs-code/stitch-skills --skill react-vite-dashboard --agent claude-code
# Cursor
npx -y skills add google-labs-code/stitch-skills --skill react-vite-dashboard --agent cursor
# Codex
npx -y skills add google-labs-code/stitch-skills --skill react-vite-dashboard --agent codex
# Gemini CLI
npx -y skills add google-labs-code/stitch-skills --skill react-vite-dashboard --agent gemini
# Windsurf
npx -y skills add google-labs-code/stitch-skills --skill react-vite-dashboard --agent windsurf
# Cline
npx -y skills add google-labs-code/stitch-skills --skill react-vite-dashboard --agent cline
```

## Qué hace

- Convierte pantallas de Stitch en dashboards React 18 + Vite + TypeScript con TanStack Query
- Mapea tokens de DESIGN.md (colores, tipografía, spacing) a variables CSS
- Genera componentes en src/components, src/pages y src/hooks siguiendo la tabla HTML→React
- Añade patrones Web3 opcionales con ethers v6 o viem para lecturas on-chain
- Aplica checklist de accesibilidad WCAG 2.2 AA y buenas prácticas de seguridad de secretos

## Cuándo usarla

- Necesitas construir un dashboard denso en datos a partir de un diseño de Stitch
- El proyecto ya tiene un DESIGN.md para fidelidad de tokens
- Quieres integrar lecturas de contratos on-chain en la interfaz

## Qué la activa

- "Convierte esta pantalla de Stitch en un dashboard React + Vite"
- "Genera los componentes del dashboard usando los tokens de DESIGN.md"
- "Añade lecturas de contrato con viem a este dashboard Web3"

## Antes de instalar

- Requiere Stitch MCP configurado, un DESIGN.md del proyecto y un scaffold Vite + React + TypeScript.
- Necesita en el PATH: npx
- runs shell commands
- writes to your files

## Archivos

- README.md — 624 B
- SKILL.md — 4 KB

## SKILL.md

Reproducido tal cual desde google-labs-code/stitch-skills bajo Apache-2.0. Esta sección es el documento original y está en inglés.

# Stitch to React + Vite Dashboard

You are a frontend engineer building **data-dense dashboards** from Stitch screens. Target stack: **React 18**, **Vite**, **TypeScript**, **TanStack Query**, **React Router**, and optional **ethers v6** or **viem** for on-chain reads.

## Prerequisites

- Stitch MCP configured ([setup guide](https://stitch.withgoogle.com/docs/mcp/setup/))
- A project `DESIGN.md` (see the `design-md` skill) for token fidelity
- Vite + React + TypeScript scaffold (`npm create vite@latest`)

## Workflow

1. **Discover MCP prefix** — run `list_tools`, note the Stitch prefix (e.g. `stitch:`).
2. **Fetch screen** — `[prefix]:get_screen` with project and screen IDs.
3. **Download assets** — persist HTML/screenshot under `.stitch/designs/{screen}.html` and `.png`.
4. **Read DESIGN.md** — map `colors.*`, `typography.*`, `spacing.*` to CSS variables in `src/index.css`.
5. **Generate components** — split into `src/components/`, `src/pages/`, `src/hooks/`.
6. **Wire data** — use TanStack Query for async fetches; keep presentational components pure.

## HTML → React mapping

| Pattern | Implementation |
|---------|----------------|
| Layout grid / flex | Tailwind utilities or CSS modules aligned to DESIGN.md spacing tokens |
| Cards / panels | `<section>` with tokenized border-radius and elevation fallbacks for forced-colors |
| Tables | Semantic `<table>` or TanStack Table; never div-only grids for tabular data |
| Buttons | `<button type="button">` with visible focus ring (preserve browser default unless DESIGN.md defines focus tokens) |
| Forms | `<label htmlFor>` + `<input id>`; associate errors with `aria-describedby` |
| Loading | Skeleton components; `aria-busy` on containers during fetch |
| Wallet connect | Isolate in `WalletProvider`; never embed private keys in generated code |

## DESIGN.md integration

```css
/* src/index.css — example token bridge */
:root {
  --color-primary: /* from DESIGN.md colors.primary */;
  --font-body: /* typography.body-md.fontFamily */;
}
```

Run the design.md linter locally before shipping UI:

```bash
npx @google/design.md lint DESIGN.md
```

## Web3 dashboard conventions

- Read-only contract calls via `useReadContract` (viem/wagmi) or ethers `Contract` + TanStack Query `queryFn`.
- Format token amounts with `formatUnits`; show network name and chain ID in settings footer.
- Surface transaction errors in plain language; link to block explorer when `txHash` exists.
- Gas-sensitive flows: batch reads, avoid redundant `eth_call` in render loops.

## File structure

```
src/
├── components/     # Presentational UI from Stitch
├── pages/          # Route-level screens
├── hooks/          # useQuery wrappers, wallet hooks
├── lib/            # ABI helpers, formatters
└── styles/         # Token CSS variables
```

## Quality checklist

- [ ] WCAG 2.2 AA: contrast from DESIGN.md component pairs passes linter
- [ ] Keyboard navigable: focus order matches visual order
- [ ] Responsive: test at 375px and 1280px widths
- [ ] No secrets in repo: RPC URLs from env (`VITE_*` prefix only for public endpoints)
- [ ] TypeScript strict: no `any` on contract ABIs

## Stitch docs note

When following links on [stitch.withgoogle.com/docs](https://stitch.withgoogle.com/docs/), use the full `https://stitch.withgoogle.com/docs/...` URL if relative navigation redirects incorrectly.

## Dónde encaja

- Categoría: [Desarrollo de APIs](https://skillsagentes.com/categorias/desarrollo-apis.md) — Diseña, prueba y documenta APIs HTTP y GraphQL.
- Creador: [google-labs-code](https://skillsagentes.com/creators/google-labs-code.md) — 15 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Stitch::react Components](https://skillsagentes.com/skills/google-labs-code/stitch-skills/stitch-react-components.md): Convierte diseños de Stitch en componentes modulares de Vite y React, o sincroniza/actualiza componentes React existentes con los últimos diseños de Stitch, usando red a nivel de sistema y validación basada en AST.
- [Stitch::extract Static Html](https://skillsagentes.com/skills/google-labs-code/stitch-skills/stitch-extract-static-html.md): Extrae HTML estático autocontenido de una app web o componentes React, inlineando CSS e imágenes, para capturar una vista o subirla a Stitch.
- [Stitch::react Native](https://skillsagentes.com/skills/google-labs-code/stitch-skills/stitch-react-native.md): Convierte diseños HTML de Stitch en componentes React Native, o sincroniza/actualiza componentes nativos existentes según los últimos diseños de Stitch, usando StyleSheet.
- [Stitch::code To Design](https://skillsagentes.com/skills/google-labs-code/stitch-skills/stitch-code-to-design.md): Convierte código frontend (Vite, React, Angular, Vue, etc.) en un Stitch Design encadenando extracción de HTML estático, extracción del sistema de diseño y subida de archivos.
- [Stitch::upload To Stitch](https://skillsagentes.com/skills/google-labs-code/stitch-skills/stitch-upload-to-stitch.md): Sube assets locales (imágenes, mockups, HTML extraído, markdown de diseño) a un proyecto de Stitch, útil cuando las llamadas MCP fallan o se truncan por límites de tokens en base64.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)