Feature deep-dive
Claude Code Subagents: Build a UI Reviewer
Subagents are little specialists with their own context, tools, and system prompt. Here is the full setup, one screenshot at a time.
An illustrated walkthrough of 14 steps - about 5 minutes to read. Every step links back to the exact moment in the source video.
TL;DR
Type /agents, create a new agent in project scope, and let Claude draft it from a description like 'expert UI/UX engineer who reviews React components in a browser using Playwright'. Trim its tools - a reviewer does not need edit rights - pick a model and color, and Claude writes the markdown file. Wire it into a custom slash command so every component gets reviewed automatically. Then still read the code yourself.
About the source video
This page follows the subagents lesson of Net Ninja's Claude Code course and rebuilds its UI-reviewer agent step by step.
Screenshots are frames from the video, credited to the creator; the write-up is our own. Steps verified against the video in September 2026.
Create the subagent
One command, five screens, and your specialist exists.
- 1
Open the agents menu with /agents
Inside a Claude Code session, type /agents - the hint below the prompt describes it as managing agent configurations. This menu is where every subagent gets created, inspected, and edited.
One slash command opens the whole subagent workspace.Watch at 2:30 - 2
Start from an empty roster
On first run the menu shows no agents found plus a Create new agent option, and lists the built-ins that are always available: general-purpose, statusline-setup, output-style-setup. Your subagents will appear alongside them.
Built-ins are global; your agents join the same list.Watch at 2:34 - 3
Let Claude draft the agent
Two routes: generate with Claude (recommended) or write the markdown manually. Drafting is the better start - you describe the job, Claude produces the file, and you edit whatever you disagree with.
Generate first, edit after - the file is just markdown.Watch at 2:58 - 4
Describe the job precisely
The prompt used in the video: 'Expert UI & UX engineer who reviews the UI & UX of React components in a browser using Playwright, takes screenshots, then offers feedback on how to improve the component in terms of visual design, user experience and accessibility.' Role, tool, and output - one sentence.
Role + tool + output style, all in one description sentence.Watch at 3:10 - 5
Trim the toolset deliberately
Claude asks which tools the agent may use: all tools, read-only, edit, execution, MCP. For a reviewer, unselect edit tools - you want feedback, not rewrites. It is the difference between an advisor and an agent that quietly refactors your component.
A reviewer with edit rights is a reviewer you cannot trust.Watch at 3:38 - 6
Confirm and meet your agent
The confirmation lands: ui-ux-reviewer created as a project agent on Sonnet, listed next to the built-ins. From here on, Claude Code can delegate to it whenever a task matches its description.
Created, scoped, and ready for delegation.Watch at 4:18
Wire it into your workflow
The agent file is markdown - and a custom command triggers it.
- 7
Read the markdown it generated
The agent is a single file: .claude/agents/ui-ux-reviewer.md with a name, description, tools list (including the Playwright MCP tools you asked for), and a full system prompt. Edit anything - it is just a prompt in a file.
Frontmatter up top, the long system prompt below.Watch at 5:22 - 8
Add it to a custom slash command
The course's /ui-component command creates components from a name and a summary. The lesson appends the crucial instruction: after building, invoke the ui-ux-reviewer agent, implement its feedback, and loop until it is happy.
The command's task section now ends with the review loop.Watch at 5:38 - 9
Restart the session
Claude Code picks up new and edited commands on session start, so exit and relaunch. The /agents transcript confirms the created agent before you move on.
New agents and commands load on the next session.Watch at 6:10 - 10
Run your custom command
Type /ui-component Modal - make a clean, modern-looking modal with a semi-transparent backdrop. The todo list Claude produces ends with 'Review with ui-ux-reviewer agent' - the delegation is already scheduled.
A name plus a summary is all the command needs.Watch at 6:18
The automated review loop
Build, review in a browser, fix, repeat - then still read the diff.
- 11
Watch the plan include the review
The todo list: create the Modal with backdrop, add variants and sizes, a test file, a preview page entry, run tests - and review with the ui-ux-reviewer agent as the final item. The main thread is setting up the delegation.
Seven todos, and the last one belongs to the specialist.Watch at 6:50 - 12
The reviewer asks for a browser
The ui-ux-reviewer agent takes over: it reads the component and asks to run npm run dev so it can open the page. Approvals still flow through you - delegation does not bypass permissions.
The subagent works, but you still hold the approval gate.Watch at 7:14 - 13
Read the verdict
The reviewer returns a structured result: screenshots taken, viewport resized to check small screens, then the verdict - 5 out of 5 stars, production ready, with every file it created listed. The main thread applies any requested fixes.
Screenshots, accessibility notes, and a starred verdict.Watch at 9:04 - 14
See it in the browser yourself
The proof: the generated modal opens with a translucent backdrop, closes on Escape, the X, or an outside click, and comes in primary, secondary, success, warning, and danger variants in three sizes. Try it yourself - then read the code.
Keyboard, backdrop-click, and button closes - all working.Watch at 9:22