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 perniemann/pnCore --skill pn-wireframegit clone --depth 1 https://github.com/perniemann/pnCoreWrote 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/perniemann/pncore/pn-wireframe)<a href="https://agentmods.dev/skills/perniemann/pncore/pn-wireframe"><img src="https://agentmods.dev/badge/skills/perniemann/pncore/pn-wireframe/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/perniemann/pncore/pn-wireframe"><img src="https://agentmods.dev/badge/skills/perniemann/pncore/pn-wireframe.svg" alt="Reviewed on agentmods" width="80" 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.00040 | $0.00813 |
| Opus 5.5 | $0.00016 | $0.00325 |
| Sonnet 5.5 | $0.00008 | $0.00163 |
| Haiku 4.5 | $0.00004 | $0.00081 |
Grade A, and why
pn-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 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 — 90 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Wireframe skill
When to use
- Before design plan for multi-section pages, landing pages, dashboards, or flows
- When the user requests structural alignment first (layout, hierarchy, regions)
- As part of design workflow: after discovery, before typography and tokens
- When stakeholder feedback on structure is needed before investing in visual design
Process
Wireframes establish structure before aesthetics. Per Nielsen Norman Group, they visualize user paths, page layouts, information hierarchy, and interactions; fidelity can range from quick sketches to detailed representations.
1. Input
- Discovery spec (purpose, tone, target users, core functionality) — from pn-discovery-questionnaire when available
- Or: user's request with at least purpose and tone
2. Structural layout
Produce a low-fidelity layout that defines:
- Regions: Main content areas, navigation placement, header/footer
- Information hierarchy: What is primary (e.g. hero, main CTA) vs secondary
- Component placement: Where key blocks go (hero, sections, forms, CTAs)
- User flow: How users move between areas or steps
Output format: ASCII layout or structured Markdown (sections, regions, component tree). Examples:
+------------------------------------------+
| [Nav] [Search] |
+------------------------------------------+
| |
| [Hero: headline, CTA, visual] |
| |
+------------------------------------------+
| [Section 1] | [Section 2] |
| ... | ... |
+------------------------------------------+
| [Footer] |
+------------------------------------------+
Or as a component tree:
- Page
- NavBar (top)
- Hero (primary CTA, headline)
- FeatureGrid (3 columns)
- SocialProof
- CTA band
- Footer
3. Conventions (per NNG)
- Images: rectangle with X
- Body text: thinner lines
- Headers: thicker lines
- Buttons: rectangle with label for CTAs
- Navigation: indicate position (horizontal/vertical), current state if relevant
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 · 90 lines · 40 tokens per session scan A 468a232c80a8
pn-wireframe is a skill published in the GitHub repository perniemann/pnCore (0 stars, last pushed 2d ago), licensed MIT. It adds 40 tokens to every session and 813 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-09-03.
Other skills, from other repositories
typescript
TypeScript coding conventions, best practices, and patterns for writing clean, maintainable code.
taiyi-diagram-arch
A workflow for turning written system or product architecture into readable, version-controlled diagrams using Mermaid or exported SVG and PNG files. Architecture diagrams show components, boundaries, data flows, and deployment relationships.
taiyi-restyle
A planning guide for breaking a large user-interface redesign into smaller, independently reviewable tasks. A user interface is the part of an application that people see and use.
taiyi-diagram-render
A tool for rendering existing C4 or architecture Mermaid diagrams as SVG or PNG images. C4 is a way to show software systems at different levels, while Mermaid is a text format for diagrams.
taiyi-diagram-pipeline
A pipeline that creates and updates architecture diagrams in three stages: a C4 model from the code, an engineering architecture diagram, and an exported PNG image. C4 is a way to describe software architecture at several levels of detail.
design-to-code
Mockup-to-component pipeline using Google Stitch, 21st.dev, and Storybook MCP. Accepts a screenshot, a description, or a URL and produces production-ready React components, checking existing Storybook components before generating anything new. Use when implementing UI from a mockup or screenshot. To call the MCP tool…