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.

resourcesarchitecture-checklist.md

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

Architecture Quality Gate

Structural integrity

  • Logic extracted to custom hooks in src/hooks/.
  • No monolithic files; strictly Atomic/Composite modularity.
  • All static text/URLs moved to src/data/mockData.ts.

Type safety and syntax

  • Props use Readonly<T> interfaces.
  • File is syntactically valid TypeScript (no red squiggles).
  • Placeholders from templates (e.g., StitchComponent) have been replaced with actual names.

Styling and theming

  • Dark mode (dark:) applied to all color classes.
  • No hardcoded hex values; use theme-mapped Tailwind classes.

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.