App Dev

Full-stack Next.js development plugin for Claude Code — App Router patterns, TypeScript engineering, database integration (Supabase/PostgreSQL/MySQL/Prisma), API design, authentication, UI animations, and automated quality gates.

Quick Start

Add to your project's .claude/settings.json:

{
  "permissions": {
    "plugins": {
      "app-dev": true
    }
  }
}

Workflows

New Next.js Feature

/scaffold users --methods GET,POST,PUT,DELETE --auth
                                     # 1. Generate route handlers, validation, types
                                     #    (nextjs-typescript-engineer + api-design skills)
  ↓
Write implementation                 # 2. Hooks auto-enforce on every edit:
                                     #    pre-edit: security checks + credential scanning
                                     #    post-edit: ESLint + Prettier auto-fix
  ↓
/test users                          # 3. Generate integration tests (js-testing skill)
/audit --focus components            # 4. Scan for anti-patterns
  ↓
git push                             # 5. pre-push: semgrep + gitleaks + trivy scans
Session end                          # 6. on-stop: tsc + eslint + tests + dead code check

Database Schema Design

/schema                              # 1. Visualize current schema (ERD/table/markdown)
                                     #    (database-designer skill)
  ↓
Design changes                       # 2. postgresql-expert or mysql-expert skill guides
/migrate add-user-roles              # 3. Generate migration file (UP + DOWN)
  ↓
/db-audit                            # 4. Audit for missing indexes, N+1, design issues
                                     #    (database-optimizer skill)

Authentication Setup

/scaffold auth --methods POST        # 1. Generate auth route handlers
/auth-audit                          # 2. Full auth security audit
                                     #    (auth-patterns skill: JWT, session, OAuth, RBAC)
                                     #    Checks: secret strength, token storage, expiry,
                                     #    brute force protection, CSRF, session fixation

API Development

/scaffold products --methods GET,POST,PUT,DELETE
                                     # 1. Generate CRUD route handlers with Zod validation
/docs                                # 2. Generate OpenAPI 3.1 spec from routes
                                     #    (api-design skill)
/test products                       # 3. Generate integration tests

Performance Analysis

/perf --bundle                       # 1. Bundle size analysis + dynamic import opportunities
/perf --vitals                       # 2. Core Web Vitals readiness (LCP, FID, CLS)
                                     #    (nextjs-expert skill)

Debugging

The js-debugging skill activates automatically for JS/TS errors:

1. Read error message + stack trace completely
2. Check BOTH browser console AND server terminal
3. Systematic 4-phase process:
   Root cause → Pattern analysis → Hypothesis → Fix
4. Common Next.js patterns: hydration mismatches, stale closures,
   infinite re-renders, hook violations, build vs runtime errors
5. 3-strike rule: if 3 fixes fail, question the architecture

Quality Gate

/quality run                         # Manual: run all checks
/quality status                      # View gate status + recent results
/quality config                      # See active checks + tool availability

Automatic enforcement:

• Pre-edit: blocks security anti-patterns (eval, unsafe HTML injection, SQL injection, server secrets in client)
• Post-edit: auto-fixes ESLint + Prettier
• Pre-push: semgrep SAST + gitleaks + trivy vulnerability scan
• On-stop: tsc + eslint + tests + dead code + type coverage + circular deps

Skills (17)

Next.js / Frontend

Database / ORM

API / Auth

Quality / Testing

Commands (11)

Auditing

Code Generation

Analysis

Agents (4)

Hooks and Quality Gates

Pre-Edit (every file write)

• security-check.sh: Blocks eval, unsafe HTML injection, unvalidated redirects, SQL injection via template literals, server secrets in NEXT_PUBLIC_, wildcard CORS
• pre-edit.sh: Blocks edits to node_modules/.next/.git/lock files, blocks credential leaks

Post-Edit (after file changes)

• post-edit.sh: Auto-fixes ESLint + Prettier + Biome, tracks changed files

Pre-Push (git push)

• pre-push.sh: semgrep SAST, gitleaks secret detection, trivy vulnerability scan, SonarQube quality gate (optional)

On-Stop (session end)

• on-stop.sh: TypeScript type check, ESLint, Prettier, tests, dead code (knip), type coverage, circular deps (madge)
• security-checklist.sh: Reminder checklist for JS/TS security

MCP Servers

Configured in .mcp.json:

License

MIT