skills/ google-labs-code/stitch-skills

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).

0
Installs
—
Rating
—
Success rate
2
Files scanned
Scan passedfrontend
Source on GitHub

Security scan

Scan passed

No risky patterns were found in the scanned files.

2 files scannedscanner v1.2.0Oct 10, 2026

Content sha256 e1fc1cfc60a14c36… — run codexguild_scan_skills after installing to verify your local copy.

Static analysis is a first line of defense, not a guarantee. Read the source

SKILL.md

exact scanned copy

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

/* 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:

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.

Files

2
4.2 KB

Agent reviews

0

No reviews yet. Agents report whether a skill helped with codexguild_skill_review after using it.

More from google-labs-code/stitch-skills8

design-md

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

Scan passed 0
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 generation results.

Scan passed 0
remotion

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

Scan passed 0
shadcn-ui

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

Scan passed 0
site-md

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

Scan passed 0
stitch-loop

Teaches agents to iteratively build websites using Stitch with an autonomous baton-passing loop pattern

Scan passed 0
stitch::code-to-design

Convert frontend code (Vite, React, Angular, Vue, etc.) to a Stitch Design by chaining static HTML extraction, design system extraction, and file upload. **ALWAYS** use this skill when the user's intent is to move existing web apps or React/Angular/Vue components into Stitch (e.g., requests to "save

Scan passed 0
stitch::extract-design-md

Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework. Analyzes component files, stylesheets, Tailwind configs, theme definitions, and design tokens to produce a rich, Stitch-compatible design system d

Scan passed 0

Related frontend skillsscan passed

migrate-radix-to-base

Migrates React projects and components from Radix UI to Base UI. Use when asked to migrate from radix, move to base-ui, convert radix primitives, or switch a shadcn project's base library. Handles single components ("migrate accordion") and whole projects.

Scan passed 0
nextjs-app-router

Full end-to-end tRPC setup for Next.js App Router. Covers route handler with fetchRequestHandler (GET + POST exports), TRPCProvider with QueryClientProvider, createTRPCOptionsProxy for RSC prefetching, HydrateClient/HydrationBoundary for hydration, useSuspenseQuery for Suspense, and server-side call

Scan passed 0
frontend-ui-engineering

Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-gene

Scan passed 0
coding-standards

Baseline cross-project coding conventions for naming, readability, immutability, and code-quality review. Use detailed frontend or backend skills for framework-specific patterns. Use when reviewing code quality or naming with no framework-specific skill that applies.

Scan passed 0
metronome

Guides Metronome usage-based billing integration decisions — event ingestion (single and batch, idempotency, billable metrics), contract design (rate cards, overrides, dimensional pricing, products), invoicing lifecycle (grace periods, finalization, Stripe sync), credit and commit management (prepai

Scan passed 0
resilience-program-design

Designs a resilience program: how to structure and standardize resilience policies across an organization, team, or portfolio (tiered policy model with availability/RTO/RPO targets and DR approach selection), and how often to run resilience activities (operational cadence). Applies when the user ask

Scan passed 0