Nextjs agent first

Skill S3YED/appie-kit/skills/design/nextjs-agent-first

Next.js 16.3+ agent-first features: AGENTS.md, first-party Skills, agent-browser React introspection, actionable errors. Use when building Next.js apps with AI coding agents.From its SKILL.md

Install

npx -y skills add S3YED/appie-kit --skill nextjs-agent-first

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

6 stars6 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.8 KB, 589 tokens by cl100k_base, as published. Nobody here has run it

Next.js Agent-First Features

Next.js 16.3+ is the first framework designed explicitly for AI-agent-driven development.

Key Features

AGENTS.md (auto-generated docs)

next dev auto-writes version-matched docs pointers into AGENTS.md
Agents read actual docs instead of guessing from training data
Opt-out via agentRules: false in next.config.ts

First-Party Skills (npx-installable)

Install via npx skills add vercel/next.js:

Skill	Purpose
`next-dev-loop`	Full dev feedback loop: drive browser, read console, inspect React tree, follow network requests
`next-cache-components-adoption`	Incremental or direct adoption of Cache Components (`"use cache"`)
`next-cache-components-optimizer`	Optimize routes for instant navigation by growing the static shell

Agent Browser React Introspection

agent-browser v0.27+ can run React DevTools commands from CLI:

# Launch with React DevTools
agent-browser --enable react-devtools

# Inspect component tree
agent-browser react tree
agent-browser react inspect <fiber-id>
agent-browser react renders start
agent-browser react suspense --only-dynamic --json

Actionable Errors (Instant Insights)

Error overlay shows labeled fixes (Stream / Cache / Block) with a "Copy prompt" button that copies a paste-ready agent prompt.

Streamlined MCP Server

Two new tools: get_compilation_issues and compile_route — check compilation without full next build.

Turbopack Improvements (16.3)

~90% less memory (21.5GB → 2GB for vercel.com)
~2.3x faster cached builds
Experimental Rust React Compiler (20-50% faster)
import.meta.glob API support
~15% faster dev cold start

Usage

When building or debugging Next.js projects with an AI agent:

Enable AGENTS.md: Ensure next dev runs in the project so docs are auto-generated
Use next-dev-loop skill: Load it when you need browser-based verification
Run agent-browser with React: agent-browser --enable react-devtools for component inspection
Copy actionable error prompts: Use the error overlay's "Copy prompt" button for instant fixes
Cache Components optimizer: Run after building to optimize routes for instant nav

Pitfalls

16.3 is on @preview npm tag — stable expected in weeks
AGENTS.md is auto-overwritten each next dev run — don't manually edit it
agent-browser React DevTools requires --enable react-devtools flag

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.