wireframe

Name: wireframe
Author: getpaperclipai

5stars1forks

How to install wireframe?

getpaperclipai/paperclip/wireframe

$npx -y skills add getpaperclipai/paperclip --skill wireframe

Installs into the current project.

Summary

Produce low-fidelity black-and-white UI wireframes as standalone SVG files, optionally bundled into a single-page HTML viewer and published via the here-now skill. Use when the user asks to "wireframe X", "sketch a screen for", "draft a layout", "low-fi mockup", "rough mock", "ma

Files · 1

View on GitHub

SKILL.md

1	# Wireframe
2
3	Produce 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.
4
5	## When to use
6
7	Trigger on phrases like:
8
9	- "wireframe a [screen / page / flow] for X"
10	- "low-fi / lo-fi mockup of X"
11	- "draft a layout for X"
12	- "rough sketch of the [dashboard / settings / login / ...] page"
13	- "show me how X would lay out before I build it"
14
15	Skip 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.
16
17	## House style — non-negotiable
18
19	Wireframes are diagnostic, not decorative. Lock these tokens on every output:
20
21	\| Token \| Value \| Notes \|
22	\| ---------------- \| ------------------------------------------------- \| -------------------------------------- \|
23	\| Stroke \| `#000` width `1.5` \| All borders, dividers, outlines \|
24	\| Fill (boxes) \| `#fff` \| Default for cards/containers \|
25	\| Placeholder fill \| `#e6e6e6` \| Image/avatar/empty-state regions \|
26	\| Text colour \| `#000` for labels, `#666` for placeholder text \| No other colours \|
27	\| Accent \| `#d33` (dashed) — annotation layer ONLY \| Never inside real UI elements \|
28	\| Font \| `font-family="-apple-system, system-ui, sans-serif"` \| Single typeface across the whole file \|
29	\| Type scale \| `12` caption · `14` body · `20` heading · `28` title \| No other sizes \|
30	\| Grid \| 8px snap, 24px gutter \| All x/y/w/h must be multiples of 8 \|
31	\| Default canvas \| `1280×800` desktop, `375×812` mobile, `768×1024` tablet \| Pick one and state it in the comment \|
32
33	If you need to highlight a specific region for a callout, use the annotation layer (red dashed). Never colourise the wireframe itself.
34
35	## Workflow
36
37	1. 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.
38	2. Pick a canvas from the table above. State the viewport in your reply.
39	3. Compose from primitives. Read `references/components.md` and assemble the screen from the primitive snippets. Snap every coordinate to 8px.
40	4. 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`).
41	5. 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.
42	6. For multi-screen flows, produce one SVG per screen and a summary `flow.svg` that arranges thumbnails left-to-right with arrows between them.
43
44	## Quick start — minimal SVG
45
46	```svg
47	<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="800" viewBox="0 0 1280 800"
48	font-family="-apple-system, system-ui, sans-serif" fill="#fff" stroke="#000" stroke-width="1.5">
49	<!-- canvas border -->
50	<rect x="0" y="0" width="1280" height="800" />
51
52	<!-- example: a button -->
53	<g transform="translate(48, 48)">
54	<rect width="120" height="40" rx="4" />
55	<text x="60" y="25" font-size="14" text-anchor="middle" stroke="none" fill="#000">Continue</text>
56	</g>
57	</svg>
58	```
59
60	Two house-style gotchas worth memorising:
61
62	- Always set `stroke="none"` on `<text>` elements (text inherits the parent stroke and gets a halo otherwise).
63	- Always wrap text fill explicitly (`fill="#000"`) since the parent group fill is `#fff` for boxes.
64
65	## Primitive library
66
67	The 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

People who liked this also viewed

6 picks

Type

wireframe

5stars1forks

View on GitHub

How to install wireframe?

getpaperclipai/paperclip/wireframe

$npx -y skills add getpaperclipai/paperclip --skill wireframe

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Wireframe
2
3	Produce 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.
4
5	## When to use
6
7	Trigger on phrases like:
8
9	- "wireframe a [screen / page / flow] for X"
10	- "low-fi / lo-fi mockup of X"
11	- "draft a layout for X"
12	- "rough sketch of the [dashboard / settings / login / ...] page"
13	- "show me how X would lay out before I build it"
14
15	Skip 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.
16
17	## House style — non-negotiable
18
19	Wireframes are diagnostic, not decorative. Lock these tokens on every output:
20
21	\| Token \| Value \| Notes \|
22	\| ---------------- \| ------------------------------------------------- \| -------------------------------------- \|
23	\| Stroke \| `#000` width `1.5` \| All borders, dividers, outlines \|
24	\| Fill (boxes) \| `#fff` \| Default for cards/containers \|
25	\| Placeholder fill \| `#e6e6e6` \| Image/avatar/empty-state regions \|
26	\| Text colour \| `#000` for labels, `#666` for placeholder text \| No other colours \|
27	\| Accent \| `#d33` (dashed) — annotation layer ONLY \| Never inside real UI elements \|
28	\| Font \| `font-family="-apple-system, system-ui, sans-serif"` \| Single typeface across the whole file \|
29	\| Type scale \| `12` caption · `14` body · `20` heading · `28` title \| No other sizes \|
30	\| Grid \| 8px snap, 24px gutter \| All x/y/w/h must be multiples of 8 \|
31	\| Default canvas \| `1280×800` desktop, `375×812` mobile, `768×1024` tablet \| Pick one and state it in the comment \|
32
33	If you need to highlight a specific region for a callout, use the annotation layer (red dashed). Never colourise the wireframe itself.
34
35	## Workflow
36
37	1. 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.
38	2. Pick a canvas from the table above. State the viewport in your reply.
39	3. Compose from primitives. Read `references/components.md` and assemble the screen from the primitive snippets. Snap every coordinate to 8px.
40	4. 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`).
41	5. 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.
42	6. For multi-screen flows, produce one SVG per screen and a summary `flow.svg` that arranges thumbnails left-to-right with arrows between them.
43
44	## Quick start — minimal SVG
45
46	```svg
47	<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="800" viewBox="0 0 1280 800"
48	font-family="-apple-system, system-ui, sans-serif" fill="#fff" stroke="#000" stroke-width="1.5">
49	<!-- canvas border -->
50	<rect x="0" y="0" width="1280" height="800" />
51
52	<!-- example: a button -->
53	<g transform="translate(48, 48)">
54	<rect width="120" height="40" rx="4" />
55	<text x="60" y="25" font-size="14" text-anchor="middle" stroke="none" fill="#000">Continue</text>
56	</g>
57	</svg>
58	```
59
60	Two house-style gotchas worth memorising:
61
62	- Always set `stroke="none"` on `<text>` elements (text inherits the parent stroke and gets a halo otherwise).
63	- Always wrap text fill explicitly (`fill="#000"`) since the parent group fill is `#fff` for boxes.
64
65	## Primitive library
66
67	The 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

People who liked this also viewed

6 picks

Type