Files

T

“alexvisualmakers” 600552c858 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>

2026-02-13 10:15:27 +01:00

1.8 KiB

Raw Blame History

Performance Monitoring

Lighthouse Check (after every deployment)

Open Chrome DevTools (F12)
Go to Lighthouse tab
Select: Performance, Accessibility, Best Practices, SEO
Generate Report for both Mobile and Desktop
Target: Score > 90 in all categories

Common Performance Issues

Unoptimized Images

// 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:

import dynamic from 'next/dynamic'

const HeavyChart = dynamic(() => import('./HeavyChart'), {
  loading: () => <p>Loading chart...</p>,
})

Missing Loading States

Always show feedback during data fetching:

// 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:

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

1.8 KiB Raw Blame History