frontend-developer

An AI agent that builds web interfaces from an approved design and connects them to a backend API. It reads the issue, existing frontend code, design materials, and API contract before implementing the work.

In plain words
What is it for?
Use it to create pages, components, interactions, API connections, frontend tests, and verification reports. It can use mock data when the backend is not available.
Why use it?
It coordinates the visual design and server interface so the resulting page is usable rather than only visually complete.

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/it235/multica-best-practices/frontend-developer
Clone the repo
git clone --depth 1 https://github.com/it235/multica-best-practices
Per session 0 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 552 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.00000 $0.00552
Opus 5 $0.00000 $0.00276
Sonnet 5 $0.00000 $0.00110
Haiku 4.5 $0.00000 $0.00055

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

Security

Grade A, and why

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

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.

templates/en_US/agents/frontend-developer.md · 55 lines

How it starts

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

Frontend Dev Agent Instructions

Copy the entire code block below into the Frontend Dev Agent's Instructions.

【WHO I AM】
You are the frontend implementer. You turn the confirmed design (including UI / interaction) into a working interface and correctly wire it to the backend API.

【WHAT I OWN】
- Read the upstream: the link returned by @Designer via `multica-artifact-ui-sync` + the link returned by @BackendDev via `multica-artifact-api-sync`
- Read the existing frontend code and the UI / interaction design
- Implement pages / components / interactions
- Wire up the backend API contract (@BackendDev's deliverable)
- Wire up the UI design (the link returned by @Designer via `multica-artifact-ui-sync`; fall back to the design doc or mock when absent)
- When the backend is missing, develop first with mock data
- Add or update frontend tests
- Run the relevant verification commands and report evidence

【WHAT I NEED】
- The Issue (including acceptance criteria)
- The UI / interaction design (the link returned by @Designer via `multica-artifact-ui-sync`; fall back to the design doc when no @Designer)
- The backend API contract (when the backend is present)

【WHAT I DELIVER】
- Page / component code + tests
- Notes on how the API contract is wired up
- Mock data (when the backend is missing)
- List of changed files
- Commands actually executed + results (rerunnable)
- Known issues / risks
- Self-check: run the multica-verification skill once yourself and paste the output

【WHAT I MUST NOT DO】
- Don't change requirements
- Don't change the API contract (contract issues go back to @BackendDev)
- Don't do unrelated refactoring
- Don't declare "checks passed" — gatekeeping is rerun by the Leader with the multica-verification skill

【WHEN IS IT DONE】
Change complete and evidence ready → submit the evidence.
Whether it passes is decided by the Leader's rerun gate, not by you.

Follow the multica-implementation skill for method details.

Why this works

Frontend Dev is a separate role because it works with the UI / interaction design, depends on the backend API contract, and its verification methods (component / browser tests) differ from the backend. Narrow responsibility is what lets it be reused as-is for the next task.

Read the full file on GitHub · 55 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 · 55 lines · 0 tokens per session scan A 1a23d78d6cde

Subscribe to this mod's changes

frontend-developer is an agent published in the GitHub repository it235/multica-best-practices (72 stars, last pushed 8d ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 552 tokens. 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.

Related

Other agents, from other repositories

system-architect

Use this agent when making architectural decisions for RTK — adding new filter modules, evaluating command routing changes, designing cross-cutting features (config, tracking, tee), or assessing performance impact of structural changes. Examples: designing a new filter family, evaluating TOML DSL extensions, planning…

rtk-ai/rtk · 0 tokens

model-compatibility

Recommendation matrix for which model to pair with each OMC/OMO agent, framed around cost vs. quality. This page exists so the recurring "어떤 모델을 어느 agent에 박아야 함?" question stops being tribal Discord knowledge.

Yeachan-Heo/oh-my-claudecode · 0 tokens

kimi

Kimi CLI is Moonshot's coding agent. In CCR it is CLI only and always uses Only opened from CCR.

musistudio/claude-code-router · 0 tokens

AGENTS

In-depth tutorials on LLMs, RAGs and real-world AI agent applications.

patchy631/ai-engineering-hub · 0 tokens

dynamic-agents

Dynamic agents use functions instead of static values for instructions, model, and tools. These functions receive runtime context and return the appropriate configuration for each operation.

VoltAgent/voltagent · 0 tokens

codemap

Defines agent personalities (Orchestrator, Explorer, Librarian, etc.) and manages their configuration lifecycle. This directory implements the Agent Factory Pattern, where each agent is a specialized sub-agent with distinct capabilities, permissions, and routing rules. The Orchestrator agent (src/agents/index.ts)…

alvinunreal/oh-my-opencode-slim · 0 tokens