feat: Migrate from agent markdown files to Skills, Rules, and Sub-Agents

Replace the manual "read .claude/agents/*.md" workflow with native
Claude Code features for a more efficient, scalable development experience:

- **Skills** (.claude/skills/): 7 auto-discovered slash commands
  (/requirements, /architecture, /frontend, /backend, /qa, /deploy, /help)
  with forked sub-agents for heavy tasks and inline execution for interactive ones
- **Rules** (.claude/rules/): 4 modular rule files (general, frontend, backend,
  security) auto-applied based on file context
- **Sub-Agents** (.claude/agents/): Lightweight configs for frontend-dev,
  backend-dev, and qa-engineer with model, tool, and turn limit settings
- **Context Engineering**: Layered context loading, context isolation via
  forked skills, built-in context recovery after compaction, and
  "always read, never guess" rules to prevent hallucinated code references
- **CLAUDE.md**: Auto-loaded project context replacing PROJECT_CONTEXT.md
- **Feature tracking**: features/INDEX.md as persistent state across sessions
- **Production guides**: docs/production/ for error tracking, security,
  performance, database optimization, and rate limiting
- **Init Mode**: /requirements detects empty PRD and bootstraps full project
  setup (PRD + all feature specs) from a single project description

Removed: 6 monolithic agent files, PROJECT_CONTEXT.md, HOW_TO_USE_AGENTS.md,
TEMPLATE_CHANGELOG.md

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

docs/production/performance.md

@@ -0,0 +1,67 @@
+# Performance Monitoring
+
+## Lighthouse Check (after every deployment)
+
+1. Open Chrome DevTools (F12)
+2. Go to Lighthouse tab
+3. Select: Performance, Accessibility, Best Practices, SEO
+4. Generate Report for both Mobile and Desktop
+5. **Target: Score > 90** in all categories
+
+## Common Performance Issues
+
+### Unoptimized Images
+```tsx
+// Bad - unoptimized, no lazy loading
+<img src="/large-image.jpg" />
+
+// Good - Next.js Image component
+import Image from 'next/image'
+<Image src="/large-image.jpg" width={800} height={600} alt="Description" />
+```
+Next.js Image automatically: resizes, lazy-loads, serves WebP format.
+
+### Large JavaScript Bundle
+Use dynamic imports for heavy components that aren't needed on initial load:
+```tsx
+import dynamic from 'next/dynamic'
+
+const HeavyChart = dynamic(() => import('./HeavyChart'), {
+  loading: () => <p>Loading chart...</p>,
+})
+```
+
+### Missing Loading States
+Always show feedback during data fetching:
+```tsx
+// Use shadcn Skeleton component
+import { Skeleton } from "@/components/ui/skeleton"
+
+if (isLoading) return <Skeleton className="h-12 w-full" />
+```
+
+### No Caching Strategy
+Cache slow database queries with `unstable_cache`:
+```typescript
+import { unstable_cache } from 'next/cache'
+
+export const getStats = unstable_cache(
+  async () => {
+    const { data } = await supabase.from('stats').select('*')
+    return data
+  },
+  ['dashboard-stats'],
+  { revalidate: 3600 } // Refresh every hour
+)
+```
+
+## Quick Wins Checklist
+- [ ] All images use `next/image` component
+- [ ] Heavy components use dynamic imports
+- [ ] Loading states show skeleton/spinner
+- [ ] Fonts loaded with `next/font`
+- [ ] No unnecessary client-side JavaScript (`"use client"` only when needed)
+
+## Automated Monitoring
+- **Vercel Analytics** - Automatic on Pro plan, shows Core Web Vitals
+- **Vercel Speed Insights** - Real user performance data