wireframing

What this skill does

# Wireframing

You scaffold a runnable Vue 3 wireframe application that renders one screen per route using the **`@for-the-people-initiative/wireframe-kit`** design system (v1.0.1+). Output is mid-fi, monochrome, hand-drawn (Rough.js) — wireframes that look like sketches so reviewers comment on structure, flow, and transitions, not on colour and typography.

This skill is **scaffold + per-screen generation + click-through wiring**, not pixel-level visual design or interactive prototyping.

## Core rules

- **Device frame around every page** — every page wraps its content in `<PhoneFrame>`, `<TabletFrame>`, `<DesktopFrame>`, or `<DeviceFrame>` depending on `platform_target`. The frame is the root element of `<template>`.
- **Click-through by default** — every interactive element (CTA, tab, back button, row action, list action) is wired with `router.push(...)`. The set of transitions comes from a `flow_spec` input, or is elicited conversationally per screen.
- **No real images** — every `<Image>` from the kit renders a placeholder box from its `alt`, regardless of `src`. Do not try to use real URLs.
- **No real-looking copy** — use plain short generic copy by default (`Get started`, `Stay hydrated, daily`, `Sign in to continue`). No Lorem Ipsum. No fake names / emails / prices that read as real. State variants use a plain prefix without brackets (`State — just logged (undo toast)`). Only use bracketed intent copy (`[CTA: ...]`) when the user explicitly sets `placeholders: bracketed`.
- **Wireframe-kit components only** — all UI comes from the kit. Don't hand-roll buttons, cards, forms, or layout primitives that exist in the catalogue.
- **Floating elements have a solid background** — every `position: sticky | fixed | absolute` element has `background: var(--wf-surface)` explicitly. Never `inherit` or `transparent`.
- **One concern per screen** — if the user lists 5 screens, generate 5 page files. Don't fold them into tabs.
- **Filename = route** — `<PascalCase>.Page.vue` in `src/pages/`. Auto-discovered by router via `import.meta.glob`. No router edit needed.
- **Boilerplate is canonical** — copy from `${CLAUDE_PLUGIN_ROOT}/skills/wireframing/assets/boilerplate/` verbatim. Do not improvise the scaffold.
- **Kit `^1.0.1`** — earlier versions lack device frames and `--wf-surface`. Reject if pinned lower.
- **Subpath-ready build** — boilerplate ships with `base: './'` in `vite.config.ts` and `createWebHashHistory()` in `src/router/index.ts`. This makes the production build portable under any subpath (e.g. when embedded in a docs site) without server rewrites. **Do not remove either** unless the wireframe is guaranteed to only run on `localhost`.

## When to use

- Clickable, browser-renderable wireframes for stakeholder review
- Moving from concept / flow / journey output into mid-fi screen layouts
- Wireframes that downstream front-end engineering can read for layout intent + transitions
- Iterating layout + composition + flow before commitment to visual design

## When not to use

- Lower-fi exploratory storyboards / concept sketches → `concept-sketching`
- Step-level user flow (no screens) → `user-flow-diagramming`
- Site hierarchy / page typing → `site-mapping`
- Component state machines → `state-transition-mapping`
- Pixel-level visual design / colour / typography decisions → Visual / UI design (future)
- High-fidelity interactive prototypes → Prototyping skills (future)
- Production component code → `front-end-engineering`

## Phase 1 — Setup

Collect:

| Field | Required | Default |
|---|---|---|
| **App name** | Yes | — |
| **Screens to wireframe** (PascalCase names) | Yes | — |
| **Platform target** (`mobile` / `tablet` / `desktop` / `responsive`) | Yes | — (no default — always ask) |
| **Output directory** | No | `./wireframes/` |
| **Per-screen brief** | No | Elicit per screen |
| **Flow spec** (transitions: from → action → to; YAML/JSON or Mermaid) | No | Elicit conversationally if absent |
| **Placeholders** (`plain` / `bracketed`) | No | `plain` |

If any required field is missing, enter Interview mode and ask only for what's missing. **Never silently default `platform_target`** — the device frame depends on it.

If the output directory exists and is non-empty, ask before overwriting.

## Phase 2 — Scaffold the boilerplate

Copy every file from `${CLAUDE_PLUGIN_ROOT}/skills/wireframing/assets/boilerplate/` into the output directory verbatim. Use `cp -r` or equivalent.

The boilerplate's `package.json` declares `@for-the-people-initiative/wireframe-kit: ^1.0.1`. Do not downgrade — the device frames (`PhoneFrame`, `TabletFrame`, `DesktopFrame`, `DeviceFrame`), the `useDevice` composable, and the `--wf-surface` CSS var all require v1.0.1+.

The boilerplate `vite.config.ts` ships with `base: './'` (relative asset paths) and the router uses `createWebHashHistory()` (hash-based routes). Together these make the build work unchanged on `localhost`, under any subpath (`/solutions/<slug>/wireframe/`), and inside an `<iframe>` — no server rewrites required. Keep both.

The boilerplate gives you:

```
<output>/
├── package.json              # vue, vue-router, wireframe-kit ^1.0.1, vite, typescript, vue-tsc
├── vite.config.ts            # @vitejs/plugin-vue, port 5173
├── tsconfig.json             # incl. paths override for kit type shims
├── tsconfig.node.json
├── index.html
├── .gitignore
├── README.md
└── src/
    ├── main.ts               # imports kit CSS, fonts, wireframe SCSS, registers WireframePlugin
    ├── env.d.ts
    ├── App.vue               # screen-picker nav + RouterView; device-toggle slot when platform=responsive
    ├── router/index.ts       # auto-discovers src/pages/*.Page.vue via import.meta.glob
    ├── shims/                # tsconfig-paths targets for kit subpath types
    └── pages/
        ├── Home.Page.vue     # auto-generated index of all screens; also hosts Demo controls
        └── Example.Page.vue  # demo using Hero + Section + Card + Form + Button + InputText
```

**Do not modify** `main.ts`, `router/index.ts`, `App.vue`, `vite.config.ts`, `tsconfig*`, `index.html`, `shims/*`. They are scaffolding.

After copying:
- **Replace `Example.Page.vue`** with the user's first real screen (keep its filename pattern).
- If the user named no screen "Home", keep the boilerplate `Home.Page.vue` as the screen index (and extend it with Demo controls if needed — see Phase 3).

## Phase 3 — Per-screen generation

For each screen, produce one file at `src/pages/<PascalCaseName>.Page.vue`.

### File template (mobile example)

```vue
<script lang="ts">
export const meta = { title: 'Human-readable title' };
</script>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import PhoneFrame from '@for-the-people-initiative/wireframe-kit/components/PhoneFrame';
import Button from '@for-the-people-initiative/wireframe-kit/components/Button';
// ...one import per kit component used

const router = useRouter();
</script>

<template>
  <PhoneFrame>
    <!-- composition using kit components, plain placeholder copy -->
    <Button label="Get started" @click="router.push('/next-screen')" />
  </PhoneFrame>
</template>

<style scoped>
/* layout-only CSS — no colour, no typography overrides */
</style>
```

### Device frame per platform

| `platform_target` | Frame | Extra |
|---|---|---|
| `mobile` | `<PhoneFrame>` | — |
| `tablet` | `<TabletFrame>` | — |
| `desktop` | `<DesktopFrame>` | — |
| `responsive` | `<DeviceFrame>` | Import + register `useDevice()` from `@for-the-people-initiative/wireframe-kit/composables` in `App.vue`; the kit renders a device-toggle in the app shell that drives `<DeviceFrame>` and persists choice to `localStorage` |

All frames are imported as default exports from `@for-the-people-initiative/wireframe-kit/components/<Name>`. The frame is the **root element** of `<template>` — page content nests inside.

### Click-through wiring

Every CTA, tab item, back button, row action, or list i