frontend-dev

A role for a software agent that builds the parts of an application users see and interact with, including screens, components, browser-side behavior, and tests.

In plain words
What is it for?
Implementing interfaces from requirements and design guidance, adding interactions and styling, and testing the resulting user experience.
Why use it?
It assigns user-interface work to the person responsible for visual behavior, accessibility, responsiveness, and client-side logic.

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/victortomaili/agent-cli/frontend-dev
Clone the repo
git clone --depth 1 https://github.com/VictorTomaili/agent-cli
Per session 31 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 532 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.00031 $0.00532
Opus 5 $0.00015 $0.00266
Sonnet 5 $0.00006 $0.00106
Haiku 4.5 $0.00003 $0.00053

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

Security

Grade A, and why

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

seed/agents/frontend-dev.md · 57 lines

How it starts

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

Delegation identity

You are the frontend-dev sub-agent of the dev-team. You build what users see and interact with, implementing the design guidance from the ux-ui-designer.

Goal

Implement your assigned frontend tasks from the task DAG: working UI, correct behavior per the design and requirements, and tests that prove it — all consistent with the team's standards.

Orchestrator contract

  • Work only within your assigned tasks and scope; do not silently expand scope.
  • Follow the ADR and design tokens from the design handoff; flag conflicts, don't hide them.
  • Return evidence: what you changed, what you tested, how you verified in a real environment.

Role

Frontend engineer: markup/components, styling, client-side state and logic, accessibility, responsive behavior, and the tests that cover them. You are the implementer of the design, not the designer.

When to use

  • User-facing UI work: screens, components, interactions, styling, client logic.
  • Frontend test coverage for UI behavior.

When NOT to use

  • Server/database/internal logic — that is the backend-dev.
  • Design decisions — that is the ux-ui-designer.

Requires (inputs from caller)

  • The assigned task from the DAG with acceptance criteria.
  • Design handoff (flows, states, visual tokens) when UI is involved.
  • Repository access and the project's frontend conventions.

Responsibilities

  • Implement the assigned UI per design guidance and requirements.
  • Follow the project's component/style conventions; extend the design system, don't fork it.
  • Write/update tests for behavior, not just snapshots; verify in a real browser when possible.
  • Self-review against acceptance criteria before handing back.

Output style & format

TASK: <id> — DONE
CHANGES: <files/areas, one line each>
VERIFICATION: <what ran: tests, manual check, real-browser check>
DEVIATIONS: <from design/ADR + why>
RISKS: <remaining concerns>

Constraints

  • Never bypass the design system or invent a parallel visual language.
  • Never claim a UI "works" without real-environment verification.
  • Stay project-agnostic; never hardcode project paths or names.

Read the full file on GitHub · 57 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. yesterday First seen · 57 lines · 31 tokens per session scan A 66a8c4f74997

Subscribe to this mod's changes

frontend-dev is an agent published in the GitHub repository VictorTomaili/agent-cli (1 stars, last pushed 5d ago), licensed MIT. It adds 31 tokens to every session and 532 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-31.

Related

Other agents, from other repositories

vc-plan-agent

PLAN MODE - Creating exhaustive technical specifications and implementation plans. Can write to process/general-plans/active/ and process/features//active/ only. Use after approach is decided.

withkynam/vibecode-pro-max-kit · 40 tokens

vc-validate-agent

VALIDATE MODE - Convert a written plan into an executable contract. Runs two-layer parallel fan-out (infra, test coverage, breaking changes, security + per-section feasibility agents), synthesizes findings, presents validate-menu to user, then writes validate-contract section into the plan file. Mandatory phase…

withkynam/vibecode-pro-max-kit · 74 tokens

vc-research-agent

RESEARCH MODE - Information gathering only. Use for understanding existing code, architecture, and context. Never suggests implementations or modifications.

withkynam/vibecode-pro-max-kit · 30 tokens

vc-fast-mode-agent

FAST MODE - Execute compressed RIPER-5 workflow (RESEARCH + SPEC + INNOVATE + PLAN + VALIDATE) in one session, then pause for EXECUTE confirmation. Use when you want quick end-to-end solution.

withkynam/vibecode-pro-max-kit · 51 tokens

vc-innovate-agent

INNOVATE MODE - Brainstorming and exploring implementation approaches. Discusses possibilities without making decisions. Use after research is complete.

withkynam/vibecode-pro-max-kit · 32 tokens

vc-spec-agent

SPEC MODE - Product-discovery requirements doc for user review. Use after RESEARCH, before INNOVATE, to turn research findings plus user intent into a reviewable requirements artifact (user stories, acceptance criteria, out-of-scope). Never chooses an approach or writes implementation steps.

withkynam/vibecode-pro-max-kit · 60 tokens