Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/ariegoldkin/ai-agent-hub/react-server-components-frameworknpx skills add ArieGoldkin/ai-agent-hub --skill react-server-components-frameworkgit clone --depth 1 https://github.com/ArieGoldkin/ai-agent-hubWhat it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00043 | $0.02488 |
| Opus 5 | $0.00022 | $0.01244 |
| Sonnet 5 | $0.00009 | $0.00498 |
| Haiku 4.5 | $0.00004 | $0.00249 |
Grade A, and why
react-server-components-framework scanned grade A with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 3d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Makes network callslowCapability
Not a fault in itself. Listed so you know the mod talks to something, and to what.
await fetch(url, { cache: 'force-cache' }) How it starts
The opening of the file, as written. The whole thing — 389 lines — stays where its author put it; the contents beside it link to each section on GitHub.
React Server Components Framework
Overview
React Server Components (RSC) represent a paradigm shift in React architecture, enabling server-first rendering with client-side interactivity. This skill provides comprehensive patterns, templates, and best practices for building modern Next.js 15 applications using the App Router with Server Components, Server Actions, and streaming.
When to use this skill:
- Building Next.js 15+ 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
- Implementing Partial Prerendering (PPR)
- Designing advanced routing patterns (parallel, intercepting routes)
Why React Server Components Matter
RSC fundamentally changes how we think about React applications:
- Server-First Architecture: Components render on the server by default, reducing client bundle size
- Zero Client Bundle: Server Components don't ship JavaScript to the client
- Direct Backend Access: Access databases, file systems, and APIs directly from components
- Automatic Code Splitting: Only Client Components and their dependencies are bundled
- Streaming & Suspense: Progressive rendering for instant perceived performance
- Type-Safe Data Fetching: End-to-end TypeScript from database to UI
- SEO & Performance: Server rendering improves Core Web Vitals and SEO
Core Concepts
1. Server Components vs Client Components
Server Components (default):
- Can be
asyncand useawait - Direct database access
- Cannot use hooks or browser APIs
- Zero client JavaScript
Client Components (with 'use client'):
- Can use hooks (
useState,useEffect, etc.) - Browser APIs available
- Cannot be
async - Ships JavaScript to client
Key Rule: Server Components can render Client Components, but Client Components cannot directly import Server Components (use children prop instead).
What ships with it
10 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- checklists/rsc-implementation-checklist.md 9.4 KB
- examples/blog-app-example.tsx 12 KB
- references/component-patterns.md 9.5 KB
- references/data-fetching.md 3.2 KB
- references/migration-guide.md 3.4 KB
- references/routing-patterns.md 3.3 KB
- references/server-actions.md 4.0 KB
- templates/client-component-template.tsx 2.0 KB
- templates/server-action-template.ts 5.9 KB runs code
- templates/server-component-template.tsx 1.9 KB
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 3d ago First seen · 389 lines · 43 tokens per session scan A ab5326747954
react-server-components-framework is a skill published in the GitHub repository ArieGoldkin/ai-agent-hub (11 stars, last pushed 9mo ago), licensed MIT. It adds 43 tokens to every session and 2,488 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 1 finding (makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
nextjs-patterns
Next.js App Router — Server Components, Actions, streaming, caching. Use when building or migrating Next.js apps.
nextjs-docs
Use this skill whenever the user asks about Next.js, React full-stack development, App Router, Server Components, or building web applications with Next.js. This skill covers Next.js 16.2.7 with React 19.2, App Router, Cache Components, Turbopack, and all modern patterns. Use it for code generation, architecture…
vercel-react
React/Next.js performance — 70 rules (waterfalls, bundle, re-renders). Use when reviewing or writing React/Next.js code.
nextjs
Next.js App Router best practices — Server Components, data fetching, caching, routing, middleware, metadata, error handling, streaming, Server Actions, and performance optimization for Next.js 14-16+.
shadcn
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json…
migrate-radix-to-base
Migrates React projects and components from Radix UI to Base UI. Use when asked to migrate from radix, move to base-ui, convert radix primitives, or switch a shadcn project's base library. Handles single components ("migrate accordion") and whole projects.