What does this skill do, and when should you use it?
This skill is for frontend engineers building data-dense dashboards from Google Stitch screens. It targets React 18, Vite, TypeScript, TanStack Query, and React Router, with optional ethers v6 or viem patterns for on-chain reads. The workflow fetches screens and assets through Stitch MCP, maps DESIGN.md tokens into CSS variables, and organizes generated code into components, pages, and hooks. It also specifies accessibility, responsive testing, strict TypeScript, and secret-handling practices.
Discovers the Stitch MCP tool prefix, calls get_screen with project and screen IDs, saves HTML and PNG assets under .stitch/designs/{screen}.html and .png, reads DESIGN.md and maps colors, typography, and spacing to CSS variables, generates React structure under src/components, src/pages, and src/hooks, wires asynchronous data with TanStack Query, and applies conventions for wallet isolation, read-only contract calls, transaction errors, and block-explorer links.
- A frontend engineer needs to turn Stitch dashboard screens into a React and Vite application.
- A team already has DESIGN.md and wants generated UI to preserve its color, typography, and spacing tokens.
- A developer needs TanStack Query patterns for asynchronous dashboard data.
- A Web3 team needs read-only contract calls, network details, and transaction error messaging in a dashboard.
- A product team needs the generated interface checked at 375px and 1280px widths and through keyboard navigation.
How do you install this skill?
- Confirm Stitch MCP credentials, network reachability, and data-transfer scope before use, and apply least-privilege access.
- Require confirmation of the target write directory, preserve a version-control rollback point, and add skill-specific build, accessibility, and Web3-read tests.
- Do not place private keys or sensitive credentials in VITE_* variables; those variables are exposed to the client.
- The current CI does not cover react-vite-dashboard, so it does not establish that this skill runs successfully.
- Shell / CLI
- Network access
- Local filesystem
- MCP Server
Stitch MCP servernpmReact 18ViteTypeScriptTanStack QueryReact Router
Configure and run the Stitch MCP server using the Stitch MCP setup guide. Then use the selective installation command documented by the README: npx skills add google-labs-code/stitch-skills. This installs from the collection; the source does not document a command for installing only react-vite-dashboard.
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/google-labs-code/stitch-skills.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/plugins/stitch-build/skills/react-vite-dashboard" ~/.claude/skills/
rm -rf "$tmp"Generated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.
How do you use this skill?
Once installed, send your agent any of these to trigger it:
- Convert the Stitch screens in project projects/123 into a production React + Vite data dashboard using DESIGN.md tokens.
Prepare a DESIGN.md file and a Vite + React + TypeScript scaffold, for example with npm create vite@latest. Example trigger: "Convert the Stitch screens in project projects/123 into a production React + Vite data dashboard using DESIGN.md tokens." The workflow then discovers the Stitch prefix, fetches screens, downloads assets, and structures the React code. Before shipping, run npx @google/design.md lint DESIGN.md.
What are this skill's strengths and limitations?
- Focused specifically on data-dense dashboards rather than generic screen conversion.
- Defines concrete MCP fetching, asset persistence, and React file-organization steps.
- Includes implementation requirements for DESIGN.md tokens, semantic tables, focus states, form associations, and aria-busy.
- Provides read-only Web3 dashboard conventions for ethers v6 or viem.
- Requires a configured, running Stitch MCP server, DESIGN.md, and a Vite/React/TypeScript scaffold.
- The source provides no test suite, tested-platform results, or failure-recovery documentation.
- Installation instructions cover the wider stitch-skills collection and do not document installing this skill alone.
- Web3 support is optional and does not establish full wallet transaction functionality.
How does this skill compare with similar options?
Side by side with related skills; every score comes from the same FSRS standard.
| Skill | FS score | Stars | Last updated | License |
|---|---|---|---|---|
| Stitch React Dashboard Builder this page | 40 · Not recommended | ★ 8.5k | 2mo ago | Apache-2.0 |
| Frontend Conventions Skill | 50 · Use with care | ★ 5.2k | 13d ago | Apache-2.0 |
| Stitch React Native Builder | 38 · Not recommended | ★ 8.5k | 2mo ago | Apache-2.0 |
| Stitch Remotion Walkthrough Builder | 43 · Not recommended | ★ 8.5k | 2mo ago | Apache-2.0 |
| Context7 Project Bootstrapper ✓ Microsoft · Official | 36 · Not recommended | ★ 194k | 12d ago | MIT |
How did FollowSkills review this skill?
The skill scopes tools to Stitch, Read, Write, Bash, and web_fetch, explicitly forbids embedding private keys, and recommends environment variables for RPC URLs. However, permissions remain broad and there is no user-confirmation policy, data-flow disclosure, write-scope restriction, rollback plan, or confirmation for external effects, so points are deducted.
The workflow, file structure, and quality checklist are broadly consistent, and transaction-error presentation is addressed. However, it depends on Stitch MCP, DESIGN.md, a Vite project, and external packages; tool-call syntax is underspecified; and there are no skill-specific tests, scripts, or diagnostic failure paths. The static-review ceiling applies, so points are deducted.
The intended audience, stack, data-dense dashboard scenario, and optional Web3 patterns are clear. Non-fit ranges, semantic trigger boundaries, input/output contracts, and Chinese-language support are not specified. Core Stitch MCP use also depends on an overseas service without evidence of mainland-China reachability, so points are deducted.
The SKILL.md is layered into prerequisites, workflow, mappings, structure, and a checklist. The README includes installation commands, prompt examples, related skills, and the repository supplies Apache-2.0, a security policy, and supported-version information. The skill lacks a versioning strategy, changelog, named maintenance responsibility, clear update path, and complete dependency troubleshooting, so points are deducted.
The skill gives an actionable path from Stitch screens to React/Vite dashboards and covers design tokens, accessibility, query wiring, and read-only Web3 integration. The files provide no verified representative output or test evidence, and generated work still requires implementation, integration, and review. The static ceiling is 7, so points are deducted.
The source provides auditable workflow and checklist claims, but the target skill has no dedicated tests or committed output examples. Repository CI validates react-components rather than this skill's key paths, leaving evidence coverage thin and warranting a low score.
Open a dimension to read why it scored that way
Evidence confidence：Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.
See the full review method →