Official agent skill

Docs Rsc Sandpack

A skill your agent uses when adding interactive RSC (React Server Components) code examples to React docs using <SandpackRSC, or when modifying the RSC sandpack infrastructure.

OfficialCC-BY-4.0Auto-check passed

Install Docs Rsc Sandpack

skills CLI

$ npx skills add reactjs/ar.react.dev --skill docs-rsc-sandpack -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install reactjs/ar.react.dev docs-rsc-sandpack --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/reactjs/ar.react.dev.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/docs-rsc-sandpack .claude/skills/docs-rsc-sandpack && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "docs-rsc-sandpack" agent skill from https://github.com/reactjs/ar.react.dev/tree/main/.claude/skills/docs-rsc-sandpack into .claude/skills/docs-rsc-sandpack/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "docs-rsc-sandpack", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/reactjs/ar.react.dev/tree/main/.claude/skills/docs-rsc-sandpack

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add reactjs/ar.react.dev --skill docs-rsc-sandpack -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install reactjs/ar.react.dev docs-rsc-sandpack --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/reactjs/ar.react.dev.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/docs-rsc-sandpack .agents/skills/docs-rsc-sandpack && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "docs-rsc-sandpack" agent skill from https://github.com/reactjs/ar.react.dev/tree/main/.claude/skills/docs-rsc-sandpack into .agents/skills/docs-rsc-sandpack/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "docs-rsc-sandpack", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add reactjs/ar.react.dev --skill docs-rsc-sandpack -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install reactjs/ar.react.dev docs-rsc-sandpack --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/reactjs/ar.react.dev.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/docs-rsc-sandpack .cursor/skills/docs-rsc-sandpack && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "docs-rsc-sandpack" agent skill from https://github.com/reactjs/ar.react.dev/tree/main/.claude/skills/docs-rsc-sandpack into .cursor/skills/docs-rsc-sandpack/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "docs-rsc-sandpack", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/reactjs/ar.react.dev.git --path .claude/skills/docs-rsc-sandpack

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add reactjs/ar.react.dev --skill docs-rsc-sandpack -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install reactjs/ar.react.dev docs-rsc-sandpack --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/reactjs/ar.react.dev.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/docs-rsc-sandpack .gemini/skills/docs-rsc-sandpack && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "docs-rsc-sandpack" agent skill from https://github.com/reactjs/ar.react.dev/tree/main/.claude/skills/docs-rsc-sandpack into .gemini/skills/docs-rsc-sandpack/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "docs-rsc-sandpack", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install reactjs/ar.react.dev docs-rsc-sandpack

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add reactjs/ar.react.dev --skill docs-rsc-sandpack -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/reactjs/ar.react.dev.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/docs-rsc-sandpack .github/skills/docs-rsc-sandpack && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "docs-rsc-sandpack" agent skill from https://github.com/reactjs/ar.react.dev/tree/main/.claude/skills/docs-rsc-sandpack into .github/skills/docs-rsc-sandpack/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "docs-rsc-sandpack", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add reactjs/ar.react.dev --skill docs-rsc-sandpack -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install reactjs/ar.react.dev docs-rsc-sandpack --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/reactjs/ar.react.dev.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/docs-rsc-sandpack .opencode/skills/docs-rsc-sandpack && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "docs-rsc-sandpack" agent skill from https://github.com/reactjs/ar.react.dev/tree/main/.claude/skills/docs-rsc-sandpack into .opencode/skills/docs-rsc-sandpack/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "docs-rsc-sandpack", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: docs-rsc-sandpack
GitHub stars: 164
Token cost: ~2.1k tokens
SKILL.md length: 450 words
Files: 1
Skills in repo: 10
Repo updated: Oct 5, 2026
First seen: Oct 7, 2026
Licence: CC-BY-4.0

At a glance

A skill your agent uses when adding interactive RSC (React Server Components) code examples to React docs using <SandpackRSC, or when modifying the RSC sandpack infrastructure.

Works in 3 steps: Server + Client Components → Async Server Component with Suspense → Server Functions (Actions)
Adding interactive RSC (React Server Components) code examples to React docs using <SandpackRSC
SKILL.md covers Quick Start Template, How It Differs from, File Directives and Common Patterns, plus 3 more sections
Calls node and yarn

What it does

Docs Rsc Sandpack is an agent skill from reactjs/ar.react.dev, published by the product's own GitHub organization. Use when adding interactive RSC (React Server Components) code examples to React docs using <SandpackRSC, or when modifying the RSC sandpack infrastructure.

Its SKILL.md is about 2.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It works with React. The repository describes itself as: React documentation website in Arabic 📘⚛️ — وثائق React باللغة العربية. The licence is CC-BY-4.0.

When your agent uses it

Adding interactive RSC (React Server Components) code examples to React docs using <SandpackRSC
Modifying the RSC sandpack infrastructure

Example prompts

“/docs-rsc-sandpack”

Workflow steps

3 steps, taken from the step headings in SKILL.md.

Server + Client Components
Async Server Component with Suspense
Server Functions (Actions)

What it can do on your machine

Read from SKILL.md and the folder at commit 2da48d6. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
- node
- yarn
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use yarn, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Docs Rsc Sandpack loads about 2.1k tokens when it runs. Until then it costs about 44 tokens; SKILL.md has 450 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~44
When it runs · the whole SKILL.md, loaded when a task matches: ~2.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from reactjs/ar.react.dev at commit 2da48d6, republished under its CC-BY-4.0 licence (© reactjs). 450 words, ~2,063 tokens.

Download SKILL.mdSave it as .claude/skills/docs-rsc-sandpack/SKILL.md (or your agent's skills folder).

name: docs-rsc-sandpack
description: Use when adding interactive RSC (React Server Components) code examples to React docs using <SandpackRSC>, or when modifying the RSC sandpack infrastructure.

RSC Sandpack Patterns

For general Sandpack conventions (code style, naming, file naming, line highlighting, hidden files, CSS guidelines), see /docs-sandpack. This skill covers only RSC-specific patterns.

Quick Start Template

Minimal single-file <SandpackRSC> example:

mdx

<SandpackRSC>

` ` `js src/App.js
export default function App() {
  return <h1>Hello from a Server Component!</h1>;
}
` ` `

</SandpackRSC>

How It Differs from `<Sandpack>`

Feature	`<Sandpack>`	`<SandpackRSC>`
Execution model	All code runs in iframe	Server code runs in Web Worker, client code in iframe
`'use client'` directive	Ignored (everything is client)	Required to mark client components
`'use server'` directive	Not supported	Marks Server Functions callable from client
`async` components	Not supported	Supported (server components can be async)
External dependencies	Supported via `package.json`	Not supported (only React + react-dom)
Entry point	`App.js` with `export default`	`src/App.js` with `export default`
Component tag	`<Sandpack>`	`<SandpackRSC>`

File Directives

Files are classified by the directive at the top of the file:

Directive	Where it runs	Rules
(none)	Web Worker (server)	Default. Can be `async`. Can import other server files. Cannot use hooks, event handlers, or browser APIs.
`'use client'`	Sandpack iframe (browser)	Must be first statement. Can use hooks, event handlers, browser APIs. Cannot be `async`. Cannot import server files.
`'use server'`	Web Worker (server)	Marks Server Functions. Can be module-level (all exports are actions) or function-level. Callable from client via props or form `action`.

Common Patterns

1. Server + Client Components

mdx

<SandpackRSC>

` ` `js src/App.js
import Counter from './Counter';

export default function App() {
  return (
    <div>
      <h1>Server-rendered heading</h1>
      <Counter />
    </div>
  );
}
` ` `

` ` `js src/Counter.js
'use client';

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}
` ` `

</SandpackRSC>

2. Async Server Component with Suspense

mdx

<SandpackRSC>

` ` `js src/App.js
import { Suspense } from 'react';
import Albums from './Albums';

export default function App() {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <Albums />
    </Suspense>
  );
}
` ` `

` ` `js src/Albums.js
async function fetchAlbums() {
  await new Promise(resolve => setTimeout(resolve, 1000));
  return ['Abbey Road', 'Let It Be', 'Revolver'];
}

export default async function Albums() {
  const albums = await fetchAlbums();
  return (
    <ul>
      {albums.map(album => (
        <li key={album}>{album}</li>
      ))}
    </ul>
  );
}
` ` `

</SandpackRSC>

3. Server Functions (Actions)

mdx

<SandpackRSC>

` ` `js src/App.js
import { addLike, getLikeCount } from './actions';
import LikeButton from './LikeButton';

export default async function App() {
  const count = await getLikeCount();
  return (
    <div>
      <p>Likes: {count}</p>
      <LikeButton addLike={addLike} />
    </div>
  );
}
` ` `

` ` `js src/actions.js
'use server';

let count = 0;

export async function addLike() {
  count++;
}

export async function getLikeCount() {
  return count;
}
` ` `

` ` `js src/LikeButton.js
'use client';

export default function LikeButton({ addLike }) {
  return (
    <form action={addLike}>
      <button type="submit">Like</button>
    </form>
  );
}
` ` `

</SandpackRSC>

File Structure Requirements

Entry Point

src/App.js is required as the main entry point
Must have export default (function component)
Case-insensitive fallback: src/app.js also works

Auto-Injected Infrastructure Files

These files are automatically injected by sandpack-rsc-setup.ts and should never be included in MDX:

File	Purpose
`/src/index.js`	Bootstraps the RSC pipeline
`/src/rsc-client.js`	Client bridge — creates Worker, consumes Flight stream
`/src/rsc-server.js`	Wraps pre-bundled worker runtime as ES module
`/node_modules/__webpack_shim__/index.js`	Minimal webpack compatibility layer
`/node_modules/__rsdw_client__/index.js`	`react-server-dom-webpack/client` as local dependency

Show full SKILL.md (157 more words)Show less

No External Dependencies

<SandpackRSC> does not support external npm packages. Only react and react-dom are available. Do not include package.json in RSC examples.

Architecture Reference

Three-Layer Architecture

react.dev page (Next.js)
  ┌─────────────────────────────────────────┐
  │  <SandpackRSC>                          │
  │  ┌─────────┐  ┌──────────────────────┐  │
  │  │ Editor  │  │ Preview (iframe)     │  │
  │  │ App.js  │  │ Client React app     │  │
  │  │ (edit)  │  │ consumes Flight      │  │
  │  │         │  │ stream from Worker   │  │
  │  └─────────┘  └──────────┬───────────┘  │
  └───────────────────────────┼─────────────┘
                              │ postMessage
  ┌───────────────────────────▼─────────────┐
  │  Web Worker (Blob URL)                  │
  │  - React server build (pre-bundled)     │
  │  - react-server-dom-webpack/server      │
  │  - webpack shim                         │
  │  - User server code (Sucrase → CJS)    │
  └─────────────────────────────────────────┘

Key Source Files

File	Purpose
`src/components/MDX/Sandpack/sandpack-rsc/RscFileBridge.tsx`	Monitors Sandpack; posts raw files to iframe
`src/components/MDX/Sandpack/SandpackRSCRoot.tsx`	SandpackProvider setup, custom bundler URL, UI layout
`src/components/MDX/Sandpack/templateRSC.ts`	RSC template files
`.../sandbox-code/src/__react_refresh_init__.js`	React Refresh shim
`.../sandbox-code/src/rsc-server.js`	Worker runtime: module system, Sucrase compilation, `renderToReadableStream()`
`.../sandbox-code/src/rsc-client.source.js`	Client bridge: Worker creation, file classification, Flight stream consumption
`.../sandbox-code/src/webpack-shim.js`	Minimal `__webpack_require__` / `__webpack_module_cache__` shim
`.../sandbox-code/src/worker-bundle.dist.js`	Pre-bundled IIFE (generated): React server + RSDW/server + Sucrase
`scripts/buildRscWorker.mjs`	esbuild script: bundles rsc-server.js into worker-bundle.dist.js

Build System

Rebuilding the Worker Bundle

After modifying rsc-server.js or webpack-shim.js:

bash

node scripts/buildRscWorker.mjs

This runs esbuild with:

format: 'iife', platform: 'browser'
conditions: ['react-server', 'browser'] (activates React server export conditions)
minify: true
Prepends webpack-shim.js to the output

Raw-Loader Configuration

In templateRSC.js files are loaded as raw strings with the !raw-loader.

The strings are necessary to provide to Sandpack as local files (skips Sandpack bundling).

Development Commands

bash

node scripts/buildRscWorker.mjs   # Rebuild worker bundle after source changes
yarn dev                           # Start dev server to test examples

Files

Just SKILL.md in .claude/skills/docs-rsc-sandpack of reactjs/ar.react.dev.

Open the folder on GitHubat commit 2da48d6

Used in 3 other repositories

We found 3 copies of this SKILL.md (exact, near-identical or edited) in other folders. This page covers the copy in reactjs/ar.react.dev, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Docs Rsc Sandpack next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Docs Rsc Sandpack compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Docs Rsc Sandpack this skillreactjs/ar.react.dev	164	—	~2.1k	Automated safety check: Pass	CC-BY-4.0	2 days ago
Web Artifacts Builderanthropics/skills	180k	40 repos	~769	Automated safety check: Pass	Apache-2.0	2 days ago
React Doctormakeplane/plane	60k	12 repos	~657	Automated safety check: Pass	AGPL-3.0	yesterday
React Composition Patternsvercel-labs/openreview	1.7k	58 repos	~721	Automated safety check: Pass	MIT	7 mo ago
React Router Developmentremix-run/react-router	57k	1 repos	~1.5k	Automated safety check: Pass	MIT	yesterday
Electron Multi-Process ArchitectureiOfficeAI/AionUi	33k	1 repos	~1.8k	Automated safety check: Pass	Apache-2.0	28 days ago

Similar skills

Web Artifacts Builder
anthropics/skills
Official
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
180k GitHub starsUsed in 40 repos~769 tokens
Frontend & DesignAuto-check passed
React Doctor
makeplane/plane
Scans React code for lint, accessibility, bundle size and architecture issues, reports a health score and checks that changes do not lower it.
60k GitHub starsUsed in 12 repos~657 tokens
Frontend & DesignAuto-check passed
React Composition Patterns
vercel-labs/openreview
Official
Rules for structuring React components with composition instead of boolean props, covering compound components, lifted state, variants and React 19 changes.
1.7k GitHub starsUsed in 58 repos~721 tokens
Frontend & DesignAuto-check passed
React Router Development
remix-run/react-router
Guides work on React Router apps by first identifying whether the app uses Framework, Data or Declarative mode, then loading the matching reference and the installed package docs.
57k GitHub starsUsed in 1 repo~1.5k tokens
Frontend & DesignAuto-check passed
Electron Multi-Process Architecture
iOfficeAI/AionUi
Tells the agent where new code belongs in an Electron multi-process project and which APIs each process may use, with rules for new bridges, services, agents and workers.
33k GitHub starsUsed in 1 repo~1.8k tokens
DevelopmentAuto-check passed
Stitch to Remotion Walkthrough Videos
google-labs-code/stitch-skills
Official
Builds walkthrough videos from Stitch design projects using Remotion, with transitions, zoom effects and text overlays on each screen.
8.4k GitHub starsUsed in 6 repos~3.2k tokens
Media & CreativeAuto-check: notes

Questions about Docs Rsc Sandpack

What does Docs Rsc Sandpack do?

A skill your agent uses when adding interactive RSC (React Server Components) code examples to React docs using <SandpackRSC, or when modifying the RSC sandpack infrastructure. dev, published by the product's own GitHub organization. Use when adding interactive RSC (React Server Components) code examples to React docs using <SandpackRSC, or when modifying the RSC sandpack infrastructure.

When should I use Docs Rsc Sandpack?

Docs Rsc Sandpack fits situations like: adding interactive RSC (React Server Components) code examples to React docs using <SandpackRSC; modifying the RSC sandpack infrastructure.

How do I install Docs Rsc Sandpack in Claude Code?

Run `npx skills add reactjs/ar.react.dev --skill docs-rsc-sandpack -a claude-code`. Or copy the skill folder (.claude/skills/docs-rsc-sandpack in reactjs/ar.react.dev) into .claude/skills/docs-rsc-sandpack in your project. Claude Code loads it when a task matches its description.

How do I install Docs Rsc Sandpack in Codex?

Run `npx skills add reactjs/ar.react.dev --skill docs-rsc-sandpack -a codex`. Or copy the skill folder (.claude/skills/docs-rsc-sandpack in reactjs/ar.react.dev) into .agents/skills/docs-rsc-sandpack in your project. Codex loads it when a task matches its description.

Can I use Docs Rsc Sandpack in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add reactjs/ar.react.dev --skill docs-rsc-sandpack -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/docs-rsc-sandpack, .gemini/skills/docs-rsc-sandpack, .github/skills/docs-rsc-sandpack and .opencode/skills/docs-rsc-sandpack in your project.

What does Docs Rsc Sandpack need to run?

Going by SKILL.md and its folder, Docs Rsc Sandpack needs the command-line tools its instructions call (node and yarn).

Does Docs Rsc Sandpack access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Docs Rsc Sandpack safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Docs Rsc Sandpack use?

Docs Rsc Sandpack is published under the CC-BY-4.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Docs Rsc Sandpack use?

About 2.1k tokens (SKILL.md is roughly 8.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Docs Rsc Sandpack?

Skills that share tags, products or a category with Docs Rsc Sandpack: Web Artifacts Builder (anthropics/skills, 180k stars), React Doctor (makeplane/plane, 60k stars), React Composition Patterns (vercel-labs/openreview, 1.7k stars) and React Router Development (remix-run/react-router, 57k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Docs Rsc Sandpack?

reactjs (a GitHub organization, an official publisher) maintains it in reactjs/ar.react.dev, which has 164 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on October 5, 2026.

Source: reactjs/ar.react.dev on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Docs Rsc Sandpack

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

RSC Sandpack Patterns

Quick Start Template

How It Differs from <Sandpack>

File Directives

Common Patterns

1. Server + Client Components

2. Async Server Component with Suspense

3. Server Functions (Actions)

File Structure Requirements

Entry Point

Auto-Injected Infrastructure Files

No External Dependencies

Architecture Reference

Three-Layer Architecture

Key Source Files

Build System

Rebuilding the Worker Bundle

Raw-Loader Configuration

Development Commands

Files

Used in 3 other repositories

Compare with similar skills

Similar skills

More from reactjs/ar.react.dev

Related

Questions about Docs Rsc Sandpack

How It Differs from `<Sandpack>`