Stitch React Component Builder
Turn Stitch screens into modular, maintainable, and validated React components.
The skill asks for user confirmation when existing design files are found and scopes work to project files; however, it permits Bash, Write, web_fetch, system-level networking, and signed external downloads without sufficient data-flow disclosure, sensitive-data guidance, least-privilege detail, rollback, or isolation. No evidence of malware, credential theft, or covert exfiltration was found, so no red-line status is applied.
The workflow is phased, script arguments and failure messages are reasonably explicit, and a lockfile plus CI validation exist. Static files do not prove that key paths run successfully, while visual audits, MCP prefix discovery, directory conventions, and multi-screen handling depend on external state; abnormal-input and failure coverage is limited, so points are deducted under the static ceiling.
The audience, React/Vite conversion task, and synchronization scenarios are fairly clear, with several architectural constraints. Non-fit boundaries, trigger conditions, and input/output contracts are incomplete, and the core workflow depends on Stitch MCP, Google Cloud Storage, and external network access without Chinese-language or mainland-China reachability guidance.
The supplied material documents structure, installation, dependencies, example references, an architecture checklist, licensing, version fields, a lockfile, security policy, and GitHub Actions. Changelog coverage, explicit maintenance ownership, update path, known limitations, and troubleshooting remain incomplete, and the README's example/resource claims are not fully verifiable from the supplied files.
The skill directly targets generating or synchronizing modular React components from Stitch designs and specifies data, navigation, theming, and AST-validation requirements, making the core value plausible. Static review cannot verify generated output, and external-service and manual-audit costs may be substantial; completeness and marginal benefit over manual implementation are insufficiently evidenced, so the score stays below the static maximum.
Auditable scripts, a package lockfile, a CI workflow, and explicit validation rules provide limited reproducibility evidence. There are no supplied execution results or comprehensive tests; CI validates only one referenced example path, so the score is conservatively low within the static limit.
- The core workflow depends on a configured and reachable Stitch MCP, signed download URLs, and Google Cloud Storage; mainland-China reachability is not established.
- Bash, Write, and web_fetch are permitted; review external URLs, write targets, and generated content, and provide your own backup and rollback process.
- The CI evidence covers only one referenced gold-standard example and does not establish correctness for all generated components, TypeScript compilation, visual fidelity, or abnormal cases.
- Phase 3 describes every rule as mandatory while Phase 4 makes verification optional, creating an inconsistent definition of completion.
What does this skill do, and when should you use it?
This skill helps frontend developers convert Google Stitch designs into React code. It retrieves every screen through Stitch MCP, downloads HTML and screenshots with a provided script, visually audits the designs, and extracts current Tailwind design tokens. It then structures a Vite/React application around reusable components, custom hooks, and mock data, with AST-based validation rules. It fits teams already using Stitch MCP and seeking design-token consistency, but it depends on Stitch MCP, network access, and local shell and filesystem operations.
Discovers the Stitch MCP tool prefix; calls get_screen for every project screen to obtain design JSON and download URLs; downloads HTML and width-qualified PNG screenshots with scripts/fetch-stitch.sh and visually audits them; calls get_project and writes .stitch/metadata.json; extracts Tailwind colors, fonts, spacing, border radii, and typography tokens from each HTML head and overwrites resources/style-guide.json; creates src/data/mockData.ts, modular React components, and custom hooks; replaces placeholder navigation with React Router Link components; and optionally runs npm run validate and tsc --noEmit.
- A frontend developer needs to convert every screen in a Stitch project into Vite/React components.
- A React team needs to sync existing components with the latest Stitch designs.
- A team needs to extract the current project’s Tailwind tokens and keep implementation styles consistent.
- A multi-page React app needs Stitch placeholder navigation connected to real routes.
What are this skill's strengths and limitations?
- Covers the workflow from screen retrieval and asset downloading through visual review and React architecture.
- Enforces modular components, custom hooks, external mock data, Props interfaces, and theme-mapped tokens.
- Supports wiring multiple Stitch screens into React Router and requires a desktop-accessible route home link.
- Includes AST validation, TypeScript checking, and an architecture checklist for quality control.
- Requires a configured Stitch MCP server plus network, shell, and filesystem access.
- The requirement to download and inspect every screen may be slow for large projects.
- Validation, dev-server execution, and browser testing are optional and require user permission.
- The source does not provide a test suite, platform coverage results, or specific Vite/React versions.
How do you install this skill?
Configure and run the Stitch MCP server first. Install the skills selectively with: npx skills add google-labs-code/stitch-skills. The README also documents plugin installation for Codex, Claude Code, and Cursor; exact post-install folder deployment details for this individual skill are not specified.
How do you use this skill?
In a coding agent configured with Stitch MCP, use a trigger such as: "Convert all screens in Stitch project projects/123 to React components." or "Sync the app to the last updates of the Stitch project 13039335308618232534." If existing .stitch/designs files are found, the skill asks whether to refresh them from Stitch or reuse the local files. Permission is required before running validation scripts, a development server, or browser audits.