Skill

stitch-react-components

Converts Stitch designs to modular Vite/React TypeScript components using MCP tools for JSON/HTML retrieval, with Tailwind theme mapping, type safety, mock data isolation, and reliable Bash fetches.

React

Vite

Install

npx claudepluginhub partme-ai/full-stack-skills --plugin t2ui-skills

Tool Access

This skill is limited to using the following tools:

stitch*:*BashReadWriteweb_fetch

Preview

**Constraint**: Only use this skill when the user explicitly mentions "Stitch" and converting Stitch screens to React (Vite/React, TypeScript).

Supporting Assets

LICENSE.txtexamples/usage.mdreferences/tailwind-to-react.mdresources/architecture-checklist.mdresources/component-template.tsxscripts/fetch-stitch.sh

SKILL.md

Similar Skills

using-git-worktrees

Creates isolated Git worktrees for feature branches with prioritized directory selection, gitignore safety checks, auto project setup for Node/Python/Rust/Go, and baseline verification.

superpowers

168.3k

subagent-driven-development

3 files

Executes implementation plans in current session by dispatching fresh subagents per independent task, with two-stage reviews: spec compliance then code quality.

superpowers

168.3k

dispatching-parallel-agents

Dispatches parallel agents to independently tackle 2+ tasks like separate test failures or subsystems without shared state or dependencies.

superpowers

168.3k

Stats

Stars328

Forks62

Last CommitMar 25, 2026

Actions

View Source View Plugin View on GitHub View README

Stitch to React Components

Constraint: Only use this skill when the user explicitly mentions "Stitch" and converting Stitch screens to React (Vite/React, TypeScript).

You are a frontend engineer turning Stitch designs into clean, modular React code. Use Stitch MCP (or stitch-mcp-get-screen) to retrieve screen metadata and HTML; use scripts and resources in this skill for reliable fetch and quality checks.

Prerequisites

Stitch MCP Server (https://stitch.withgoogle.com/docs/mcp/guide/)
Node.js and npm (for Vite/React project and optional validation)
Stitch project and screen IDs — two ways: (1) From a Stitch design URL: parse projectId (path) and screenId (node-id query). (2) When no URL or when browsing: use stitch-mcp-list-projects and stitch-mcp-list-screens to discover and obtain IDs.

Retrieval and Networking

Discover Stitch MCP prefix: Run list_tools to find the prefix (e.g. mcp_stitch__stitch:).
Fetch screen metadata: Call [prefix]:get_screen with projectId and screenId (numeric IDs) to get design JSON, htmlCode.downloadUrl, screenshot.downloadUrl, dimensions, deviceType.
High-reliability HTML download: AI fetch tools can fail on Google Cloud Storage URLs. Use Bash to run the skill script:
```
bash scripts/fetch-stitch.sh "<htmlCode.downloadUrl>" "temp/source.html"
```
This uses curl -L for redirects and TLS. Ensure the URL is quoted.
Visual reference: Use screenshot.downloadUrl to confirm layout and details.

Architectural Rules

Modular components: Split the design into separate files; avoid one giant file.
Logic isolation: Put event handlers and business logic in src/hooks/.
Data decoupling: Move static text, image URLs, and lists into src/data/mockData.ts.
Type safety: Every component must have a Readonly TypeScript interface [ComponentName]Props.
Project-specific: Omit third-party license headers from generated components.
Style mapping: Extract tailwind.config from HTML <head>; sync with resources/style-guide.json if present; use theme-mapped Tailwind classes instead of raw hex.

Execution Steps

Environment: If the project has no node_modules, run npm install so validation (if used) works.
Data layer: Create src/data/mockData.ts from the design content.
Component drafting: Use resources/component-template.tsx as base; replace all StitchComponent with the real component name.
Wiring: Update the app entry (e.g. App.tsx) to render the new components.
Quality check: Run npm run validate <file_path> if the project has a validate script; verify against resources/architecture-checklist.md; run npm run dev to confirm visually.

Integration with This Repo

Get screen: Use stitch-mcp-get-screen (or MCP get_screen) with projectId and screenId. Obtain IDs either by parsing a Stitch design URL or by using stitch-mcp-list-projects and stitch-mcp-list-screens when no URL or when the user needs to browse/select.
Design system: If the project has DESIGN.md (from stitch-design-md), align colors and typography with that semantic system when mapping to Tailwind. When converting Stitch HTML to React, use references/tailwind-to-react.md for theme-mapped Tailwind (tokens → tailwind.config); keep Tailwind classes in output, map Stitch tokens to project theme.

Troubleshooting

Fetch errors: Quote the URL in the bash command to avoid shell issues; ensure scripts/fetch-stitch.sh is executable.
Validation errors: Fix missing Props interfaces and hardcoded styles per the AST report; follow references/architecture-checklist.md.

Keywords

English: Stitch, React, Vite, components, validation, mockData, Tailwind.
中文关键词： Stitch、React、组件、校验、Tailwind。

References

Examples: examples/usage.md
Style Mapping: references/tailwind-to-react.md — Theme-mapped Tailwind when converting Stitch HTML; keep Tailwind classes, sync Stitch tokens to tailwind.config.
Resources:
- resources/architecture-checklist.md
- resources/component-template.tsx
Scripts: scripts/fetch-stitch.sh
Stitch API / MCP