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-frontend-designgit 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-frontend-design)<a href="https://agentmods.dev/skills/perniemann/pncore/pn-frontend-design"><img src="https://agentmods.dev/badge/skills/perniemann/pncore/pn-frontend-design/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-frontend-design"><img src="https://agentmods.dev/badge/skills/perniemann/pncore/pn-frontend-design.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.00045 | $0.01854 |
| Opus 5 | $0.00023 | $0.00927 |
| Sonnet 5 | $0.00009 | $0.00371 |
| Haiku 4.5 | $0.00005 | $0.00185 |
Grade A, and why
pn-frontend-design 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 8d 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 — 102 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend design
When to use
- Building or refining components, pages, landing pages, dashboards, or web apps.
- User asks for "designed," "polished," or "distinctive" UI, not just functional layout.
- Styling or beautifying any web UI with a clear aesthetic direction.
Design Context
Check .pncore-design.md in the project root first. If it exists and contains audience, brand personality, and visual ambition, use it — skip discovery questions. If it doesn't exist, recommend running pn-setup (design context option) to set it up, then continue with inline discovery as a fallback.
Cross-project floor: pn-core://reference/aesthetics-baseline.md — dimension checklist, inspiration presets, optional <frontend_aesthetics> block for CLAUDE.md. Use it so every surface (marketing, app shell, auth, empty states, emails if in scope) is reviewed against the same non-generic bar; project file always wins on conflicts.
Marketing intent (landing / portfolio / editorial): Before coding, load pn-core://reference/design-intent.md and emit the Design Read one-liner plus DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY (1–10). Pre-ship: get_command("pn-preflight") per pn-core://reference/marketing-ship-gate.md.
Design thinking (before coding)
Lock in context and a bold aesthetic direction:
- Purpose: What problem does this interface solve? Who uses it?
- Tone: Pick a clear direction: brutally minimal, maximalist, retro-futuristic, organic/natural, luxury/refined, playful, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. Execute that direction with precision.
- Constraints: Framework (React, Astro, Next.js, vanilla HTML/CSS), performance, accessibility.
- Differentiation: What is the one thing someone will remember? Make it unforgettable.
Then implement working code (React, Astro, Next.js, vanilla HTML/CSS) that is production-grade, visually striking, cohesive, and meticulously refined.
What ships with it
1 file 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.
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.
- 8d ago First seen · 102 lines · 45 tokens per session scan A b158de17319d
pn-frontend-design is a skill published in the GitHub repository perniemann/pnCore (0 stars, last pushed 5d ago), licensed MIT. It adds 45 tokens to every session and 1,854 once invoked, about $0.0002 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-09-03.
Other skills, from other repositories
brand-landingpage
Brand-first landing page designer — runs a brand-identity interview (colors, typography, shape language), then generates and iterates on a polished landing page via Stitch with deployment-ready HTML. Use when the user asks to create, design, or build a landing page, homepage, or marketing page and has no established…
openkb-html-critic
Use to review a generated HTML deck or single-page artifact for visual quality and structural correctness. Especially good at catching CSS specificity bugs where slide-modifier classes (.divider, .center, .q, .flow etc.) accidentally override the base .slide{display:none} and cause one slide to stack on top of every…
apply-mantel-styles
Provides guidelines for applying Mantel's brand styles to diagrams and frontend components. Use when asked to create visuals that need to align with Mantel's branding.
ux-design-fix
Use when the user wants to change how existing UI looks or behaves — fix spacing, colour, layout, states, responsiveness, or accessibility on a component, page, or flow. Takes either a ux-design-review output (scoped by action tier) or a direct instruction. Triggers on "the summary card padding is off", "the modal…
frontend-design
Create highly adaptive, production-grade frontend interfaces optimized for modern web standards and Generative UI pipelines. Use when building components, layouts, or design systems that require a distinct, non-generic aesthetic.
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".