spectrum-design-data: Skill for Claude Code

TUI verification (3-tier strategy)

The design-data TUI (sdk/tui) has a purpose-built verification stack. Choose the lowest tier that answers your question — Tier 1 is fastest and most exact, Tier 3 is the only one that catches visual/glyph issues.

Tier 1  render_to_buffer / TestBackend  ← deterministic, no terminal, CI backbone
Tier 2  rmux + capture-pane             ← real binary, live screen text
Tier 3  asciinema + agg / Ghostty       ← pixel image for glyph/colour verification

Prerequisites

• All tiers: cargo build -p design-data-cli --release (or moon run :build) so the design-data binary is on PATH / in sdk/target/release/.
• Tier 2: rmux 0.3.x on PATH (brew install rmux).
• Tier 3 (asciinema): asciinema 3.x + agg on PATH (brew install asciinema agg).
• Tier 3 (Ghostty): Ghostty 1.3.0+, macOS Screen Recording permission granted to the controlling terminal, and GetWindowID (brew install smokris/getwindowid/getwindowid).

---

1. Tier 1 — in-process buffer assertions (default)

render_to_buffer(&mut model, w, h) builds a ratatui TestBackend at an exact size, draws once, and returns the Buffer for cell-level assertions. No terminal emulator. All 200+ existing tests use this pattern.

Run the full suite (always start here):

cargo test -p design-data-tui        # or: moon run :test

Add a targeted assertion — follow the patterns in references/tier1-test-api.md (source: sdk/tui/tests/render.rs, sdk/tui/tests/common/mod.rs):

use common::{render_to_buffer, make_graph_with_tokens, update_ctx};

#[test]
fn my_new_feature_renders_label() {
    let graph = make_graph_with_tokens(&["accent-color"]);
    let ctx  = update_ctx(&graph);
    let mut model = Model::new();
    update(&mut model, Message::PaletteSubmit("query property=accent-color".into()), &ctx);
    let buf = render_to_buffer(&mut model, 80, 24);
    // assert specific cell or scan rows:
    assert_eq!(buf.cell((0, 0)).unwrap().symbol(), "▶");
}