Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+21 more

    Nextjs App Router Audit

    2

    Deep audit toolkit for Next.js App Router to fix performance waterfalls, SEO errors, and client boundary leaks.

    Free

    18 uses5.0 (1 review)
    nextjs-app-router-audit

    nextjs-app-router-audit

    Example session with this skill installed

    Audit our new dashboard route for performance issues and SEO best practices.

    • Read your context and instructions
    • Compiled the nextjs-app-router-audit

    I found 3 issues in /app/dashboard:

    1. ERROR: page.tsx uses "use client" and exports metadata. Metadata is ignored here; I'll move it to a layout or wrap the client logic.
    2. WARN: 2 sequential awaited fetches found (Waterfalls).
    3. INFO: Missing loading.tsx, preventing streaming.
      Fixing now...

    Connects securely to your tools. The creator never sees your data.

    About this skill

    Stop guessing why your Next.js app is slow or breaking SEO

    Modern Next.js development requires a deep understanding of the App Router's server/client boundaries. This skill provides a specialized diagnostic toolkit designed to audit codebases for performance bottlenecks, SEO regressions, and architectural anti-patterns that standard linters miss.

    What it does

    The skill combines a zero-dependency static scanner with a sophisticated manual review methodology. It identifies critical issues like metadata being ignored in Client Components, sequential request waterfalls, and missing streaming fallbacks. Beyond simple detection, it provides ranked severity reports and concrete code fixes for every issue found.

    • Detects SEO-killing errors like using next/head in the App Router.
    • Identifies performance drains such as unoptimized fonts and useEffect fetch waterfalls.
    • Analyzes Server Component boundaries to ensure minimal JS is sent to the browser.
    • Audits caching strategies and Suspense placement for optimal Core Web Vitals.

    Why use this over basic prompting?

    Simply asking an AI to "fix my Next.js app" often results in generic advice. This skill uses a specialized scanning script to trace your actual file tree, finding specific line numbers where rules are violated. It understands the nuance between a necessary Client Component and an accidental one, helping you maintain a high-performance "server-first" architecture.

    Free to use. Made by Datagrove Development Agency in Amsterdam

    • Uses regex heuristics instead of full AST parsing.
    • Requires manual verification of complex caching logic.
    • Best for Next.js 13.4 and newer (App Router).

    Open docs

    How to use

    1. 1

      Connect your agent to the Agensi MCP

      Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup

    2. 2

      Sign in to Agensi

      Your agent shows a sign-in link. Sign in and click Allow.

    3. 3

      Ask for what you need

      Your agent loads this skill and uses it on your task. It always asks before any payment.

    Reviews

    5.0
    1 review
    5
    1
    4
    0
    3
    0
    2
    0
    1
    0

    This skill has been used 18 times.

    Trust & safety

    Security scan

    Security scan passed 4 months ago

    • Free with an Agensi account

    Permissions

    Terminal / Shell
    Listed4 months ago

    What's inside

    Frequently Asked Questions

    This skill targets complex App Router issues that standard linters miss, such as sequential data fetching waterfalls, accidental client-side hydration leaks, and SEO misconfigurations in heavy Server Component architectures.

    The skill is designed to work with any AI agent that has file-system access (like Bolt.new, Windsurf, or Cursor) to run its specialized scanning script and interpret the results locally.

    You receive the specialized diagnostic scanning script, a library of App Router best-practice patterns, and a structured workflow for generating severity-ranked performance reports.

    No, the diagnostic scanner is a zero-dependency script designed to analyze your codebase statically without requiring you to install additional NPM packages or modify your production build.

    Yes, the toolkit is regularly updated to reflect the latest Next.js stable releases, ensuring compatibility with new features like PPR (Partial Prerendering) and updated caching APIs.

    New in Code Quality & Review

    Free