# Frontend Agent

> Frontend specialist for React, Next.js, TypeScript, and modern UI development

- Skill: `first-fluke/frontend-agent-2` (Agent Skill, multi-file: 9 files)
- Install (CLI): `npx skillmds@latest add first-fluke/frontend-agent-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/first-fluke/frontend-agent-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: first-fluke (https://skillmd.com/u/first-fluke)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/first-fluke/frontend-agent-2

---


# 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
1. TypeScript strict mode; explicit interfaces for all props
2. Tailwind CSS only (no inline styles, no CSS modules)
3. Semantic HTML with ARIA labels; keyboard navigation required
4. Loading, error, and empty states for every async operation
5. Responsive at 320px, 768px, 1024px, 1440px
6. 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`