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/soulcodex/agentic/wireframe-prototypingnpx skills add soulcodex/agentic --skill wireframe-prototypinggit clone --depth 1 https://github.com/soulcodex/agenticWhat 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.00062 | $0.00807 |
| Opus 5 | $0.00031 | $0.00404 |
| Sonnet 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 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 — 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.
- 2d 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 3d ago), licensed MIT. It adds 62 tokens to every session and 807 once invoked, about $0.0003 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-31.
Other skills, from other repositories
sketch
Throwaway HTML mockups: 2-3 design variants to compare.
claude-design
Design one-off HTML artifacts (landing, deck, prototype).
design-debt-audit
Inventory and prioritise accumulated design inconsistencies across a product. Use when drift has built up over time. For token coverage specifically use design-token-audit (designer-toolkit); for WCAG gaps use accessibility-audit (design-systems).
design-impact-reporting
Communicate design's contribution to business and user outcomes in stakeholder language. Use when reporting results upward. For choosing the metrics in the first place, use metrics-definition (ux-strategy).
research-repository
Build a repository that makes findings findable, reusable, and cumulative across teams. Use when the same research keeps getting redone. For synthesising one study, use affinity-diagram.
survey-design
Design unbiased survey instruments — question wording, scales, and sampling — to measure attitudes at scale. Use when you need quantitative breadth. For behavioural experiments, use a-b-test-design (prototyping-testing).