What problem does it solve? Building or repairing a whole screen as one monolithic task leads to duplicated fixes, noisy page-level diffs, and no protection against regressions. This Skill plans the split of a screen into components first, then routes construction, freezing, and maintenance to the right verification loops so each component is checked at component cost instead of page cost. ## Core Features & Use Cases - Reference outlining: Extracts landmarks, composition, viewports, component bounding boxes, palettes, and breakpoints from a reference page or image before any markup is written. - Component boundary planning: Guides the explicit decision of which blocks become standalone components with named states, using measured evidence about component size versus detection precision. - Construction-to-maintenance handoff: Routes per-component builds to auto-markup, then freezes converged components as story baselines via vlmkit build gallery so later edits are verified per component with check story. - Use Case: Given a design mock for a full dashboard page, outline the reference, decide the component list (header, card, table), build each with the construction loop, generate a gallery with per-story thresholds, commit baselines, and maintain all future edits through component-level visual regression checks. ## Quick Start Ask the agent to decompose the target screen or feature into components, build each one against the reference, and freeze the converged components as story baselines for ongoing maintenance.
