What problem does it solve? Designers and product teams need to communicate screen structure and layout quickly without committing to brand, color, or production code. This Skill produces consistent, monochrome SVG wireframes that focus purely on what goes where, making early design review fast and unambiguous. ## Core Features & Use Cases - SVG Wireframe Generation: Produces standalone SVG wireframes for desktop (1280×800), tablet (768×1024), and mobile (375×812) viewports using a strict house style: 8px grid, fixed palette, and a 12/14/20/28 type scale. - Reusable Primitive Library: Ships copy-paste SVG snippets for inputs, navigation, cards, tables, modals, toasts, and annotation callouts, plus four complete worked examples (login, dashboard, settings, modal). - Review Viewer Pages: Builds a static index.html viewer with sticky table of contents, click-to-zoom lightbox, and responsive collapse for browsing multi-screen flows. - Use Case: Ask for a wireframe of a settings page, and receive a snapped-to-grid SVG file, an inline preview, and a numbered annotation list mapping each region to its intent. ## Quick Start Ask the agent to wireframe a login screen for mobile and it will write a monochrome SVG file with numbered annotations.
