Skip to content
Get packs

Stitch to React Dashboard

Turns Stitch design screens into React + Vite dashboards with data fetching and accessible styling

Source Download skill
Repository
google-labs-code/stitch-skills
Stars
8,657
Licence
Apache-2.0
Files
2 files

What it does

This skill teaches an AI agent to take a dashboard design exported from Google's Stitch design tool and build it as a working React app using Vite and TypeScript. The agent fetches the screen through the Stitch connection, saves the design files, maps design tokens (colors, fonts, spacing) into CSS variables, and splits the result into components, pages, and data hooks. It also includes accessibility checks and optional patterns for reading blockchain data with ethers or viem.

Great for

  • Frontend developers who want to turn Stitch mockups into a React codebase quickly
  • Teams that keep design tokens in a DESIGN.md file and want code that matches them
  • Developers building data-heavy dashboards that read on-chain data

Skip it if

  • Simple static landing pages, since the workflow targets data-dense dashboards and a full React/Vite stack
  • Projects that cannot connect the Stitch MCP service, because the core workflow depends on fetching screens from it
  • Wallet or transaction features handled without review, since the Web3 guidance is partial and generated code still needs security review

Try asking

  • “Convert my Stitch screen for the analytics dashboard into a React + Vite app using TanStack Query”
  • “Build the wallet balance page from this Stitch design with read-only contract calls via viem”
  • “Map the colors and typography in DESIGN.md to CSS variables and generate the components”
Step-by-step guide: how to use Stitch to React DashboardInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the Apache-2.0 licence and an attribution note.

    react-vite-dashboard.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip react-vite-dashboard.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip react-vite-dashboard.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Run the design.md linter before generating UI so contrast and token problems are caught early
  • Keep RPC URLs and other secrets in environment variables; only use the VITE_ prefix for public endpoints
  • Review generated wallet and contract code yourself, since the skill allows the agent to run Bash and fetch web content

What's inside

  • README.md
  • SKILL.md

Redistributed unmodified from google-labs-code/stitch-skills under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.