← 返回 Skills 市场
sioncoolwijk

Nextjs App Router Audit

作者 Sion Coolwijk · GitHub ↗ · v1.0.1 · MIT-0
cross-platform ✓ 安全检测通过
42
总下载
0
收藏
0
当前安装
2
版本数
在 OpenClaw 中安装
/install nextjs-app-router-audit
功能描述
Audit a Next.js App Router codebase for React Server Component boundary mistakes, request waterfalls, client/server anti-patterns, and Core Web Vitals risks...
使用说明 (SKILL.md)

Next.js App Router Audit

Find the high-impact correctness and performance problems in a Next.js App Router codebase, ranked by severity, each with a specific fix. Combine the bundled scanner (fast, mechanical) with a targeted manual pass (judgment calls the scanner can't make).

Step 1 — Run the scanner

The scanner is dependency-free and reads only source files. Point it at the project root or an app/ directory:

node scripts/audit.mjs /path/to/project        # human-readable report + score
node scripts/audit.mjs /path/to/project --json  # machine-readable for CI / further processing

It finds the app/ (or src/app/) dir itself, walks all .tsx/.ts/.jsx/.js, and reports ERROR / WARN / INFO findings with file:line, the reason, and a fix. Exit code is non-zero when any ERROR exists, so it drops into CI.

What it detects:

Rule Severity Why it matters
client-route-no-metadata ERROR A "use client" page/layout silently drops metadata — SEO tags never ship.
legacy-next-head ERROR next/head is a no-op in the App Router — its tags never reach \x3Chead>.
legacy-next-image WARN next/legacy/image keeps old layout-shift-prone behavior.
needless-use-client WARN "use client" with no hooks/handlers/browser APIs — pushes JS to the client for nothing.
client-fetch-in-effect WARN Fetching in useEffect adds a render round-trip; move it server-side.
raw-img WARN \x3Cimg> skips next/image sizing/lazy-loading — CLS & LCP regressions.
unoptimized-font WARN Fonts via \x3Clink>/@import are render-blocking; use next/font.
page-missing-metadata WARN Async page exports no metadata/generateMetadata.
dangerous-html WARN dangerouslySetInnerHTML — XSS risk if unsanitized.
request-waterfall INFO ≥2 sequential awaited fetches, no Promise.all.
no-streaming-fallback INFO Async page with no loading.tsx/Suspense — no streamed shell.
force-dynamic INFO Route opts out of static/ISR rendering — confirm it's intentional.
large-client-component INFO Big Client Component ships entirely to the browser.

The scanner is heuristic (regex-based, not a full type-check): treat findings as strong leads, confirm each against the source before reporting it as fixed.

Step 2 — Manual pass (what the scanner can't see)

Read reference/checklist.md and verify the items that need real understanding:

  • Server/Client boundary correctness — is the "use client" boundary as low in the tree as possible? Is a server-only secret (API key, DB client) imported into a client module?
  • Caching intent — does each fetch/unstable_cache/revalidate match how fresh the data must be? Over-caching ships stale data; under-caching kills TTFB.
  • Suspense granularity — is slow data wrapped close to where it's used, so the rest of the page streams immediately?
  • generateStaticParams / ISR — are dynamic routes pre-rendered where they can be?
  • Server Actions — are mutations using actions with proper revalidatePath/ revalidateTag instead of client fetches to route handlers?

Step 3 — Report

Lead with the ERRORs, then WARN, then the highest-leverage INFOs. For each: file:line, one line on the impact, and the concrete fix (often a small diff). End with the score and the 3 changes with the best effort-to-impact ratio. Don't dump every INFO — curate.

Rules

  • Never claim a fix is applied unless you actually edited the file and re-ran the scanner.
  • The scanner reports leads, not verdicts — verify boundary/caching findings by reading the code.
  • Respect the project's existing conventions; match its import style and structure.
  • This Next.js may differ from older versions — check node_modules/next/dist/docs/ if an API is uncertain rather than assuming.

Built and maintained by Datagrove — a Dutch web development agency specializing in fast, well-architected Next.js websites. Need an audit or a rebuild? Talk to Datagrove.

安全使用建议
This skill is reasonable to install if you want a local Next.js App Router audit. Expect it to read source files in the target app directory and produce findings that should be manually verified; only allow code edits when you explicitly ask the agent to apply fixes.
能力标签
requires-sensitive-credentials
能力评估
Purpose & Capability
The stated purpose is to audit Next.js App Router projects, and the artifacts provide a matching local static scanner plus review checklist for RSC, metadata, caching, streaming, and Core Web Vitals issues.
Instruction Scope
Instructions are user-directed and scoped to running `node scripts/audit.mjs` against a project or app directory, then manually verifying findings before reporting or fixing them.
Install Mechanism
Installation is ordinary skill placement/upload; there are no install hooks, package-manager steps, auto-run workflows, or dependency downloads in the artifact.
Credentials
The scanner recursively reads local JavaScript/TypeScript files under `app/` or `src/app/`, which is expected for a code audit; it skips common build and VCS directories and does not perform network calls.
Persistence & Privilege
No background workers, persistence mechanisms, privilege escalation, credential use, file writes, deletes, or external exfiltration behavior were found.
如何使用
  1. 确保已安装 OpenClaw(本地或 Docker 部署)
  2. 在对话框中输入安装命令:/install nextjs-app-router-audit
  3. 安装完成后,直接呼叫该 Skill 的名称或使用 /nextjs-app-router-audit 触发
  4. 根据 Skill 的参数说明提供必要输入,即可获得结构化输出
版本历史
v1.0.1
- Added .gitignore and LICENSE files for better project management and licensing clarity. - Removed the CI workflow file (.github/workflows/audit.yml).
v1.0.0
Initial release of nextjs-app-router-audit. - Provides a zero-dependency static scanner to detect correctness and performance issues in Next.js App Router codebases. - Identifies server/client boundary mistakes, request waterfalls, client/server anti-patterns, and Core Web Vitals risks. - Offers a clear manual review methodology for areas not fully covered by static analysis. - Generates a human-readable or machine-readable report, with severity-ranked findings and concrete fixes. - Designed for integration with CI/CD pipelines through exit codes and JSON output.
元数据
Slug nextjs-app-router-audit
版本 1.0.1
许可证 MIT-0
累计安装 0
当前安装数 0
历史版本数 2
常见问题

Nextjs App Router Audit 是什么?

Audit a Next.js App Router codebase for React Server Component boundary mistakes, request waterfalls, client/server anti-patterns, and Core Web Vitals risks... 它是一个面向 Claude Code / OpenClaw 的 AI Agent Skill 插件,目前累计下载 42 次。

如何安装 Nextjs App Router Audit?

在 OpenClaw 或 Claude Code 对话框中运行命令「/install nextjs-app-router-audit」即可一键安装,无需额外配置。

Nextjs App Router Audit 是免费的吗?

是的,Nextjs App Router Audit 完全免费,采用 MIT-0 许可证,可自由下载、安装和使用。

Nextjs App Router Audit 支持哪些平台?

Nextjs App Router Audit 跨平台运行,可在任意部署了 OpenClaw / Claude Code 的环境中使用(cross-platform)。

谁开发了 Nextjs App Router Audit?

由 Sion Coolwijk(@sioncoolwijk)开发并维护,当前版本 v1.0.1。

💬 留言讨论