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/akonan/wiremd/wireframenpx skills add akonan/wiremd --skill wireframegit clone --depth 1 https://github.com/akonan/wiremdWhat 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 | $0.00151 | $0.02969 |
| Opus 5 | $0.00076 | $0.01484 |
| Sonnet 5 | $0.00030 | $0.00594 |
| Haiku 4.5 | $0.00015 | $0.00297 |
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 2d 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 — 380 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Wireframe Skill
Write a wiremd .md file, render it, and iterate. wiremd converts plain Markdown with extended
syntax into visual wireframes — 7 styles, no design tools needed.
Workflows
1. Create from a description or spec
- Understand the screen's purpose — what does the user accomplish here?
- Sketch structure top-to-bottom: nav → layout → content sections → forms/data → off-screen elements (modals)
- Write the wiremd file using the quick reference below
- Render and tell the user where to open it
2. Document an existing component or screen
- Read the JSX/TSX component tree — focus on structure, not logic
- Map components to wiremd equivalents (see
references/syntax.md→ Component mapping table) - Write top-to-bottom following visual flow
- Capture: layout, navigation, form fields/labels, button labels, table columns, states
- Skip: exact colors, event handlers, API calls, business logic
Before you render
Answer three questions up front — they determine what you build and how you hand it back.
1. What wiremd version is available? Run wiremd --version. Require ≥ 0.1.7 for:
::: layout {.sidebar-main}— proper sidebar CSS (stock 0.1.5 stacks vertically)[[ [Label](./page.md) | ... ]]— cross-page hrefs in nav (stock 0.1.5 drops them silently)![[file.md]]— shared partial includes
If older, build from source: git clone https://github.com/teezeit/wiremd && cd wiremd && npm install && npm run build, then invoke via node path/to/wiremd-fork/bin/wiremd.js.
2. Single page or multi-page? Ask the user up front. For multi-page, scaffold from the start — don't bolt on later:
_nav.mdshared across all pages via![[_nav.md]]_sidebar.mdif using sidebar layout- one
.mdper page at top level
See references/multi-page.md for folder layout, cross-page link syntax, and the rebuild recipe.
3. Which render route does this environment support? Triage by the tools Claude actually has — not by product name. See references/rendering-modes.md for the full table.
What ships with it
13 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.
- references/examples/_nav.md 78 B
- references/examples/_sidebar-nav.md 112 B
- references/examples/dashboard.md 1.4 KB
- references/examples/multi-page/_nav.md 81 B
- references/examples/multi-page/detail.md 389 B
- references/examples/multi-page/index.md 750 B
- references/examples/settings-form.md 1.4 KB
- references/multi-page.md 2.5 KB
- references/quick-reference.md 7.0 KB
- references/rendering-modes.md 2.8 KB
- references/styles.md 2.7 KB
- references/syntax.md 11 KB
- references/vscode.md 1.1 KB
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.
- 2d ago First seen · 380 lines · 151 tokens per session scan A b1fee1fa17cd
wireframe is a skill published in the GitHub repository akonan/wiremd (97 stars, last pushed 3mo ago), licensed MIT. It adds 151 tokens to every session and 2,969 once invoked, about $0.0008 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
impeccable
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states.…
creating-themes
Create and share a custom theme for @farming-labs/docs. Use when building a theme with createTheme(), extendTheme(), cherry-picking built-in defaults, publishing as npm package, or adding CSS overrides. Covers ui.colors, typography, layout, sidebar, radius, and package layout for publishing.
wave-mosaic-web-theme
当需要为网页复刻 black-yt 风格的高级前端主题时使用；覆盖 canvas wave-mosaic 动态方块背景、Pure White/Warm Yellow/Cool Blue/Dark 四种背景颜色切换、Space Grotesk 字体、CSS 变量、floating background dots、顶部圆角导航栏、论文筛选滑块、卡片/表格/按钮主题化和性能细节。.
design-taste-frontend
Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.
design-guide
Paperclip UI design system guide for building consistent, reusable frontend components. Use when creating new UI components, modifying existing ones, adding pages or features to the frontend, styling UI elements, or when you need to understand the design language and conventions. Covers: component creation, design…
Shade ShadCN install
Guardrails for running pnpm dlx shadcn@latest add in Shade — never overwrite existing components, fresh branch first, swap raw colours for semantic tokens after integrating. Trigger when the user proposes a shadcn add, or when a fresh ShadCN-shaped file lands in apps/shade/src/components/ui.