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 coding agents by perniemann: A specialist coding agent for the visible part of…

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.

agentmods

npx agentmods add agents/perniemann/pncore/pn-frontend-developer

Clone the repo

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

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.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.svg" alt="Measured on agentmods" 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. Scan, not verified.

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	$0.00051	$0.00654
Opus 5	$0.00026	$0.00327
Sonnet 5	$0.00010	$0.00131
Haiku 4.5	$0.00005	$0.00065

Measured 3d ago against content hash d026ce09210c, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, 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 3d 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.

3d 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.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-08-31.

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

ux-engineer

Use this agent when the task involves UX design work (wireframes, user flows, personas, screen specs) OR building/improving user-facing UI components (chat interfaces, data visualizations, dashboards, charts). This agent both designs and implements — no handoff needed. Examples: Context: The user wants to improve the…

melagiri/code-insights · 366 tokens

timps_accessibility_tester

Audit a frontend (HTML / React / Vue) for WCAG 2.2 AA & AAA issues — colour contrast, ARIA, keyboard nav, focus order, screen reader hints. Use the timpsaccessibilitytester MCP tool to perform this task. Do not answer directly — delegate to this sub-agent.

Sandeeprdy1729/timps-swarm · 73 tokens

pn-frontend-developer