Hire an AI frontend developer

Everything it can hand back

Your task sets the actual outputs. The specialist picks the methods that cover them.

• A component list with props, state and data flow
• A mobile-first layout plan
• An accessibility plan: labels, focus and keyboard use
• A speed plan: code splitting, images and caching
• Code sketches for the main components, marked as drafts you have not run
• A list of tests and checks to run
• Open questions

How it does the job well

• Never claim a speed gain, a Lighthouse score or a compliance result you did not measure. Percent gains in the profile are examples.
• Never say code runs. You cannot run the user's project.
• Give drafts and proposals. Get the user's go-ahead before anything that sends, publishes, spends money or changes a live system.
• Keep sample numbers and templates labelled as examples. Never state an invented figure as a result.
• Read the existing code, its conventions and its tests before changing anything. Match the project's patterns.
• Make the smallest change that fully solves the request. Keep unrelated refactors out.
• Reproduce a bug before fixing it, and add a test that fails without the fix.

Mistakes it avoids

• Claiming code works without running it or its tests.
• Inventing APIs, package versions or settings instead of checking the installed ones.
• Changing behaviour outside the request, such as reformatting whole files or renaming public interfaces.

What a good result looks like

An example, not your task: You have a design or wireframe and need a component plan before you code.

• Brief and assumptions. The screen, framework and design as understood, with assumptions and MISSING items.
• Components and state. Each component with its props, the state it uses and where it is reused.
• Responsive plan. How the layout changes by screen size, starting from the phone.
• Accessibility plan. Labels, roles and keyboard behavior for each component, and how to test them.
• Performance plan. Code splitting, images and caching steps, and what to measure.
• Code sketches. Short drafts of the main components, marked as not run.

How the work is checked

• The changed files build, and the relevant tests and linters pass. The commands and results are shown.
• Each change is explained in one line with its reason, and risky areas are named.
• Any check that could not run is reported as NOT_RUN with what it needs.
• States which checks passed, failed or could not run, and names missing inputs.

These checks have not been run against a model yet. Your AI uses them to check its own work.

Capabilities

• Collect the brief. It confirms the screen, framework and version, design and data. It asks once for anything missing, then marks it MISSING.
• Plan components and state. It lists reusable components with types, props and how state and data flow between them.
• Plan layout. It plans a mobile-first layout and how it grows to larger screens.
• Plan accessibility. It plans semantic HTML, labels, focus order and keyboard use, aiming at WCAG 2.1 AA.
• Plan speed. It plans code splitting, lazy loading, image handling and caching, and what to measure with Core Web Vitals.
• List tests. It lists unit, integration, accessibility and cross-browser checks, and what is still unknown.

How the role works

1. Checks your task, context and available tools.
2. Picks the methods needed and prepares a work plan.
3. Carries out supported tasks, with each method's limits and review gates.
4. Checks the real deliverables and corrects supported faults.
5. Hands back files, evidence and unresolved gaps.

Your specialist's working setup

Download the base specialist without a task form or account. README.md and SETUP.md explain how to use the folder. SOUL.md defines its scope. INTAKE.md asks missing questions inside your AI. PLAYBOOK.md, SKILLS.md, BEST_PRACTICES.md, CHECKS.md and HANDOFF.md guide the work and its checked deliverables.

Complete associated skills, supporting files and licences are included. Choose only the methods needed for the actual task. Keep context, working files and accepted feedback in your AI project.

Use this specialist through MCP or the API

Call prepare_specialist with role_id engineering-frontend-developer only. No task is required to load it. Your AI asks what job you need done, what you want back and which relevant context it can use.

For task-led hiring, call find_specialist, explain the suggested specialists and let the user accept or change the team.

Complete ZIP: Download base specialist. API: GET /api/v1/specialists/engineering-frontend-developer/pack. The host AI supplies its own model, tools and execution; a pack does not connect accounts or run a task.

Inputs and helpful context

The specialist starts from the task brief. Only active methods require their inputs.

For the primary method, when used

• What the screen or app does and who uses it
• Your framework and version, such as React 18, or 'no preference'
• Your design: a Figma link, a screenshot or a plain description
• The data it shows, such as an API endpoint and its fields (optional)
• Your existing code or package.json (optional)
• Targets such as devices, browsers and page speed goals (optional)

Helpful context (optional)

• A Lighthouse report for the current page.
• Your design file or screenshots of each state, such as empty, loading and error.

Tools and access

• Claude, ChatGPT or Gemini: A pasted brief and profile is enough for a plan and code sketches.
• Claude Code: It can read your repo, so components and state fit what you already have.

Functions and deliverables

• Frontend developer: Plan a React, Vue, Angular or Svelte front end. Get the component list, accessibility and speed plan, and tests to run before launch.
  • A component list with props, state and data flow
  • A mobile-first layout plan
  • An accessibility plan: labels, focus and keyboard use
  • A speed plan: code splitting, images and caching
  • Code sketches for the main components, marked as drafts you have not run
  • A list of tests and checks to run
  • Open questions
  Source: Michael Sitarzewski and Agency Agents contributors.
• React 19 source migration helper: Share React source files. Get migration guidance for APIs, refs, context and component props.
  • A list of every removed or changed API found, file by file
  • Before and after code for each one
  • A note on where propTypes were kept
  • A list of spots your AI could not decide
  Source: GitHub Copilot community.
• UI component developer: Add buttons, forms, tables and sidebars to your project with the UI component adder. It sets up each part and shows you how to use it.
  • Components added to your project
  • Correct setup and imports
  • Usage examples
  • Styling that follows the rules
  Source: sickn33.
• React batching regression fixer: Find and fix React 18 automatic batching bugs in class components, such as state read after await, without overusing flushSync.
  • A list of async methods, each sorted as a state-read bug, a refactor or a flushSync case
  • Rewritten code for each method
  • A reason for every flushSync, or a note that none is needed
  • Test changes where a test asserted a state React 18 now skips
  Source: GitHub Copilot community.
• AI project context organiser: Share your project and next task. Get a short rules file, a focused file list and a clear handoff for later sessions.
  • A ready rules file for your project
  • A list of which files to load for each task
  • Rules for when to reset or trim the session
  • A checklist for spotting drifting answers
  Source: Addy Osmani.

Tasks you can use it for

• You have a design or wireframe and need a component plan before you code.
• A page loads slowly on phones and you want to know what to split, load later or compress.
• You are adding a data table, form or dashboard that must work with a keyboard and a screen reader.
• You are choosing how to handle state, styling and tests for a new app.

Limits to check before starting

• You only need the visual design, with no code: use the UI Designer agent.
• You need server, database or API designer: use the Backend Architect agent.
• You want a quick throwaway demo: use the Software prototype designer.
• Your site runs on WordPress or Drupal themes: use the WordPress and Drupal developer.

Best way to use this role

Give it one clear outcome, the actual files and a definition of done. Keep the work in one AI project so it can reuse checked context and earlier files.

• Download the pack and add it as a skill in your AI. Or paste SKILL.md into a new chat, then paste references/source-agent.md after it.
• Write your brief: what the screen does, your framework and your design. Paste your package.json and any components it should match.
• Say 'Plan this front end. Do not guess my framework version.' Your AI asks once for what is missing.
• Read the component list and the state plan first. Change them if they do not match your design.
• Build the sketches in your project. The AI cannot run your code, so run the tests and checks yourself.
• Run Lighthouse and a keyboard-only check, then paste the results back and ask for fixes. For deeper speed work, take the Lighthouse report to the Page speed fixer.

Read it as data

Read the complete role setup as JSON. Connect your AI to the AI Blocks MCP library and read aiblocks://roles/engineering-frontend-developer for its role instructions and pinned sources.

This is a prepared AI role. No task has run. Your AI carries out authorized work using its available tools and reports the actual deliverables and checks.