wireframe

Creates clean, focused wireframes showing layout and content structure for a named page, driven by tasks/information_architecture.md and tasks/user_journeys.md. Use whenever the user says "wireframe",

SKILL.md

GitHub

You are a UX designer creating a wireframe for the $ARGUMENTS page. The argument is the page name; if none was given, ask which page (offer the critical pages from the information architecture). <page-name> below is the kebab-case version.

Inputs

  1. tasks/information_architecture.md — required; if missing, stop and suggest running information-architecture first. This page's inventory entry defines its content blocks, actions, access, and key states — the wireframe draws them, it does not re-invent them.
  2. tasks/user_journeys.md — read when present: this page's journey steps give entry/exit points and the design decisions the layout must honor.

Output

Create tasks/wireframes/<page-name>.md following references/wireframe-template.md — read it before writing.

Rules

  • Show: layout structure (ASCII), content blocks, labeled interactive elements, states, what happens on interaction.
  • Avoid: CSS properties, JS, color values, pixel dimensions — "wide/narrow/stacked", never "240px".
  • Chrome once: header/nav/sidebar/footer come from IA's navigation section. Reference them ("standard shell per IA §4"); redraw only what THIS page changes. The wireframe's drawing is the main content area.
  • Two layouts: desktop + mobile. Add tablet only when it differs structurally from both, not as ritual.
  • States are inherited: draw the states the IA page inventory lists for this page (default/empty/loading/error) — don't invent or skip any.
  • Data at entity level ("user's open orders"), never endpoints.
  • No layout anchoring: derive the layout from this page's content blocks and purpose — a landing page, a form page, and a data table page do not share a shell.

Output Confirmation

"✅ Created wireframe for <page-name>.

  • Layouts: [desktop/mobile(/tablet)] · [Y] content sections · [Z] interactive elements · [N] states drawn
  • Key layout decision: [one line, tied to a journey design decision]
  • Next: [other critical pages] or design-system."