nextjs-app-router-auditAudit a Next.js App Router codebase for React Server Component boundary mistakes, request waterfalls, client/server anti-patterns, and Core Web Vitals risks...
Install via ClawdBot CLI:
clawdbot install sioncoolwijk/nextjs-app-router-auditGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Calls external URL not in known-safe list
https://datagrove.nlAudited Sep 8, 2026 · audit v1.0
Generated Sep 8, 2026
A mid-sized online store suspects slow product pages and a high bounce rate. Use the skill to audit the Next.js App Router codebase, identify server/client boundary issues causing slow LCP, and implement fixes like moving data fetching server-side and adding suspense boundaries.
A SaaS startup's dashboard is sluggish, especially on low-end devices. The audit reveals oversized client components and request waterfalls. By refactoring to reduce client bundles and parallelize data fetching, the dashboard becomes snappier, improving user retention.
A content publisher notices that many pages have missing or incorrect metadata in search results, harming click-through rates. The scanner flags client components exporting no metadata and legacy next/head usage, and the fixes restore proper SEO tags.
A patient portal must meet accessibility and performance standards. The audit uncovers raw <img> tags causing CLS and render-blocking fonts, leading to layout shifts. Implementing next/image and next/font resolves these issues, improving INP and user experience.
Offer a free automated scanner report (based on the included audit.mjs) and charge for a manual deep dive and fix implementation. This leverages the skill's speed for leads and its manual pass for value.
Provide ongoing performance monitoring and optimization for Next.js apps. Use the skill's scanner in CI to catch regressions, and manually review critical paths monthly. Charge a monthly retainer for continuous improvement.
Integrate the audit into an existing web development agency's offerings, bundling it with redesigns or rebuilds. Use the audit to upsell performance improvements and structure fixes, increasing project value.
💬 Integration Tip
The provided audit.mjs script is dependency-free and can be run in CI. To integrate, add a CI step to run it with --json and fail on errors, and combine it with Lighthouse or Web Vitals monitoring for a complete picture.
Scored Sep 8, 2026
Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.
Tailwind reference tool. Use when working with tailwind in frontend contexts.
A product creation skill based on the "Bee Website Builder" Open API. It is used to create a new product under a specified site language and product group, w...
A product update skill based on the "Bee Website Builder" Open API. It is used to update an existing product under a specified site language and supports upd...
Build WCAG 2.1 AA compliant websites with semantic HTML, proper ARIA, focus management, and screen reader support. Includes color contrast (4.5:1 text), keyboard navigation, form labels, and live regions. Use when implementing accessible interfaces, fixing screen reader issues, keyboard navigation, or troubleshooting "focus outline missing", "aria-label required", "insufficient contrast".
Use when building Vue 3 applications with Composition API, Nuxt 3, or Quasar. Invoke for Pinia, TypeScript, PWA, Capacitor mobile apps, Vite configuration.