tui-page-composer

Purpose

Turn product design descriptions into a full-page text UI (TUI) that is also machine-readable and drawable:

• Output a combined TUI_RENDER for the entire page.
• Output a per-component summary table.
• Output a consolidated PENCIL_SPEC and PENCIL_BATCH_DESIGN plan (≤25 ops per call).

This skill assumes you follow the shared contract and grid→pixel mapping from tui-front-ui.

Workflow

1. Parse input — Read the input model JSON (widthCols, grid, props, state, style, typography, layout, hotkeys).
2. Calculate layout — Convert column/row positions to pixel coordinates using the grid (cellWidthPx=8, cellHeightPx=16).
3. Render TUI_RENDER — Build the monospace ASCII art with box-drawing characters, respecting widthCols.
4. Build COMPONENT_SPEC — Emit the JSON spec with bbox, style, typography, state, and hotkeys.
5. Build PENCIL_SPEC — Emit the canvas and component list for Pencil MCP.
6. Plan PENCIL_BATCH_DESIGN — Emit batch_design calls (max 25 ops per call) to create the design in Pencil.
7. Validate — Verify bbox dimensions in COMPONENT_SPEC match the TUI_RENDER grid; confirm batch ops stay within the 25-op limit.