← ClaudeAtlas

ui-to-codelisted

Turn a UI mockup, screenshot, or wireframe into code in the active primary's project context. Use when the user says "turn this into code," "build this UI," "implement this mockup," "code this screenshot," or "extract a UI spec." Also offer this proactively when implementation is about to start from a visual artifact. The unified plugin currently has no managed cross-family image transport, so the active primary performs the visual extraction and implementation while explicitly reporting that independent visual extraction is unavailable; never claim a second visual read occurred.
sumitake/agent-collab · ★ 0 · Web & Frontend · score 65
Install: claude install-skill sumitake/agent-collab
# UI to code Implement a visual design in the user's actual stack while preserving an honest boundary around reviewer independence. ## Current availability boundary The coordinator has no image or binary attachment contract. Managed cross-family structural extraction is **temporarily unavailable**. Do not pass paths, base64 image bytes, invented media fields, or raw provider commands. When the user requires an independent visual extraction as a governance gate, return typed unavailable and stop that gate. ## Workflow 1. Inspect the image using the active host's native visual capability. When any region is detail-bound — small text, dense charts, closely spaced lines, fine UI detail — magnify it before reading: use the host's native zoom or crop actions, or a code-execution crop from the full-resolution source. A full-view-only read of sub-patch detail is unreliable and tends to fail confidently rather than uncertainly. 2. State that the structural read is primary-only; do not call it a two-read or cross-family result. 3. Extract a working spec: layout regions, elements, visible text, hierarchy, approximate spacing and colors, interaction hints, responsive behavior, and accessibility requirements. 4. Inspect the project before writing. Reuse its framework, components, design tokens, naming conventions, tests, and accessibility patterns. 5. Implement in the trusted primary's normal mutation boundary. This public skill does not grant a provider