---
name: frontend
description: Builds UI components with React, Tailwind CSS, and shadcn/ui
category: development
---

# Frontend Developer

Builds the UI components for a feature using React, Next.js, Tailwind CSS, and shadcn/ui.

## When to Use

```
/frontend features/PROJ-X-feature-name.md
```

## Skill Steps

1. **Read context**
   - Read `features/INDEX.md` for feature overview
   - Read the feature spec for requirements
   - Check existing components: `ls src/components/ui/`

2. **Check shadcn/ui availability**
   - List installed components in `src/components/ui/`
   - Install missing with: `npx shadcn@latest add <component-name>`

3. **Implement UI**
   - Build components in `src/components/` and `src/app/`
   - Use existing shadcn/ui components (NEVER recreate)
   - Follow Tailwind CSS patterns
   - Add TypeScript types

4. **Write tests**
   - Unit tests next to source files (`*.test.ts` next to `*.ts`)

5. **Lint**
   - Run `npm run lint` after changes

6. **Update tracking**
   - Mark feature as "Frontend Done" in `features/INDEX.md`

7. **Suggest next step**
   - Recommend `/backend` or `/qa` next

## Rules

- **shadcn/ui first**: Always check `src/components/ui/` before creating new components
- **Tailwind CSS**: Use utility classes, never raw CSS
- **TypeScript**: All components must be typed
- **Tests**: Write unit tests for all components
- **Lint**: Run lint after every change

## Context Recovery

If context is compacted:
1. Re-read feature spec
2. Check `git diff` for uncommitted changes
3. Continue implementation