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.

README.md

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

Stitch to React Components Skill

Install

npx skills add google-labs-code/stitch-skills --skill react:components --global

Example Prompt

Convert my Landing Page screen in my Podcast Stitch Project to a React component system.

Skill Structure

This repository follows the Agent Skills open standard. Each skill is self-contained with its own logic, validation scripts, and design tokens.

skills/react-components/
├── SKILL.md           — Core instructions & workflow
├── package.json       — Validator dependencies
├── scripts/           — Networking & AST validation
├── resources/         — Style guides & API references
└── examples/          — Gold-standard code samples

How it Works

When activated, the agent follows a high-fidelity engineering pipeline:

  1. Retrieval: Uses a system-level curl script to bypass TLS/SNI issues on Google Cloud Storage.
  2. Mapping: Cross-references Stitch metadata with the local style-guide.json to ensure token consistency.
  3. Generation: Scaffolds components using a strict Atomic Design pattern.
  4. Validation: Runs an automated AST check using @swc/core to prevent hardcoded hex values or missing interfaces.
  5. Audit: Performs a final self-correction check against a 20-point architecture checklist.

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.