arbazkhan971/nextjs
skills/nextjs/SKILL.md
Next.js mastery -- App Router, Server Components, data fetching, rendering strategies, optimization.
$ install --global
skillsauthnpx skillsauth add arbazkhan971/godmode nextjsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 30, 2026, 4:47 PM6.7s1 file scanned
SKILL.md
- name:
- nextjs
- description:
- Next.js mastery -- App Router, Server Components,
Activate When
/godmode:nextjs, "Next.js", "App Router"- "Server Components", "server actions", "ISR"
- "SSG", "SSR", "next/image", "middleware"
- "nextjs page", "Next.js page", "nextjs dashboard"
Workflow
1. Project Assessment
cat next.config.* 2>/dev/null
ls app/ pages/ 2>/dev/null
grep "next" package.json 2>/dev/null
Router: App Router | Pages Router | Migration
Version: 13 | 14 | 15+
Rendering: mostly static | mostly dynamic | mixed
Auth: NextAuth | Clerk | Supabase Auth | custom
Deploy: Vercel | self-hosted | Docker
2. App Router Architecture
app/
layout.tsx # Root (metadata, providers)
loading.tsx / error.tsx / not-found.tsx
(marketing)/ # Route group (no URL segment)
page.tsx, about/, pricing/
(app)/ # Authenticated app group
layout.tsx (sidebar, nav)
dashboard/ (page, loading, error)
[workspace]/ (dynamic, [...slug]/)
api/ (route handlers)
Route groups (name) organize without URL impact.
Every segment: layout, loading, error optional.
Mark error.tsx as 'use client'.
3. Server vs Client Components
DECISION: needs browser APIs, event handlers,
useState, useEffect, useContext?
YES -> 'use client'
NO -> Server Component (default)
PATTERNS:
Push 'use client' to leaf components
Composition: client wrapper, server children
Context provider at boundary
ANTI-PATTERNS:
'use client' on page.tsx or layout.tsx
Import server-only code in client components
Non-serializable props server -> client
4. Data Fetching
- Server Component async fetch (default, deduplicated)
- Server Actions (mutations,
'use server') - Revalidation: time-based, on-demand, no-cache
- Parallel: Promise.all + Suspense boundaries
Read data -> Server Component. Mutate -> Server Action. Real-time -> Client fetch + SWR/React Query.
5. Rendering Strategy
SSG: static content. Default, generateStaticParams().
ISR: periodic refresh. revalidate: <seconds>.
SSR: fresh per request. force-dynamic, cookies().
Streaming: slow data. Suspense + loading.tsx.
Client: interactive/real-time. 'use client' + SWR.
IF can be static: SSG. IF periodic: ISR. IF per-request: SSR. IF slow parts: Streaming.
6. Optimization
- next/image:
priorityon LCP only. Alwayssizes.fillfor unknown dimensions.placeholder="blur". - next/font: self-hosted auto.
display: 'swap'. - next/script: afterInteractive (analytics, default).
7. Audit
[ ] App Router used
[ ] 'use client' pushed to leaves
[ ] No 'use client' on pages/layouts
[ ] Server Actions for mutations
[ ] Parallel data fetching
[ ] loading.tsx for data routes
[ ] error.tsx for dynamic routes
[ ] next/image with sizes prop
[ ] Metadata API (not manual <head>)
Quality Targets
- Target: <200ms Time to First Byte (TTFB)
- Target: <100KB initial JS bundle per route
- Lighthouse performance score: >90
Hard Rules
- NEVER add 'use client' to page.tsx or layout.tsx.
- NEVER useEffect+fetch when Server Component works.
- NEVER create API routes for own UI data fetching.
- EVERY data route MUST have loading.tsx.
- ALWAYS use next/image with sizes prop.
- ALWAYS use Metadata API (not manual
<head>). - NEVER heavy JS in middleware (keep < 1MB).
- ALWAYS parallel data fetching.
TSV Logging
Append .godmode/nextjs-results.tsv:
timestamp action routes server_components client_components audit notes
Keep/Discard
KEEP if: TTFB improved AND build passes
AND no 'use client' on page/layout.
DISCARD if: TTFB worsened OR build failed.
Never measure TTFB in dev mode.
Stop Conditions
STOP when ALL of:
- All routes TTFB < 200ms (p75)
- Client JS < 150KB gzipped
- All 'use client' at leaf level
- Rendering strategy matches data needs
Autonomous Operation
On failure: git reset --hard HEAD~1. Never pause.
Error Recovery
| Failure | Action | |--|--| | Build fails | Fix TS errors, missing imports | | 'use client' on page | Extract interactive to leaf | | Hydration mismatch | useEffect for client-only code | | Server Action fails | Check 'use server', serializable args | | Middleware loops | Check matcher exclusions |
Related Skills
arbazkhan971/webperf
development
VerifiedTrustedCommunity
Web performance optimization. Lighthouse, bundle analysis, code splitting, image optimization, critical CSS, fonts, service workers, CDN.
10SKILL.mdUpdated Apr 26, 2026
arbazkhan971/webhook
development
VerifiedTrustedCommunity
Webhook design, delivery, retry, HMAC verification, event subscriptions, dead letter queues.
10SKILL.mdUpdated Apr 26, 2026
arbazkhan971/vue
development
VerifiedTrustedCommunity
Vue.js mastery. Composition API, Pinia, Vue Router, Nuxt SSR/SSG, Vite optimization, testing.
10SKILL.mdUpdated Apr 26, 2026
arbazkhan971/verify
development
VerifiedTrustedCommunity
Evidence gate. Run command, read full output, confirm or deny claim. No trust, only proof.
10SKILL.mdUpdated Apr 26, 2026