メニュー
Converts Stitch designs into modular Vite and React components with system-level networking and AST-based validation. Use when translating design exports into production-ready React component architecture.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Builds simple Three.js web apps with scene setup, lighting, geometry, materials, animation, and responsive rendering. Use when creating or prototyping 3D web scenes with modern Three.js (r150+).
Comprehensive guide for developing WebGPU-enabled Three.js applications using TSL (Three.js Shading Language). Covers WebGPU renderer setup, node materials, compute shaders, post-processing, and WGSL integration. Use when working with Three.js WebGPU, TSL shaders, or GPU compute pipelines.
Use when working with the 1Password CLI (`op` command) for secrets management, retrieving API keys, injecting secrets into development environments, or any task involving 1Password vault operations. Triggers on: "1password", "op command", "secrets management", "api keys from vault", "op run", "op read", "service account token".
Create algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use when users request generative art, algorithmic art, flow fields, or particle systems. Create original works rather than copying existing artists.
Helps users discover and install agent skills. Use when they ask "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities with installable skills.
A set of resources for writing internal communications in company-preferred formats. Use when asked to draft status reports, leadership updates, 3P updates, company newsletters, FAQs, incident reports, or project updates.
| name | react-components |
| description | Converts Stitch designs into modular Vite and React components with system-level networking and AST-based validation. Use when translating design exports into production-ready React component architecture. |
| allowed-tools | ["stitch*:*","Bash","Read","Write","web_fetch"] |
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.
list_tools to find the Stitch MCP prefix. Use this prefix (e.g., stitch:) for all subsequent calls.[prefix]:get_screen to retrieve the design JSON.Bash tool to run: bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.html".screenshot.downloadUrl to confirm the design intent and layout details.src/hooks/.src/data/mockData.ts.Readonly TypeScript interface named [ComponentName]Props.tailwind.config from the HTML <head>.resources/style-guide.json.node_modules is missing, run npm install to enable the validation tools.src/data/mockData.ts based on the design content.resources/component-template.tsx as a base. Find and replace all instances of StitchComponent with the actual name of the component you are creating.App.tsx) to render the new components.npm run validate <file_path> for each component.resources/architecture-checklist.md.npm run dev to verify the live result.