Wireframe: $ARGUMENTS

Sketch page structure (hierarchy, layout, flow) before committing to visual design.

Before you start

1. Read `src/system.md` — intent and scope.
2. Read `src/styles/global.css` — know the container max-width and spacing tokens.
3. Check if the wireframe already exists — look for src/pages/design-system/wireframes/<page-name>.astro. If it exists, read it first.

Ask: format preference

Use AskUserQuestion to ask the user which wireframe format they prefer:

• ASCII — wireframe stored as ASCII art in a <pre> block. ~100-200 tokens per page. Best for fast iteration.
• Visual — wireframe rendered as gray Tailwind boxes (bg-muted border border-border, placeholder text). More visual but more tokens.

Output files

1. Design system page — src/pages/design-system/wireframes/<page-name>.astro (using Layout from _layout/)

No full-screen view needed — wireframes are working docs, not deliverables.

Steps

1. Ask format — ASCII or Visual (see above).
2. Sketch — create the wireframe page showing page structure: header, hero, sections, footer. Use placeholder text and rough proportions.
3. Visual review — user opens page in browser (pnpm dev). The sidebar auto-discovers wireframe pages via import.meta.glob — no manual nav registration needed. Approves or iterates.
4. Iterate — ask user for feedback ("move CTA above fold", "make it 3 columns", etc.) and update the wireframe.
5. Notes — ask if they want to save notes with the wireframe (intent, constraints, open questions).
6. Data sources — walk through each section and capture data source decisions.

ASCII format

Use a <pre> block with monospace box-drawing to show page structure:

<pre class="font-mono text-sm leading-relaxed text-muted-foreground">
┌─────────────────────────────────────┐
│  Logo          Nav    Nav    [CTA]  │
├─────────────────────────────────────┤
│                                     │
│           Hero Headline             │
│           Subhead text              │
│        [ Primary ]  [ Secondary ]   │
│                                     │
├─────────────────────────────────────┤
│  Feature 1  │  Feature 2  │  Feat 3│
└─────────────────────────────────────┘
</pre>

Notes and data sources

After sketching the wireframe and getting visual approval, capture the thinking behind the layout. This turns the wireframe from a sketch into a brief that angora-compose-page can act on.

Notes

Ask the user: "Any notes to save with this wireframe? Intent, constraints, open questions — anything the layout alone doesn't capture."

Capture whatever the user shares. Good notes answer things like:

• What's the goal of this page? (conversion, education, trust)
• What constraints matter? (must work without images, CTA above fold)
• What's the tone? (confident, playful, minimal)
• Open questions or things still undecided

If the user has nothing to add, skip — notes are optional.

Data sources

For each section in the wireframe, ask:

• "Will this content change? Is there more than one of these?" → template (reference a database table)
• "Is this one-off copy edited in code?" → static
• User unsure? → data: undecided

Frontmatter format

Write notes and data sources together as a JS comment block in the Astro file's frontmatter:

---
import Layout from '../_layout/Layout.astro';
/*
  Notes:
  - Hero must convert to free trial signups — keep CTA above fold
  - Testimonials are the trust signal — show faces, not logos
  - Pricing should feel simple — no feature comparison matrix

  Data sources:
    - component: Hero
      data: static
    - component: Testimonials
      data: table:testimonials
    - component: Pricing
      data: table:pricing_tiers
*/
---

This is consumed by angora-compose-page when building the real page.

After wireframing, suggest building a layout: "Want to assemble this as a layout with real components? Run `/angora` to build a layout for this page." Layouts live at src/pages/design-system/layouts/<page-name>.astro and prove the composition works with real components before wiring up data.

Visual format

Use gray Tailwind boxes with placeholder text:

<div class="space-y-4">
  <div class="bg-muted border border-border rounded p-4 flex justify-between items-center">
    <span class="text-sm text-muted-foreground">Logo</span>
    <div class="flex gap-4 text-sm text-muted-foreground">Nav · Nav · Nav</div>
  </div>
  <div class="bg-muted border border-border rounded p-12 text-center">
    <p class="text-lg text-muted-foreground">Hero Section</p>
  </div>
</div>