rsc-composition-patterns
OfficialServer-first patterns for React Server Components.
Software Engineering#react#next.js#architecture-patterns#server-components#server-first#client-boundaries
AuthorAgentient
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This skill helps teams decide where to render React components (server vs client) in Next.js 14+ by outlining patterns for Server Components, 'use client' boundaries, and inter-component composition, reducing guesswork during architecture planning.
Core Features & Use Cases
- Server-first guidance: maps components to server or client rendering based on interactivity, data-fetching, and browser API requirements.
- Composition patterns: demonstrates passing server-rendered content as children to client components and structuring boundaries to minimize client bundles.
- Use Case: when designing a Next.js 14+ app, use these patterns to define where to render and how to compose components for optimal performance and UX.
Quick Start
Apply these patterns to decide server vs client boundaries in a Next.js 14+ application, and mark only interactive leaf components with 'use client'.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: rsc-composition-patterns Download link: https://github.com/Agentient/vibekit/archive/main.zip#rsc-composition-patterns Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.