AI CodeOps

Frontend Engineer agent

The Frontend Engineer agent implements the client side of a feature from the design, covering components, state and accessibility. It runs in Feature SDLC.

The Frontend Engineer agent implements client-side changes. It works from an approved design and describes the change, with notes on components, state and accessibility.

Where it runs

WorkflowStep
Feature SDLCFrontend

In Feature SDLC it is step five of eight. It runs after the Backend Engineer, so it can build against the API that step described, and before the E2E Tester, who plans tests of the whole user flow.

Inputs

  • The session task.
  • A read-only snapshot of relevant files from the project's repository: pages, components, styles and client state.
  • The earlier steps: requirements, delivery plan, the Architect's technical design and the backend changes. In an eight-step workflow these reach it in shortened form.
  • Tools from connected MCP servers, if your workspace policy allows them.

Outputs

A description of the client-side change, per file:

  • Components to add or change, and the existing ones to reuse.
  • State: where data is loaded, cached and updated, and what happens while it loads or fails.
  • Accessibility: labels, focus and keyboard use.

After all steps finish, the session's code pass writes the files and produces the diff that is tested, reviewed and approved.

Example run

Illustrative example, not a recorded session. For filter presets, the Frontend Engineer plans a "Save view" button next to the existing filter bar and a presets menu that reuses the project's dropdown component. Selecting a preset updates the URL, so the browser's back button works. Saving the 21st preset shows the limit error the backend returns, in the form, not as a toast that disappears. The menu is reachable by keyboard and announces how many presets exist. The E2E Tester then writes scenarios for save, apply and delete.

Limits

  • It cannot see the rendered UI. Visual problems show up only when someone looks at the result.
  • It describes code; the code pass writes it. Review the diff, not only the description.
  • In long Feature SDLC runs, the code pass may not read every detail of later steps. Check the diff covers the frontend plan.
  • Accessibility notes are a plan, not an audit.

Frequently asked questions

How is this different from the UI Designer agent?

The UI Designer plans an interface in UI Implementation. The Frontend Engineer implements client-side code in Feature SDLC, after the backend work is described.

Can it see my running app?

No. It reads your source files. It cannot open a browser or take screenshots.