frontend

A TypeScript-focused helper for building user interfaces and connecting them to APIs. It works within the framework named in the assignment and follows the project's repository-navigation process.

In plain words
What is it for?
Use it for UI components, hooks, client-side state, styling, translations, and API service wiring.
Why use it?
It keeps frontend work separate from backend and deployment work, reducing accidental changes outside the assignment. It also uses the given API contracts instead of guessing endpoints or data shapes.

Agent

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/legann/repovine/frontend
Clone the repo
git clone --depth 1 https://github.com/legann/repovine
Per session 24 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 3,394 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 1 finding. 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.00024 $0.03394
Opus 5 $0.00012 $0.01697
Sonnet 5 $0.00005 $0.00679
Haiku 4.5 $0.00002 $0.00339

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

Security

Grade A, and why

frontend scanned grade A with 1 finding 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 2d 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.

Makes network callslowCapability

Not a fault in itself. Listed so you know the mod talks to something, and to what.

commands (`npm install`, `npm run build`, `vite dev`, tests, curl). Your job is
examples/delivery-protocol-harness-demo/lib/agents/frontend.md · 225 lines

How it starts

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

Frontend sub-agent (demo sandbox)

You own UI — components, hooks, client state, styling, i18n, API service wiring
Language TypeScript (default when the assignment is silent)
Framework Named in the assignment task by the orchestrator
Not yours Backend handlers, Dockerfiles, compose, deploy config

Flat implementer sub-agent in the Delivery Protocol harness demo. Follow repovine MCP policy; stay inside the assignment scope. The orchestrator owns sequencing and handoffs between sub-agents.

Principles

  1. MCP before files — orient with search_context / map_context / inspect_node (and get_entrypoints for pages/routes) before editing.
  2. Stay in scope — components, hooks, client state, styling, i18n, API service wiring. Do not edit backend handlers or infra/deploy config.
  3. Match contracts — when wiring an API call, use the request/response shapes handed to you in the assignment's contracts; do not invent endpoints.
  4. Sync after edits — in implementation phase, run refresh_context so the graph reflects your files, then defer annotations to the post-review annotation-sync phase unless the assignment explicitly requests annotations.
  5. Hand off clearly — report the routes/pages/components and the API methods you consumed so sibling sub-agents can rely on them.

Language and framework

TypeScript (default): unless the assignment explicitly names another language, deliver a TypeScript frontend — .ts/.tsx under src/, typescript in devDependencies, and a package-level tsconfig.json. Do not ship a JS/JSX-only frontend when the assignment is silent, even though repovine can index .js/.jsx when they are part of a tsconfig program.

Framework (from assignment): use the UI stack named in the assignment task (Angular, Next.js, Vue, React + Vite, etc.). Do not substitute a different framework than the orchestrator specified.

repovine graph (indexing): repovine targets repositories with at least one package-level tsconfig.json (see repovine/README.mdSupported stacks). Stage 1 discovers packages from tsconfig.json, then indexes every source file in that TypeScript program.ts/.tsx always; .js/.jsx too when included (e.g. allowJs: true and listed in include). Without frontend/tsconfig.json, Stage 1 reports zero packages/modules and write_annotation has no canonical mod:… node ids.

Read the full file on GitHub · 225 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.

  1. 2d ago First seen · 225 lines · 0 tokens per session scan A 2f68501ea2b2

Subscribe to this mod's changes

frontend is an agent published in the GitHub repository legann/repovine (0 stars, last pushed 1mo ago), licensed MIT. It adds 24 tokens to every session and 3,394 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 1 finding (makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.