“alexvisualmakers”
600552c858
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>
68 lines
1.8 KiB
Markdown
68 lines
1.8 KiB
Markdown
# 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
|