# Agent Skills Sample Project

> A starter template demonstrating Claude Code Agent Skills — based on the 7-skill system by Alex Sprogis.

## Tech Stack

| Layer | Tech |
|-------|------|
| Frontend | Next.js 16 · TypeScript · Tailwind CSS |
| Backend | Supabase (auth, database, storage) |
| Deploy | Vercel / self-hosted (Caddy) |
| AI Agent | Claude Code (Opus 4.6) |

## Skills System

This project ships with 7 Agent Skills that simulate a professional dev team:

| Skill | Role | Invoke |
|-------|------|--------|
| `/requirements` | Product Manager — clarifies specs, edge cases | User only |
| `/architecture` | Tech Lead — designs systems, picks patterns | User only |
| `/frontend` | Frontend Dev — builds UI/UX (sub-agent) | User only |
| `/backend` | Backend Dev — APIs, database, auth (sub-agent) | User only |
| `/qa` | QA Engineer — tests against acceptance criteria | User only |
| `/deploy` | DevOps — handles production deployment | User only |
| `/help` | Guide — explains workflow, answers questions | Both |

## Project Structure

```
├── CLAUDE.md                    # ← you are here
├── .claude/
│   └── skills/                  # Agent Skills (the magic)
│       ├── requirements/        # /requirements
│       ├── architecture/        # /architecture
│       ├── frontend/            # /frontend (sub-agent)
│       ├── backend/             # /backend (sub-agent)
│       ├── qa/                  # /qa (sub-agent)
│       ├── deploy/              # /deploy
│       └── help/                # /help
├── features/                    # Feature specs (PROJ-XXX.md)
├── src/                         # Next.js app
│   ├── app/                     # App router pages
│   ├── components/              # React components
│   └── lib/                     # Utilities, Supabase client
├── supabase/                    # Database migrations
└── public/                      # Static assets
```

## Conventions

- TypeScript strict mode, no `any`
- Server Components by default, `"use client"` only when needed
- Tailwind for styling, no CSS modules
- All API responses: `{ data, error, meta }`
- Feature specs go in `features/PROJ-XXX.md` before coding
- Use skills in order: requirements → architecture → frontend/backend → qa → deploy

## Commands

```bash
npm run dev          # Dev server on :3000
npm run build        # Production build
npm run lint         # ESLint + TypeScript check
npm run test         # Vitest
npm run db:migrate   # Run Supabase migrations
```