Run any Skill in Manus with one click

Get Started

react-components

Stars0

Forks0

UpdatedJune 5, 2026 at 15:07

Converte designs Stitch em componentes Vite + React modulares com validação AST.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

FelipeOFF

FelipeOFF/my-claude-code-skills

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

File Explorer

9 files

SKILL.md

readonly

name	react-components
description	Converte designs Stitch em componentes Vite + React modulares com validação AST.
source	vendored
upstream	https://github.com/google-labs-code/stitch-skills
license	MIT
allowed-tools	["stitch:","Bash","Read","Write","web_fetch"]
added	"2026-05-16T00:00:00.000Z"
vendored	"2026-06-05T00:00:00.000Z"

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

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.
Check for existing designs: Before downloading, check if .stitch/designs/{page}.html and .stitch/designs/{page}.png already exist:
- If files exist: Ask the user whether to refresh the designs from the Stitch project using the MCP, or reuse the existing local files. Only re-download if the user confirms.
- If files do not exist: Proceed to step 4.
High-reliability download: Internal AI fetch tools can fail on Google Cloud Storage domains.
- HTML: bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" ".stitch/designs/{page}.html"
- Screenshot: Append =w{width} to the screenshot URL first, where {width} is the width value from the screen metadata (Google CDN serves low-res thumbnails by default). Then run: bash scripts/fetch-stitch.sh "[screenshot.downloadUrl]=w{width}" ".stitch/designs/{page}.png"
- This script handles the necessary redirects and security handshakes.
Visual audit: Review the downloaded screenshot (.stitch/designs/{page}.png) to confirm 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.

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.

More from this repository

same repository

absolute-flutter

FelipeOFF/my-claude-code-skills

Use this skill whenever the user is building or scaffolding a new Flutter or Dart mobile app, adding any Flutter feature, screen, page, view model, use case, repository, or API/backend call, setting up Flutter push notifications or deep links, or mapping/refactoring an existing Flutter project toward a layered clean architecture — EVEN WHEN the user never names the architecture, rx_notifier, MVVM, clean architecture, get_it, dio, drift, or go_router. It applies the moment the work touches Flutter app structure: a request like "add a login screen", "fetch data from this endpoint", "create a settings feature", "wire up FCM", "open this screen from a notification", or "clean up my Flutter project" is in scope. This skill is THE way to produce Flutter code in this codebase shape: rx_notifier Controller view models, AbstractUseCase with Either<AppError,T> error handling, I*Repository interface/impl pairs, a tiered dio gateway, get_it dependency injection, drift TTL cache, and go_router navigation. Prefer it over a

2026-06-110

code-review-graph

FelipeOFF/my-claude-code-skills

Knowledge graph semântico da codebase via MCP. Mapeia arquitetura, analisa blast-radius de mudanças e faz code review com até 8x menos tokens. Usa Tree-sitter (24 linguagens) + SQLite.

2026-06-050

llm-wiki

FelipeOFF/my-claude-code-skills

Mantém uma knowledge base persistente no Obsidian seguindo o pattern Karpathy LLM Wiki — ingest de sources, query sobre wiki compilado, lint de saúde. Dispara quando o usuário pede "ingest", "alimenta o wiki", "atualiza wiki", "consulta wiki", "lint wiki", "/wiki-ingest", "/wiki-query", "/wiki-lint", "que sabemos sobre X", "compila X no wiki", "adiciona ao wiki", ou ao salvar uma nova source em References/.

2026-06-050

design-md

FelipeOFF/my-claude-code-skills

Analisa projetos Stitch e sintetiza design system semântico em arquivos DESIGN.md.

2026-06-050

enhance-prompt

FelipeOFF/my-claude-code-skills

Transforma ideias vagas de UI em prompts polidos e otimizados para Stitch.

2026-06-050

frontend-project-style

FelipeOFF/my-claude-code-skills

Design system e style guide configurável para projetos frontend. Use SEMPRE que criar componentes, páginas ou UI em React/Next/Angular/Vue.

2026-06-050

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

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.

Check for existing designs: Before downloading, check if .stitch/designs/{page}.html and .stitch/designs/{page}.png already exist:

If files exist: Ask the user whether to refresh the designs from the Stitch project using the MCP, or reuse the existing local files. Only re-download if the user confirms.
If files do not exist: Proceed to step 4.

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

HTML: bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" ".stitch/designs/{page}.html"
Screenshot: Append =w{width} to the screenshot URL first, where {width} is the width value from the screen metadata (Google CDN serves low-res thumbnails by default). Then run: bash scripts/fetch-stitch.sh "[screenshot.downloadUrl]=w{width}" ".stitch/designs/{page}.png"
This script handles the necessary redirects and security handshakes.

Visual audit: Review the downloaded screenshot (.stitch/designs/{page}.png) to confirm 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.

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.