react-server-components

# React Server Components Skill Expert assistance for implementing React Server Components with proper patterns and composition strategies. ## Capabilities - Design server/client component boundaries - Implement streaming with Suspense - Handle data fetching in server components - Compose server and client components - Optimize performance with selective hydration - Manage server actions for mutations ## Usage Invoke this skill when you need to: - Structure RSC application architecture - Implement streaming data fetching - Determine server vs client components - Pass server data to client components - Build server actions for forms ## Inputs | Parameter | Type | Required | Description | |-----------|------|----------|-------------| | componentType | string | Yes | server, client, shared | | dataFetching | boolean | No | Component fetches data | | interactivity | array | No | Required client interactions | | streaming | boolean | No | Enable streaming | ### Configuration Example ```json { "componentType": "server", "dataFetching": true, "streaming": true, "childComponents": [ { "name": "InteractiveChart", "type": "client" } ] } ``` ## Component Patterns ### Server Component (Default) ```typescript // app/users/page.tsx - Server Component by default import { db } from '@/lib/db'; import { UserCard } from './user-card'; async function getUsers() { return db.user.findMany({ include: { posts: true }, }); } export default async function UsersPage...