academind/modern-best-practice-nextjs
code-snapshots/ralph-loop/.claude/skills/modern-best-practice-nextjs/SKILL.md
Build modern Next.js apps with App Router and best practices
$ install --global
skillsauthnpx skillsauth add academind/claude-code-course-resources modern-best-practice-nextjsInstall 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%
Error
VirusTotalMulti-engine malware detection
70%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Mar 26, 2026, 6:38 PM46.2s1 file scanned
SKILL.md
- name:
- modern-best-practice-nextjs
- description:
- Build modern Next.js apps with App Router and best practices
Next.js Best Practices (App Router)
Next.js is a library that changes frequently - use web search or context7 MCP (via DocsExplorer agent) for exploring the current documentation.
Routing & Structure
- Use the App Router in
app/for new work - Use nested layouts and route groups to organize sections
- Keep server components as the default; add
'use client'only where needed
Data Fetching & Caching
- Fetch data in React Server Components - AVOID fetching via
useEffect()andfetch() - Use server actions ("Server Functions") for mutations, potentially in conjunction with React Hooks like
useActionState
UI States
- Provide
loading.tsxanderror.tsxfor route-level UX - Use
Suspenseboundaries around async UI
Metadata & SEO
- Use the Metadata API in layouts and pages
- Prefer static metadata when possible; keep dynamic metadata minimal
Related Skills
academind/web-security
development
VerifiedTrustedCommunity
Enforce web security and avoid security vulnerabilities
63SKILL.mdUpdated Mar 26, 2026
academind/modern-tailwind
development
VerifiedTrustedCommunity
Build clean, scalable UIs with Tailwind CSS using modern utilities and variants
63SKILL.mdUpdated Mar 26, 2026
academind/use-modern-browser-apis
development
VerifiedTrustedCommunity
Utilize built-in browser APIs (like Popover API, View Transitions etc) instead of building features manually via JavaScript
63SKILL.mdUpdated Mar 26, 2026
academind/modern-best-practice-react-components
development
VerifiedTrustedCommunity
Build clean, modern React components that apply common best practices and avoid common pitfalls like unnecessary state management or useEffect usage
63SKILL.mdUpdated Mar 26, 2026