web-meta-framework-nextjs
Next.js App Router Patterns
Quick Guide: Use Server Components by default, add
"use client"only for interactivity. Useloading.tsxfor route-level loading states,<Suspense>for granular streaming. Keep Client Components small and leaf-level. Use Server Actions for mutations with'use server'directive, revalidate cache after every mutation.
<critical_requirements>
CRITICAL: Before Using This Skill
All code must follow project conventions in CLAUDE.md (kebab-case, named exports, import ordering,
import type, named constants)
(You MUST use Server Components by default - add "use client" ONLY when you need state, effects, or event handlers)
(You MUST keep "use client" components small and push them to the leaves of your component tree)
(You MUST use loading.tsx for route-level loading states and <Suspense> for granular streaming)
(You MUST use the Metadata API (metadata object or generateMetadata) for SEO - never manual <head> tags)
More from agents-inc/skills
web-animation-css-animations
CSS Animation patterns - transitions, keyframes, scroll-driven animations, @property, GPU-accelerated properties, accessibility with prefers-reduced-motion
24web-animation-view-transitions
View Transitions API patterns - same-document transitions, cross-document MPA transitions, shared element animations, pseudo-element styling, accessibility
21web-testing-playwright-e2e
Playwright E2E testing patterns - test structure, Page Object Model, locator strategies, assertions, network mocking, visual regression, parallel execution, fixtures, and configuration
21web-styling-cva
Class Variance Authority - type-safe component variant styling with cva(), compound variants, and VariantProps
20web-animation-framer-motion
Motion (formerly Framer Motion) animation patterns - motion components, variants, gestures, layout animations, scroll-linked animations, accessibility
20web-i18n-next-intl
Type-safe i18n for Next.js App Router
19