techwavedev 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.
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
ReadonlyTypeScript 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.configfrom the HTML<head>. - Sync these values with
resources/style-guide.json. - Use theme-mapped Tailwind classes instead of arbitrary hex codes.
- Extract the
Execution steps
- Environment setup: If
node_modulesis missing, runnpm installto enable the validation tools. - Data layer: Create
src/data/mockData.tsbased on the design content. - Pattern Retrieval (Optional): If qdrant-memory is available, search for existing components (
type: "code") to reuse patterns or interfaces. - Component drafting: Use
resources/component-template.tsxas a base. Find and replace all instances ofStitchComponentwith 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 devto verify the live result.
- Run
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.
AGI Framework Integration
Qdrant Memory Integration
Before executing complex tasks with this skill:
python3 execution/memory_manager.py auto --query "<task summary>"
Decision Tree:
- Cache hit? Use cached response directly — no need to re-process.
- Memory match? Inject
context_chunksinto your reasoning. - No match? Proceed normally, then store results:
python3 execution/memory_manager.py store \
--content "Description of what was decided/solved" \
--type decision \
--tags react-components <relevant-tags>
Note: Storing automatically updates both Vector (Qdrant) and Keyword (BM25) indices.
Agent Team Collaboration
- Strategy: This skill communicates via the shared memory system.
- Orchestration: Invoked by
orchestratorvia intelligent routing. - Context Sharing: Always read previous agent outputs from memory before starting.
Local LLM Support
When available, use local Ollama models for embedding and lightweight inference:
- Embeddings:
nomic-embed-textvia Qdrant memory system - Lightweight analysis: Local models reduce API costs for repetitive patterns