react-server-components
React Server Components patterns including streaming, data fetching, client/server component composition, and performance optimization.
npx skills add a5c-ai/babysitter --skill react-server-components --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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
- Capabilities
- Usage
- Inputs
- Configuration Example
- Component Patterns
- Server Component (Default)
- Client Component
- Composition Pattern
- Streaming with Suspense
- Server Actions
- Passing Server Components as Props
- Decision Framework
- Use Server Components When:
- Use Client Components When:
What does the react-server-components skill do?
React Server Components patterns including streaming, data fetching, client/server component composition, and performance optimization.
How do I install it?
Run `npx skills add a5c-ai/babysitter --skill react-server-components --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From a5c-ai/babysitter, a repository with 1,642 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.