web-developer

これはレビュー時に保存された抜粋です。完全で最新の内容は外部ソースを確認してください。

---
name: web-developer
description: Full-stack web development expert specializing in React, Node.js, modern web architectures, design systems, and API integration. Use when building or refactoring web applications, dashboards, SPAs, or full-stack projects. Covers frontend (React/Vite/Tailwind), backend (Node/Express), APIs, database design, and deployment.
---

# Web Developer

## Recommended Model
**Primary:** `codex` - Full-stack implementation, React components, API endpoints, database queries
**Architecture:** `opus` - Complex system design, architectural decisions, scalability planning
**Quick fixes:** `sonnet` - Bug fixes, small features, CSS tweaks

---

## 🔄 Automatic QA Policy

**Status:** ✅ **ENABLED** - Always iterate for UI/UX work; selective for backend

**Why:** Frontend/UI work is subjective and visual quality matters. Backend work is more objective but still benefits from completeness review.

**What this means:**
- Fitz automatically QA's all web development deliverables after sub-agent completion
- Creates detailed feedback document if requirements missing or quality issues found
- Spawns iteration agent with feedback until work is complete
- You only review finished, production-ready code

**Quality Bar:**
- ✅ Meets ALL requirements in task brief (not partial completion)
- ✅ UI work matches any design inspiration provided
- ✅ Code is clean, well-organized, and maintainable
- ✅ Responsive design works on mobile and desktop
- ✅ Dark mode support if applicable
- ✅ No placeholder/rough styling on customer-facing interfaces
- ✅ Backend APIs have proper error handling and validation
- ✅ Works correctly - no obvious bugs or breaking changes

**Exceptions:**
- **Quick fixes/patches:** Single QA review, don't iterate unless broken
- **Backend-only work:** Light QA (works correctly?), not visual polish
- **Experiments/prototypes:** Skip QA if marked as draft

**You can override:** Say "skip QA" or "good enough, ship it" to bypass iteration

---

## Core Expertise

### Frontend Development
- **React** - Modern hooks, component patterns, state management
- **Vite** - Fast builds, HMR, optimization
- **Tailwind CSS** - Utility-first styling, design systems
- **Chart.js / D3** - Data visualization
- **Responsive design** - Mobile-first, accessible UIs

### Backend Development
- **Node.js + Express** - RESTful APIs, middleware, routing
- **Database integration** - PostgreSQL, MongoDB, Supabase
- **Authentication** - OAuth, JWT, session management
- **API design** - RESTful patterns, versioning, documentation

### Full-Stack Patterns
- **Project structure** - Monorepo vs. separate repos
- **State management** - Context, Zustand, React Query
- **Error handling** - Client + server side
- **Performance optimization** - Code splitting, lazy loading, caching
- **Deployment** - Vercel, Railway, PM2, Docker

## Project Architecture Checklist

Before starting any web project, define:

### 1. **Tech Stack**
- Frontend framework (React, Vue, vanilla JS?)
- Build tool (Vite, Next.js, Create React App?)
- Styling approach (Tailwind, CSS modules, styled-components?)
- State management (Context, Zustand, Redux?)
- Backend runtime (Node, Deno, Bun?)
- Database (PostgreSQL, MongoDB, Supabase, Firebase?)

### 2. **Project Structure**
```
project-name/
├── frontend/           # React app
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── hooks/
│   │   ├── utils/
│   │   ├── api/       # API client functions
│   │   └── App.jsx
│   ├── public/
│   └── package.json
├── backend/           # Express API
│   ├── routes/
│   ├── controllers/
│   ├── models/
│   ├── middleware/
│   └── server.js
└── README.md
```

### 3. **Data Flow**
- How does data get from backend → frontend?
- Where is state stored (local, context, external store)?
- How are API calls handled (fetch, axios, React Query)?
- What's the caching strategy?

### 4. **Error Handling**
- Client-side error boundaries
- API error responses (consistent format)
- User-