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.
npx agentmods add skills/iwritec0de/app-dev/nextjs-expertnpx skills add iwritec0de/app-dev --skill nextjs-expertgit clone --depth 1 https://github.com/iwritec0de/app-devWhat 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.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00111 | $0.01848 |
| Opus 5 | $0.00056 | $0.00924 |
| Sonnet 5 | $0.00022 | $0.00370 |
| Haiku 4.5 | $0.00011 | $0.00185 |
Grade A, and why
nextjs-expert 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 2d ago.
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.
| **SSR** | `fetch(url)` with no cache options, or `{ cache: 'no-store' }` | User-specific data, real-time content | How it starts
The opening of the file, as written. The whole thing — 152 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Next.js Expert Skill
You are a Next.js expert specializing in the App Router architecture introduced in Next.js 13 and matured in 14+.
Critical Rules
- Always use App Router — never suggest or scaffold Pages Router patterns in new code; App Router is the current model
- Server Components by default — components are Server Components unless they explicitly need client-side state, effects, or browser APIs
- Add
'use client'only when required — event handlers,useState,useEffect,useRef, browser-only APIs, or third-party client libraries - Fetch data in Server Components — avoid
useEffect+fetchfor initial data; let async Server Components do it - Use
next/imagefor all images — never use bare<img>tags;next/imagehandles lazy loading, sizing, and format optimization - Use
next/fontfor typography — load fonts vianext/font/googleornext/font/localto eliminate layout shift and self-host automatically - Follow file-based routing conventions — use the correct special filenames (
page.tsx,layout.tsx,loading.tsx,error.tsx,not-found.tsx) - Never expose server secrets to the client —
NEXT_PUBLIC_prefix makes an env var available in the browser bundle; everything else is server-only
App Router File Conventions
Each route segment is a directory. Special files control rendering and behavior:
| File | Purpose |
|---|---|
page.tsx |
Renders the route UI; makes a segment publicly accessible |
layout.tsx |
Wraps children; persists across navigations within the segment |
loading.tsx |
Instant loading UI shown while the segment streams in (wraps in <Suspense>) |
error.tsx |
Error boundary for the segment; must be a Client Component |
not-found.tsx |
UI for notFound() calls or unmatched routes within the segment |
route.ts |
Route Handler (REST API endpoint); exports HTTP method functions |
middleware.ts |
Runs before requests match a route; lives at the project root |
template.tsx |
Like layout but re-mounts on every navigation (rare use case) |
What ships with it
3 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- 2d ago First seen · 152 lines · 111 tokens per session scan A b679abb08819
nextjs-expert is a skill published in the GitHub repository iwritec0de/app-dev (3 stars, last pushed 4mo ago), licensed MIT. It adds 111 tokens to every session and 1,848 once invoked, about $0.0006 per session on Opus 5. A static security scan graded it A with 1 finding (makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
dummy-dataset
Generate realistic dummy datasets for testing with customizable columns, constraints, and output formats (CSV, JSON, SQL, Python script). Use when creating test data, building mock datasets, or generating sample data for development and demos.
outcome-roadmap
Transform an output-focused roadmap into an outcome-focused one that communicates strategic intent. Rewrites initiatives as outcome statements reflecting user and business impacts. Use when shifting to outcome roadmaps, making a roadmap more strategic, or rewriting feature lists as outcomes.
release-notes
Generate user-facing release notes from tickets, PRDs, or changelogs. Creates clear, engaging summaries organized by category (new features, improvements, fixes). Use when writing release notes, creating changelogs, announcing product updates, or summarizing what shipped.
retro
Facilitate a structured sprint retrospective — what went well, what didn't, and prioritized action items with owners and deadlines. Use when running a retrospective, reflecting on a sprint, creating action items from team feedback, or learning how to run effective retros.
shipping-artifacts
The durable documentation set that makes an AI-built (vibe-coded) app reviewable before shipping. A small core every app needs — architecture, user/permission flows, permissions, variables/secrets, and a test-coverage map — plus conditional docs added only when they apply: emails, scheduled work, SEO, and embedded…
stakeholder-map
Build a stakeholder map using a power/interest grid, identify communication strategies per quadrant, and generate a communication plan. Use when managing stakeholders, preparing for a launch, aligning cross-functional teams, or planning stakeholder engagement.