Agent skill · software engineering · yonatangross
react-server-components-framework
Next.js 16+ with React Server Components: App Router, Cache Components, streaming SSR, Server Actions. Use when building server-first Next.js apps.
Why this skill is useful
Provides specific patterns and commands for implementing React Server Components in Next.js 16+, which the AI wouldn't reliably generate on its own.
What it needs
About 6k tokens when loaded. Last updated 2026-08-06. 215 stars on the source repository.
What this skill does
React Server Components Framework Overview React Server Components (RSC) enable server-first rendering with client-side interactivity. This skill covers Next.js 16.2 LTS App Router patterns, Server Components, Server Actions, and streaming. Next.js 16.2.6 / React 19.2.6 (security release, May 2026) — Turbopack is the default bundler (no --turbo flag needed), Server Fast Refresh is on by default, and the new cacheComponents config flag replaces the legacy experimentalppr escape hatch. For AI-agent debugging Next.js ships Next DevTools MCP — wire npx -y next-devtools-mcp@latest into .mcp.json (it connects via the dev server's /next/mcp endpoint) to inspect render trees and cache boundaries mid-session. When to use this skill: Building Next.js 16+ applications with the App Router Designing component boundaries (Server vs Client Components) Implementing data fetching with caching and revalidation Creating mutations with Server Actions Optimizing performance with streaming and Suspense --- Quick Reference Server vs Client Components Feature Server Component Client Component --------- ----------------- ------------------ Directive None (default) 'use client' Async/await Yes No Hooks No Yes Browser APIs No Yes Database access Yes No Client JS bundle Zero Ships to client Key Rule: Server Components can render Client Components, but Client Components cannot directly import Server Components (use children prop instead). Data Fetching Quick Reference Next.js 16 Cache Components (Recommended): Enable via next.config.ts: Legacy Fetch Options (Next.js 15): Server Actions Quick Reference Async Params/SearchParams (Next.js 16) Route parameters and search parameters are now Promises that must be awaited: Note: Also applies to layout.tsx, generateMetadata(), and route handlers. Complete migration guide: first-party next-upgrade / vercel:next-upgrade skill. House scars: Read("references/ork-delta.md"). …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills yonatangross/react-server-components-framework--2e58a1