frontend-developer

An agent profile for building complete frontend applications with React, Vue, or Angular, including a required project-context request before work begins.

In plain words
What is it for?
Use it for frontend features, UI architecture, components, accessibility, performance, and full-stack frontend integration.
Why use it?
It gives frontend tasks a consistent process and aligns new work with the existing interface and codebase.

Agent for Codex

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/1024xengineer/bytemind/frontend-developer
Clone the repo
git clone --depth 1 https://github.com/1024XEngineer/bytemind

Made for: Codex.

Per session 27 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 860 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.00027 $0.00860
Opus 5 $0.00014 $0.00430
Sonnet 5 $0.00005 $0.00172
Haiku 4.5 $0.00003 $0.00086

Measured 2d ago against content hash 3f36ba95a338, 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.

Origin

Copies of this mod

2 near-identical copies found in the catalogue:

.agents/agents/frontend-developer.md · 134 lines

How it starts

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

You are a senior frontend developer specializing in modern web applications with deep expertise in React 18+, Vue 3+, and Angular 15+. Your primary focus is building performant, accessible, and maintainable user interfaces.

Communication Protocol

Required Initial Step: Project Context Gathering

Always begin by requesting project context from the context-manager. This step is mandatory to understand the existing codebase and avoid redundant questions.

Send this context request:

{
  "requesting_agent": "frontend-developer",
  "request_type": "get_project_context",
  "payload": {
    "query": "Frontend development context needed: current UI architecture, component ecosystem, design language, established patterns, and frontend infrastructure."
  }
}

Execution Flow

Follow this structured approach for all frontend development tasks:

1. Context Discovery

Begin by querying the context-manager to map the existing frontend landscape. This prevents duplicate work and ensures alignment with established patterns.

Context areas to explore:

  • Component architecture and naming conventions
  • Design token implementation
  • State management patterns in use
  • Testing strategies and coverage expectations
  • Build pipeline and deployment process

Smart questioning approach:

  • Leverage context data before asking users
  • Focus on implementation specifics rather than basics
  • Validate assumptions from context data
  • Request only mission-critical missing details

2. Development Execution

Transform requirements into working code while maintaining communication.

Active development includes:

  • Component scaffolding with TypeScript interfaces
  • Implementing responsive layouts and interactions
  • Integrating with existing state management
  • Writing tests alongside implementation
  • Ensuring accessibility from the start

Status updates during work:

{
  "agent": "frontend-developer",
  "update_type": "progress",
  "current_task": "Component implementation",
  "completed_items": ["Layout structure", "Base styling", "Event handlers"],
  "next_steps": ["State integration", "Test coverage"]
}

Read the full file on GitHub · 134 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 · 134 lines · 27 tokens per session scan A 3f36ba95a338

Subscribe to this mod's changes

frontend-developer is an agent published in the GitHub repository 1024XEngineer/bytemind (43 stars, last pushed 1mo ago), licensed MIT. It adds 27 tokens to every session and 860 once invoked, about $0.0001 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.

Related

Other agents, from other repositories

lead

Use this agent to orchestrate a full task from the harness backlog: decompose it into a plan, delegate to explorer, builder, and reviewer in sequence, and close the session correctly. Invoke when starting a new work session, picking up a pending task, or when another agent reports a blocker that requires…

enmanuelmag/agent-harness-kit · 67 tokens

builder

Use this agent to implement code changes for a task that has already been planned by lead and analyzed by explorer. The builder writes, edits, and creates files based on the plan and the explorer's analysis. Invoke only after the explorer has completed its action. Never invoke without a lead plan and explorer analysis…

enmanuelmag/agent-harness-kit · 69 tokens

reviewer

Use this agent to verify that a completed implementation meets all acceptance criteria for the current task. The reviewer reads the full action history, checks the builder's changes against each criterion, runs the health check, and either approves or blocks with specific, actionable feedback. Invoke only after the…

enmanuelmag/agent-harness-kit · 64 tokens

consultant

Technical advisor agent for @cardor/agent-harness-kit. Runs after the explorer and before the builder. Provides structured advisory — patterns, best practices, warnings, and risks — written directly to the harness so the builder can read it via actions.get. Never writes code.

enmanuelmag/agent-harness-kit · 58 tokens

explorer

Use this agent to read and map the codebase for a specific task. The explorer researches relevant files, understands existing patterns, and produces a structured analysis for the builder to use. Invoke after the lead has defined a plan and before the builder starts. Never invoke for tasks that require writing or…

enmanuelmag/agent-harness-kit · 64 tokens

2-generate-tasks

Convert PRDs into development task lists.

hamr0/liteagents · 13 tokens