@jakkrichm/create-nexus-devflow 2.0.20 → 2.0.22

package/template/.claude/skills/package-json-generator/scripts/generate.js

@@ -1,120 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-
-const targetDir = process.argv[2] || process.cwd();
-const packageJsonPath = path.join(targetDir, 'package.json');
-const tasksJsonPath = path.join(targetDir, '.vscode', 'tasks.json');
-
-// Initialize or read package.json
-let pkg = {};
-if (fs.existsSync(packageJsonPath)) {
-  try {
-    pkg = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
-  } catch (e) {
-    console.error(JSON.stringify({ status: 'error', message: 'Invalid package.json format' }));
-    process.exit(1);
-  }
-} else {
-  pkg = {
-    name: path.basename(path.resolve(targetDir)),
-    version: '1.0.0',
-    description: '',
-    main: 'index.js',
-    scripts: {}
-  };
-}
-
-if (!pkg.scripts) pkg.scripts = {};
-
-let scriptsAdded = 0;
-
-// Read .vscode/tasks.json if exists
-if (fs.existsSync(tasksJsonPath)) {
-  try {
-    const tasksContent = fs.readFileSync(tasksJsonPath, 'utf8');
-    // Basic JSON parse (Note: tasks.json often contains comments, so we use a simple regex to strip them)
-    const jsonWithoutComments = tasksContent.replace(/\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/gm, '$1');
-    const tasksData = JSON.parse(jsonWithoutComments);
-
-    const tasks = tasksData.tasks || [];
-    const inputs = tasksData.inputs || [];
-
-    // Helper to find input description
-    const getInputDefaultOrDesc = (inputId) => {
-      const input = inputs.find(i => i.id === inputId);
-      return input ? (input.description || input.default || inputId) : inputId;
-    };
-
-    tasks.forEach(task => {
-      if (task.command) {
-        // Convert label to script name (e.g. "🚀 [Docker] Start Project" -> "docker:start")
-        let scriptName = task.label
-          .replace(/[\u{1F300}-\u{1F9FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}]/gu, '') // Remove emojis
-          .replace(/\[(.*?)\]/g, '$1') // Remove brackets
-          .trim()
-          .toLowerCase()
-          .replace(/[^a-z0-9]+/g, '-'); // Replace spaces/specials with dash
-        
-        // Shorten some common prefixes
-        scriptName = scriptName.replace(/^docker-/, 'docker:');
-        scriptName = scriptName.replace(/^db-/, 'db:');
-
-        let cmd = task.command;
-
-        // Append args if any
-        if (task.args && Array.isArray(task.args)) {
-          cmd += ' ' + task.args.join(' ');
-        }
-
-        // Convert ${input:xxx} to PowerShell Read-Host
-        const inputMatches = cmd.match(/\$\{input:([a-zA-Z0-9_-]+)\}/g);
-        if (inputMatches) {
-          let psCommands = [];
-          let currentCmd = cmd;
-          
-          inputMatches.forEach(match => {
-            const inputId = match.replace('${input:', '').replace('}', '');
-            const prompt = getInputDefaultOrDesc(inputId);
-            psCommands.push(`$${inputId} = Read-Host '${prompt}'`);
-            currentCmd = currentCmd.replace(match, `$${inputId}`);
-          });
-
-          // Wrap the command in PowerShell
-          cmd = `powershell -Command "${psCommands.join('; ')}; if (${inputMatches.map(m => '$'+m.replace('${input:','').replace('}','')).join(' -and ')}) { ${currentCmd} }"`;
-        }
-
-        // Don't overwrite existing scripts unless necessary, or just add if not exist
-        if (!pkg.scripts[scriptName]) {
-          pkg.scripts[scriptName] = cmd;
-          scriptsAdded++;
-        }
-      }
-    });
-
-  } catch (e) {
-    // Ignore parse errors for tasks.json
-  }
-}
-
-// Ensure default scripts exist
-const defaultScripts = {
-  "start": "node index.js"
-};
-
-for (const [key, value] of Object.entries(defaultScripts)) {
-  if (!pkg.scripts[key] && Object.keys(pkg.scripts).length === 0) {
-    pkg.scripts[key] = value;
-    scriptsAdded++;
-  }
-}
-
-fs.writeFileSync(packageJsonPath, JSON.stringify(pkg, null, 2) + '\n');
-
-console.log(JSON.stringify({
-  status: 'success',
-  message: 'Generated package.json successfully',
-  data: {
-    scriptsAdded,
-    path: packageJsonPath
-  }
-}));

package/template/.claude/skills/package-json-generator/scripts/run.sh

@@ -1,19 +0,0 @@
-#!/bin/bash
-set -e
-
-# Wrapper script to run the Node.js generator
-
-SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
-TARGET_DIR="${1:-$(pwd)}"
-
-# Convert WSL paths to Windows paths for Node.js if running in WSL
-if grep -q microsoft /proc/version 2>/dev/null; then
-    # wslpath is available in WSL to convert paths
-    if command -v wslpath >/dev/null 2>&1; then
-        TARGET_DIR_WIN=$(wslpath -w "$TARGET_DIR" 2>/dev/null || echo "$TARGET_DIR")
-        node "$SCRIPT_DIR/generate.js" "$TARGET_DIR_WIN"
-        exit $?
-    fi
-fi
-
-node "$SCRIPT_DIR/generate.js" "$TARGET_DIR"

package/template/.claude/skills/parallel-agents/SKILL.md

@@ -1,144 +0,0 @@
----
-name: parallel-agents
-description: "[Devflow] Multi-agent orchestration patterns for the current DevFlow 2.0 specialist set. Use when multiple independent analyses or implementation perspectives can run in parallel."
-allowed-tools: Read, Glob, Grep
----
-
-# Parallel Agents For DevFlow 2.0
-
-## Overview
-
-Use parallel specialist work only when:
-
-- the task spans multiple independent domains
-- findings can be gathered without one agent blocking another
-- the lifecycle owner is already clear from the current stage or approved plan
-
-Do not use orchestration for simple single-domain tasks.
-
-## Preconditions
-
-Before parallelizing:
-
-1. read the current stage artifact or approved plan
-2. identify the lifecycle owner
-3. split the work into independent questions
-
-If those conditions are missing, return first to `00-discover`, `20-spec`, or `30-plan`.
-
-## Basic Invocation Patterns
-
-### Single Specialist
-
-```text
-Use the security-auditor agent to review authentication
-```
-
-### Sequential Chain
-
-```text
-First, use the codebase-explorer agent to discover project structure.
-Then, use the backend-specialist to review API endpoints.
-Finally, use the test-engineer to identify test gaps.
-```
-
-### Parallel Review
-
-```text
-Use security-auditor, code-reviewer, and performance-engineer in parallel.
-Then synthesize the findings into one recommendation set.
-```
-
-## Recommended Patterns
-
-### Pattern 1: Comprehensive Analysis
-
-```text
-Agents: codebase-explorer -> [domain-agents] -> synthesis
-
-1. codebase-explorer: map the relevant code paths
-2. security-auditor: security posture
-3. backend-specialist: API and server quality
-4. frontend-specialist: UI and interaction quality
-5. test-engineer: test coverage and missing evidence
-6. synthesize all findings
-```
-
-### Pattern 2: Feature Review
-
-```text
-Agents: affected-domain-agents -> test-engineer
-
-1. identify the affected domains
-2. invoke relevant domain agents
-3. test-engineer checks missing validation or coverage
-4. synthesize recommendations
-```
-
-### Pattern 3: Verification Sweep
-
-```text
-Agents: code-reviewer + security-auditor + performance-engineer
-
-1. code-reviewer: correctness and maintainability risks
-2. security-auditor: security and logic risks
-3. performance-engineer: bottlenecks and regression risk
-4. synthesize priority-ranked findings
-```
-
-## Current Agent Set
-
-| Agent | Expertise | Trigger Phrases |
-|---|---|---|
-| `orchestrator` | coordination | "multi-domain", "comprehensive", "orchestrate" |
-| `requirements-engineer` | requirements | "scope", "acceptance criteria", "requirements" |
-| `prp-core-planner` | planning | "plan", "breakdown", "milestones" |
-| `codebase-explorer` | discovery | "explore", "map", "structure" |
-| `backend-specialist` | backend | "API", "server", "Node.js", "Express" |
-| `frontend-specialist` | frontend | "React", "UI", "components", "Next.js" |
-| `database-architect` | database | "schema", "Prisma", "migrations" |
-| `test-engineer` | testing | "tests", "coverage", "TDD" |
-| `code-reviewer` | quality | "review", "risk", "correctness" |
-| `security-auditor` | security | "security", "auth", "vulnerabilities" |
-| `penetration-tester` | offensive security | "pentest", "exploit" |
-| `performance-engineer` | performance | "slow", "optimize", "profiling" |
-| `devops-engineer` | release/devops | "deploy", "CI/CD", "infrastructure" |
-| `prp-core-debugger` | debugging | "bug", "error", "not working" |
-| `documentation-maintainer` | docs | "write docs", "update docs", "README" |
-| `prp-core-git-committer` | commit/release packaging | "commit", "release packaging" |
-| `prp-core-git-pr-maker` | PR preparation | "pull request", "PR summary" |
-| `ob-loop-engineer` | maintenance | "overnight maintenance", "maintenance loop", "cleanup loop" |
-
-## Synthesis Protocol
-
-After all agents complete, synthesize:
-
-```markdown
-## Orchestration Synthesis
-
-### Task Summary
-[What was accomplished]
-
-### Agent Contributions
-| Agent | Finding |
-|-------|---------|
-| security-auditor | Found X |
-| backend-specialist | Identified Y |
-
-### Consolidated Recommendations
-1. **Critical**: [Issue from Agent A]
-2. **Important**: [Issue from Agent B]
-3. **Nice-to-have**: [Enhancement from Agent C]
-
-### Action Items
-- [ ] Fix critical issue
-- [ ] Refactor affected area
-- [ ] Add missing validation evidence
-```
-
-## Guardrails
-
-- do not invent agent names that are not present in the repo
-- do not require a legacy `PLAN.md` file in project root
-- do not parallelize dependent tasks that need sequential ownership
-- do not let orchestration replace the lifecycle owner

package/template/.claude/skills/performance-optimization/SKILL.md

@@ -1,299 +0,0 @@
----
-name: performance-optimization
-description: "[Devflow] Optimizes application performance. Use when performance requirements exist, when you suspect performance regressions, or when Core Web Vitals or load times need improvement. Use when profiling reveals bottlenecks that need fixing."
----
-
-# Performance Optimization
-
-## Overview
-
-Measure before optimizing. Performance work without measurement is guessing — and guessing leads to premature optimization that adds complexity without improving what matters. Profile first, identify the actual bottleneck, fix it, measure again. Optimize only what measurements prove matters.
-
-## When to Use
-
-- Performance requirements exist in the spec (load time budgets, response time SLAs)
-- Users or monitoring report slow behavior
-- Core Web Vitals scores are below thresholds
-- You suspect a change introduced a regression
-- Building features that handle large datasets or high traffic
-
-**When NOT to use:** Don't optimize before you have evidence of a problem. Premature optimization adds complexity that costs more than the performance it gains.
-
-## Core Web Vitals Targets
-
-| Metric | Good | Needs Improvement | Poor |
-|--------|------|-------------------|------|
-| **LCP** (Largest Contentful Paint) | ≤ 2.5s | ≤ 4.0s | > 4.0s |
-| **INP** (Interaction to Next Paint) | ≤ 200ms | ≤ 500ms | > 500ms |
-| **CLS** (Cumulative Layout Shift) | ≤ 0.1 | ≤ 0.25 | > 0.25 |
-
-## The Optimization Workflow
-
-```
-1. MEASURE  → Establish baseline with real data
-2. IDENTIFY → Find the actual bottleneck (not assumed)
-3. FIX      → Address the specific bottleneck
-4. VERIFY   → Measure again, confirm improvement
-5. GUARD    → Add monitoring or tests to prevent regression
-```
-
-### Step 1: Measure
-
-**Frontend:**
-```bash
-# Lighthouse in Chrome DevTools (or CI)
-# Chrome DevTools → Performance tab → Record
-# Chrome DevTools MCP → Performance trace
-
-# Web Vitals library in code
-import { onLCP, onINP, onCLS } from 'web-vitals';
-
-onLCP(console.log);
-onINP(console.log);
-onCLS(console.log);
-```
-
-**Backend:**
-```bash
-# Response time logging
-# Application Performance Monitoring (APM)
-# Database query logging with timing
-
-# Simple timing
-console.time('db-query');
-const result = await db.query(...);
-console.timeEnd('db-query');
-```
-
-### Where to Start Measuring
-
-Use the symptom to decide what to measure first:
-
-```
-What is slow?
-├── First page load
-│   ├── Large bundle? --> Measure bundle size, check code splitting
-│   ├── Slow server response? --> Measure TTFB, check API/database
-│   └── Render-blocking resources? --> Check network waterfall for CSS/JS blocking
-├── Interaction feels sluggish
-│   ├── UI freezes on click? --> Profile main thread, look for long tasks (>50ms)
-│   ├── Form input lag? --> Check re-renders, controlled component overhead
-│   └── Animation jank? --> Check layout thrashing, forced reflows
-├── Page after navigation
-│   ├── Data loading? --> Measure API response times, check for waterfalls
-│   └── Client rendering? --> Profile component render time, check for N+1 fetches
-└── Backend / API
-    ├── Single endpoint slow? --> Profile database queries, check indexes
-    ├── All endpoints slow? --> Check connection pool, memory, CPU
-    └── Intermittent slowness? --> Check for lock contention, GC pauses, external deps
-```
-
-### Step 2: Identify the Bottleneck
-
-Common bottlenecks by category:
-
-**Frontend:**
-
-| Symptom | Likely Cause | Investigation |
-|---------|-------------|---------------|
-| Slow LCP | Large images, render-blocking resources, slow server | Check network waterfall, image sizes |
-| High CLS | Images without dimensions, late-loading content, font shifts | Check layout shift attribution |
-| Poor INP | Heavy JavaScript on main thread, large DOM updates | Check long tasks in Performance trace |
-| Slow initial load | Large bundle, many network requests | Check bundle size, code splitting |
-
-**Backend:**
-
-| Symptom | Likely Cause | Investigation |
-|---------|-------------|---------------|
-| Slow API responses | N+1 queries, missing indexes, unoptimized queries | Check database query log |
-| Memory growth | Leaked references, unbounded caches, large payloads | Heap snapshot analysis |
-| CPU spikes | Synchronous heavy computation, regex backtracking | CPU profiling |
-| High latency | Missing caching, redundant computation, network hops | Trace requests through the stack |
-
-### Step 3: Fix Common Anti-Patterns
-
-#### N+1 Queries (Backend)
-
-```typescript
-// BAD: N+1 — one query per task for the owner
-const tasks = await db.tasks.findMany();
-for (const task of tasks) {
-  task.owner = await db.users.findUnique({ where: { id: task.ownerId } });
-}
-
-// GOOD: Single query with join/include
-const tasks = await db.tasks.findMany({
-  include: { owner: true },
-});
-```
-
-#### Unbounded Data Fetching
-
-```typescript
-// BAD: Fetching all records
-const allTasks = await db.tasks.findMany();
-
-// GOOD: Paginated with limits
-const tasks = await db.tasks.findMany({
-  take: 20,
-  skip: (page - 1) * 20,
-  orderBy: { createdAt: 'desc' },
-});
-```
-
-#### Missing Image Optimization (Frontend)
-
-```html
-<!-- BAD: No dimensions, no lazy loading, no responsive sizes -->
-<img src="/hero.jpg" />
-
-<!-- GOOD: Responsive, lazy-loaded, properly sized -->
-<img
-  src="/hero.jpg"
-  srcset="/hero-400.webp 400w, /hero-800.webp 800w, /hero-1200.webp 1200w"
-  sizes="(max-width: 768px) 100vw, 50vw"
-  width="1200"
-  height="600"
-  loading="lazy"
-  alt="Hero image description"
-/>
-```
-
-#### Unnecessary Re-renders (React)
-
-```tsx
-// BAD: Creates new object on every render, causing children to re-render
-function TaskList() {
-  return <TaskFilters options={{ sortBy: 'date', order: 'desc' }} />;
-}
-
-// GOOD: Stable reference
-const DEFAULT_OPTIONS = { sortBy: 'date', order: 'desc' } as const;
-function TaskList() {
-  return <TaskFilters options={DEFAULT_OPTIONS} />;
-}
-
-// Use React.memo for expensive components
-const TaskItem = React.memo(function TaskItem({ task }: Props) {
-  return <div>{/* expensive render */}</div>;
-});
-
-// Use useMemo for expensive computations
-function TaskStats({ tasks }: Props) {
-  const stats = useMemo(() => calculateStats(tasks), [tasks]);
-  return <div>{stats.completed} / {stats.total}</div>;
-}
-```
-
-#### Large Bundle Size
-
-```typescript
-// BAD: Importing entire library
-import { format } from 'date-fns';
-
-// GOOD: Tree-shakable import (if the library supports it)
-import { format } from 'date-fns/format';
-
-// GOOD: Dynamic import for heavy, rarely-used features
-const ChartLibrary = lazy(() => import('./ChartLibrary'));
-```
-
-#### Missing Caching (Backend)
-
-```typescript
-// Cache frequently-read, rarely-changed data
-const CACHE_TTL = 5 * 60 * 1000; // 5 minutes
-let cachedConfig: AppConfig | null = null;
-let cacheExpiry = 0;
-
-async function getAppConfig(): Promise<AppConfig> {
-  if (cachedConfig && Date.now() < cacheExpiry) {
-    return cachedConfig;
-  }
-  cachedConfig = await db.config.findFirst();
-  cacheExpiry = Date.now() + CACHE_TTL;
-  return cachedConfig;
-}
-
-// HTTP caching headers for static assets
-app.use('/static', express.static('public', {
-  maxAge: '1y',           // Cache for 1 year
-  immutable: true,        // Never revalidate (use content hashing in filenames)
-}));
-
-// Cache-Control for API responses
-res.set('Cache-Control', 'public, max-age=300'); // 5 minutes
-```
-
-## Bundle & Runtime Analysis
-
-### Bundle Analysis
-- **Large Dependencies**: Check top of bundle for oversized libraries.
-- **Duplicate Code**: Look for duplicate modules in multiple chunks.
-- **Tree Shaking**: Ensure unused exports are being removed.
-- **Code Splitting**: Move heavy routes out of the main bundle.
-
-### Runtime Profiling (DevTools Performance)
-- **Long Tasks (>50ms)**: Identify UI blocking operations.
-- **Layout Thrashing**: Find forced reflows during animations/scrolling.
-- **Memory Leaks**: Look for growing heap size or detached DOM nodes.
-
-## Performance Budget
-
-Set budgets and enforce them:
-
-```
-JavaScript bundle: < 200KB gzipped (initial load)
-CSS: < 50KB gzipped
-Images: < 200KB per image (above the fold)
-Fonts: < 100KB total
-API response time: < 200ms (p95)
-Time to Interactive: < 3.5s on 4G
-Lighthouse Performance score: ≥ 90
-```
-
-**Enforce in CI:**
-```bash
-# Bundle size check
-npx bundlesize --config bundlesize.config.json
-
-# Lighthouse CI
-npx lhci autorun
-```
-
-## See Also
-
-For detailed performance checklists, optimization commands, and anti-pattern reference, see `performance-checklist.md`.
-
-
-## Common Rationalizations
-
-| Rationalization | Reality |
-|---|---|
-| "We'll optimize later" | Performance debt compounds. Fix obvious anti-patterns now, defer micro-optimizations. |
-| "It's fast on my machine" | Your machine isn't the user's. Profile on representative hardware and networks. |
-| "This optimization is obvious" | If you didn't measure, you don't know. Profile first. |
-| "Users won't notice 100ms" | Research shows 100ms delays impact conversion rates. Users notice more than you think. |
-| "The framework handles performance" | Frameworks prevent some issues but can't fix N+1 queries or oversized bundles. |
-
-## Red Flags
-
-- Optimization without profiling data to justify it
-- N+1 query patterns in data fetching
-- List endpoints without pagination
-- Images without dimensions, lazy loading, or responsive sizes
-- Bundle size growing without review
-- No performance monitoring in production
-- `React.memo` and `useMemo` everywhere (overusing is as bad as underusing)
-
-## Verification
-
-After any performance-related change:
-
-- [ ] Before and after measurements exist (specific numbers)
-- [ ] The specific bottleneck is identified and addressed
-- [ ] Core Web Vitals are within "Good" thresholds
-- [ ] Bundle size hasn't increased significantly
-- [ ] No N+1 queries in new data fetching code
-- [ ] Performance budget passes in CI (if configured)
-- [ ] Existing tests still pass (optimization didn't break behavior)

package/template/.claude/skills/performance-optimization/performance-checklist.md

@@ -1,113 +0,0 @@
-# Performance Checklist
-
-Quick reference checklist for web application performance. Use alongside the `performance-optimization` skill.
-
-## Table of Contents
-
-- [Core Web Vitals Targets](#core-web-vitals-targets)
-- [Frontend Checklist](#frontend-checklist)
-- [Backend Checklist](#backend-checklist)
-- [Measurement Commands](#measurement-commands)
-- [Common Anti-Patterns](#common-anti-patterns)
-
-## Core Web Vitals Targets
-
-| Metric | Good | Needs Work | Poor |
-|--------|------|------------|------|
-| LCP (Largest Contentful Paint) | ≤ 2.5s | ≤ 4.0s | > 4.0s |
-| INP (Interaction to Next Paint) | ≤ 200ms | ≤ 500ms | > 500ms |
-| CLS (Cumulative Layout Shift) | ≤ 0.1 | ≤ 0.25 | > 0.25 |
-
-## Frontend Checklist
-
-### Images
-- [ ] Images use modern formats (WebP, AVIF)
-- [ ] Images are responsively sized (`srcset` and `sizes`)
-- [ ] Images have explicit `width` and `height` attributes (prevents CLS)
-- [ ] Below-the-fold images use `loading="lazy"`
-- [ ] Hero/LCP images use `fetchpriority="high"` and no lazy loading
-
-### JavaScript
-- [ ] Bundle size under 200KB gzipped (initial load)
-- [ ] Code splitting with dynamic `import()` for routes and heavy features
-- [ ] Tree shaking enabled (no dead code in production bundle)
-- [ ] No blocking JavaScript in `<head>` (use `defer` or `async`)
-- [ ] Heavy computation offloaded to Web Workers (if applicable)
-- [ ] `React.memo()` on expensive components that re-render with same props
-- [ ] `useMemo()` / `useCallback()` only where profiling shows benefit
-
-### CSS
-- [ ] Critical CSS inlined or preloaded
-- [ ] No render-blocking CSS for non-critical styles
-- [ ] No CSS-in-JS runtime cost in production (use extraction)
-- [ ] Font display strategy set (`font-display: swap` or `optional`)
-- [ ] System font stack considered before custom fonts
-
-### Network
-- [ ] Static assets cached with long `max-age` + content hashing
-- [ ] API responses cached where appropriate (`Cache-Control`)
-- [ ] HTTP/2 or HTTP/3 enabled
-- [ ] Resources preconnected (`<link rel="preconnect">`) for known origins
-- [ ] No unnecessary redirects
-
-### Rendering
-- [ ] No layout thrashing (forced synchronous layouts)
-- [ ] Animations use `transform` and `opacity` (GPU-accelerated)
-- [ ] Long lists use virtualization (e.g., `react-window`)
-- [ ] No unnecessary full-page re-renders
-
-## Backend Checklist
-
-### Database
-- [ ] No N+1 query patterns (use eager loading / joins)
-- [ ] Queries have appropriate indexes
-- [ ] List endpoints paginated (never `SELECT * FROM table`)
-- [ ] Connection pooling configured
-- [ ] Slow query logging enabled
-
-### API
-- [ ] Response times < 200ms (p95)
-- [ ] No synchronous heavy computation in request handlers
-- [ ] Bulk operations instead of loops of individual calls
-- [ ] Response compression (gzip/brotli)
-- [ ] Appropriate caching (in-memory, Redis, CDN)
-
-### Infrastructure
-- [ ] CDN for static assets
-- [ ] Server located close to users (or edge deployment)
-- [ ] Horizontal scaling configured (if needed)
-- [ ] Health check endpoint for load balancer
-
-## Measurement Commands
-
-```bash
-# Lighthouse CLI
-npx lighthouse https://localhost:3000 --output json --output-path ./report.json
-
-# Bundle analysis
-npx webpack-bundle-analyzer stats.json
-# or for Vite:
-npx vite-bundle-visualizer
-
-# Check bundle size
-npx bundlesize
-
-# Web Vitals in code
-import { onLCP, onINP, onCLS } from 'web-vitals';
-onLCP(console.log);
-onINP(console.log);
-onCLS(console.log);
-```
-
-## Common Anti-Patterns
-
-| Anti-Pattern | Impact | Fix |
-|---|---|---|
-| N+1 queries | Linear DB load growth | Use joins, includes, or batch loading |
-| Unbounded queries | Memory exhaustion, timeouts | Always paginate, add LIMIT |
-| Missing indexes | Slow reads as data grows | Add indexes for filtered/sorted columns |
-| Layout thrashing | Jank, dropped frames | Batch DOM reads, then batch writes |
-| Unoptimized images | Slow LCP, wasted bandwidth | Use WebP, responsive sizes, lazy load |
-| Large bundles | Slow Time to Interactive | Code split, tree shake, audit deps |
-| Blocking main thread | Poor INP, unresponsive UI | Use Web Workers, defer work |
-| Memory leaks | Growing memory, eventual crash | Clean up listeners, intervals, refs |