pluginagentmarketplace/app-router
skills/app-router/SKILL.md
Next.js App Router - Server components, layouts, routing patterns
$ install --global
skillsauthnpx skillsauth add pluginagentmarketplace/custom-plugin-nextjs app-routerInstall 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.
3
Scanners Passed
9
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 12, 2026, 11:37 PM122.3s7 files scanned
SKILL.md
- name:
- app-router
- description:
- Next.js App Router - Server components, layouts, routing patterns
- sasmp_version:
- 1.3.0
- bonded_agent:
- nextjs-expert
- bond_type:
- PRIMARY_BOND
App Router Skill
Overview
Master Next.js 14+ App Router with server components, layouts, and modern routing patterns.
Capabilities
- Layouts: Root layout, nested layouts, templates
- Server Components: Default server rendering
- Client Components: Interactive with 'use client'
- Route Groups: (folder) for organization
- Parallel Routes: @slot for simultaneous rendering
- Intercepting Routes: (.) notation patterns
Examples
// app/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
// app/dashboard/page.tsx
export default async function DashboardPage() {
const data = await fetchData() // Server-side
return <Dashboard data={data} />
}
Best Practices
- Use server components by default
- Add 'use client' only when needed
- Leverage layouts for shared UI
- Use loading.tsx for suspense
Related Skills
pluginagentmarketplace/deployment
devops
VerifiedTrustedCommunity
Next.js deployment - Vercel, Docker, self-hosting strategies
2SKILL.mdUpdated May 12, 2026
pluginagentmarketplace/data-fetching
data-ai
VerifiedTrustedCommunity
Next.js data fetching - Server actions, caching, revalidation
2SKILL.mdUpdated May 12, 2026
pluginagentmarketplace/api-routes
development
VerifiedTrustedCommunity
Next.js API Routes - Route handlers, middleware, edge runtime
2SKILL.mdUpdated May 12, 2026
pluginagentmarketplace/web-development-skill
development
VerifiedTrustedCommunity
Master modern web development. Learn HTML/CSS/JavaScript fundamentals, React/Vue/Angular frameworks, Node.js backend, databases, APIs, and full-stack architectures. Use when building web applications, learning web technologies, or choosing tech stacks.
2SKILL.mdUpdated May 12, 2026