What problem does it solve? Design decisions for this app are often made from static drawings or hand-copied CSS, which hides real defects like RTL bidi flips, stacking bugs, and duplicated UI primitives until after code ships. This Skill produces interactive HTML mockups that inline the app's actual stylesheets, reproduce its real layout tree, and report measurements read from the rendered DOM, so a design decision can be falsified before it is built. ## Core Features & Use Cases - Real-CSS mockup authoring: Start from a template, declare an APP-CSS manifest of shipped stylesheets, and inline them in import order so the mockup renders exactly what the app renders, in both light and dark themes at phone widths. - Live measurement and rendering: A Playwright-based render script shoots every theme × width combination, prints the mockup's own measurement table, and reports console errors, catching defects that source review misses. - Reuse enforcement and pitfalls knowledge: References document the app's existing primitives (Modal, ListRow, RevealList, SettleControl) and a catalog of render-only pitfalls (bidi mirroring, inset shadows, font-loading traps) so mockups do not propose duplicate mechanisms. - Use Case: When asked to design a new screen or interaction, copy the template to mockups/<question>-v1.html, inline the relevant app CSS, build before/after frames from data, then run the render script and attach screenshots and measurements to the ADR. ## Quick Start Create a new design mockup for the proposed screen by copying the template into mockups/, inlining the app's CSS, and rendering it with the render script to review screenshots and measurements.
