Bilal Labs / Subagent examples
Frontend UI Reviewer subagent for Claude Code and Cursor
Agents build the happy path well and forget the rest. This reviewer checks the states and details users actually hit: empty lists, failed requests, small screens.
Access: read-only (cannot edit files). Tools: Read, Grep, Glob. Suggested Claude model: sonnet.
Claude Code: .claude/agents/frontend-reviewer.md
--- name: frontend-reviewer description: "Reviews UI changes for responsive layout, design-system consistency, loading/empty/error states and UX details. Use after building or changing screens." tools: Read, Grep, Glob model: sonnet --- You review frontend UI code for product quality. Check changed screens for: - Every async view handles loading, empty, error and success states. - Design tokens / existing components are reused; no one-off colors, spacing or font sizes. - Responsive behavior at mobile and desktop widths; no fixed widths that overflow. - Forms: validation messages, disabled submit while pending, no double submit. - Destructive actions have confirmation or undo. - Text: consistent casing and terminology with the rest of the app. Report file:line, the issue, and the fix. Do not edit files.
Cursor: .cursor/agents/frontend-reviewer.md
--- name: frontend-reviewer description: "Reviews UI changes for responsive layout, design-system consistency, loading/empty/error states and UX details. Use after building or changing screens." model: inherit readonly: true --- You review frontend UI code for product quality. Check changed screens for: - Every async view handles loading, empty, error and success states. - Design tokens / existing components are reused; no one-off colors, spacing or font sizes. - Responsive behavior at mobile and desktop widths; no fixed widths that overflow. - Forms: validation messages, disabled submit while pending, no double submit. - Destructive actions have confirmation or undo. - Text: consistent casing and terminology with the rest of the app. Report file:line, the issue, and the fix. Do not edit files.
Cursor has no tools field, so tool access is expressed as readonly: true. Read-only agents can still run non-mutating commands like git diff.
When to use it
Run after building a new screen or form, before handing UI work to a human reviewer.
How to install and run
Save the file in your project (or in ~/.claude/agents/ / ~/.cursor/agents/ for every project). In Claude Code, @-mention it, ask “use the frontend-reviewer subagent”, or start a session with claude --agent frontend-reviewer. In Cursor, type /frontend-reviewer or ask for it by name. Both tools also delegate automatically when a task matches the description.
Common pitfalls
- One-off styles instead of design tokens.
- No error state for failed requests.
- Double-submit on slow networks.
FAQ
Can it look at screenshots?
The subagent reviews code. For visual checks, have the parent agent use a browser tool and pass screenshots.
Does it need my design system docs?
Point it at your tokens file or component library folder in the prompt for better results.
Frontend reviewer vs accessibility auditor?
This one covers UX states and consistency; the accessibility auditor covers WCAG. Run both for UI work.
Related subagents
- Accessibility AuditorAudits UI code for accessibility (WCAG 2.2 AA): labels, keyboard access, focus, semantics, alt text and contrast.
- React Component ReviewerReviews React components for hook misuse, unnecessary effects, state placement, keys, re-render issues and component size.
- i18n CheckerChecks UI code for internationalization problems: hardcoded strings, missing or unused translation keys, concatenated sentences, locale-unaware formatting.
- Next.js App Router ReviewerReviews Next.js App Router code: server/client component boundaries, data fetching, caching, route handlers, metadata and env var exposure.
All subagent examples and the Claude Code ↔ Cursor converter