wireframe

1---2name: wireframe3description: Produce low-fidelity black-and-white UI wireframes as SVGs or viewer pages. Use when asked to wireframe, sketch a screen, draft a layout, make a low-fi mockup, or publish wireframes.4key: paperclipai/bundled/product/wireframe5recommendedForRoles:6  - designer7  - product8  - engineer9tags:10  - design11  - wireframe12  - ux13  - prototyping14  - svg15---16 17# Wireframe18 19Produce low-fidelity, black-and-white UI wireframes as **standalone SVG files**. The goal is to communicate **structure** — what goes where, in what order, at roughly what size — without committing to colour, brand, or polish.20 21## When to use22 23Trigger on phrases like:24 25- "wireframe a [screen / page / flow] for X"26- "low-fi / lo-fi mockup of X"27- "draft a layout for X"28- "rough sketch of the [dashboard / settings / login / ...] page"29- "show me how X would lay out before I build it"30 31Skip and defer to `frontend-design` (or similar) when the request mentions: brand, polish, real components, "production-ready", colour palettes, hi-fi, Figma export, or actual code/HTML/React deliverables.32 33## House style — non-negotiable34 35Wireframes are diagnostic, not decorative. Lock these tokens on every output:36 37| Token            | Value                                             | Notes                                  |38| ---------------- | ------------------------------------------------- | -------------------------------------- |39| Stroke           | `#000` width `1.5`                                | All borders, dividers, outlines        |40| Fill (boxes)     | `#fff`                                            | Default for cards/containers           |41| Placeholder fill | `#e6e6e6`                                         | Image/avatar/empty-state regions       |42| Text colour      | `#000` for labels, `#666` for placeholder text    | No other colours                       |43| Accent           | `#d33` (dashed) — annotation layer ONLY           | Never inside real UI elements          |44| Font             | `font-family="-apple-system, system-ui, sans-serif"` | Single typeface across the whole file  |45| Type scale       | `12` caption · `14` body · `20` heading · `28` title | No other sizes                         |46| Grid             | 8px snap, 24px gutter                             | All x/y/w/h must be multiples of 8     |47| Default canvas   | `1280×800` desktop, `375×812` mobile, `768×1024` tablet | Pick one and state it in the comment   |48 49If you need to highlight a specific region for a callout, use the **annotation layer** (red dashed). Never colourise the wireframe itself.50 51## Workflow52 531. **Confirm scope.** What screen(s)? Which viewport (desktop / tablet / mobile)? Single screen or multi-screen flow? If unclear, ask one question, then proceed with the most likely default.542. **Pick a canvas** from the table above. State the viewport in your reply.553. **Compose from primitives.** Read `references/components.md` and assemble the screen from the primitive snippets. Snap every coordinate to 8px.564. **Write the SVG to a file.** Default path: `wireframes/<slug>.svg` in the working directory. Filename slug describes the screen (`login.svg`, `dashboard.svg`, `settings-account.svg`).575. **Emit a textual annotation list** in your reply, mapping each numbered region in the SVG to a one-line description ("1 — primary nav, 2 — search input, 3 — list of recent items"). This makes the wireframe accessible, queryable, and reviewable in text-only channels.586. **For multi-screen flows**, produce one SVG per screen and a summary `flow.svg` that arranges thumbnails left-to-right with arrows between them.59 60## Quick start — minimal SVG61 62```svg63<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="800" viewBox="0 0 1280 800"64     font-family="-apple-system, system-ui, sans-serif" fill="#fff" stroke="#000" stroke-width="1.5">65  <!-- canvas border -->66  <rect x="0" y="0" width="1280" height="800" />67 68  <!-- example: a button -->69  <g transform="translate(48, 48)">70    <rect width="120" height="40" rx="4" />71    <text x="60" y="25" font-size="14" text-anchor="middle" stroke="none" fill="#000">Continue</text>72  </g>73</svg>74```75 76Two house-style gotchas worth memorising:77 78- Always set `stroke="none"` on `<text>` elements (text inherits the parent stroke and gets a halo otherwise).79- Always wrap text fill explicitly (`fill="#000"`) since the parent group fill is `#fff` for boxes.80 81## Primitive library82 83The full set of reusable primitives lives in `references/components.md`. Load it whenever you need a primitive whose exact markup you do not have in working memory. Do not re-derive primitives from scratch — copy the snippet and adjust coordinates.84 85Primitives provided:86 87- **Inputs:** button (filled, outlined, icon), text input, textarea, dropdown, checkbox, radio, toggle, search input88- **Layout:** card, section divider, sidebar, two-column, three-column89- **Navigation:** navbar, tab bar, breadcrumb, pagination, sidebar nav90- **Content:** heading, paragraph block, list row, table, key-value pair, metric tile91- **Media:** image placeholder, avatar (circle/square), video placeholder92- **Overlay:** modal, drawer, toast, tooltip, dropdown menu (open state)93- **Annotation:** numbered callout, dashed region highlight, arrow connector94 95## Grid, palette, and type scale96 97For exact pixel values, palette tokens, and type sizes, see `references/grid-system.md`.98 99## Worked examples100 101`references/examples.md` contains four complete wireframes you can copy and adapt:102 1031. Login screen (mobile, 375×812)1042. Admin dashboard (desktop, 1280×800)1053. Settings page with form (desktop, 1280×800)1064. Modal confirmation overlay (desktop, 1280×800)107 108When the user's request is close to one of these, start from the example and modify, rather than building from blank.109 110## Output convention111 112Every wireframe response should include:113 1141. The SVG file written to disk (path stated explicitly).1152. The SVG inlined in your reply (so it renders in markdown previews).1163. A short numbered annotation list mapping regions to intent.1174. Any explicit assumption you made (viewport, signed-in state, empty/populated, dark/light not applicable since monochrome).118 119## If the user requests a website / viewer page120 121Trigger on phrases like "make a page that shows the screens", "single page I can scroll", "build a viewer", "let me click through the wireframes", "show them all on one page", or any request to bundle multiple wireframes into a browsable artifact (not a production site).122 123Build **one static `index.html`** that loads the SVG wireframes directly. Do not turn this into a React app or component library — it's a review surface, not product UI.124 125**File layout** (default):126 127```128design/<task-slug>/129  index.html130  wireframes/    # the SVGs from this skill131  screenshots/   # any reference screenshots132```133 134**Page anatomy** (start from `assets/site-template.html` and adjust — do not re-derive the CSS):135 136- **Sticky sidebar TOC** (240px on desktop) listing every screen with anchor links. Group by Flow / Screens / Open questions.137- **Hero header** at the top: crumb (issue id), title, one-paragraph summary, pill row of meta tags (`12 screens`, `Lo-fi · monochrome`, `Click any wireframe to zoom`).138- **One section per screen** with a 2-column grid: wireframe on the left, reference image + numbered annotations + a "Why this changes" callout on the right. The wireframe `<img>` points to the SVG file directly — do not inline it.139- **Click-to-zoom lightbox** for any element marked `[data-zoom]`. Esc and backdrop click both close.140- **Flow diagram** section near the top that loads `wireframes/flow.svg` full-width.141- **Open questions** section at the bottom for unresolved decisions.142 143**House style for the viewer** (matches the wireframes themselves):144 145- Palette: `--bg: #fafaf8`, `--panel: #fff`, `--ink: #111`, `--muted: #666`, `--line: #e5e5e0`, `--accent: #d33` (red dashed callouts only).146- System font stack only: `-apple-system, system-ui, "Segoe UI", sans-serif`. No web fonts.147- 8px-based spacing, `border-radius: 8px` on cards, 1px `--line` borders, no shadows except the hover lift on `.wire`.148- The viewer chrome is allowed to be slightly more polished than the wireframes (subtle hover, rounded cards) — but never colourful. The wireframes themselves stay strictly monochrome.149 150**Responsive** (verify before reporting done):151 152- ≥980px: two-column grid, sidebar TOC visible.153- 900–980px: grid stacks to one column, TOC still sidebar.154- <900px (tablet/phone): TOC collapses to a sticky `<details>` disclosure at the top of the page, defaults closed; tapping a link auto-closes it. Sections get `scroll-margin-top: 80px` so anchor jumps clear the sticky bar.155- <560px (phone): tighter type/spacing scale, hero shrinks, lightbox switches from flex-centered to block layout at full viewport width with `touch-action: pinch-zoom` so users can pinch in further.156 157**Verification** before handing off: open the file in a browser and walk it at 1440×900, 768×1024, and 390×844. Confirm anchor jumps land cleanly, lightbox opens/closes, and SVGs render at the right aspect.158 159## If the user asks to deploy / publish / host the wireframes160 161Defer to the **`here-now` skill** — it owns publishing, anonymous vs. permanent sites, claim tokens, and credentials. Do not roll your own hosting.162 163Load the `here-now` skill and follow its `publish.sh` recipe. The shape is:164 165```bash166cd design/<task-slug>167{path-to-here-now}/scripts/publish.sh .168# → https://{adjective-noun-suffix}.here.now/169```170 171If `here-now` isn't installed for the current agent, install it (`npx skills add heredotnow/skill --skill here-now -g`) or escalate to whoever owns the agent's skill set. Do not roll your own hosting.172 173Things to remember when invoking it:174 175- Publish the **directory containing `index.html` at its root**, not the parent. `index.html` must be at the root of the published tree.176- Without saved credentials the site is **anonymous and expires in 24 hours**. With a saved API key, it's permanent. If the user wants a permanent URL, follow the `here-now` skill's sign-in-code flow — don't fake your way around it.177- For an update, pass `--slug {existing-slug}` so the URL stays stable across review rounds (the script auto-loads the claim token from `.herenow/state.json`).178- Read `publish_result.*` lines from script stderr to determine `auth_mode` and the claim URL — do not read `.herenow/state.json` and present its contents as the source of truth.179- Always share the `siteUrl` from the current run; if anonymous, also share the claim URL and the 24h expiry warning.180 181## What this skill is NOT for182 183- **Production UI code** — use `frontend-design` or write React/HTML directly.184- **Hi-fi or branded mockups** — use Figma or a design tool, not this.185- **Interactive prototypes** — SVG is static; export multi-screen flows as a flow.svg.186- **Diagrams of system architecture, sequence flows, or data models** — use mermaid or plantuml.187- **Illustrations or art** — use `example-skills:canvas-design` or `algorithmic-art`.188 189## Bundled assets190 191- `assets/template.svg` — blank desktop canvas with hidden 8px-grid guides; copy as a starting point.192- `assets/template-mobile.svg` — same for 375×812 mobile.193- `assets/site-template.html` — minimal review-viewer page (sticky TOC + responsive collapse + lightbox). Copy to `design/<task-slug>/index.html` and fill in the sections when the user requests a website.194