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-design-philosophygit 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-philosophy)<a href="https://agentmods.dev/skills/perniemann/pncore/pn-frontend-design-philosophy"><img src="https://agentmods.dev/badge/skills/perniemann/pncore/pn-frontend-design-philosophy/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-philosophy"><img src="https://agentmods.dev/badge/skills/perniemann/pncore/pn-frontend-design-philosophy.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.00063 | $0.01658 |
| Opus 5 | $0.00032 | $0.00829 |
| Sonnet 5 | $0.00013 | $0.00332 |
| Haiku 4.5 | $0.00006 | $0.00166 |
Grade A, and why
pn-frontend-design-philosophy 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 — 232 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend Design Philosophy
Purpose
Use this as a frontend design rulebook for sites that mix:
- Strong visual identity
- Typography-led structure
- Motion/scroll experiences
- 2D/3D media
- Forms / tools / product UX
- Conversion goals
- Performance constraints
It is brand-agnostic and execution-ready.
When to use
- Designing new frontends (components, pages, flows)
- Reviewing existing frontends against consistent criteria
- Establishing design constraints for a team or AI agent
- Auditing typography, layout, motion, media, state, or performance
- Aligning on frontend quality before or during implementation
For workflow phases, scoring, templates, build strategy, and red-flag checklist, see reference.md.
Core Philosophy (non-negotiables)
One page = one dominant job
Every page must primarily be one of:
- Portfolio
- Product marketing
- Editorial / scrollytelling
- Tool / app
- Conversion / form
- Catalog / e-commerce
Secondary jobs can support, but not compete.
Typography carries structure
Hierarchy, semantics, and rhythm must be understandable before motion/media load.
Modularity beats one-off design
Build pages from repeatable blocks, not custom sections everywhere.
Media proves | text orients
- Use 2D/3D/video for proof and atmosphere
- Use text for direction, meaning, and decisions
State must be visible
Users should always know:
- Where they are
- What changed
- What is loading
- What to do next
Motion must serve meaning
Motion is allowed only if it:
- Reveals
- Orients
- Confirms
- Delights (without harming comprehension)
Performance is part of design
Budget media and JS during design, not after implementation. Core Web Vitals: LCP ≤2.5s, INP ≤200ms (Interaction to Next Paint—responsiveness to clicks/taps/keyboard), CLS ≤0.1. Per best practices (pn-core://reference/best-practices.md).
Responsive and touch-first
Layout and interactions must work across viewports and input modes. Mobile-first; design for touch (pointer: coarse) and provide alternatives for hover-only interactions. Never disable zoom.
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 · 232 lines · 63 tokens per session scan A e4109eaa80db
pn-frontend-design-philosophy is a skill published in the GitHub repository perniemann/pnCore (0 stars, last pushed 5d ago), licensed MIT. It adds 63 tokens to every session and 1,658 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-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.
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.
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…
ui-styling
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns…