MCPInstall

react-vite-dashboard

by google-labs-codeFrontend & Design

Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/viem).

Installs
5.6K
Last 24h
+60
Trending rank
#2959
Security
Warn

Install

Works with every agent the skills CLI supports.

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

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads react-vite-dashboard automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

Security audits

Independent scans of the skill's instructions and bundled files.

Gen Agent Trust Hub PassSAFE ·The skill is a frontend engineering utility for converting designs from the Stitch platform into React/Vite components. It follows security best practices such as avoiding hardcoded secrets and private keys. All external tools and domains mentioned are associated with the vendor (Google) or are industry-standard development libraries.
Socket PassNo alerts
Snyk WarnMEDIUM ·Risk: MEDIUM · 1 issue

SKILL.md

The instructions your agent reads when the skill is triggered.

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)
  • 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

PatternImplementation
Layout grid / flexTailwind utilities or CSS modules aligned to DESIGN.md spacing tokens
Cards / panels<section> with tokenized border-radius and elevation fallbacks for forced-colors
TablesSemantic <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
LoadingSkeleton components; aria-busy on containers during fetch
Wallet connectIsolate in WalletProvider; never embed private keys in generated code

DESIGN.md integration

/* 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:

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, use the full https://stitch.withgoogle.com/docs/... URL if relative navigation redirects incorrectly.

FAQ

What does the react-vite-dashboard skill do?

Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/viem).

How do I install react-vite-dashboard?

Run npx skills add https://github.com/google-labs-code/stitch-skills --skill react-vite-dashboard in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/react-vite-dashboard/ (personal) or .claude/skills/react-vite-dashboard/ (project).

Which AI agents can use react-vite-dashboard?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is react-vite-dashboard safe to install?

Security partners have reviewed it: Gen Agent Trust Hub passed; Socket passed; Snyk flagged items to review. As with any skill, read the SKILL.md and bundled scripts before installing.

Who maintains react-vite-dashboard?

It is published by google-labs-code in google-labs-code/stitch-skills. It has 5,555 recorded installs.

More from google-labs-code/stitch-skills

View all →

design-md

google-labs-code/stitch-skills

Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files

OfficialFrontend & Design64.9K installs

enhance-prompt

google-labs-code/stitch-skills

Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation results.

OfficialAI & Agents58.4K installs

stitch-loop

google-labs-code/stitch-skills

Teaches agents to iteratively build websites using Stitch with an autonomous baton-passing loop pattern

Official56.5K installs

shadcn-ui

google-labs-code/stitch-skills

Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices.

OfficialFrontend & Design53.5K installs

react:components

google-labs-code/stitch-skills

Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.

Frontend & Design50.4K installs

remotion

google-labs-code/stitch-skills

Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays

OfficialMedia & Creative41.4K installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs