Paperclip is a Node.js server and React application for coordinating AI agents as a business team, with goals, organizational roles, budgets, governance, and work tracking in one interface. It is used by people managing multiple agents or autonomous agent organizations across tools such as OpenClaw, Claude Code, Codex, and Cursor. The catalogue includes skills, agents, an MCP add-on, and an instruction for working with Paperclip.
Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/paperclipai/paperclip/wireframenpx skills add paperclipai/paperclip --skill wireframegit clone --depth 1 https://github.com/paperclipai/paperclipWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/paperclipai/paperclip/wireframe)<a href="https://agentmods.dev/skills/paperclipai/paperclip/wireframe"><img src="https://agentmods.dev/badge/skills/paperclipai/paperclip/wireframe.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00047 | $0.02777 |
| Opus 5 | $0.00023 | $0.01388 |
| Sonnet 5 | $0.00009 | $0.00555 |
| Haiku 4.5 | $0.00005 | $0.00278 |
Grade A, and why
wireframe scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 6d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 194 lines — stays where its author put it; the contents beside it link to each section on GitHub.
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 |
What ships with it
6 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 6d ago First seen · 194 lines · 47 tokens per session scan A 6992047cc97b
wireframe is a skill published in the GitHub repository paperclipai/paperclip (80,021 stars, last pushed today), licensed MIT. It adds 47 tokens to every session and 2,777 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
ux-patterns
UX patterns for task flows, wireframes, accessibility, and user interactions — covering all user paths, error states and recovery actions, service blueprints (frontstage and backstage), all UI states (default, loading, empty, error, success, partial), keyboard navigation, screen reader accessibility, and wireframe…
product-designer
Expert product design covering UI/UX design, design systems, prototyping, user research, and design thinking.
wireframing
Low/high fidelity wireframes, user flows, information architecture, prototyping techniques, and design iteration processes.
anti-ui-slop
Stop coding agents from shipping generic UI. Extend the product's design system, use UIZZE evidence only when useful, cover required states, and inspect the rendered result.
fireworks-tech-graph
Create technical diagrams such as software architecture, data flow, flowcharts, sequence diagrams, C4 reviews, cloud deployments, event streams, observability investigations, agent/memory systems, UML, ER, network topology, timelines, and technical concept maps, then export SVG, PNG, focused semantic SVG-to-GIF…
data-viz-renderer
Generate self-contained HTML/SVG infographics from JSON data, including stat cards, bar charts, flow diagrams, and mixed dashboards. Offers 8 color palettes and built-in icons with no external dependencies. Triggered when users request data visualization, infographics, charts, or dashboards.