Skip to content
Get packs

Guide · Agent skill

How to use the Stitch to React Dashboard agent skill

Updated · written with AI from the project's own documentation and checked against our catalogue data

The react-vite-dashboard skill is an agent skill that tells an AI coding agent how to turn a dashboard design from Google's Stitch design tool into a working React app built with Vite and TypeScript. This guide explains what the skill does, how to install it, how to ask for it in plain language, and what to check before you run it. By the end you will know how to set it up and what results to expect.

Stitch to React Dashboardgoogle-labs-code/stitch-skills · Apache-2.0

Quick start

  1. 1Configure the Stitch MCP server. Follow the Stitch setup guide so the agent can fetch screens from Stitch. The core workflow will not work without this.
  2. 2Add a DESIGN.md file. Place a DESIGN.md file in your project. Use the design-md skill if you need to write one.
  3. 3Install the skill. Run the npx command from the README, or unzip the downloaded ZIP into ~/.claude/skills/ or the project's .claude/skills/ folder.
  4. 4Ask for the conversion in plain language. Name the Stitch screen and say you want React and Vite components styled with your DESIGN.md tokens.
  5. 5Lint the design tokens. Run npx @google/design.md lint DESIGN.md to check your tokens before you ship the UI.
  6. 6Review and test the output. Check responsiveness at 375px and 1280px, keyboard focus order, and that no secrets are in the code. Get a security review for any wallet or transaction features.

What does the react-vite-dashboard skill make the agent do?

An agent skill is a set of written instructions that an AI agent loads when a task matches the skill. This one covers building data-dense dashboards from Stitch screens. The target stack is React, Vite, TypeScript, TanStack Query, React Router, and optionally ethers or viem for reading blockchain data.

The skill describes a six-step workflow. The agent finds the Stitch tool prefix, fetches the screen, saves the HTML and a screenshot under .stitch/designs/, maps the colour, font and spacing tokens from DESIGN.md into CSS variables in src/index.css, splits the UI into components, pages and hooks, and wires the data with TanStack Query.

  • Saves design files under .stitch/designs/ as HTML and PNG
  • Maps colors, typography and spacing tokens from DESIGN.md to CSS variables
  • Organises code into src/components/, src/pages/, src/hooks/, src/lib/ and src/styles/
  • Includes an accessibility checklist: WCAG 2.2 AA contrast, keyboard order, responsive checks at 375px and 1280px, and no secrets in the repo

What you need before you install

The skill depends on a few things outside itself. The core workflow fetches screens from the Stitch MCP service, so you must have that configured first. The source links to a Stitch setup guide for this step.

You also need a DESIGN.md file in your project. The source points to the design-md skill for creating one. You need Node.js with npm to scaffold the Vite, React and TypeScript project. Optional extras are ethers or viem for on-chain reads, and access to the design.md linter via npx.

  • Stitch MCP server configured (see the Stitch setup guide at stitch.withgoogle.com/docs/mcp/setup/)
  • A DESIGN.md file in the project
  • Node.js with npm
  • Optional: ethers or viem for on-chain reads
  • Access to npx @google/design.md for the design linter

How to install the skill

The README gives a one-line install using npx. The flag --global installs the skill for your user account rather than a single project.

You can also install from the ZIP file on our page. Download it and unzip it into ~/.claude/skills/ to make it available everywhere, or into a project's .claude/skills/ folder to limit it to that project. In the Claude apps, you can instead upload the skill under Settings, then Capabilities, then Skills.

  • Option A: run the npx command in a terminal
  • Option B: download the ZIP, unzip it into ~/.claude/skills/ (all projects) or .claude/skills/ (one project)
  • Option C: upload the skill in the Claude apps under Settings, then Capabilities, then Skills
npx skills add google-labs-code/stitch-skills --skill react-vite-dashboard --global

How do you trigger the skill with a request?

You do not need a special command. Describe the task in plain language and mention the Stitch screen and your design tokens. The agent should pick up the skill from the request, but if it does not, name the skill directly in your message.

Good requests name the screen, the target (React and Vite components), and the source of styling (DESIGN.md). The README includes two example prompts that work as starting points.

  • Convert the Stitch dashboard screen into React and Vite components using our DESIGN.md tokens
  • Wire the portfolio summary cards with TanStack Query and ethers read-only calls
  • Name the skill directly if the agent does not use it, for example: use the react-vite-dashboard skill

Run the workflow and check the output

Start by scaffolding a project if you do not have one. The skill suggests creating a Vite and React and TypeScript app. After the agent generates code, run the design.md linter on your DESIGN.md before you ship the UI.

Check the output against the quality checklist in the skill. Confirm that the layout works at 375px and 1280px widths, that keyboard focus order matches the visual order, and that no RPC URLs or secrets are hard-coded. The skill says public endpoints may use VITE_ prefixed environment variables.

  • Scaffold with npm create vite@latest if you need a new project
  • Run the linter on DESIGN.md
  • Test responsiveness at 375px and 1280px
  • Tab through the page to check focus order
  • Confirm no secrets are committed to the repo
npm create vite@latest npx @google/design.md lint DESIGN.md

Safety notes: scripts and network access

This skill runs scripts and uses the network. Its allowed tools include Bash, Read, Write, web_fetch and the Stitch tools. The agent can run shell commands and fetch data from the Stitch service, so review what it proposes to run, especially on a machine with sensitive files.

The Web3 guidance is partial. The skill says to isolate wallet code in a WalletProvider and never embed private keys in generated code. Generated code that touches wallets or transactions still needs a security review before it goes anywhere near real funds.

  • Review shell commands the agent proposes to run
  • Keep private keys and secrets out of generated code
  • Treat wallet and transaction code as needing independent security review

What people use it for

  • Turning a Stitch analytics screen into a React dashboard with reusable card, table and chart components
  • Mapping colours, fonts and spacing from a DESIGN.md file into CSS variables so the code matches the design system
  • Showing a portfolio summary on a dashboard using read-only on-chain calls with ethers or viem
  • Building a data table with semantic HTML and TanStack Query for async loading states

Frequently asked questions

Is the react-vite-dashboard skill free to use?

The source says the repository is licensed under Apache-2.0. The source does not describe pricing for Stitch itself, so check Stitch's own terms for any costs of using its service.

How do I install the react-vite-dashboard skill?

Run npx skills add google-labs-code/stitch-skills --skill react-vite-dashboard --global, or download the ZIP from this page and unzip it into ~/.claude/skills/ or a project's .claude/skills/ folder. In the Claude apps you can upload it under Settings, then Capabilities, then Skills.

What do I need before the skill works?

You need the Stitch MCP server configured, a DESIGN.md file in your project, and Node.js with npm. Optional extras are ethers or viem for on-chain reads and access to npx @google/design.md for the linter.

Does this skill work for simple landing pages?

The source says it is not meant for simple static landing pages. The workflow targets data-dense dashboards and a full React and Vite stack, so a simpler tool may suit a landing page better.

What if the agent cannot fetch my Stitch screen?

The core workflow depends on the Stitch MCP service. Check that the Stitch MCP server is configured using the Stitch setup guide, then ask the agent to run list_tools to find the Stitch prefix it should use.

How does this compare with other skills?

The README lists two related skills. design-md helps you write and lint DESIGN.md before you build the UI, and shadcn-ui adds accessible component primitives on top of generated layouts. The source does not compare this skill with other tools.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use this skill if you are a frontend developer who wants to turn Stitch dashboard designs into a React and Vite codebase that follows a DESIGN.md file, and you can connect the Stitch MCP service. Pick another approach for simple static landing pages, for projects that cannot connect to Stitch, or for wallet and transaction features that you cannot put through a proper security review.

Download the skill