image-to-codelisted

# Image to Code You're tasked with translating the visual target image into a high-quality, interactive website or web app. ## Critical Overrides - Refer to the Plugin router [$index](../index/SKILL.md) before proceeding. - Follow [$critical-overrides](../../references/critical-overrides.md). ## User Context Before starting, load [$user-context](../user-context/SKILL.md) and run its preflight script when local shell access is available. Use saved product URLs, Figma files, screenshots, reference images, codebase paths, Storybook, tokens, design systems, brand assets, component refs, browser preferences, and share targets as grounding material when relevant. Do not inspect every saved reference. Inspect only what the current task needs. ### [IMPORTANT] Previewing prototypes in ChatGPT Work Mode Starting `sites-preview` is not verification. Verification requires opening `http://terminal.local:4173/` in the cloud browser, inspecting the rendered page, testing primary interactions, checking browser console errors, and passing design QA. Do not substitute HTTP health, build success, preview-service status, or deployment success for browser verification. If the cloud browser cannot be used, report verification as blocked. For local prototype verification and design QA in ChatGPT Work Mode: 1. Install dependencies if needed. The project must have an npm `dev` script. 2. `sites-preview` runs `npm run dev -- --host 0.0.0.0 --port 4173 --strictPort`. The `dev` script must a