StealIt

React Vite Dashboard

react-vite-dashboard

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

Install

Run this in your project folder. It works with Claude Code, Cursor, Codex and dozens of other agents.

$ npx skills add google-labs-code/stitch-skills --skill react-vite-dashboard

Needs Node.js. Add -g to install for every project, or -a claude-code to skip the agent picker.

How to use React Vite Dashboard

Once it's installed, Claude reads this skill on its own whenever a request matches what it's for, so you don't have to mention it by name. In Claude Code you can also run it directly by typing /react-vite-dashboard.

It contains no scripts, only instructions and reference files, so it can't run code on its own.

What the instructions cover

  1. 1Prerequisites
  2. 2Workflow
  3. 3HTML → React mapping
  4. 4DESIGN.md integration
  5. 5Web3 dashboard conventions
  6. 6File structure
  7. 7Quality checklist
  8. 8Stitch docs note

Section headings from the skill's SKILL.md file.

What's inside · 2 files

  • README.md
  • SKILL.md

More from Google Labs

See all →

Design MD

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

Design & UIGoogle Labs8.7k

Enhance Prompt

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

AI & AgentsGoogle Labs8.7k

Remotion

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

Video & MotionGoogle Labs8.7k

Shadcn UI

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

FrontendGoogle Labs8.7k
See all →

Vercel React Best PracticesTop pick

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…

FrontendVercel34k

Web Artifacts Builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts…

FrontendAnthropic187k

Vercel Composition Patterns

React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers…

FrontendVercel34k

Vercel React View Transitions

Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition…

FrontendVercel34k