Wireframe

Owns WIREFRAME.md — the structural layout plan a design consumes: a YAML frontmatter holds the region tree, and a markdown body narrates it with a screen map and per-surface rationale. From that plan the skill draws a low-fi wireframe — greyscale, content-blind, the kind you sketch before visual design. Arrangement is orthogonal to visual identity: the same plan holds under any design, so this skill plans structure only — information architecture, region layout, and screen flow — never colors, fonts, or tokens.

Quick start

Operations:

• create — author or patch the layout plan from conversation (surfaces, blocks, shapes, flow). → create.md
• render — draw the plan as a low-fi wireframe — an HTML page or an ASCII sketch — or a Mermaid screen-flow. → render.md
• validate — check a wireframe or plan for coherence and reconcile the plan in natural language when it should change. → validate.md

Discovery

discovery.md runs before every operation — never skipped, never invoked directly. It checks existing context (an existing WIREFRAME.md, the conversation, any brief the user provides) and routes by intent — author a plan, draw one, or check one. See discovery.md.

Artifact

Produces and owns docs/design/WIREFRAME.md and its drawn view docs/design/wireframe.html — a low-fi wireframe. The frontmatter region tree is the plan the render draws from; the body is for humans. The render is generative: it reads the plan and draws the page with judgment, guided by the bundled glyph kit (assets/wireframe.css) and rubric (drawing.md) so runs stay consistent in style — not a byte-identical projection. The full template and the shape vocabulary live in create.md.