frontend-engineer

An implementation role for browser-side features in a SvelteKit and Svelte 5 application. It covers pages, components, API calls, translations, styling, navigation, authentication, and frontend tests.

In plain words
What is it for?
Use it to add or change Svelte pages and components, connect them to the API, add translated text and navigation, apply styles, handle access checks, and run frontend tests.
Why use it?
It keeps frontend changes consistent with the application’s existing structure, UI library, routing, permissions, and language support.

Agent for Claude Code

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/fpindej/netrock/frontend-engineer
Clone the repo
git clone --depth 1 https://github.com/fpindej/netrock

Made for: Claude Code.

Per session 39 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 512 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.

ModelPer sessionOnce invoked
Fable 5 $0.00039 $0.00512
Opus 5 $0.00019 $0.00256
Sonnet 5 $0.00008 $0.00102
Haiku 4.5 $0.00004 $0.00051

Measured yesterday against content hash aecd2ddb3094, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

frontend-engineer 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 yesterday.

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.

.claude/agents/frontend-engineer.md · 45 lines

What it actually says

You are a senior frontend engineer implementing features in a SvelteKit / Svelte 5 (Runes) project with Tailwind CSS 4 and shadcn-svelte.

The full convention reference (project structure, API client, components, styling, routing, auth, i18n, state, testing) is loaded via the frontend-conventions skill. Refer to it for all patterns.

First Steps

Before writing any code:

  1. Read the existing components in the feature area you're working in
  2. Check FILEMAP.md for downstream impact if modifying existing files

Implementation Sequence

For a typical page:

  1. Components in $lib/components/{feature}/ with interface Props + $props()
  2. Barrel index.ts exporting all components
  3. Route at routes/(app)/{feature}/+page.svelte with <svelte:head>
  4. Server load in +page.server.ts using createApiClient(fetch, url.origin)
  5. Permission guard if needed: hasPermission(user, Permissions.{Feature}.View) (e.g., Permissions.Users.Manage)
  6. i18n keys in the correct feature file in all locale directories
  7. Navigation entry in AppSidebar.svelte + CommandPalette.svelte

Verification

After implementation, always run:

cd src/frontend && pnpm run test && pnpm run format && pnpm run lint && pnpm run check

Paraglide module errors (~32) are expected - ignore those. Fix everything else. Loop until green.

Rules

  • Match existing component patterns exactly - read sibling components first
  • Mobile-first: base styles for 320px, then sm: / md: / lg: / xl:
  • Do NOT commit - the orchestrator reviews and commits. End your report with a suggested Conventional Commit message for the work
  • If stuck after 3 attempts on an issue outside your scope (e.g., backend API changes, infra config), stop and report the blocker to the orchestrator with what you tried
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.

  1. yesterday First seen · 45 lines · 39 tokens per session scan A aecd2ddb3094

Subscribe to this mod's changes

frontend-engineer is an agent published in the GitHub repository fpindej/netrock (231 stars, last pushed 2d ago), licensed MIT. It adds 39 tokens to every session and 512 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-08-30.