react:components
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_toolsto find the Stitch MCP prefix. Use this prefix (e.g.,stitch:) for all subsequent calls. - Metadata fetch: Call
[prefix]:get_screento retrieve the design JSON. - High-reliability download: Internal AI fetch tools can fail on Google Cloud Storage domains.
- Use the
Bashtool to run:bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.html". - This script handles the necessary redirects and security handshakes.
- Use the
- Visual audit: Check
screenshot.downloadUrlto confirm the design intent and layout details.
More from growth4u-systems/gattaca-secuenciador-de-prompts
agent-browser
Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.
13create-pr
Creates GitHub pull requests with properly formatted titles that pass the check-pr-title CI validation. Use when creating PRs, submitting changes for review, or when the user says /pr or asks to create a pull request.
12ralph-tui-prd
Generate a Product Requirements Document (PRD) for ralph-tui task orchestration. Creates PRDs with user stories that can be converted to beads issues or prd.json for automated execution. Triggers on: create a prd, write prd for, plan this feature, requirements for, spec out.
12n8n-workflow-patterns
Proven workflow architectural patterns from real n8n workflows. Use when building new workflows, designing workflow structure, choosing workflow patterns, planning workflow architecture, or asking about webhook processing, HTTP API integration, database operations, AI agent workflows, or scheduled tasks.
12vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
12supabase-postgres-best-practices
Postgres performance optimization and best practices from Supabase. Use this skill when writing, reviewing, or optimizing Postgres queries, schema designs, or database configurations.
11