Loading source
Pulling the file list, source metadata, and syntax-aware rendering for this listing.
Source from repo
Convert Stitch-generated screens into validated React component systems with design token consistency
Files
Skill
Size
Entrypoint
Format
Open file
Syntax-highlighted preview of this file as included in the skill package.
resources/stitch-api-reference.md
1# Stitch API reference2This document describes the data structures returned by the Stitch MCP server to ensure accurate component mapping.4### Metadata schema6When calling `get_screen`, the server returns a JSON object with these key properties:7* **htmlCode**: Contains a `downloadUrl`. This is a signed URL that requires a system-level fetch (curl) to handle redirects and security handshakes.8* **screenshot**: Includes a `downloadUrl` for the visual design. Use this to verify layout intent that might not be obvious in the raw HTML.9* **deviceType**: Usually set to `DESKTOP`. All generated components should prioritize the corresponding viewport (2560px width) as the base layout.10### Technical mapping rules121. **Element tracking**: Preserve `data-stitch-id` attributes as comments in the TSX to allow for future design synchronization.132. **Asset handling**: Treat background images in the HTML as dynamic data. Extract the URLs into `mockData.ts` rather than hardcoding them into the component styles.143. **Style extraction**: The HTML `<head>` contains a localized `tailwind.config`. This config must be merged with the local project theme to ensure colors like `primary` and `background-dark` render correctly.15