dankofly/nextjs-performance
.claude/skills/nextjs-performance/SKILL.md
Next.js critical performance fixes. Prevents async waterfalls, reduces bundle size, secures Server Actions, and ensures correct production builds. Use when writing React components, data fetching, Server Actions, or optimizing bundle size.
development
Updated Apr 17, 2026
$ install --global
skillsauthnpx skillsauth add dankofly/Swing_B2B nextjs-performanceInstall 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: Apr 17, 2026, 9:28 AM20.2s1 file scanned
SKILL.md
- name:
- nextjs-performance
- description:
- |
Next.js Performance
Before Writing Code
- Read
docs/agent/architecture/nextjs-critical-fixes.mdfor full patterns - Check existing components in
apps/frontend/components/
Critical Rules
Waterfalls
- Use
Promise.all()for independent fetches - Wrap slow data in
<Suspense>boundaries - Defer
awaitinto branches where needed
// WRONG
const resumes = await fetchResumes();
const jobs = await fetchJobs();
// RIGHT
const [resumes, jobs] = await Promise.all([fetchResumes(), fetchJobs()]);
Bundle Size
- NO barrel imports:
import X from 'lucide-react'is WRONG - YES direct imports:
import X from 'lucide-react/dist/esm/icons/x' - Use
next/dynamicfor heavy components (editors, charts, PDF) - Defer analytics with
ssr: false
import dynamic from 'next/dynamic';
const HeavyEditor = dynamic(() => import('./HeavyEditor'), { ssr: false });
Server Actions
- ALWAYS check auth INSIDE the action, not just middleware
- Verify resource ownership before mutations
Production Build
- Run
npm run build && npm run start, NOTnpm run dev - Docker must use standalone output
Pre-PR Checklist
[ ] No sequential awaits for independent data
[ ] Icons imported directly (not barrel)
[ ] Heavy components use next/dynamic
[ ] Server Actions have auth inside
[ ] Suspense around slow fetches
Related Skills
dankofly/ui-ux-pro-max
tools
VerifiedTrustedCommunity
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
SKILL.mdUpdated Apr 17, 2026
dankofly/ui-review
development
VerifiedTrustedCommunity
Review UI changes against Swiss International Style design system. Checks colors, typography, borders, shadows, spacing, and anti-patterns. Use before committing any frontend UI changes.
SKILL.mdUpdated Apr 17, 2026
dankofly/tailwind-patterns
development
VerifiedTrustedCommunity
Production-ready Tailwind CSS patterns for common website components: responsive layouts, cards, navigation, forms, buttons, and typography. Includes spacing scale, breakpoints, mobile-first patterns, and dark mode support. Use when building UI components, creating landing pages, styling forms, implementing navigation, or fixing responsive layouts.
SKILL.mdUpdated Apr 17, 2026
dankofly/receiving-code-review
development
VerifiedTrustedCommunity
Use when receiving code review feedback, before implementing suggestions, especially if feedback seems unclear or technically questionable - requires technical rigor and verification, not performative agreement or blind implementation
SKILL.mdUpdated Apr 17, 2026