Adoption

Agent Skills are supported by leading AI development tools.

VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory

davepoon/app-router

Name: app-router
Author: davepoon

plugins/nextjs-expert/skills/app-router/SKILL.md

npx skillsauth add davepoon/buildwithclaude app-router

Clean

TrivyContainer and dependency vulnerability scanner

Clean

SemgrepStatic code analysis for vulnerabilities

Clean

mcp-scan (Snyk)Model Context Protocol security validation

Skipped

Snyk (dep)Open source security scanning

Skipped

Socket.devSupply chain security analysis

Skipped

VirusTotalMulti-engine malware detection

Skipped

CrowdStrikeAdvanced threat intelligence

Skipped

OSV-ScannerOpen Source Vulnerability database check

Skipped

OWASP Dep-Check

Next.js App Router Patterns

Overview

The App Router is Next.js's file-system based router built on React Server Components. It uses a app/ directory structure where folders define routes and special files control UI behavior.

Core File Conventions

Route Files

Each route segment is defined by a folder. Special files within folders control behavior:

| File | Purpose | |------|---------| | page.tsx | Unique UI for a route, makes route publicly accessible | | layout.tsx | Shared UI wrapper, preserves state across navigations | | loading.tsx | Loading UI using React Suspense | | error.tsx | Error boundary for route segment | | not-found.tsx | UI for 404 responses | | template.tsx | Like layout but re-renders on navigation | | default.tsx | Fallback for parallel routes |

Folder Conventions

| Pattern | Purpose | Example | |---------|---------|---------| | folder/ | Route segment | app/blog/ → /blog | | [folder]/ | Dynamic segment | app/blog/[slug]/ → /blog/:slug | | [...folder]/ | Catch-all segment | app/docs/[...slug]/ → /docs/* | | [[...folder]]/ | Optional catch-all | app/shop/[[...slug]]/ → /shop or /shop/* | | (folder)/ | Route group (no URL) | app/(marketing)/about/ → /about | | @folder/ | Named slot (parallel routes) | app/@modal/login/ | | _folder/ | Private folder (excluded) | app/_components/ |

Creating Routes

Basic Route Structure

To create a new route, add a folder with page.tsx:

app/
├── page.tsx              # / (home)
├── about/
│   └── page.tsx          # /about
└── blog/
    ├── page.tsx          # /blog
    └── [slug]/
        └── page.tsx      # /blog/:slug

Page Component

A page is a Server Component by default:

// app/about/page.tsx
export default function AboutPage() {
  return (
    <main>
      <h1>About Us</h1>
      <p>Welcome to our company.</p>
    </main>
  )
}

Dynamic Routes

Access route parameters via the params prop:

// app/blog/[slug]/page.tsx
interface PageProps {
  params: Promise<{ slug: string }>
}

export default async function BlogPost({ params }: PageProps) {
  const { slug } = await params
  const post = await getPost(slug)

  return <article>{post.content}</article>
}

Layouts

Root Layout (Required)

Every app needs a root layout with <html> and <body>:

// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Nested Layouts

Layouts wrap their children and preserve state:

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="flex">
      <Sidebar />
      <main className="flex-1">{children}</main>
    </div>
  )
}

Loading and Error States

Loading UI

Create instant loading states with Suspense:

// app/dashboard/loading.tsx
export default function Loading() {
  return <div className="animate-pulse">Loading...</div>
}

Error Boundaries

Handle errors gracefully:

// app/dashboard/error.tsx
'use client'

export default function Error({
  error,
  reset,
}: {
  error: Error
  reset: () => void
}) {
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={reset}>Try again</button>
    </div>
  )
}

Route Groups

Organize routes without affecting URL structure:

app/
├── (marketing)/
│   ├── layout.tsx        # Marketing layout
│   ├── about/page.tsx    # /about
│   └── contact/page.tsx  # /contact
└── (shop)/
    ├── layout.tsx        # Shop layout
    └── products/page.tsx # /products

Metadata

Static Metadata

// app/about/page.tsx
import { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'About Us',
  description: 'Learn more about our company',
}

Dynamic Metadata

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { slug } = await params
  const post = await getPost(slug)
  return { title: post.title }
}

Key Patterns

Colocation: Keep components, tests, and styles near routes
Private folders: Use _folder for non-route files
Route groups: Use (folder) to organize without URL impact
Parallel routes: Use @slot for complex layouts
Intercepting routes: Use (.) patterns for modals

Resources

For detailed patterns, see:

references/routing-conventions.md - Complete file conventions
references/layouts-templates.md - Layout composition patterns
references/loading-error-states.md - Suspense and error handling
examples/dynamic-routes.md - Dynamic routing examples
examples/parallel-routes.md - Parallel and intercepting routes

davepoon/app-router

plugins/nextjs-expert/skills/app-router/SKILL.md

This skill should be used when the user asks to "create a Next.js route", "add a page", "set up layouts", "implement loading states", "add error boundaries", "organize routes", "create dynamic routes", or needs guidance on Next.js App Router file conventions and routing patterns.

2,941 stars

tools

Updated May 18, 2026

$ install --global

skillsauth

npx skillsauth add davepoon/buildwithclaude app-router

Install this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.

Security Scan Results

3 of 9 scanners reported clean

Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.

Scanners Passed

Scanners in report

Clean

TrivyContainer and dependency vulnerability scanner

95%

Clean

SemgrepStatic code analysis for vulnerabilities

95%

Clean

mcp-scan (Snyk)Model Context Protocol security validation

95%

Skipped

Snyk (dep)Open source security scanning

50%

Skipped

Socket.devSupply chain security analysis

50%

Skipped

VirusTotalMulti-engine malware detection

50%

Skipped

CrowdStrikeAdvanced threat intelligence

50%

Skipped

OSV-ScannerOpen Source Vulnerability database check

50%

Skipped

OWASP Dep-Check

50%

Last scanned: May 18, 2026, 2:30 AM112.9s6 files scanned

SKILL.md

name:: app-router
description:: This skill should be used when the user asks to "create a Next.js route", "add a page", "set up layouts", "implement loading states", "add error boundaries", "organize routes", "create dynamic routes", or needs guidance on Next.js App Router file conventions and routing patterns.
version:: 1.0.0

Next.js App Router Patterns

Overview

The App Router is Next.js's file-system based router built on React Server Components. It uses a app/ directory structure where folders define routes and special files control UI behavior.

Core File Conventions

Route Files

Each route segment is defined by a folder. Special files within folders control behavior:

Folder Conventions

Creating Routes

Basic Route Structure

To create a new route, add a folder with page.tsx:

app/
├── page.tsx              # / (home)
├── about/
│   └── page.tsx          # /about
└── blog/
    ├── page.tsx          # /blog
    └── [slug]/
        └── page.tsx      # /blog/:slug

Page Component

A page is a Server Component by default:

// app/about/page.tsx
export default function AboutPage() {
  return (
    <main>
      <h1>About Us</h1>
      <p>Welcome to our company.</p>
    </main>
  )
}

Dynamic Routes

Access route parameters via the params prop:

// app/blog/[slug]/page.tsx
interface PageProps {
  params: Promise<{ slug: string }>
}

export default async function BlogPost({ params }: PageProps) {
  const { slug } = await params
  const post = await getPost(slug)

  return <article>{post.content}</article>
}

Layouts

Root Layout (Required)

Every app needs a root layout with <html> and <body>:

// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Nested Layouts

Layouts wrap their children and preserve state:

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="flex">
      <Sidebar />
      <main className="flex-1">{children}</main>
    </div>
  )
}

Loading and Error States

Loading UI

Create instant loading states with Suspense:

// app/dashboard/loading.tsx
export default function Loading() {
  return <div className="animate-pulse">Loading...</div>
}

Error Boundaries

Handle errors gracefully:

// app/dashboard/error.tsx
'use client'

export default function Error({
  error,
  reset,
}: {
  error: Error
  reset: () => void
}) {
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={reset}>Try again</button>
    </div>
  )
}

Route Groups

Organize routes without affecting URL structure:

app/
├── (marketing)/
│   ├── layout.tsx        # Marketing layout
│   ├── about/page.tsx    # /about
│   └── contact/page.tsx  # /contact
└── (shop)/
    ├── layout.tsx        # Shop layout
    └── products/page.tsx # /products

Metadata

Static Metadata

// app/about/page.tsx
import { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'About Us',
  description: 'Learn more about our company',
}

Dynamic Metadata

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { slug } = await params
  const post = await getPost(slug)
  return { title: post.title }
}

Key Patterns

Colocation: Keep components, tests, and styles near routes
Private folders: Use _folder for non-route files
Route groups: Use (folder) to organize without URL impact
Parallel routes: Use @slot for complex layouts
Intercepting routes: Use (.) patterns for modals

Resources

For detailed patterns, see:

references/routing-conventions.md - Complete file conventions
references/layouts-templates.md - Layout composition patterns
references/loading-error-states.md - Suspense and error handling
examples/dynamic-routes.md - Dynamic routing examples
examples/parallel-routes.md - Parallel and intercepting routes

Related Skills

davepoon/anti-ui-slop

development

VerifiedTrustedCommunity

Stop coding agents from shipping generic UI. Use UIZZE's 800,000+ real web and iOS screens to build product-specific interfaces, define a design contract, cover required states, and run a hard finish gate. Use for web or iOS UI design, implementation, redesign, critique, and pre-ship review in Codex, Claude Code, Cursor, Copilot, and other coding agents.

3,220SKILL.mdUpdated Jul 27, 2026

davepoon/anti-ui-slop

davepoon/theboardroom

development

VerifiedTrustedCommunity

Convene an AI executive board of directors (CEO, CFO, COO, CLO, CISO sub-agent personas) to vet a business idea, product concept, new service offering, M&A target, or operational initiative — and deliver an integrated board memo with a Go/No-Go recommendation. Use this skill whenever the user wants an idea vetted, stress-tested, or reviewed from multiple executive perspectives; asks to "present this to the board," "run this by the boardroom," "vet this idea," "poke holes in this plan," or "prep me for a board meeting"; or shares a business plan, pitch, proposal, or initiative document and asks for structured executive feedback. Also trigger when the user asks for a Go/No-Go decision, risk review across finance/legal/security/operations, or preparation for presenting an initiative to real leadership.

3,183SKILL.mdUpdated Jul 16, 2026

davepoon/theboardroom

davepoon/travel-agent-skill

data-ai

VerifiedTrustedCommunity

私人旅行管家 — 从出发地到目的地的完整行程规划+攻略导出。输入出发地、目的地、天数、预算、风格偏好，自动输出闭环行程，包含交通推荐、酒店推荐、美食路线、每日预算，并可选生成攻略。当用户提到「做攻略」「旅行规划」「旅游计划」「行程安排」时使用。

3,180SKILL.mdUpdated Jul 15, 2026

davepoon/travel-agent-skill

davepoon/ontoly-software-graph

tools

VerifiedTrustedCommunity

Use Ontoly's deterministic Software Graph and MCP server for codebase architecture, request tracing, dependency analysis, and impact analysis.

3,180SKILL.mdUpdated Jul 15, 2026

davepoon/ontoly-software-graph

Download

For Claude Desktop. Download once, then upload the file in the app — no terminal needed.

Need help? View full Cowork setup guide →

Install manually

Choose your platform

# Clone the repo
git clone https://github.com/davepoon/buildwithclaude.git

# Copy into Claude Code skills folder (global)
cp -r buildwithclaude/plugins/nextjs-expert/skills/app-router ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

davepoon/buildwithclaude

2,941 stars

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT