菜单
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.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Healthchecks, SSH access, model switching, and systemd debugging for the Appie fleet. Covers Appie-2 (Hetzner Hermes) and common failure modes.
Direct Google Calendar + Gmail + Contacts REST API access via Python. Use when gws CLI is broken (token cache decrypt failure) or google_api.py wrapper is unreliable. Companion to the bundled google-workspace skill.
State-of-the-art text-to-image generation with Stable Diffusion models via HuggingFace Diffusers. Use when generating images from text prompts, performing image-to-image translation, inpainting, or building custom diffusion pipelines.
Use 21st.dev Agent Elements — 25 shadcn/ui components purpose-built for AI agent UIs. Tool cards (Bash, Edit, Search, Plan, Subagent, MCP), chat, input, streaming. Open source, shadcn-registry install, no runtime lock-in.
Use v0 Design Systems 2.0, Bolt Design System Agents, or Lovable to generate production UI from a client's real design system components — not generic Tailwind. Use when building a client website where brand consistency matters.
Umbrella workflow for delegating coding work to local agent CLIs such as Claude Code, Codex, and OpenCode.
| name | nextjs-agent-first |
| description | 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. |
| author | Appie-1 |
| tags | ["nextjs","agent-first","ai","development","vercel"] |
| related_skills | ["nextjs-expert","agent-browser","nextjs-turbopack"] |
Next.js 16.3+ is the first framework designed explicitly for AI-agent-driven development.
next dev auto-writes version-matched docs pointers into AGENTS.mdagentRules: false in next.config.tsInstall 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 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
Error overlay shows labeled fixes (Stream / Cache / Block) with a "Copy prompt" button that copies a paste-ready agent prompt.
Two new tools: get_compilation_issues and compile_route — check compilation without full next build.
import.meta.glob API supportWhen building or debugging Next.js projects with an AI agent:
next dev runs in the project so docs are auto-generatedagent-browser --enable react-devtools for component inspection@preview npm tag — stable expected in weeksnext dev run — don't manually edit it--enable react-devtools flag