nextjs-senior-dev

nextjs-senior-dev is a skill for Claude Code from hackermanishackerman/claude-skills-vault. It costs 40 tokens per session (2,119 once invoked), scanned A, a copy of nextjs-senior-dev, MIT.

A guide for building production applications with Next.js 15 and 16 using the App Router, Next.js's file-based system for pages and layouts. It covers server and client components, routing, data fetching, authentication, and performance.

In plain words
What is it for?
Creating App Router projects, generating route files, deciding between server and client components, setting up middleware or authentication, auditing code, and improving bundles, images, fonts, caching, and loading speed.
Why use it?
It helps developers choose the right Next.js patterns and find issues in an existing codebase. It also gives structure for starting projects and reviewing migrations between Next.js versions.

Skill for Claude Code

Written for Claude Code: installed under .claude/.

Good fit Creating App Router projects, generating route files, deciding between server and client components, setting up middleware or authentication, auditing code, and improving bundles, images, fonts, caching, and loading speed.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/hackermanishackerman/claude-skills-vault/nextjs-senior-dev
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add hackermanishackerman/claude-skills-vault --skill nextjs-senior-dev
Clone the repo
git clone --depth 1 https://github.com/hackermanishackerman/claude-skills-vault

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for nextjs-senior-dev

README.md
[![agentmods](https://agentmods.dev/badge/skills/hackermanishackerman/claude-skills-vault/nextjs-senior-dev.svg)](https://agentmods.dev/skills/hackermanishackerman/claude-skills-vault/nextjs-senior-dev)
Your own site
<a href="https://agentmods.dev/skills/hackermanishackerman/claude-skills-vault/nextjs-senior-dev"><img src="https://agentmods.dev/badge/skills/hackermanishackerman/claude-skills-vault/nextjs-senior-dev.svg" alt="Measured on agentmods" height="20"></a>
Per session 40 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,119 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 1 finding. A grade says what 26 rules found in the file — not that it is safe.
Origin 91% copy Near-identical to another mod in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00040 $0.02119
Opus 5 $0.00020 $0.01059
Sonnet 5 $0.00008 $0.00424
Haiku 4.5 $0.00004 $0.00212

Measured 8d ago against content hash c264ae9df6f4, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-08, from the pricing page.

Security

Grade A, and why

nextjs-senior-dev scanned grade A with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 8d ago.

The scan reads SKILL.md. This mod also ships 6 executable files (assets/middleware.ts, assets/next.config.ts, assets/proxy.ts, …), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Makes network callslowCapability

Not a fault in itself. Listed so you know the mod talks to something, and to what.

ISR → fetch(url, { next: { revalidate: 60 }})
Origin

This is a copy

91% identical to nextjs-senior-dev — 525 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.

.claude/skills/nextjs-senior-dev/SKILL.md · 262 lines

How it starts

The opening of the file, as written. The whole thing — 262 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Next.js Senior Developer

Transform into Senior Next.js 15+/16 Engineer for production-ready App Router applications.

When to Use

  • Scaffolding new Next.js App Router projects
  • RSC vs Client Component decisions
  • Server Actions and data fetching patterns
  • Performance optimization (CWV, bundle, caching)
  • Middleware and authentication setup
  • Next.js 15/16 migration or audit

Version Notes

Version Key Changes
Next.js 16 middleware.tsproxy.ts, Node.js runtime only, Cache Components
Next.js 15 fetch uncached by default, React 19, Turbopack stable

Triggers

Command Purpose
/next-init Scaffold new App Router project
/next-route Generate route folder (page, layout, loading, error)
/next-audit Audit codebase for patterns, security, performance
/next-opt Optimize bundle, images, fonts, caching

Reference Files (20 Total)

Load based on task context:

Core References

Category Reference When
Routing references/app_router.md Route groups, parallel, intercepting
Components references/components.md RSC vs Client decision, patterns
Data references/data_fetching.md fetch, cache, revalidation, streaming
Security references/security.md Server Actions, auth, OWASP
Performance references/performance.md CWV, images, fonts, bundle, memory
Middleware references/middleware.md Auth, redirects, Edge vs Node

Architecture & Quality

Category Reference When
Architecture references/architecture.md File structure, feature-sliced design
Shared Components references/shared_components.md DRY patterns, composition, reusability
Code Quality references/code_quality.md Error handling, testing, accessibility

Features & Integrations

Category Reference When
SEO & Metadata references/seo_metadata.md generateMetadata, sitemap, OpenGraph
Database references/database.md Prisma, Drizzle, queries, migrations
Authentication references/authentication.md Auth.js, sessions, RBAC
Forms references/forms.md React Hook Form, Zod, file uploads
i18n references/i18n.md next-intl, routing, RTL support
Real-Time references/realtime.md SSE, WebSockets, polling, Pusher
API Design references/api_design.md REST, tRPC, webhooks, versioning

Read the full file on GitHub · 262 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 8d ago First seen · 262 lines · 40 tokens per session scan A c264ae9df6f4

Subscribe to this mod's changes

nextjs-senior-dev is a skill published in the GitHub repository hackermanishackerman/claude-skills-vault (2 stars, last pushed yesterday), licensed MIT. It adds 40 tokens to every session and 2,119 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 1 finding (makes network calls). It is 91% identical to nextjs-senior-dev, differing in 525 lines, and is treated as a copy.

Related

Other skills, from other repositories

trigger-realtime-and-frontend

Trigger.dev client/frontend surface: subscribe to runs in realtime (runs.subscribeToRun and the @trigger.dev/react-hooks hook useRealtimeRun), consume metadata and AI/text streams in React (useRealtimeStream), trigger tasks from the browser (useTaskTrigger, useRealtimeTaskTrigger), and mint scoped frontend credentials…

triggerdotdev/trigger.dev · 148 tokens

shipwright-pipeline

Autonomous app builder that converts plain-English descriptions into fully built, tested applications. Use when the user wants to build a new app, scaffold a project, generate a full-stack application, or create an app from a description. Trigger with "build me an app", "create a new app", "shipwright build"…

jeremylongshore/tons-of-skills-marketplace · 80 tokens

frontend-code-review

Trigger when the user requests a review of frontend files (e.g., .tsx, .ts, .js). Support both pending-change reviews and focused file reviews while applying the checklist rules.

sangrokjung/claude-forge · 42 tokens

frontend-patterns

A collection of frontend development patterns for React and Next.js, including component composition, shared state, and performance practices.

loulanyue/awesome-claude-notes · 41 tokens

coding-standards

A set of general coding standards and practical patterns for TypeScript, JavaScript, React, and Node.js. It covers readable naming, simple designs, avoiding repetition, and delaying unnecessary features.

loulanyue/awesome-claude-notes · 41 tokens

panel-app-react-vite-creator

Create or update an engineering-style NextClaw Panel component with pnpm, Vite, React, TypeScript, and Tailwind CSS, then build it into a static .panel directory inside a schema v2 package or an explicitly loose workspace Panel. Use for modern, reusable, complex, Agent-powered, typed Panel interfaces.

Peiiii/nextclaw · 73 tokens