Agent skill
nextjs15-performance
Next.js 15 critical performance fixes. Use when writing React components, data fetching, Server Actions, or optimizing bundle size.
Install this agent skill to your Project
npx add-skill https://github.com/srbhr/Resume-Matcher/tree/main/.claude/skills/nextjs-performance
SKILL.md
Before writing Next.js code
- Read
docs/agent/architecture/nextjs-critical-fixes.mdfor full patterns - Check existing components in
apps/frontend/components/for examples
Critical Rules (always apply)
Waterfalls
- Use
Promise.all()for independent fetches - Wrap slow data in
<Suspense>boundaries - Defer
awaitinto branches where needed
Bundle Size
- NO barrel imports:
import X from 'lucide-react'❌ - YES direct imports:
import X from 'lucide-react/dist/esm/icons/x'✅ - Use
next/dynamicfor heavy components (editors, charts, PDF viewers) - Defer analytics with
ssr: false
Server Actions
- ALWAYS check auth INSIDE the action, not just middleware
- Verify resource ownership before mutations
Production Build
- Users run
npm run build && npm run start, NOTnpm run dev - Docker must use standalone output, not dev mode
Quick Check Before PR
[ ] No sequential awaits for independent data
[ ] Icons imported directly
[ ] Heavy components use next/dynamic
[ ] Server Actions have auth inside
[ ] Suspense around slow fetches
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
ui-review
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.
codebase-navigator
Navigate, search, and understand the Resume Matcher codebase using ripgrep, ack, or grep. Find functions, classes, components, API endpoints, trace data flows, and understand architecture. Use FIRST when exploring code, finding files, or understanding project structure.
fastapi
Build Python APIs with FastAPI, Pydantic v2, and async patterns. Covers project structure, JWT auth, validation, database integration, and 7 documented error preventions. Use when creating Python APIs, implementing auth, or troubleshooting 422 validation, CORS, async blocking, or schema errors.
tailwind-patterns
Production-ready Tailwind CSS patterns for responsive layouts, cards, navigation, forms, buttons, and typography. Includes spacing scale, breakpoints, mobile-first patterns, dark mode, and Swiss International Style overrides for Resume Matcher.
full-stack
Full-stack development skill that coordinates backend and frontend changes together. Use for features that span both layers: new API endpoint + UI, data model changes, end-to-end flows.
code-review
Review code for correctness, security, performance, and Resume Matcher conventions. Use when receiving code review feedback or before submitting PRs. Requires technical rigor, not performative agreement.
Didn't find tool you were looking for?