Menu
Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.
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.
Based on SOC occupation classification
Describes PHP and Laravel guidelines provided by Spatie. These rules result in more maintainable, and readable code.
Manage email marketing with the Mailcoach CLI — email lists, subscribers, campaigns, transactional emails, templates, automations, tags, and segments.
Create, schedule, and manage social media posts via Typefully. ALWAYS use this skill when asked to draft, schedule, post, or check tweets, posts, threads, or social media content for Twitter/X, LinkedIn, Threads, Bluesky, or Mastodon.
Update Spatie package documentation on spatie.be by re-importing docs for a given repo. Use after merging a PR that touches docs/, or when the user says 'update docs for [package]', 'rebuild docs for [repo]', 'import docs for [repo]', or invokes /update-spatie-docs [repo-name]. Takes a repo name argument (e.g., 'backup', 'laravel-medialibrary', 'laravel-pdf').
When the user wants to generate, iterate, or scale ad creative — headlines, descriptions, primary text, or full ad variations — for any paid advertising platform. Also use when the user mentions 'ad copy variations,' 'ad creative,' 'generate headlines,' 'RSA headlines,' 'bulk ad copy,' 'ad iterations,' 'creative testing,' or 'ad performance optimization.' This skill covers generating ad creative at scale, iterating based on performance data, and enforcing platform character limits. For campaign strategy and targeting, see paid-ads. For landing page copy, see copywriting.
When the user wants to optimize content for AI search engines, get cited by LLMs, or appear in AI-generated answers. Also use when the user mentions 'AI SEO,' 'AEO,' 'GEO,' 'LLMO,' 'answer engine optimization,' 'generative engine optimization,' 'LLM optimization,' 'AI Overviews,' 'optimize for ChatGPT,' 'optimize for Perplexity,' 'AI citations,' 'AI visibility,' or 'zero-click search.' This skill covers content optimization for AI answer engines, monitoring AI visibility, and getting cited as a source. For traditional technical and on-page SEO audits, see seo-audit. For structured data implementation, see schema-markup.
| 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"] |
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.