diff --git a/packages/skills-catalog/catalog/bundled/product/wireframe/SKILL.md b/packages/skills-catalog/catalog/bundled/product/wireframe/SKILL.md new file mode 100644 index 00000000..cc8af1fb --- /dev/null +++ b/packages/skills-catalog/catalog/bundled/product/wireframe/SKILL.md @@ -0,0 +1,193 @@ +--- +name: wireframe +description: 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", "make a page to view the wireframes", "build a viewer for these screens", or to "deploy / publish / host the wireframes". Do NOT use when the user wants production UI code, branded designs, hi-fi mockups, or animated/interactive prototypes — use frontend-design or similar instead. +key: paperclipai/bundled/product/wireframe +recommendedForRoles: + - designer + - product + - engineer +tags: + - design + - wireframe + - ux + - prototyping + - svg +--- + +# Wireframe + +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. + +## When to use + +Trigger on phrases like: + +- "wireframe a [screen / page / flow] for X" +- "low-fi / lo-fi mockup of X" +- "draft a layout for X" +- "rough sketch of the [dashboard / settings / login / ...] page" +- "show me how X would lay out before I build it" + +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. + +## House style — non-negotiable + +Wireframes are diagnostic, not decorative. Lock these tokens on every output: + +| Token | Value | Notes | +| ---------------- | ------------------------------------------------- | -------------------------------------- | +| Stroke | `#000` width `1.5` | All borders, dividers, outlines | +| Fill (boxes) | `#fff` | Default for cards/containers | +| Placeholder fill | `#e6e6e6` | Image/avatar/empty-state regions | +| Text colour | `#000` for labels, `#666` for placeholder text | No other colours | +| Accent | `#d33` (dashed) — annotation layer ONLY | Never inside real UI elements | +| Font | `font-family="-apple-system, system-ui, sans-serif"` | Single typeface across the whole file | +| Type scale | `12` caption · `14` body · `20` heading · `28` title | No other sizes | +| Grid | 8px snap, 24px gutter | All x/y/w/h must be multiples of 8 | +| Default canvas | `1280×800` desktop, `375×812` mobile, `768×1024` tablet | Pick one and state it in the comment | + +If you need to highlight a specific region for a callout, use the **annotation layer** (red dashed). Never colourise the wireframe itself. + +## Workflow + +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. +2. **Pick a canvas** from the table above. State the viewport in your reply. +3. **Compose from primitives.** Read `references/components.md` and assemble the screen from the primitive snippets. Snap every coordinate to 8px. +4. **Write the SVG to a file.** Default path: `wireframes/.svg` in the working directory. Filename slug describes the screen (`login.svg`, `dashboard.svg`, `settings-account.svg`). +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. +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. + +## Quick start — minimal SVG + +```svg + + + + + + + + Continue + + +``` + +Two house-style gotchas worth memorising: + +- Always set `stroke="none"` on `` elements (text inherits the parent stroke and gets a halo otherwise). +- Always wrap text fill explicitly (`fill="#000"`) since the parent group fill is `#fff` for boxes. + +## Primitive library + +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 not re-derive primitives from scratch — copy the snippet and adjust coordinates. + +Primitives provided: + +- **Inputs:** button (filled, outlined, icon), text input, textarea, dropdown, checkbox, radio, toggle, search input +- **Layout:** card, section divider, sidebar, two-column, three-column +- **Navigation:** navbar, tab bar, breadcrumb, pagination, sidebar nav +- **Content:** heading, paragraph block, list row, table, key-value pair, metric tile +- **Media:** image placeholder, avatar (circle/square), video placeholder +- **Overlay:** modal, drawer, toast, tooltip, dropdown menu (open state) +- **Annotation:** numbered callout, dashed region highlight, arrow connector + +## Grid, palette, and type scale + +For exact pixel values, palette tokens, and type sizes, see `references/grid-system.md`. + +## Worked examples + +`references/examples.md` contains four complete wireframes you can copy and adapt: + +1. Login screen (mobile, 375×812) +2. Admin dashboard (desktop, 1280×800) +3. Settings page with form (desktop, 1280×800) +4. Modal confirmation overlay (desktop, 1280×800) + +When the user's request is close to one of these, start from the example and modify, rather than building from blank. + +## Output convention + +Every wireframe response should include: + +1. The SVG file written to disk (path stated explicitly). +2. The SVG inlined in your reply (so it renders in markdown previews). +3. A short numbered annotation list mapping regions to intent. +4. Any explicit assumption you made (viewport, signed-in state, empty/populated, dark/light not applicable since monochrome). + +## If the user requests a website / viewer page + +Trigger 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). + +Build **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. + +**File layout** (default): + +``` +design// + index.html + wireframes/ # the SVGs from this skill + screenshots/ # any reference screenshots +``` + +**Page anatomy** (start from `assets/site-template.html` and adjust — do not re-derive the CSS): + +- **Sticky sidebar TOC** (240px on desktop) listing every screen with anchor links. Group by Flow / Screens / Open questions. +- **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`). +- **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 `` points to the SVG file directly — do not inline it. +- **Click-to-zoom lightbox** for any element marked `[data-zoom]`. Esc and backdrop click both close. +- **Flow diagram** section near the top that loads `wireframes/flow.svg` full-width. +- **Open questions** section at the bottom for unresolved decisions. + +**House style for the viewer** (matches the wireframes themselves): + +- Palette: `--bg: #fafaf8`, `--panel: #fff`, `--ink: #111`, `--muted: #666`, `--line: #e5e5e0`, `--accent: #d33` (red dashed callouts only). +- System font stack only: `-apple-system, system-ui, "Segoe UI", sans-serif`. No web fonts. +- 8px-based spacing, `border-radius: 8px` on cards, 1px `--line` borders, no shadows except the hover lift on `.wire`. +- 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. + +**Responsive** (verify before reporting done): + +- ≥980px: two-column grid, sidebar TOC visible. +- 900–980px: grid stacks to one column, TOC still sidebar. +- <900px (tablet/phone): TOC collapses to a sticky `
` 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. +- <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. + +**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. + +## If the user asks to deploy / publish / host the wireframes + +Defer to the **`here-now` skill** — it owns publishing, anonymous vs. permanent sites, claim tokens, and credentials. Do not roll your own hosting. + +Load the `here-now` skill and follow its `publish.sh` recipe. The shape is: + +```bash +cd design/ +{path-to-here-now}/scripts/publish.sh . +# → https://{adjective-noun-suffix}.here.now/ +``` + +If `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. + +Things to remember when invoking it: + +- Publish the **directory containing `index.html` at its root**, not the parent. `index.html` must be at the root of the published tree. +- 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. +- 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`). +- 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. +- Always share the `siteUrl` from the current run; if anonymous, also share the claim URL and the 24h expiry warning. + +## What this skill is NOT for + +- **Production UI code** — use `frontend-design` or write React/HTML directly. +- **Hi-fi or branded mockups** — use Figma or a design tool, not this. +- **Interactive prototypes** — SVG is static; export multi-screen flows as a flow.svg. +- **Diagrams of system architecture, sequence flows, or data models** — use mermaid or plantuml. +- **Illustrations or art** — use `example-skills:canvas-design` or `algorithmic-art`. + +## Bundled assets + +- `assets/template.svg` — blank desktop canvas with hidden 8px-grid guides; copy as a starting point. +- `assets/template-mobile.svg` — same for 375×812 mobile. +- `assets/site-template.html` — minimal review-viewer page (sticky TOC + responsive collapse + lightbox). Copy to `design//index.html` and fill in the sections when the user requests a website. diff --git a/packages/skills-catalog/catalog/bundled/product/wireframe/assets/site-template.html b/packages/skills-catalog/catalog/bundled/product/wireframe/assets/site-template.html new file mode 100644 index 00000000..db1a733c --- /dev/null +++ b/packages/skills-catalog/catalog/bundled/product/wireframe/assets/site-template.html @@ -0,0 +1,356 @@ + + + + + + +TODO — review viewer title + + + +
+
+ + + TODO-ID · TODO short title
+ Jump to a screen + + + + +
+ +
+
+
TODO-ID · Wireframes
+

TODO — long title

+

TODO — one-paragraph summary of what this set covers and why.

+
+ TODO N screens + Desktop + mobile + Lo-fi · monochrome + Click any wireframe to zoom +
+
+ + +
+
Flow
+

TODO — flow title

+

TODO — describe arrow conventions (solid = happy path, dashed = branch).

+
+
flow.svgTODO WxH
+ Flow diagram +
+
+ + +
+
Step 1 · TODO group
+

1.TODO screen name

+

TODO — one-paragraph describing the screen's purpose.

+
+
+
01-screen.svg1280×800 · desktop
+ TODO screen name (desktop) wireframe +
+
+
mobile375×812
+ TODO screen name (mobile) wireframe +
+
+ +
+
ReferenceTODO source
+ TODO reference +
+
+

Annotations

+
    +
  • 1 — TODO callout 1.
    • +
  • 2 — TODO callout 2 (note where mobile diverges).
    • +
+
Why this changes: TODO rationale vs current state.
+
+
+
+
+ + +
+
For reviewer
+

Open questions

+
+
    +
  • TODO — Open question 1.
    • +
+
+
+ +
+ Wireframes follow the in-tree wireframe skill house style — black on white, 1.5pt strokes, 8px grid, type sizes 12/14/20/28. Red dashed annotations are the call-out layer only and not part of the proposed UI. +
+
+
+ + + + + + diff --git a/packages/skills-catalog/catalog/bundled/product/wireframe/assets/template-mobile.svg b/packages/skills-catalog/catalog/bundled/product/wireframe/assets/template-mobile.svg new file mode 100644 index 00000000..f525ad89 --- /dev/null +++ b/packages/skills-catalog/catalog/bundled/product/wireframe/assets/template-mobile.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + diff --git a/packages/skills-catalog/catalog/bundled/product/wireframe/assets/template.svg b/packages/skills-catalog/catalog/bundled/product/wireframe/assets/template.svg new file mode 100644 index 00000000..39722898 --- /dev/null +++ b/packages/skills-catalog/catalog/bundled/product/wireframe/assets/template.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + diff --git a/packages/skills-catalog/catalog/bundled/product/wireframe/references/components.md b/packages/skills-catalog/catalog/bundled/product/wireframe/references/components.md new file mode 100644 index 00000000..78a1e6e3 --- /dev/null +++ b/packages/skills-catalog/catalog/bundled/product/wireframe/references/components.md @@ -0,0 +1,482 @@ +# Component primitives + +Copy these snippets directly into your SVG. Each primitive is wrapped in a `` so you can position it by changing the translate values. All sizes follow the 8px grid and the type scale defined in `grid-system.md`. + +## Conventions used below + +- `W`, `H` placeholders mean "pick a multiple of 8 that fits your layout". +- `Label`, `Placeholder`, etc. mean "replace with the actual copy". +- The root `` is assumed to set: `font-family="-apple-system, system-ui, sans-serif" fill="#fff" stroke="#000" stroke-width="1.5"`. +- Always set `stroke="none"` on `` elements. + +--- + +## Inputs + +### Button (filled) + +```svg + + + Continue + +``` + +### Button (outlined / secondary) + +```svg + + + Cancel + +``` + +### Button (icon-only square) + +```svg + + + + + + +``` + +### Text input + +```svg + + + Placeholder text + +``` + +### Search input (with magnifier) + +```svg + + + + + Search… + +``` + +### Textarea + +```svg + + + Type your message… + +``` + +### Dropdown (collapsed) + +```svg + + + Selected value + + + +``` + +### Checkbox (unchecked / checked) + +```svg + + + + + + + + + + +``` + +### Radio (unselected / selected) + +```svg + + + + + + + + + + +``` + +### Toggle (off / on) + +```svg + + + + + + + + + + + +``` + +### Form field (label + input + help) + +```svg + + Email address + + + you@example.com + + We'll never share this with anyone. + +``` + +--- + +## Layout + +### Card + +```svg + + + Card title + Supporting copy goes here. + + Footer action + +``` + +### Section divider + +```svg + + + +``` + +### Two-column split (60 / 40) + +```svg + + + + +``` + +--- + +## Navigation + +### Navbar (top) + +```svg + + + + + + Dashboard + Projects + Reports + Settings + + + +``` + +### Sidebar nav + +```svg + + + App + + + Dashboard + + Projects + Reports + Team + Settings + +``` + +### Tab bar + +```svg + + + + Overview + + + Activity + Members + Settings + +``` + +### Breadcrumb + +```svg + + Workspace + / + Projects + / + Project name + +``` + +### Pagination + +```svg + + + ‹ + + 1 + + 2 + + 3 + + › + +``` + +--- + +## Content + +### Heading + +```svg +Page title +``` + +### Section heading + +```svg +Section +``` + +### Paragraph block (placeholder lines) + +```svg + + + + + +``` + +### List row (avatar + title + subtitle + chevron) + +```svg + + + + Primary text + Secondary text + + +``` + +### Table + +```svg + + + + Name + Status + Updated + Owner + + + + + Row title 1 + Active + 2h ago + Alex + + + + Row title 2 + Pending + 5h ago + Sam + + +``` + +### Key-value pair + +```svg + + Created + Mar 12, 2026 + +``` + +### Metric tile + +```svg + + + Active users + 1,284 + +12% vs last week + +``` + +--- + +## Media + +### Image placeholder (with diagonal cross) + +```svg + + + + + +``` + +### Avatar (circular, with cross) + +```svg + + + + + +``` + +### Video placeholder (image + play triangle) + +```svg + + + + + + + +``` + +--- + +## Overlay + +### Modal (with backdrop) + +```svg + + + + + + Confirm action + + Body copy goes here describing what's about to happen. + + + + + Cancel + + + + Confirm + + +``` + +### Toast + +```svg + + + Saved successfully + × + +``` + +### Tooltip + +```svg + + + Helpful explanation + + +``` + +### Dropdown menu (open state) + +```svg + + + Menu item one + Menu item two + Menu item three + + Sign out + +``` + +--- + +## Annotation layer + +Use these for callouts and reviewer notes. Render them in a final `` so reviewers can hide them by toggling the group. + +### Numbered callout + +```svg + + + 1 + +``` + +### Dashed region highlight + +```svg + +``` + +### Arrow connector (between two screens) + +```svg + + + + +``` + +--- + +## Common composition mistakes (avoid) + +- **Text with halo:** forgetting `stroke="none"` on ``. The text inherits the parent stroke. +- **Off-grid coordinates:** values like `x="37"` instead of `x="40"`. Snap everything to multiples of 8. +- **Solid fills sneaking in:** anything other than `#fff`, `#e6e6e6`, `#f4f4f4`, or `#000` is a mistake. +- **Multiple typefaces:** stick to one font-family across the whole file. +- **Annotation colour bleeding into UI:** `#d33` only ever appears inside the annotation ``. +- **Missing `viewBox`:** without it, the SVG won't scale when embedded in different containers. diff --git a/packages/skills-catalog/catalog/bundled/product/wireframe/references/examples.md b/packages/skills-catalog/catalog/bundled/product/wireframe/references/examples.md new file mode 100644 index 00000000..0e6cd13c --- /dev/null +++ b/packages/skills-catalog/catalog/bundled/product/wireframe/references/examples.md @@ -0,0 +1,362 @@ +# Worked examples + +Four complete wireframes you can copy and modify. Each one is a valid standalone SVG file. The annotation list under each example is what you should reproduce in your reply when emitting a wireframe. + +--- + +## 1. Login screen (mobile, 375×812) + +```svg + + + + + + 9:41 + 100% + + + + + + + + + Welcome back + Sign in to continue + + + + Email + + + you@example.com + + + + + + Password + + + •••••••• + show + + Forgot password? + + + + + + Sign in + + + + + + or + + + + + + + Continue with SSO + + + + New here? Create an account + +``` + +**Annotations:** +1. Status bar placeholder +2. Brand mark +3. Page title + subtitle +4. Email input +5. Password input + reveal control + forgot link +6. Primary CTA (sign in) +7. SSO divider +8. Secondary CTA (SSO) +9. Sign-up link + +--- + +## 2. Admin dashboard (desktop, 1280×800) + +```svg + + + + + + + Acme + + Dashboard + Projects + Reports + Team + Settings + + + + + + + + + + Search… + + + + + + + Dashboard + Overview of activity for the last 7 days + + + New project + + + + + + + + Active users + 1,284 + +12% vs last week + + + + New signups + 312 + +4% + + + + Revenue + $24.1k + +8% + + + + Churn + 1.4% + −0.3% + + + + + + + Activity + + + + + + + + + Recent + + + + Item one + 2h ago + + + + + Item two + 5h ago + + + + + Item three + 1d ago + + + +``` + +**Annotations:** +1. Sidebar nav with active "Dashboard" +2. Top bar with global search and account menu +3. Page header with title, subtitle, and primary CTA +4. Four KPI metric tiles +5. Activity chart panel (chart area shown as placeholder) +6. Recent items list (right rail) + +--- + +## 3. Settings page with form (desktop, 1280×800) + +```svg + + + + + + + Settings + + + + + + PERSONAL + + Account + Notifications + Sessions + WORKSPACE + Members + Billing + Integrations + + + + + Account + Manage your personal account details. + + + + Profile photo + + + + + + + + Upload + + + + + + Display name + + + Alex Morgan + + + + + + Email + + + alex@acme.com + + Used for sign-in and notifications. + + + + + Role + + + Admin + + + + + + + + + + Cancel + + + + Save + + + + +``` + +**Annotations:** +1. Top bar with section name +2. Settings sub-nav (Personal / Workspace groups) +3. Form: avatar with upload, display name, email + help text, role dropdown, save / cancel actions + +--- + +## 4. Modal confirmation overlay (desktop, 1280×800) + +```svg + + + + + + + Projects + + + + + + + + + Delete project? + + + This permanently deletes the project and all its data. + This action can't be undone. + + + + Type the project name to confirm + + + acme-prod + + + + + + + + Cancel + + + + Delete + + + + + + + 1 + Disable until input matches project name + + +``` + +**Annotations:** +1. Backdrop dims the underlying page +2. Confirmation modal: title, body copy, type-to-confirm field, Cancel + destructive Confirm +3. Reviewer note (red dashed): the destructive button must remain disabled until the typed input matches + +--- + +## Multi-screen flow + +When emitting a flow, render each screen as its own `` inside one SVG, separated by 80px gutters and connected with arrow primitives from `components.md`. Or emit one SVG per screen and a `flow.svg` summary that arranges thumbnails (scaled with `transform="scale(0.25)"`) left-to-right. Either is acceptable; pick whichever the reviewer can scan faster. diff --git a/packages/skills-catalog/catalog/bundled/product/wireframe/references/grid-system.md b/packages/skills-catalog/catalog/bundled/product/wireframe/references/grid-system.md new file mode 100644 index 00000000..41b5011c --- /dev/null +++ b/packages/skills-catalog/catalog/bundled/product/wireframe/references/grid-system.md @@ -0,0 +1,107 @@ +# Grid, palette, and type scale + +These are the only values you may use. Do not introduce new colours, sizes, or grid units. + +## Canvas presets + +| Viewport | Width × Height | Use for | +| -------- | -------------- | ----------------------------- | +| Desktop | 1280 × 800 | Default for web app screens | +| Wide | 1440 × 900 | Marketing landing pages | +| Tablet | 768 × 1024 | iPad-class screens | +| Mobile | 375 × 812 | iPhone-class screens | + +Always include `viewBox="0 0 W H"` matching the canvas so it scales when embedded. + +## Grid + +- Base unit: **8px**. All `x`, `y`, `width`, `height` values must be multiples of 8. +- Outer page margin: **24px** on desktop/tablet, **16px** on mobile. +- Column gutter: **24px** desktop, **16px** mobile. +- Vertical rhythm: **24px** between sibling components. + +### Desktop 12-column grid + +- Total width: 1280 +- Outer margin (each side): 48 +- Inner content width: 1184 +- Column width: 88, gutter 8 → 12 × (88 + 8) − 8 = 1144 + 40 = 1184 ✓ + +In practice, snap to common widths: +- Sidebar: 240 +- Content max: 944 (after sidebar) +- Card grid: 3 × 384 with 24 gutters or 4 × 280 with 24 gutters +- Modal width: 480 (small), 640 (default), 800 (wide) + +### Mobile single column + +- Total width: 375 +- Outer margin: 16 each side → content 343 +- Tap targets: 44 minimum height (snap to 48) + +## Palette (the only colours allowed) + +| Name | Hex | Use | +| ---------------- | ---------- | -------------------------------------------------------- | +| Ink | `#000` | Strokes, primary text | +| Paper | `#fff` | Default fill | +| Mute text | `#666` | Placeholder text inside inputs, secondary labels | +| Placeholder grey | `#e6e6e6` | Image/avatar/empty-state regions | +| Subtle grey | `#f4f4f4` | Optional zebra rows in tables; nothing else | +| Annotation red | `#d33` | Annotation layer ONLY — dashed borders, callout numbers | + +That's the entire palette. No hover states, no focus rings, no brand colours. + +## Type scale + +Single typeface: `font-family="-apple-system, system-ui, sans-serif"`. + +| Role | Size | Weight | Use | +| -------- | ---- | ------ | -------------------------------- | +| Caption | 12 | 400 | Help text, metadata, table footnotes | +| Body | 14 | 400 | Default text, button labels, list rows | +| Heading | 20 | 600 | Section headings, card titles | +| Title | 28 | 700 | Page title (one per screen) | + +Font-weight is the only typographic variation allowed beyond size. No italics, no underline (except links — see below). + +### Link convention + +For text links, render as body 14, with `text-decoration="underline"`. No colour change. + +### Strokes on text + +Always set `stroke="none"` on `` elements. The wireframe SVG sets a default stroke at the `` root for boxes; text inherits it as an unwanted halo unless overridden. + +## Standard component sizes + +These appear so often you should memorise them. + +| Component | Size (W × H) | +| ----------------- | ------------ | +| Button (default) | 120 × 40 | +| Button (small) | 80 × 32 | +| Button (icon) | 40 × 40 | +| Text input | 320 × 40 | +| Text input (full) | 100% × 40 | +| Search input | 480 × 40 | +| Dropdown | 200 × 40 | +| Checkbox / radio | 20 × 20 | +| Avatar (small) | 32 × 32 circle | +| Avatar (medium) | 48 × 48 circle | +| Navbar | 100% × 64 | +| Tab | (auto) × 48 | +| List row | 100% × 56 | +| Table row | 100% × 48 | +| Card padding | 24 inside | +| Modal | 480 / 640 / 800 wide, height auto | + +## Coordinate conventions + +- Place every primitive inside a `` so its internal coordinates start at `(0, 0)`. This makes primitives copy-pastable across screens. +- Use comments above each primitive: ``, `` matching the annotation list you write below the SVG. +- Group related primitives under a parent `` with a `data-region="..."` attribute for searchability. + +## Negative space + +Empty space is part of the design. Do not fill the canvas. A wireframe with one card centered in the viewport is a valid wireframe if that's the screen's intent. diff --git a/packages/skills-catalog/generated/catalog.json b/packages/skills-catalog/generated/catalog.json index 5c54e613..cdcb7b38 100644 --- a/packages/skills-catalog/generated/catalog.json +++ b/packages/skills-catalog/generated/catalog.json @@ -2,7 +2,7 @@ "schemaVersion": 1, "packageName": "@paperclipai/skills-catalog", "packageVersion": "0.3.1", - "generatedAt": "2026-05-28T03:02:49.579Z", + "generatedAt": "2026-05-31T18:06:11.126Z", "skills": [ { "id": "paperclipai:bundled:docs:doc-maintenance", @@ -108,6 +108,78 @@ ], "contentHash": "sha256:4fb46a4bcefad4fd46fae48c433ee497112509a8e19fb8a7745ead44d219b498" }, + { + "id": "paperclipai:bundled:product:wireframe", + "key": "paperclipai/bundled/product/wireframe", + "kind": "bundled", + "category": "product", + "slug": "wireframe", + "name": "wireframe", + "description": "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\", \"make a page to view the wireframes\", \"build a viewer for these screens\", or to \"deploy / publish / host the wireframes\". Do NOT use when the user wants production UI code, branded designs, hi-fi mockups, or animated/interactive prototypes — use frontend-design or similar instead.", + "path": "catalog/bundled/product/wireframe", + "entrypoint": "SKILL.md", + "trustLevel": "assets", + "compatibility": "compatible", + "defaultInstall": false, + "recommendedForRoles": [ + "designer", + "product", + "engineer" + ], + "requires": [], + "tags": [ + "design", + "wireframe", + "ux", + "prototyping", + "svg" + ], + "files": [ + { + "path": "SKILL.md", + "kind": "skill", + "sizeBytes": 11887, + "sha256": "a910d038d8cdd13615b82f44a2195b781ebccf01c49f9c58babd43b0701fe644" + }, + { + "path": "assets/site-template.html", + "kind": "asset", + "sizeBytes": 14791, + "sha256": "8886ad77c386c17b0457f11624aab136c33db7f28dcd6f10fc18e9d833d0950f" + }, + { + "path": "assets/template-mobile.svg", + "kind": "asset", + "sizeBytes": 925, + "sha256": "dc32af257df1f986b87a7b30a6104de825057dc4d6f12b381f5a28308f0002f0" + }, + { + "path": "assets/template.svg", + "kind": "asset", + "sizeBytes": 1262, + "sha256": "63f8adb8eb4b21dea6fd442b9e9312704c419535eb577d4ef0bfb54410fd576b" + }, + { + "path": "references/components.md", + "kind": "reference", + "sizeBytes": 14806, + "sha256": "4ce18f418d78b13cdfa6fe8070173044a631576cd2b999571e6703f58894496c" + }, + { + "path": "references/examples.md", + "kind": "reference", + "sizeBytes": 16108, + "sha256": "18f486e95a578a50cf6c9f93394b82534392771320692e4876edf17054bfae55" + }, + { + "path": "references/grid-system.md", + "kind": "reference", + "sizeBytes": 4581, + "sha256": "017260d2216859d57e5fa869e0efc6b88c7ed4d8a8a4f5af04fe89a3ef2445bd" + } + ], + "contentHash": "sha256:0bd9a9fdc656d529e3f97c00cd504dcf72d3a4fecb8b0504ca2fe3e00d63287f" + }, { "id": "paperclipai:bundled:quality:qa-acceptance", "key": "paperclipai/bundled/quality/qa-acceptance", diff --git a/packages/skills-catalog/src/shipped-catalog.test.ts b/packages/skills-catalog/src/shipped-catalog.test.ts index e6b916a2..867f71e8 100644 --- a/packages/skills-catalog/src/shipped-catalog.test.ts +++ b/packages/skills-catalog/src/shipped-catalog.test.ts @@ -6,6 +6,7 @@ const EXPECTED_BUNDLED_KEYS = [ "paperclipai/bundled/docs/doc-maintenance", "paperclipai/bundled/paperclip-operations/issue-triage", "paperclipai/bundled/paperclip-operations/task-planning", + "paperclipai/bundled/product/wireframe", "paperclipai/bundled/quality/qa-acceptance", "paperclipai/bundled/software-development/github-pr-workflow", ]; @@ -31,8 +32,11 @@ describe("shipped skills catalog", () => { expect(optionalKeys).toEqual(EXPECTED_OPTIONAL_KEYS); }); - it("keeps every shipped skill markdown-only until a script-bearing skill clears security review", () => { - const scriptBearing = catalogSkills.filter((skill) => skill.trustLevel !== "markdown_only"); + it("keeps every shipped skill free of executable scripts until script-bearing skills clear security review", () => { + // The real install-time security boundary (server assertCatalogSkillInstallable) blocks + // only "scripts_executables". Static assets (svg/html templates, e.g. the wireframe skill) + // carry the "assets" trust level and are installable, so they are allowed in the catalog. + const scriptBearing = catalogSkills.filter((skill) => skill.trustLevel === "scripts_executables"); expect(scriptBearing, formatViolations("script-bearing skills require security review", scriptBearing)).toEqual([]); });