skilld
All skills
google-labs-code avatar

/react-components

@ec43edb official
by Google Labs Codegoogle-labs-code/stitch-skills8.4k stars
1,105

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.

  • 11 files
  • 26.2 KB
  • Updated 3 months ago
  • GitHub

Ask your Agent

Use this Skill: https://skilld.dev/gh/google-labs-code/stitch-skills/react-components

This session only. Nothing lands on disk.

resourcesstitch-api-reference.md

≈307 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Stitch API reference

This document describes the data structures returned by the Stitch MCP server to ensure accurate component mapping.

Metadata schema

When calling get_screen, the server returns a JSON object with these key properties:

  • htmlCode: Contains a downloadUrl. This is a signed URL that requires a system-level fetch (curl) to handle redirects and security handshakes.
  • screenshot: Includes a downloadUrl for the visual design. Use this to verify layout intent that might not be obvious in the raw HTML.
  • deviceType: Usually set to DESKTOP. All generated components should prioritize the corresponding viewport (2560px width) as the base layout.

Technical mapping rules

  1. Element tracking: Preserve data-stitch-id attributes as comments in the TSX to allow for future design synchronization.
  2. Asset handling: Treat background images in the HTML as dynamic data. Extract the URLs into mockData.ts rather than hardcoding them into the component styles.
  3. Style extraction: The HTML <head> contains a localized tailwind.config. This config must be merged with the local project theme to ensure colors like primary and background-dark render correctly.

Source: SKILL.md on GitHub

Third-party checks

No third-party reports yet.

Provenance

Signed by skilld at ec43edb. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 3 days ago.

Steadyupdated 3 months ago

Capability

What it can do
Runs commands Reads files Edits files
All 5 allowed tools
stitch*:*BashReadWriteweb_fetch

Topics

  • React
  • TypeScript
  • components
  • vite
  • tailwind
  • stitch
  • design-to-code
  • ast-validation
  • modular

README badge

README badge for google-labs-code/stitch-skills/react-components

What it does

Converts Stitch designs into modular React components using AST-based validation and Tailwind styling. Fetches design JSON via Stitch MCP, downloads HTML and screenshots, generates typed components with isolated logic and mock data, then validates output against a project checklist.

Generated from the current SKILL.md.

Frequently asked

Does this skill work with design tools other than Stitch?
No. This skill is built specifically for Stitch designs and uses the Stitch MCP to retrieve screen metadata and assets.
What happens if I already have downloaded designs locally?
The skill checks for existing `.stitch/designs/{page}.html` and `.stitch/designs/{page}.png` files and asks you whether to refresh from Stitch or reuse the local files.
Do I need to set up Tailwind manually?
The skill extracts your `tailwind.config` from the design HTML and syncs it with `resources/style-guide.json`, then uses theme-mapped Tailwind classes in components.
Does this skill generate TypeScript types for components?
Yes. Every component includes a `Readonly` TypeScript interface named `[ComponentName]Props` for type safety.
Can I use this skill in a non-React or non-Vite project?
No. The skill is designed for React components in a Vite project and assumes `npm install`, `npm run validate`, and `npm run dev` commands are available.

Generated from the current SKILL.md. These answers refresh after source changes.