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 skills add soulcodex/agentic --skill wireframe-prototypinggit clone --depth 1 https://github.com/soulcodex/agenticWrote 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/soulcodex/agentic/wireframe-prototyping)<a href="https://agentmods.dev/skills/soulcodex/agentic/wireframe-prototyping"><img src="https://agentmods.dev/badge/skills/soulcodex/agentic/wireframe-prototyping/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/soulcodex/agentic/wireframe-prototyping"><img src="https://agentmods.dev/badge/skills/soulcodex/agentic/wireframe-prototyping.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
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.00062 | $0.00807 |
| Opus 5.5 | $0.00025 | $0.00323 |
| Sonnet 5.5 | $0.00012 | $0.00161 |
| Haiku 4.5 | $0.00006 | $0.00081 |
Grade A, and why
wireframe-prototyping 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 1mo 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 — 110 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Wireframe Prototyping Skill
Step 1 — Clarify Scope
Before sketching, confirm:
- Which screen or flow is being wireframed?
- What device target: desktop, mobile, or both?
- What is the primary user goal this screen must satisfy?
- Are there existing designs or brand constraints to follow?
Step 2 — Identify User Flows
List the key flows the wireframe must cover:
- Happy path (primary action the user takes)
- Empty states (no data yet)
- Error states (validation failure, network error)
- Edge cases (long strings, many items in a list)
Step 3 — ASCII Wireframe
Sketch the layout using ASCII art. Use these conventions:
+------------------------+ ← container border
| Page Title | ← text
+------------------------+
| [ Search... ] | ← text input
| [ Button ] [ Cancel ] | ← buttons
+--------+---------------+
| Nav | Main Content |
| - Item | |
| - Item | +------------+ |
| | | Card Title | | ← card
| | | Subtitle | |
| | [ Action ] |
| | +------------+ |
+--------+---------------+
| Footer |
+------------------------+
Legend:
[ text ] ← button
[ text... ] ← text input
< Option ▼ > ← dropdown / select
(•) Option ← radio button
[x] Label ← checkbox
~~~ ← image / media placeholder
Produce a separate wireframe per breakpoint if mobile and desktop differ significantly.
Step 4 — Interaction Annotations
After each wireframe, add a numbered annotation list:
Interactions:
1. Clicking [ Search ] submits the search form → loads results in Main Content.
2. Empty state shows "No results found" with a [ Clear filters ] button.
3. Clicking a Card opens a detail drawer (slides in from the right).
4. < Option ▼ > dropdown filters results in real-time (no submit needed).
5. Error state shows an inline banner: "Something went wrong. [ Retry ]"
Step 5 — Figma / Excalidraw Handoff Notes
If handing off to a designer, note:
- Spacing guidelines (e.g., 8-pt grid, 16 px section padding).
- Component names to reuse from the design system (if known).
- Any animation or transition intent (e.g., "drawer slides in 200 ms ease-out").
- Responsive behaviour: how the layout reflows on smaller screens.
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.
- 1mo ago First seen · 110 lines · 62 tokens per session scan A c53cbabfd1f2
wireframe-prototyping is a skill published in the GitHub repository soulcodex/agentic (10 stars, last pushed 1mo ago), licensed MIT. It adds 62 tokens to every session and 807 once invoked, about $0.0002 per session on Opus 5.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-31.
Other skills, from other repositories
hatch3r-design-system-detect
Detects existing design tokens, component library, and theming convention in a project before authoring new UI primitives — output a concise inventory for downstream implementers.
sketch
Throwaway HTML mockups: 2-3 design variants to compare.
popular-web-designs
54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
desktop-brand-builder
Generate a branded Qwen Code desktop package from the Tauri desktop shell using a minimal brandId and logo. Use when the user wants a custom, white-label, or rebranded desktop client, installer, DMG/EXE/AppImage/deb, or one-click brand build on top of packages/desktop.
wireframe-sketch
A hand-drawn wireframe style for exploring page ideas before the final design, using graph paper, rough marks, tabs, notes, and sketch-like charts.
app-screenshot-debug
Drive the running termio app via AppleScript / System Events to reach a UI state (focus the window, click a sidebar project, a terminal pane, a control), capture a pixel-accurate screenshot of just that window, and read it back for visual analysis — for diagnosing layout / spacing / alignment / 'this looks ugly'…