Pnpm Engine
teambit/bit
Work on the pnpm Rust engine (@pnpm/napi, the pacquet crates) that bit install runs through.
A skill your agent uses when an agent in this TanStack AI monorepo needs a playground app to try a new feature.
Install New React Playground
$ npx skills add TanStack/ai --skill new-react-playground -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install TanStack/ai new-react-playground --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/TanStack/ai.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.grok/skills/new-react-playground .claude/skills/new-react-playground && rm -rf skills-srcUse ~/.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/
Install the "new-react-playground" agent skill from https://github.com/TanStack/ai/tree/main/.grok/skills/new-react-playground into .claude/skills/new-react-playground/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "new-react-playground", 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 install https://github.com/TanStack/ai/tree/main/.grok/skills/new-react-playgroundType 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.
$ npx skills add TanStack/ai --skill new-react-playground -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install TanStack/ai new-react-playground --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/TanStack/ai.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.grok/skills/new-react-playground .agents/skills/new-react-playground && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "new-react-playground" agent skill from https://github.com/TanStack/ai/tree/main/.grok/skills/new-react-playground into .agents/skills/new-react-playground/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "new-react-playground", 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.
$ npx skills add TanStack/ai --skill new-react-playground -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install TanStack/ai new-react-playground --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/TanStack/ai.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.grok/skills/new-react-playground .cursor/skills/new-react-playground && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "new-react-playground" agent skill from https://github.com/TanStack/ai/tree/main/.grok/skills/new-react-playground into .cursor/skills/new-react-playground/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "new-react-playground", 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 https://github.com/TanStack/ai.git --path .grok/skills/new-react-playground--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add TanStack/ai --skill new-react-playground -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install TanStack/ai new-react-playground --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/TanStack/ai.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.grok/skills/new-react-playground .gemini/skills/new-react-playground && rm -rf skills-srcUse ~/.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/
Install the "new-react-playground" agent skill from https://github.com/TanStack/ai/tree/main/.grok/skills/new-react-playground into .gemini/skills/new-react-playground/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "new-react-playground", 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.
$ gh skill install TanStack/ai new-react-playgroundInstalls 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).
$ npx skills add TanStack/ai --skill new-react-playground -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/TanStack/ai.git skills-src && mkdir -p .github/skills && cp -r skills-src/.grok/skills/new-react-playground .github/skills/new-react-playground && rm -rf skills-srcUse ~/.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/
Install the "new-react-playground" agent skill from https://github.com/TanStack/ai/tree/main/.grok/skills/new-react-playground into .github/skills/new-react-playground/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "new-react-playground", 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.
$ npx skills add TanStack/ai --skill new-react-playground -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install TanStack/ai new-react-playground --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/TanStack/ai.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.grok/skills/new-react-playground .opencode/skills/new-react-playground && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "new-react-playground" agent skill from https://github.com/TanStack/ai/tree/main/.grok/skills/new-react-playground into .opencode/skills/new-react-playground/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "new-react-playground", 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
new-react-playground- GitHub stars
- 3.2k
- Token cost
- ~266 tokens
- SKILL.md length
- 133 words
- Files
- 1
- Skills in repo
- 24
- Repo updated
- First seen
- Licence
- MIT
At a glance
A skill your agent uses when an agent in this TanStack AI monorepo needs a playground app to try a new feature.
- Works in 5 steps: Pick a kebab-case name. → From the repo root, run pnpm nx g… → Run pnpm install. → …
- An agent in this TanStack AI monorepo needs a playground app to try a new feature
- SKILL.md covers Must and Later
- Calls pnpm
What it does
New React Playground is an agent skill from TanStack/ai. Use when an agent in this TanStack AI monorepo needs a playground app to try a new feature. Trigger: new feature to try in a Start React app in this repo.
Its SKILL.md is about 270 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Development, covering Monorepo tooling. It works with React, TanStack and pnpm. The repository describes itself as: 🤖 Type-safe, provider-agnostic TypeScript AI SDK for streaming chat, tool calling, agents, and multimodal apps across OpenAI, Anthropic, Gemini, React, Vue, Svelte, and Solid. The licence is MIT.
When your agent uses it
- An agent in this TanStack AI monorepo needs a playground app to try a new feature
- Tasks that involve Monorepo tooling
Example prompts
- “/new-react-playground”
Workflow steps
5 steps, taken from the first numbered list in SKILL.md.
- Pick a kebab-case name.
- From the repo root, run pnpm nx g @tanstack/workspace-plugin:react-app . The app lands at examples/react//.
- Run pnpm install.
- Implement the feature on the index route. If the server must change, edit /api/chat.
- Run pnpm --filter dev (port 3100).
What it can do on your machine
Read from SKILL.md and the folder at commit 5a41239. 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:
pnpm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use pnpm, 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
New React Playground loads about 266 tokens when it runs. Until then it costs about 44 tokens; SKILL.md has 133 words of instructions outside code blocks.
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: notes
The automated check noted patterns worth knowing about, such as sudo or a known installer.
- NoteMentions a .env fileSKILL.md:30
live model keys, copy `.env.example` to `.env.local`.
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 TanStack/ai at commit 5a41239, republished under its MIT licence (© TanStack). 133 words, ~266 tokens.
Download SKILL.mdSave it as
.claude/skills/new-react-playground/SKILL.md (or your agent's skills folder).- name
- new-react-playground
- description
- Use when an agent in this TanStack AI monorepo needs a playground app to try a new feature. Trigger: new feature to try in a Start React app in this repo.
new-react-playground
Pick a kebab-case name. Then generate a React chat lab under examples/react/<name>/.
The generator writes a thin chat lab. The app includes:
- BYOK
- Model picker
/api/chatwithchat()
The index route is the chat shell. The dev server uses port 3100.
Must
- Pick a kebab-case name.
- From the repo root, run
pnpm nx g @tanstack/workspace-plugin:react-app <name>. The app lands atexamples/react/<name>/. - Run
pnpm install. - Implement the feature on the index route. If the server must change, edit
/api/chat. - Run
pnpm --filter <name> dev(port 3100).
Do not commit the new example. After a human asks to keep it, you can commit it.
Later
If you need live model keys, copy .env.example to .env.local.
Open http://localhost:3100. The chat lab is live. Your feature is on the index route.
© TanStack, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in .grok/skills/new-react-playground of TanStack/ai.
Open the folder on GitHubat commit 5a41239
Compare with similar skills
New React Playground 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| New React Playground this skillTanStack/ai | 3.2k | — | ~266 | Automated safety check: Notes | MIT | |
| Pnpm Engineteambit/bit | 18k | — | ~1.9k | Automated safety check: Pass | Custom licence | |
| Electron Multi-Process ArchitectureiOfficeAI/AionUi | 33k | 1 repos | ~1.8k | Automated safety check: Pass | Apache-2.0 | |
| @pierre/diffs Code Renderingpierrecomputer/pierre | 6.2k | 2 repos | ~803 | Automated safety check: Pass | Apache-2.0 | |
| Link Workspace Packagesnomcopter/react-mosaic | 4.8k | 5 repos | ~760 | Automated safety check: Pass | Custom licence | |
| Nullable New Paramsremotion-dev/remotion | 62k | — | ~1k | Automated safety check: Pass | Custom licence |
Similar skills
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.
@pierre/diffs Code Rendering
pierrecomputer/pierre
Guides an agent through using @pierre/diffs to render syntax-highlighted files and diffs, and to build editing and review surfaces in React or plain JavaScript.
Link Workspace Packages
nomcopter/react-mosaic
Link workspace packages in monorepos (npm, yarn, pnpm, bun).
- Official
Nullable New Params
remotion-dev/remotion
Fix newly added optional parameters, optional React props, and optional type/interface members in Remotion monorepo diffs by converting internal APIs to required nullable values and updating call…
Wagmi Feature Development
wevm/wagmi
Walks through adding a Wagmi feature across its layers: a Viem-based core action, TanStack Query options, and React and Vue bindings.
More from TanStack/ai
All 24 skills in this repoI Have Adhd
TanStack/ai
A skill your agent uses when the user invokes /i-have-adhd, says they have ADHD, or asks for ADHD-friendly output.
PR Sweep
TanStack/ai
Sweep open (or listed) PRs with up to 100 parallel agents: security-scan outside contributors, rebase onto main when behind (push --force-with-lease), approve pending first-time-contributor CI when…
Tanstack AI Memory Honcho
TanStack/ai
A skill your agent uses when wiring honcho() from @tanstack/ai-memory/honcho — a hosted memory adapter where recall is a dialectic answer over the user's representation (no discrete fragments).
Tanstack AI Memory In Memory
TanStack/ai
A skill your agent uses when wiring inMemory() from @tanstack/ai-memory/in-memory — explains setup, options (embedder, extract, topK/minScore), when to pick it (dev/tests/single-process demos), and…
Tanstack AI Memory Redis
TanStack/ai
A skill your agent uses when wiring redis() from @tanstack/ai-memory/redis in production — covers client setup (ioredis or node-redis via fromNodeRedis), the storage model, client-side ranking…
Add Example Tutorial
TanStack/ai
A skill your agent uses when adding a public teaching example or a docs tutorial.
Related
Categories
Questions about New React Playground
What does New React Playground do?
A skill your agent uses when an agent in this TanStack AI monorepo needs a playground app to try a new feature. New React Playground is an agent skill from TanStack/ai. Use when an agent in this TanStack AI monorepo needs a playground app to try a new feature.
When should I use New React Playground?
New React Playground fits situations like: an agent in this TanStack AI monorepo needs a playground app to try a new feature; tasks that involve Monorepo tooling.
How do I install New React Playground in Claude Code?
Run `npx skills add TanStack/ai --skill new-react-playground -a claude-code`. Or copy the skill folder (.grok/skills/new-react-playground in TanStack/ai) into .claude/skills/new-react-playground in your project. Claude Code loads it when a task matches its description.
How do I install New React Playground in Codex?
Run `npx skills add TanStack/ai --skill new-react-playground -a codex`. Or copy the skill folder (.grok/skills/new-react-playground in TanStack/ai) into .agents/skills/new-react-playground in your project. Codex loads it when a task matches its description.
Can I use New React Playground 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 TanStack/ai --skill new-react-playground -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/new-react-playground, .gemini/skills/new-react-playground, .github/skills/new-react-playground and .opencode/skills/new-react-playground in your project.
What does New React Playground need to run?
Going by SKILL.md and its folder, New React Playground needs the command-line tools its instructions call (pnpm).
Does New React Playground 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 New React Playground safe to install?
Our automated static check of SKILL.md found notes only (mentions a .env file), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.
What licence does New React Playground use?
New React Playground is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does New React Playground use?
About 266 tokens (SKILL.md is roughly 1.1k 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 New React Playground?
Skills that share tags, products or a category with New React Playground: Pnpm Engine (teambit/bit, 18k stars), Electron Multi-Process Architecture (iOfficeAI/AionUi, 33k stars), @pierre/diffs Code Rendering (pierrecomputer/pierre, 6.2k stars) and Link Workspace Packages (nomcopter/react-mosaic, 4.8k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains New React Playground?
TanStack (a GitHub organization) maintains it in TanStack/ai, which has 3,169 GitHub stars. The repository holds 24 skills in this directory. The repository was last updated on October 7, 2026.
Source: TanStack/ai on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.