authoring-wireframes — SKILL.md

Variant: standard · When to use: producing (or amending) a structural wireframes document from the upstream user-flows, to a bar an engineer can build the screen structure from.

Overview

This skill is the how-to of writing a strong, comprehensive wireframes document — the judgment a producer applies, not the section list. A wireframe here is low-to-mid fidelity and structural: the layout regions (on a grid, in a shared app-shell), content hierarchy, components, affordances, content/microcopy intent, per-screen states, and screen-composition accessibility of each key screen — expressed in text as a structured layout description + an ASCII/markdown box sketch + per-element annotations, not a pixel mockup. It assumes two collaborators: a template tool that supplies the section structure, and a deep-research capability to ground each screen in established UI patterns. The producer is handed the upstream user-flows (the screens and state-transitions each flow traverses) plus a design-system if one exists — and lays out every flow-named screen, never a blank page. The bar to clear: the doc is buildable (an engineer can build the screen structure), covered (every flow-named screen + state has a wireframe), and well-composed (an objective layout-quality bar).

Fidelity is a spectrum across three axes — interactivity, visuals, content (NN/g). A wireframe is low-to-mid on visuals, mid on structure, low on interactivity. Final color/type/pixels are downstream hi-fi; the token system + per-component a11y contract are the design-system's — this skill stays structural. The method is medium-independent: the artifact today is markdown; a future design-tool backend changes only the medium, not the thinking or the bar.

When to activate

• Authoring a new wireframes document from a project idea + the upstream user-flows.
• Laying out the key screens (and their states) that a set of user-flows names.
• Amending an existing wireframes doc when a flow, screen, region, or referenced component changes (see Step 8).
• Filling a wireframes template with researched, decision-complete structural content.

Do NOT activate when: