What problem does it solve? Designing a dashboard or app screen often jumps straight to high-fidelity mockups, skipping the structural layout and the empty, loading, and error states where real UIs fail. This Skill produces low-fidelity wireframes that make information architecture, panel grids, and interaction states explicit before visual design begins. ## Core Features & Use Cases - Structured screen layout: Builds top nav, side nav, and a content grid of KPI tiles, data tables, charts, and forms with even gutters on a consistent column grid. - Explicit interaction states: Draws empty, loading, error, and success variants for every data-bearing panel, keyed in a legend, with recovery affordances in error states. - Separate breakpoint frames: Renders Desktop and Mobile as distinct frames with restructured mobile layouts (collapsed nav, single-column stacking), never one squeezed responsive blob. - Quality enforcement loop: Runs lint, score, and repair cycles through the Excalidash MCP server until the drawing scores at least 95 with zero hard blockers, then saves, versions, and exports. - Use Case: Ask for a wireframe of an analytics dashboard with KPI tiles, a revenue chart, and an orders table; receive desktop and mobile frames showing the table's empty, loading, error, and success states, exported as SVG or PNG. ## Quick Start Ask the AI to wireframe your dashboard screen with its panels and data states, for example: wireframe my analytics dashboard with a KPI row, a chart, and an orders table showing empty, loading, error, and success states on desktop and mobile.
