{ "schema": "aiblocks-page/1", "id": "agency-engineering-frontend-developer", "type": "agent", "name": "Frontend developer", "summary": "Plan a React, Vue, Angular or Svelte front end. Get the component list, accessibility and speed plan, and tests to run before launch.", "headline": "Frontend developer", "subhead": "Describe the screen or app, your framework and your design. The agent plans components, state, mobile layout, accessibility and page speed. You get an implementation plan with code sketches and a list of checks to run in your browser.", "job": { "id": "build-websites", "name": "Build websites and web apps" }, "level": "intermediate", "thinking": "high", "tested": true, "updated": "2026-11-03", "first_published": "2026-10-26", "inputs": [ { "type": "question", "required": true, "label": "Question", "what": "the problem, decision or piece of work you want help with, and what a good outcome looks like" }, { "type": "codebase", "required": false, "label": "Codebase", "what": "a project's code, in a folder or repo the AI can open" } ], "outputs": [ { "type": "plan", "required": true, "label": "Plan", "what": "a dated plan: what to do, in what order, with a decision rule for each step" }, { "type": "audit_report", "required": true, "label": "Audit report", "what": "findings with evidence, severity, missing inputs and next actions" } ], "you_give": [ "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)" ], "you_get": [ "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" ], "use_when": [ "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." ], "skip_when": [ "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." ], "output_sample": { "input": [ "What the screen or app does and who uses it", "Your framework and version", "Your design as a link, screenshot or description", "Your package.json or existing components (optional)" ], "prerequisites": [ "A code project where you can build and run the sketches", "An AI that takes a pasted profile, such as Claude, ChatGPT or Gemini" ], "output": [ { "name": "Brief and assumptions", "contains": "The screen, framework and design as understood, with assumptions and MISSING items." }, { "name": "Components and state", "contains": "Each component with its props, the state it uses and where it is reused." }, { "name": "Responsive plan", "contains": "How the layout changes by screen size, starting from the phone." }, { "name": "Accessibility plan", "contains": "Labels, roles and keyboard behavior for each component, and how to test them." }, { "name": "Performance plan", "contains": "Code splitting, images and caching steps, and what to measure." }, { "name": "Code sketches", "contains": "Short drafts of the main components, marked as not run." }, { "name": "Tests and checks", "contains": "Numbered tests and checks, each with what a pass looks like." }, { "name": "Open questions", "contains": "What is unknown and what each answer changes." } ] }, "output_shape": "BRIEF AND ASSUMPTIONS\n Screen | Framework | Design \n Assumed: | MISSING: \n\nCOMPONENTS AND STATE\n | | | \n\nRESPONSIVE PLAN\n | | \n\nACCESSIBILITY PLAN\n | | | \n\nPERFORMANCE PLAN\n | | \n\nCODE SKETCHES (drafts, not run)\n | \n\nTESTS AND CHECKS\n | | \n\nOPEN QUESTIONS\n | ", "how_to_use": [ "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." ], "checks": [ "The result addresses your actual task and cites the evidence used.", "Examples, role-play experience and targets are kept separate from verified results.", "Claims of tests, memory, tool access or completed actions match what actually happened." ], "next": [ { "name": "Interface builder", "url": "https://useaiblocks.com/skills/interface-builder", "why": "Interface builder" }, { "name": "Website speed tuner", "url": "https://useaiblocks.com/skills/website-speed-tuner", "why": "Website speed tuner" } ], "source": { "by": "Michael Sitarzewski and Agency Agents contributors", "repo": "msitarzewski/agency-agents", "url": "https://github.com/msitarzewski/agency-agents/blob/b37b5bb33b78f2c1d6567d98e25ca818e3259219/engineering/engineering-frontend-developer.md", "licence": "MIT", "original_name": "Frontend Developer", "commit": "b37b5bb33b78f2c1d6567d98e25ca818e3259219" }, "credits": [ { "title": "Frontend Developer", "by": "Michael Sitarzewski and Agency Agents contributors", "url": "https://github.com/msitarzewski/agency-agents/blob/b37b5bb33b78f2c1d6567d98e25ca818e3259219/engineering/engineering-frontend-developer.md", "used": "Original agent profile, preserved in references/source-agent.md; AI Blocks adds setup and review instructions." } ], "files": [ "LICENSE", "references/source-agent.md", "SETUP.md", "source.json" ], "links": { "page": "https://useaiblocks.com/agents/agency-engineering-frontend-developer", "markdown": "https://useaiblocks.com/agents/agency-engineering-frontend-developer.md", "json": "https://useaiblocks.com/agents/agency-engineering-frontend-developer.json", "instructions": "https://useaiblocks.com/skills/agency-engineering-frontend-developer/SKILL.md", "download": "https://useaiblocks.com/skills/agency-engineering-frontend-developer.zip", "api_item": "https://useaiblocks.com/api/v1/items/agency-engineering-frontend-developer", "api_document": "https://useaiblocks.com/api/v1/documents/agent/agency-engineering-frontend-developer", "mcp": "https://useaiblocks.com/mcp" } }