react:components

Call the Stitch MCP get_screen tool to retrieve the design JSON, download the HTML and screenshot with the fetch script, then scaffold components from the template. Run npm run validate on each file to confirm interfaces and styling rules pass.

Use the included fetch-stitch.sh bash script, which runs curl with redirect following and compressed transfer to handle TLS/SNI handshakes. Quote the signed URL to prevent shell parsing errors, and append =w{width} to screenshot URLs for full resolution.

Yes, the validate.js script parses each component with @swc/core and requires a TsInterfaceDeclaration whose name ends in Props. It also scans JSX className attributes and rejects any hardcoded hex color values.

Yes, if .stitch/designs files already exist for the page, the workflow asks whether to refresh from the Stitch project or reuse local files. Re-downloading only happens after explicit user confirmation.

Validation fails when className attributes contain literal hex colors instead of theme-mapped Tailwind classes. Extract the tailwind.config from the design HTML head, sync it with style-guide.json, and use tokens like primary or background-dark.