wireframelisted

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.
getpaperclipai/paperclip · ★ 9 · Web & Frontend · score 80

Install: claude install-skill getpaperclipai/paperclip

# 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