AI导哈

前端开发

react-vite-dashboard

google-labs-code/stitch-skills

Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/viem).

  • 5676 次安装
  • 8600 星标
  • 收录于

安装命令

npx skills add https://github.com/google-labs-code/stitch-skills --skill react-vite-dashboard

SKILL.md

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.

相关 Skills

design-mdgoogle-labs-code/stitch-skillsAnalyze Stitch projects and synthesize a semantic design system into DESIGN.md files设计与多媒体6.5万enhance-promptgoogle-labs-code/stitch-skillsTransforms 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.智能体工作流5.9万stitch-loopgoogle-labs-code/stitch-skillsTeaches agents to iteratively build websites using Stitch with an autonomous baton-passing loop pattern其他5.7万shadcn-uigoogle-labs-code/stitch-skillsExpert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices.前端开发5.4万remotiongoogle-labs-code/stitch-skillsGenerate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays设计与多媒体4.2万stitch-designgoogle-labs-code/stitch-skillsUnified entry point for Stitch design work. Handles prompt enhancement (UI/UX keywords, atmosphere), design system synthesis (.stitch/DESIGN.md), and high-fidelity screen generation/editing via Stitch MCP.设计与多媒体2.5万