Hire an AI React frontend specialist

Everything it can hand back

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

• React and Next.js components
• Project scaffold
• Bundle size report
• Accessibility and testing notes

How it does the job well

• Use the project's React and framework versions and its routing, state and styling choices.
• Keep components small and pure. Lift state only as far as it needs to go.
• Use semantic HTML first. Every control works by keyboard and has an accessible name.
• Avoid needless re-renders and large bundles. Load heavy code only when it is needed.
• Check every view at phone and desktop widths.
• 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.

Mistakes it avoids

• Effects used for derived data that should be computed during render.
• Missing loading, empty and error states.
• Client-only code that breaks server rendering or hydration.
• 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 need a new screen built in React with Tailwind.

• Project scaffold. A new Next.js or React project with TypeScript, Tailwind, a folder layout and starter components.
• Generated component. A React component for your screen, with its types, styles and an optional test file.
• Bundle analysis. A score for your app size and a list of heavy packages that slow it down.
• React patterns. Guidance on shared components, custom hooks and when to use each pattern.
• Next.js optimization. Advice on server and client components, image loading and how to fetch data.
• Accessibility and testing. A checklist for keyboard use and screen readers, plus a plan for testing.

How the work is checked

• Type checks, tests and the production build pass.
• Accessibility checks (labels, focus, contrast) pass on changed views.
• Measured bundle or performance numbers are reported when performance was in scope.
• The changed files build, and the relevant tests and linters pass. The commands and results are shown.
• 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

• React and Next.js UI builder. Describe a screen. Get React components, a project scaffold and size checks.

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 react-frontend-specialist 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/react-frontend-specialist/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

• A plain description of the screen you want
• Your project folder, or a name for a new project
• Features such as sign-in or forms (optional)

Tools and access

• Your React project, package.json and a terminal
• Your design or screenshots and a browser
• Claude, ChatGPT or Gemini with file upload: It can read a saved diff or several changed files together, and keep the link between them.

Functions and deliverables

• React and Next.js UI builder: Describe a screen. Get React components, a project scaffold and size checks.
  • React and Next.js components
  • Project scaffold
  • Bundle size report
  • Accessibility and testing notes
  Source: Alireza Rezvani.
• React test writer: Find the parts of your React app with no tests. Get Jest test files, Playwright route tests and a list of files under your coverage target.
  • Jest test files for your components, with render and click tests
  • A list of files under your coverage target, with the branches that lack tests
  • Playwright end-to-end test files, one per route
  • A sign-in helper for pages that need a login
  • Notes on where to add your own checks
  Source: Alireza Rezvani.
• React app structure planner: Point it at a React or React Native app. Get a clear folder layout and rules for what may import what.
  • Folder layout by feature
  • Import rules between layers
  • Server state versus UI state guide
  • Steps to migrate an existing app
  Source: sickn33.
• Web accessibility checker: Check a web page or code for WCAG 2.2 accessibility problems. Get a ranked list with where each one is, and fixes if you ask.
  • A ranked list of WCAG 2.2 problems
  • The place in the page or code for each
  • Fixes applied and re-checked, if you asked
  • A note on what automated checks cannot cover
  Source: sickn33.
• Code reviewer agent: Paste a code change and get a review of bugs, security, tests and clarity. Each point has the reason and a fix, ranked blocker, suggestion or nit.
  • A summary with the main concerns and what is good
  • Blockers, each with where it is, why it matters and a fix to try
  • Suggestions and nits, ranked
  • A list of missing tests for the paths that matter
  • Questions where the intent is unclear, and next steps
  Source: Michael Sitarzewski and Agency Agents contributors.
• Page speed fixer: Share PageSpeed or Lighthouse results and project access. Get ordered fixes, risk notes and a checklist for fresh test results.
  • Ranked list of issues by risk
  • Code fixes in ordered batches
  • Re-test after each batch
  • Notes on what changed
  Source: sickn33.
• 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 need a new screen built in React with Tailwind.
• Your Next.js page loads slowly and you want to know why.
• You are starting a fresh project and want a clean base.
• You want accessibility checks built into your components.

Limits to check before starting

• You only need a simple site with pages and text: use a website builder such as Shopify or WordPress.
• You need backend-only work like databases or servers: ask a backend developer or your AI for server code.
• Your site does not use React: use a developer who knows your current setup.
• You only need one small component in a project you already have: ask your AI for it directly. You do not need the scaffold or bundle scripts.
• Plans and code sketches do not count as implemented files or passed tests.

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.

• Use an AI that can run code and read files, such as Claude with code tools. Make sure Node and Python are installed.
• Add the skill folder to your AI, or paste the skill text into the chat.
• The agent, slash command and extra skills named in the skill file are not included. Answer your AI's questions yourself and carry on with the scripts.
• Describe the screen you want. Say if you have a project folder or need a new one. Your AI will also ask first. The decision script needs five answers before it runs: the main device and network, the load-time target in milliseconds, whether the pages must rank in search, whether the whole site sits behind a sign-in, and your team size. The skill also asks about your bundle budget, design system and accessibility target, but the script does not need those.
• Let your AI build the project and the component. Run it on your computer with npm run dev.
• The scripts and packages are free. The optional sign-in feature adds NextAuth.js, and sign-in providers such as Google or GitHub need their own keys from those services.
• Ask for the bundle check. Fix the heavy packages it lists, then run the check again.
• Open your site in the Chrome browser and run Lighthouse to measure real load speed. Lighthouse needs a live page URL, so run your site first. The bundle check alone does not show load speed.
• Before you swap any package, check its real size on bundlephobia. The sizes in the skill are rough.
• After each fix, run the bundle check again and compare the Lighthouse scores before and after. Keep the change only if the score improves.

Read it as data

Read the complete role setup as JSON. Connect your AI to the AI Blocks MCP library and read aiblocks://roles/react-frontend-specialist 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.