first-fluke 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