تشغيل أي مهارة في Manus بنقرة واحدة

ابدأ الآن

reactcomponents

النجوم١

التفرعات٠

آخر تحديث٢ مارس ٢٠٢٦ في ١٥:٢٤

Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.

التثبيت

التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.

تشغيل في Manus

المصدر

citum

citum/citum-hub

فتح مستودع GitHub عرض مستودعات المنشئ

تنزيل

تشغيل في Manus

المهن ذات الصلةSOC

استنادا إلى تصنيف SOC المهني

مطوّرو الويبمهن الحاسوب والرياضيات·SOC 15-1254

مستكشف الملفات

10 ملفات

SKILL.md

readonly

name	react:components
description	Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.
allowed-tools	["stitch:","Bash","Read","Write","web_fetch"]

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.
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.

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.

المزيد من هذا المستودع

نفس المستودع

bun-sveltekit

citum/citum-hub

Patterns and constraints for building with Bun + SvelteKit. Use this skill whenever working on this project's frontend, backend routes, API endpoints, database access, testing, or build configuration. Trigger on any task involving SvelteKit components, Svelte stores, form actions, load functions, server routes, SQLite, or the Bun runtime. If the user asks to add a feature, fix a bug, or write tests in this codebase, consult this skill first.

2026-03-211

design-md

citum/citum-hub

Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files

2026-02-021

stitch-loop

citum/citum-hub

Teaches agents to iteratively build websites using Stitch with an autonomous baton-passing loop pattern

2026-02-021

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.

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.

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.