Agent templateEngineering

Frontend Developer AI Agent (Template)

Name: Fleet
Author: Fleet

A frontend developer agent builds and maintains user-facing UI: components, pages, state management, and the integration layer that connects the UI to backend APIs. It reads design specs or tickets and produces working code that matches your component library and accessibility baseline.

Role-specific prompts matter here because frontend codebases are highly opinionated. Whether your team uses React Server Components or a client-side SPA, Tailwind or CSS modules, Zustand or Redux, a generic agent will ignore those choices. A tuned frontend agent writes code that fits your stack on the first attempt.

What this agent owns

Implement UI components and pages from design specs or ticket descriptions
Wire components to API endpoints and manage loading, error, and empty states
Write component tests using the project's chosen testing library
Keep bundle size and render performance within project-defined thresholds
Follow the project's component naming, file structure, and styling conventions

Recommended model: Claude Sonnet

Component implementation and state wiring are structured tasks where Sonnet's speed and cost efficiency outperform the marginal gains from Opus.

Example tasks

Build a data table component with sorting, filtering, and pagination
Implement an onboarding multi-step form with validation
Add skeleton loading states to an existing list view
Refactor class components to functional components with hooks

# create an agent from this template, then start it

$ fleet agent create --name frontend-developer--vendor claude-code --template <template-name>

$ fleet agent start frontend-developer

Find the exact template name with fleet template list.

Related agent roles

UI Designer →Accessibility Auditor →Full-Stack Developer →

Run this agent in your fleet

One binary. Five minutes. See every agent, coordinate every handoff, and keep a full audit trail of what your fleet did.

See how it works Install Fleet