ci-mockup-figure

# CI Mockup Figure ## Overview The goal is **space-efficient, information-dense figures** that communicate a system's design, a method's pipeline, or an architectural flowchart in minimal page area. Three paths depending on figure type: - **HTML mockup path** (Phases 1-4 below): for UI mockups, dashboards, timelines, and any figure where content is rectangular with no cross-node arrows. Build interactive HTML, capture screenshots, insert into LaTeX. - **README / Markdown hero path** (README / Markdown Target section): same HTML build phase, but capture via headless Chrome to a PNG and embed it as a Markdown image referencing `assets/fig.png`. Requires larger type, higher content density, and one dominant focal element -- the viewer scales the image down to column width. - **Abstract figure path** (Abstract Figure Toolchain section): for architecture overviews, dependency topologies, and any figure needing arrow routing between non-adjacent nodes. Use TikZ, skia-canvas, or Illustrator ExtendScript. Every figure must pass the space test: does this figure communicate more per square inch than the text it displaces? If a full-width figure takes half a page but only says "A → B → C → D", it fails. A wrapfigure showing an interactive prototype with search results, graph nodes, and real data labels passes because it communicates system design, data model, and UX simultaneously. This skill works for any document where figures need to communicate design or methodo...