一键在 Manus 中运行任何 Skill

开始使用

react-components

星标0

分支0

更新时间2026年6月5日 15:07

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

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

FelipeOFF

FelipeOFF/my-claude-code-skills

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

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.

同仓库更多 Skills

同仓库

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.

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"

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"