Skill

Stitch to React Components

Install

npx claudepluginhub frank-luongt/faos-skills-marketplace --plugin faos-ux-designer

Tool Access

This skill uses the workspace's default tool permissions.

Supporting Assets

examples/gold-standard-card.tsxscripts/fetch-stitch.shscripts/validate.js

SKILL.md

Similar Skills

ui-ux-pro-max

Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.

ui-ux-pro-max

57.6k

context7-mcp

Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.

context7-plugin

51.8k

competitive-landscape

Analyzes competition with Porter's Five Forces, Blue Ocean Strategy, and positioning maps to identify differentiation opportunities and market positioning for startups and pitches.

startup-business-analyst

32.9k

Stats

Parent Repo Stars1

Parent Repo Forks0

Last CommitMar 14, 2026

Actions

View Source View Plugin View on GitHub View README

Retrieval and networking

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

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

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.

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 <head>.
Sync these values with resources/style-guide.json.
Use theme-mapped Tailwind classes instead of arbitrary hex codes.

Execution steps

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

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

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.

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

Quality check:

Run npm run validate <file_path> 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.

Retrieval and networking

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

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

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.

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 <head>.
Sync these values with resources/style-guide.json.
Use theme-mapped Tailwind classes instead of arbitrary hex codes.

Execution steps

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

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

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.

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

Quality check:

Run npm run validate <file_path> 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.

Stitch to React Components

Install

Tool Access

Supporting Assets

SKILL.md

Similar Skills

Stitch to React Components

Install

Tool Access

Supporting Assets

SKILL.md

name: react-components description: Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation. tags: [react, tooling]

Stitch to React Components

Retrieval and networking

Architectural rules

Execution steps

Troubleshooting

Similar Skills

name: react-components description: Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation. tags: [react, tooling]

Stitch to React Components

Retrieval and networking

Architectural rules

Execution steps

Troubleshooting