agent-skills-sample/CLAUDE.md

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

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