メニュー
Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/viem).
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices.
Converts Stitch designs into modular Vite and React components, or syncs/updates existing React components to align with the latest Stitch designs, using system-level networking and AST-based validation.
Convert Stitch HTML designs to React Native components, or syncs/updates existing native components to align with the latest Stitch designs, using StyleSheet.
Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays
Convert frontend code (Vite, React, 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 components into Stitch (e.g., requests to "save", "migrate", or "upload"). You must use this skill even for simple "save" operations, as it is the only way to ensure the design system is extracted and assets are properly linked.
Manage design systems in Stitch using MCP tools. Includes retrieval of assets, creating/updating design systems in Stitch, and applying them to screens.
| 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"] |
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.
DESIGN.md (see the design-md skill) for token fidelitynpm create vite@latest)list_tools, note the Stitch prefix (e.g. stitch:).[prefix]:get_screen with project and screen IDs..stitch/designs/{screen}.html and .png.colors.*, typography.*, spacing.* to CSS variables in src/index.css.src/components/, src/pages/, src/hooks/.| Pattern | Implementation |
|---|---|
| Layout grid / flex | Tailwind utilities or CSS modules aligned to DESIGN.md spacing tokens |
| Cards / panels | <section> with tokenized border-radius and elevation fallbacks for forced-colors |
| Tables | Semantic <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 |
| Loading | Skeleton components; aria-busy on containers during fetch |
| Wallet connect | Isolate in WalletProvider; never embed private keys in generated code |
/* 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
useReadContract (viem/wagmi) or ethers Contract + TanStack Query queryFn.formatUnits; show network name and chain ID in settings footer.txHash exists.eth_call in render loops.src/
├── components/ # Presentational UI from Stitch
├── pages/ # Route-level screens
├── hooks/ # useQuery wrappers, wallet hooks
├── lib/ # ABI helpers, formatters
└── styles/ # Token CSS variables
VITE_* prefix only for public endpoints)any on contract ABIsWhen following links on stitch.withgoogle.com/docs, use the full https://stitch.withgoogle.com/docs/... URL if relative navigation redirects incorrectly.