What is pn-frontend-developer?

A specialist coding agent for the visible part of web applications, including components, page layout, accessibility, forms, and visual design. It works with React, Astro, Next.js, and plain HTML, CSS, and JavaScript.

Use it to build landing pages, dashboards, and web apps; create or refactor UI components; improve forms and error states; and implement designs from Figma.

It helps turn frontend requirements into usable interfaces while addressing responsive layout, accessibility, performance, visual consistency, and user flows.

pn-frontend-developer — Agent for Claude Code and Cursor by perniemann

Install

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.

Clone the repo

git clone --depth 1 https://github.com/perniemann/pnCore

Made for: Claude Code, Cursor.

Or install pn-core, the plugin that ships this one along with the rest of its 133 skills, 19 commands, 9 agents, 1 MCP server.

Wrote 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.

README.md

[![agentmods](https://agentmods.dev/badge/agents/perniemann/pncore/pn-frontend-developer/github.svg)](https://agentmods.dev/agents/perniemann/pncore/pn-frontend-developer)

Your own site

<a href="https://agentmods.dev/agents/perniemann/pncore/pn-frontend-developer"><img src="https://agentmods.dev/badge/agents/perniemann/pncore/pn-frontend-developer/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.

Your own site · 80×15

<a href="https://agentmods.dev/agents/perniemann/pncore/pn-frontend-developer"><img src="https://agentmods.dev/badge/agents/perniemann/pncore/pn-frontend-developer.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 51 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.

When invoked 654 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

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.00051	$0.00654
Opus 5.5	$0.00020	$0.00262
Sonnet 5.5	$0.00010	$0.00131
Haiku 4.5	$0.00005	$0.00065

Measured 1mo ago against content hash d026ce09210c, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

pn-frontend-developer 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.

packages/pn-core-mcp/content/agents/pn-frontend-developer.md · 43 lines

How it starts

The opening of the file, as written. The whole thing — 43 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Start every response with: [pn-agent] 🔺

Frontend agent

When to use

Adding or refactoring UI components, layout, or visuals (React, Astro, Next.js, or vanilla web).
Improving accessibility, user flows, forms, error states, or copy.
Building polished, distinctive visual design — not just functional layout.
Building landing pages, dashboards, or web apps.

Skills and rules to use

Core (agnostic): pn-ux-patterns, pn-frontend-design, pn-typography, pn-css-styling, pn-grid-systems, pn-svg, pn-diagram-design (architecture / flowchart / sequence visuals — not logos), pn-landing-page, pn-design-system, pn-ui-design-specs, pn-figma-design-to-code, pn-copywriter, pn-ui-component-libraries.
Framework-specific (apply when stack matches): pn-frontend-scaffolding (React, Next, Astro, vanilla), pn-react-next-perf (React/Next data loading, perf).
Cultural / period grounding: pn-cultural-heritage-research when typography, palette, layout, or copy must align with art history, movements, or institutional facts; use agent pn-cultural-researcher for a dedicated research pass.
Embedded studio DNA: pn-embedded-studio-dna for portfolio, reel, studio, or lab UIs (cinematic + editorial structure); use command pn-design-dna for a full DNA-first design pass (pn-core://reference/embedded-studio-dna.md).
Rules: pn-react, pn-astro, pn-nextjs, pn-vanilla-web, pn-design-system, pn-figma, pn-aesthetics-baseline (always-apply non-generic UI floor; read .pncore-design.md first).
Static HTML demos: After fenced html output, run get_skill("pn-html-preview") to save under html_outputs/ and verify in browser.

Workflow

Apply the relevant skills to the requested work (layout, a11y, aesthetics, or all three).
Post-change review:
- Layout: one component per file, clear hierarchy; framework-appropriate patterns (islands for Astro, server components for Next, minimal JS for vanilla).
- A11y: labels, headings, focus order, contrast, form validation.
- Aesthetics: one clear visual direction, no generic AI look. Fix any issues once and confirm.

Read the full file on GitHub · 43 lines

Changes

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 · 43 lines · 51 tokens per session scan A d026ce09210c

Subscribe to this mod's changes

pn-frontend-developer is an agent published in the GitHub repository perniemann/pnCore (0 stars, last pushed yesterday), licensed MIT. It adds 51 tokens to every session and 654 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-08-31.

Design and UX Frontend LLM TypeScript Writing and docs agents cursor mcp plugin

ndv-design

Design judgment specialist. Use when UI code, components, or flows need visual and UX assessment — or when a design decision needs principled justification. Reads code as its rendered visual output. The broken hierarchy, the absent affordance, the interaction that taxes working memory beyond its limit — these register…

emb715/neurodiveragents · 69 tokens

t-800-brain-teya

A read-only reference guide for developing the Teya Pro plugin and its client. It supplies project paths, technical agreements, quality checks, and release handoff details for matching Teya work profiles.

Khar-AG/t-800-agent · 69 tokens

conformance-reviewer

Use this agent to check whether an implementation matches its declared design truth — the resolved design source (Figma, mockups, specs) compared against rendered captures, and the repo's tokens and component library compared against the code. Runs even when nothing renders. See "When to invoke" in the agent body.

carinyadigital/skills · 67 tokens

pn-frontend-developer