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-design-variantsgit 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-design-variants)<a href="https://agentmods.dev/skills/perniemann/pncore/pn-design-variants"><img src="https://agentmods.dev/badge/skills/perniemann/pncore/pn-design-variants/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-design-variants"><img src="https://agentmods.dev/badge/skills/perniemann/pncore/pn-design-variants.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.00066 | $0.01156 |
| Opus 5.5 | $0.00026 | $0.00462 |
| Sonnet 5.5 | $0.00013 | $0.00231 |
| Haiku 4.5 | $0.00007 | $0.00116 |
Grade A, and why
pn-design-variants 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 — 119 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design variants
When to use
- Before choosing a UI layout, component shape, or page structure
- When designing a module or API interface and unsure which shape is best
- When the user says "show me options", "design it twice", or "explore alternatives"
- As an alternative to pn-design when multiple directions are worth exploring before committing
Principle
From "A Philosophy of Software Design" by John Ousterhout: your first idea is unlikely to be the best. Generate multiple radically different designs, then compare. The value is in the contrast — seeing divergent approaches reveals tradeoffs that a single design hides.
Workflow
1. Gather requirements
Ask:
- "What problem does this [module/UI/interface] solve?"
- "Who are the callers or users? (other modules, external users, tests, end users)"
- "What are the key operations or interactions?"
- "Any constraints? (performance, compatibility, existing patterns, tech stack)"
- "What should be hidden inside vs. exposed?"
Do not generate designs until requirements are clear.
2. Generate designs — parallel sub-agents
Spawn 3+ sub-agents using the Task tool simultaneously. Each sub-agent must produce a radically different approach — enforce this by assigning each a different constraint:
Prompt template for each sub-agent:
Design a [UI/interface/module] for: [description]
Requirements: [gathered requirements]
Your constraint for this design:
- Agent 1: "Minimize surface area — aim for the fewest methods/props/interactions"
- Agent 2: "Maximize flexibility — support edge cases and future use cases"
- Agent 3: "Optimize for the most common use case — make the happy path frictionless"
- Agent 4 (optional): "Take inspiration from [specific paradigm or library — e.g. React hooks, Unix pipes, spreadsheet formulas]"
Output:
1. Interface/layout signature (types, props, methods, or wireframe description)
2. Usage example — how a caller or user interacts with it in practice
3. What this design hides internally
4. Trade-offs of this approach (strengths and weaknesses)
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 · 119 lines · 66 tokens per session scan A 4176e39e05b1
pn-design-variants is a skill published in the GitHub repository perniemann/pnCore (0 stars, last pushed 3d ago), licensed MIT. It adds 66 tokens to every session and 1,156 once invoked, about $0.0003 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-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.
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.
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…