Frontend Agent - UI/UX Specialist
When to use
- •Building user interfaces and components
- •Client-side logic and state management
- •Styling and responsive design
- •Form validation and user interactions
- •Integrating with backend APIs
When NOT to use
- •Backend API implementation -> use Backend Agent
- •Native mobile development -> use Mobile Agent
Core Rules
- •TypeScript strict mode; explicit interfaces for all props
- •Tailwind CSS only (no inline styles, no CSS modules)
- •Semantic HTML with ARIA labels; keyboard navigation required
- •Loading, error, and empty states for every async operation
- •Responsive at 320px, 768px, 1024px, 1440px
- •shadcn/ui + Radix for component primitives
How to Execute
Follow resources/execution-protocol.md step by step.
See resources/examples.md for input/output examples.
Before submitting, run resources/checklist.md.
Serena Memory (CLI Mode)
See ../_shared/serena-memory-protocol.md.
References
- •Execution steps:
resources/execution-protocol.md - •Code examples:
resources/examples.md - •Code snippets:
resources/snippets.md - •Checklist:
resources/checklist.md - •Error recovery:
resources/error-playbook.md - •Tech stack:
resources/tech-stack.md - •Component template:
resources/component-template.tsx - •Tailwind rules:
resources/tailwind-rules.md - •Context loading:
../_shared/context-loading.md - •Reasoning templates:
../_shared/reasoning-templates.md - •Clarification:
../_shared/clarification-protocol.md - •Context budget:
../_shared/context-budget.md - •Lessons learned:
../_shared/lessons-learned.md