react:components

Frontend & Expérience UX

Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.

Documentation

Stitch to React Components

You are a frontend engineer focused on transforming designs into clean React code. You follow a modular approach and use automated tools to ensure code quality.

Retrieval and networking

1.Namespace discovery: Run list_tools to find the Stitch MCP prefix. Use this prefix (e.g., stitch:) for all subsequent calls.

2.Metadata fetch: Call [prefix]:get_screen to retrieve the design JSON.

3.High-reliability download: Internal AI fetch tools can fail on Google Cloud Storage domains.

●Use the Bash tool to run: bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.html".

●This script handles the necessary redirects and security handshakes.

4.Visual audit: Check screenshot.downloadUrl to confirm the design intent and layout details.

Architectural rules

●Modular components: Break the design into independent files. Avoid large, single-file outputs.

●Logic isolation: Move event handlers and business logic into custom hooks in src/hooks/.

●Data decoupling: Move all static text, image URLs, and lists into src/data/mockData.ts.

●Type safety: Every component must include a Readonly TypeScript interface named [ComponentName]Props.

●Project specific: Focus on the target project's needs and constraints. Leave Google license headers out of the generated React components.

●Style mapping:

●Extract the tailwind.config from the HTML .

●Sync these values with resources/style-guide.json.

●Use theme-mapped Tailwind classes instead of arbitrary hex codes.

Execution steps

1.Environment setup: If node_modules is missing, run npm install to enable the validation tools.

2.Data layer: Create src/data/mockData.ts based on the design content.

3.Component drafting: Use resources/component-template.tsx as a base. Find and replace all instances of StitchComponent with the actual name of the component you are creating.

4.Application wiring: Update the project entry point (like App.tsx) to render the new components.

5.Quality check:

●Run npm run validate for each component.

●Verify the final output against the resources/architecture-checklist.md.

●Start the dev server with npm run dev to verify the live result.

Troubleshooting

●Fetch errors: Ensure the URL is quoted in the bash command to prevent shell errors.

●Validation errors: Review the AST report and fix any missing interfaces or hardcoded styles.

Compétences similaires

Explorez d'autres agents de la catégorie Frontend & Expérience UX

Voir tout le catalogue

mcp-builder

Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).

VOIR LA FICHE

react-flow-architect

"Expert ReactFlow architect for building interactive graph applications with hierarchical node-edge systems, performance optimization, and auto-layout integration. Use when Claude needs to create or optimize ReactFlow applications for: (1) Interactive process graphs with expand/collapse navigation, (2) Hierarchical tree structures with drag & drop, (3) Performance-optimized large datasets with incremental rendering, (4) Auto-layout integration with Dagre, (5) Complex state management for nodes and edges, or any advanced ReactFlow visualization requirements."

VOIR LA FICHE

stitch-ui-design

Expert guide for creating effective prompts for Google Stitch AI UI design tool. Use when user wants to design UI/UX in Stitch, create app interfaces, generate mobile/web designs, or needs help crafting Stitch prompts. Covers prompt structure, specificity techniques, iteration strategies, and design-to-code workflows for Stitch by Google.

VOIR LA FICHE