New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Official agent skill

Stitch to React and Vite Dashboard

by google-labs-code in google-labs-code/stitch-skills

Turns Stitch screens into a React, Vite and TypeScript dashboard with TanStack Query data fetching, DESIGN.md tokens as CSS variables and optional read-only Web3 data.

OfficialApache-2.0Auto-check: notesFrontend & Design

Install Stitch to React and Vite Dashboard

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

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install google-labs-code/stitch-skills react-vite-dashboard --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/google-labs-code/stitch-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/stitch-build/skills/react-vite-dashboard .claude/skills/react-vite-dashboard && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
react-vite-dashboard
GitHub stars
8.4k
Token cost
~914 tokens
SKILL.md length
336 words
Files
2
Skills in repo
7
Repo updated
First seen
Licence
Apache-2.0

At a glance

Turns Stitch screens into a React, Vite and TypeScript dashboard with TanStack Query data fetching, DESIGN.md tokens as CSS variables and optional read-only Web3 data.

  • Works in 6 steps: Discover MCP prefix — run list_tools,… → Fetch screen — [prefix]:get_screen with… → Download assets — persist… → …
  • Converting a Stitch screen into a working React dashboard
  • SKILL.md covers Prerequisites, Workflow, HTML → React mapping and DESIGN.md integration, plus 4 more sections
  • Calls npx and npm; reaches stitch.withgoogle.com

What it does

This skill takes a screen from the Stitch design tool, through the Stitch MCP server, and builds a data-dense dashboard from it on React 18, Vite, TypeScript, TanStack Query and React Router. The workflow finds the Stitch tool prefix, fetches the screen, saves its HTML and screenshot under `.stitch/designs/`, maps the DESIGN.md colors, typography and spacing to CSS variables in `src/index.css`, splits the result into components, pages and hooks, and wires data with TanStack Query.

A mapping table guides the HTML to React conversion: semantic tables, buttons with visible focus rings, labeled form fields with `aria-describedby` errors, skeleton loaders with `aria-busy`, and wallet connection isolated in a `WalletProvider` with no private keys in generated code. For on-chain data it covers read-only contract calls with viem or ethers and formatted token amounts. It also suggests linting DESIGN.md with `npx @google/design.md lint` before shipping.

When your agent uses it

  • Converting a Stitch screen into a working React dashboard
  • Mapping a DESIGN.md token file onto CSS variables
  • Building a dashboard that reads on-chain data through viem or ethers

Example prompts

  • “Convert the Overview screen from my Stitch project into a React and Vite dashboard.”
  • “Use DESIGN.md to set up the CSS variables and lint the file before we ship the UI.”
  • “Add a read-only token balance panel to the dashboard using viem and TanStack Query.”

Requirements

  • The Stitch MCP server configured
  • A project DESIGN.md file
  • A Vite, React and TypeScript scaffold created with npm create vite
  • Pre-approved tools (allowed-tools): stitch*:*, Read, Write, Bash, web_fetch

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  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.

What it can do on your machine

Read from SKILL.md and the folder at commit 0337446. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • stitch*:*
    • Read
    • Write
    • Bash
    • web_fetch

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npx
    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • stitch.withgoogle.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Stitch to React and Vite Dashboard loads about 914 tokens when it runs. Until then it costs about 44 tokens; SKILL.md has 336 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~44
When it runs · the whole SKILL.md, loaded when a task matches
~914

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
    allowed-tools: stitch*:*, Read, Write, Bash, web_fetch

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from google-labs-code/stitch-skills at commit 0337446, republished under its Apache-2.0 licence (© google-labs-code). 336 words, ~914 tokens.

Download SKILL.mdSave it as .claude/skills/react-vite-dashboard/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
react-vite-dashboard
description
Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/viem).
allowed-tools
stitch*:*, Read, Write, Bash, web_fetch

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

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

© google-labs-code, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file in plugins/stitch-build/skills/react-vite-dashboard of google-labs-code/stitch-skills.

  • SKILL.md
  • README.md

Open the folder on GitHubat commit 0337446

Compare with similar skills

Stitch to React and Vite Dashboard next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Stitch to React and Vite Dashboard compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Stitch to React and Vite Dashboard this skillgoogle-labs-code/stitch-skills8.4k—~914Automated safety check: NotesApache-2.0
Design Code for Any Frameworkplugin87/ux-ui-agent-skills1.5k—~1.7kAutomated safety check: PassMIT
Chakra UI v3 Builderchakra-ui/chakra-ui41k—~3.1kAutomated safety check: PassMIT
Shadmin Devahaodev/shadmin174—~2.7kAutomated safety check: PassMIT
Design To CodeMigoXLab/coderio1142 repos~1.2kAutomated safety check: PassApache-2.0
Connect Component To Figmadequelabs/cauldron129—~2kAutomated safety check: PassMPL-2.0

Similar skills

  • Design Code for Any Framework

    plugin87/ux-ui-agent-skills

    Generates complete, accessible, token-driven UI component code for a chosen framework such as React with Tailwind, SwiftUI, Vue, Flutter or Jetpack Compose.

    1.5k GitHub stars~1.7k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Chakra UI v3 Builder

    chakra-ui/chakra-ui

    Builds responsive, accessible Chakra UI v3 components and layouts, sets up Chakra in new or existing projects, and designs themes with tokens, semantic tokens and recipes.

    41k GitHub stars~3.1k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Shadmin Dev

    ahaodev/shadmin

    Apply Shadmin feature-development standards (backend Go/Gin/Ent + frontend React/TS).

    174 GitHub stars~2.7k tokensUpdated 5 days ago
    Frontend & DesignAuto-check passed

  • Design To Code

    MigoXLab/coderio

    Pixel-perfect Figma to React conversion using coderio. An agent skill from MigoXLab/coderio.

    114 GitHub starsUsed in 2 repos~1.2k tokens
    Frontend & DesignAuto-check passed

  • Connect Component To Figma

    dequelabs/cauldron

    Add a Figma Code Connect (.figma.tsx) file for a Cauldron React component.

    129 GitHub stars~2k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Shadcn Tailwind UI

    LiarMTTT/TavernWeave

    Build, restyle, or review accessible React interfaces that use shadcn/ui, Radix UI primitives, and Tailwind CSS.

    148 GitHub stars~1.7k tokensUpdated 3 days ago
    Frontend & DesignAuto-check passed

More from google-labs-code/stitch-skills

  • Stitch to Remotion Walkthrough Videos

    google-labs-code/stitch-skills

    Official

    Builds walkthrough videos from Stitch design projects using Remotion, with transitions, zoom effects and text overlays on each screen.

    8.4k GitHub starsUsed in 6 repos~3.2k tokens
    Auto-check: notes

  • Integrating shadcn/ui Components

    google-labs-code/stitch-skills

    Official

    Guides finding, installing, customizing and wiring up shadcn/ui components in a project, with MCP tools for the component catalog and registries.

    8.4k GitHub starsUsed in 4 repos~2.3k tokens
    Auto-check: notes

  • Stitch Prompt Enhancer

    google-labs-code/stitch-skills

    Official

    Rewrites a vague UI generation idea into a structured, keyword-rich prompt for Stitch, pulling in an existing DESIGN.md design system when the project has one.

    8.4k GitHub starsUsed in 6 repos~1.7k tokens
    Auto-check passed

  • Stitch Taste Design System

    google-labs-code/stitch-skills

    Official

    Generates a DESIGN.md design-language file for Google Stitch that encodes color, typography, layout, component behavior and motion rules to avoid generic AI-looking UI.

    8.4k GitHub starsUsed in 15 repos~3.1k tokens
    Auto-check passed

  • Stitch Build Loop

    google-labs-code/stitch-skills

    Official

    Builds a website page by page with Stitch in an autonomous loop, passing a baton file from one iteration to the next that names the next page and prompt.

    8.4k GitHub starsUsed in 5 repos~2.6k tokens
    Auto-check: notes

  • Site Md

    google-labs-code/stitch-skills

    Official

    Analyze a project description or site requirements and synthesize a project constitution into SITE.md for the Stitch Build Loop

    8.4k GitHub stars~783 tokensUpdated 1 mo ago
    Auto-check passed

Works with

Categories

Questions about Stitch to React and Vite Dashboard

What does Stitch to React and Vite Dashboard do?

Turns Stitch screens into a React, Vite and TypeScript dashboard with TanStack Query data fetching, DESIGN.md tokens as CSS variables and optional read-only Web3 data. This skill takes a screen from the Stitch design tool, through the Stitch MCP server, and builds a data-dense dashboard from it on React 18, Vite, TypeScript, TanStack Query and React Router.css`, splits the result into components, pages and hooks, and wires data with TanStack Query.

When should I use Stitch to React and Vite Dashboard?

Stitch to React and Vite Dashboard fits situations like: converting a Stitch screen into a working React dashboard; mapping a DESIGN.md token file onto CSS variables; building a dashboard that reads on-chain data through viem or ethers.

How do I install Stitch to React and Vite Dashboard in Claude Code?

Run `npx skills add google-labs-code/stitch-skills --skill react-vite-dashboard -a claude-code`. Or copy the skill folder (plugins/stitch-build/skills/react-vite-dashboard in google-labs-code/stitch-skills) into .claude/skills/react-vite-dashboard in your project. Claude Code loads it when a task matches its description.

How do I install Stitch to React and Vite Dashboard in Codex?

Run `npx skills add google-labs-code/stitch-skills --skill react-vite-dashboard -a codex`. Or copy the skill folder (plugins/stitch-build/skills/react-vite-dashboard in google-labs-code/stitch-skills) into .agents/skills/react-vite-dashboard in your project. Codex loads it when a task matches its description.

Can I use Stitch to React and Vite Dashboard in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add google-labs-code/stitch-skills --skill react-vite-dashboard -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/react-vite-dashboard, .gemini/skills/react-vite-dashboard, .github/skills/react-vite-dashboard and .opencode/skills/react-vite-dashboard in your project.

What does Stitch to React and Vite Dashboard need to run?

Going by SKILL.md and its folder, Stitch to React and Vite Dashboard needs the command-line tools its instructions call (npx and npm). Our summary lists: The Stitch MCP server configured; A project DESIGN.md file; A Vite, React and TypeScript scaffold created with npm create vite. Its frontmatter pre-approves these tools: stitch*:*, Read, Write, Bash, web_fetch.

Does Stitch to React and Vite Dashboard access the network?

SKILL.md names 1 domain. In commands or code: stitch.withgoogle.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Stitch to React and Vite Dashboard safe to install?

Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Stitch to React and Vite Dashboard use?

Stitch to React and Vite Dashboard is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Stitch to React and Vite Dashboard use?

About 914 tokens (SKILL.md is roughly 3.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Stitch to React and Vite Dashboard?

Skills that share tags, products or a category with Stitch to React and Vite Dashboard: Design Code for Any Framework (plugin87/ux-ui-agent-skills, 1.5k stars), Chakra UI v3 Builder (chakra-ui/chakra-ui, 41k stars), Shadmin Dev (ahaodev/shadmin, 174 stars) and Design To Code (MigoXLab/coderio, 114 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Stitch to React and Vite Dashboard?

google-labs-code (a GitHub organization, an official publisher) maintains it in google-labs-code/stitch-skills, which has 8,431 GitHub stars. The repository holds 7 skills in this directory. The repository was last updated on August 17, 2026.

Source: google-labs-code/stitch-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.