New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Add Example Tutorial

by TanStack in TanStack/ai

A skill your agent uses when adding a public teaching example or a docs tutorial.

MITAuto-check passed

Install Add Example Tutorial

skills CLI
$ npx skills add TanStack/ai --skill add-example-tutorial -a claude-code

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

GitHub CLI
$ gh skill install TanStack/ai add-example-tutorial --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/TanStack/ai.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.grok/skills/add-example-tutorial .claude/skills/add-example-tutorial && 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/

Facts

Skill name
add-example-tutorial
GitHub stars
3.2k
Token cost
~1.4k tokens
SKILL.md length
657 words
Files
1
Skills in repo
24
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when adding a public teaching example or a docs tutorial.

  • Works in 4 steps: Shape the app → File layout → Tutorial page → …
  • Adding a public teaching example
  • SKILL.md covers End state, 1. Shape the app, 2. File layout and 3. Tutorial page, plus 3 more sections
  • Calls gh, pnpm and npx

What it does

Add Example Tutorial is an agent skill from TanStack/ai. Use when adding a public teaching example or a docs tutorial. Don't use for an internal Nx playground (that is new-react-playground), for a package API change with no walkthrough, or for a docs-only copy edit.

Its SKILL.md is about 1.4k 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 and TanStack. 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

  • Adding a public teaching example
  • A docs tutorial
  • An internal Nx playground (that is new-react-playground)
  • For a package API change with no walkthrough

Example prompts

  • “/add-example-tutorial”

Requirements

  • Node.js

Workflow steps

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

  1. Shape the app
  2. File layout
  3. Tutorial page
  4. Nav and pointers

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:

    • gh
    • pnpm
    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use gh, pnpm and npx, 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

Add Example Tutorial loads about 1.4k tokens when it runs. Until then it costs about 58 tokens; SKILL.md has 657 words of instructions outside code blocks.

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

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 TanStack/ai at commit 5a41239, republished under its MIT licence (© TanStack). 657 words, ~1,369 tokens.

Download SKILL.mdSave it as .claude/skills/add-example-tutorial/SKILL.md (or your agent's skills folder).
name
add-example-tutorial
description
Use when adding a public teaching example or a docs tutorial. Don't use for an internal Nx playground (that is new-react-playground), for a package API change with no walkthrough, or for a docs-only copy edit.

Add Example Tutorial

Start from the Nx React app generator. Land at examples/react/<slug>/. Then slim the generated lab to the one scenario this tutorial teaches. examples/react/basic-chat and docs/tutorials/basic-chat.md show a finished public example. Do not copy that app. Use the generator as the starting tree.

Load docs, simple-english, and i-have-adhd before writing tutorial pages. Load pr-description before gh pr create and after an agent push on an open PR.

End state

  • App at examples/react/<slug>/ (not examples/<slug>/, not examples/ts-*).
  • pnpm-workspace.yaml includes examples/react/*.
  • Tutorial at docs/tutorials/<slug>.md on "tab": "tutorial".
  • Examples tab child framework/react/examples/<slug> in docs/config.json.
  • Overview / Quick Start (and any recipe) point at the tutorial.
  • GitHub link at the bottom: https://github.com/TanStack/ai/tree/main/examples/react/<slug>.
  • Live sandbox comment on the tutorial page.
  • One PR on this repo.

1. Shape the app

  1. Pick a kebab-case slug.
  2. From the repo root: pnpm nx g @tanstack/workspace-plugin:react-app <slug>. The files land at examples/react/<slug>/.
  3. Slim the generated lab to this tutorial. One adapter. Keep workspace:* for @tanstack/ai* deps. Do not add @tanstack/ai-client (framework packages re-export the client and /byok).
  4. Inline the model id. Read the adapter's current chat model list and pass the latest flagship id as a string literal into the adapter factory. Do not add a model const, a chat-model.ts, a handle-chat-post.ts, or any other one-off helper for the model or the POST body. The route file owns chat().

Do not commit the unused generator extras (every adapter, PKCE, model picker, thinking UI) unless this tutorial teaches them.

2. File layout

Match Basic Chat only for the Start routes folder:

  • src/routes/index.tsx is the page.
  • src/routes/api.chat.ts is the server route (next to index.tsx). Start maps api.chat.ts to /api/chat.
  • tsconfig.json is self-contained (Start-style). Do not extend the repo root.

Add other files only when this tutorial needs them (a key form, a tool, a store). Many examples will not use BYOK. Do not add BYOK files by default.

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

3. Tutorial page

Load docs. Run its persona and tone gates unless this conversation already chose them.

Open with the problem the reader has, why it matters, and how this tutorial solves it (one short block). Then walk through steps. Each step teaches one piece of that solution and says why that piece exists.

Typical shape (adapt to the scenario; do not force BYOK):

  1. Create a Start app (npx @tanstack/cli@latest create) and install with package-manager tabs. React-only line, no @tanstack/ai-client: react: @tanstack/ai @tanstack/ai-react @tanstack/ai-<adapter>.
  2. Client vs server: what each side is for in this scenario.
  3. Client pieces, one step each, each with why.
  4. Server pieces, one step each, each with why. Put the route at src/routes/api.chat.ts and say that.

Put the sandbox comment and the GitHub link on the page (see End state). Do not add a numbered "try it" step that only repeats those.

Sandbox comment:

html
<!-- ::client-example library=ai framework=react slug=<slug> -->

Do not mention Nx, generators, or PRs in the tutorial. Code on the page must match the example files.

Install tabs: <!-- ::start:tabs variant="package-manager" mode="install" -->. See the docs skill.

4. Nav and pointers

docs/config.json:

  • Tutorials section "tab": "tutorial", child tutorials/<slug>.
  • Examples section "tab": "examples", child framework/react/examples/<slug>.

Point Overview and Quick Start at the tutorial. Cross-link any recipe that covers the same UI.

examples/README.md: list the new example.

PRs

  • Do not add tests under the example app.
  • Do not commit docs/superpowers/, plans, screenshots, or .agent/.
  • Example-only / docs: no changeset unless a published package changed.
  • Conventional commit. No Co-authored-by.
  • Fill the PR template honestly. Do not tick test:pr if it was not run.

Common mistakes

MistakeFix
Copy Basic Chat file-for-fileGenerate, then slim to this scenario
Generate under examples/<slug>The generator writes examples/react/<slug>/
Model const or extra handler fileInline the latest model id in the route
BYOK files on a tutorial that does not need keysSkip them
Tutorial is only commands and codeProblem, why, how, then each step as one piece
Skip nav or the sandbox commentAdd the Examples tab child and the ::client-example comment
tsconfig.json extends ../../../tsconfig.jsonKeep a self-contained Start-style tsconfig in the example

© 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/add-example-tutorial of TanStack/ai.

Open the folder on GitHubat commit 5a41239

Compare with similar skills

Add Example Tutorial 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.

Add Example Tutorial compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Add Example Tutorial this skillTanStack/ai3.2k—~1.4kAutomated safety check: PassMIT
Game Changing FeaturesopenstatusHQ/data-table-filters2.3k3 repos~2.1kAutomated safety check: PassMIT
React Frontend Development Guidelinesdiet103/claude-code-infrastructure-showcase10k2 repos~2.9kAutomated safety check: PassMIT
Wagmi Feature Developmentwevm/wagmi6.8k—~3.8kAutomated safety check: PassMIT
Tanstack Query Best PracticesDeckardGer/tanstack-agent-skills2221 repos~1.2kAutomated safety check: PassMIT
Frontend Code Reviewlangflow-ai/langflow156k—~1.6kAutomated safety check: PassMIT

Similar skills

  • Game Changing Features

    openstatusHQ/data-table-filters

    Find 10x product opportunities and high-leverage improvements.

    2.3k GitHub starsUsed in 3 repos~2.1k tokens
    Product & Project ManagementAuto-check passed

  • React Frontend Development Guidelines

    diet103/claude-code-infrastructure-showcase

    Guidelines for React 18 and TypeScript apps covering Suspense data fetching, lazy loading, feature folders, MUI v7 styling, TanStack Router and performance.

    10k GitHub starsUsed in 2 repos~2.9k tokens
    Frontend & DesignAuto-check passed

  • 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.

    6.8k GitHub stars~3.8k tokensUpdated 5 days ago
    DevelopmentAuto-check passed

  • Tanstack Query Best Practices

    DeckardGer/tanstack-agent-skills

    TanStack Query (React Query) best practices for data fetching, caching, mutations, and server state management.

    222 GitHub starsUsed in 1 repo~1.2k tokens
    Backend & APIsAuto-check passed

  • Frontend Code Review

    langflow-ai/langflow

    Review frontend code (.tsx, .ts, .js files) for quality, performance, and correctness against Langflow's frontend conventions.

    156k GitHub stars~1.6k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Morphous Catalog

    Ameyanagi/morphos

    Create or refresh Morphous website design-system/theme bundles from animal, insect, plant, landscape, mineral, weather, or other nature motifs.

    102 GitHub stars~2.1k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

More from TanStack/ai

All 24 skills in this repo

  • I 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.

    3.2k GitHub starsUsed in 5 repos~1.8k tokens
    Auto-check passed

  • 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…

    3.2k GitHub stars~4.6k tokensUpdated today
    Auto-check passed

  • 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).

    3.2k GitHub starsUsed in 1 repo~457 tokens
    Auto-check passed

  • 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…

    3.2k GitHub starsUsed in 1 repo~448 tokens
    Auto-check passed

  • 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…

    3.2k GitHub starsUsed in 1 repo~840 tokens
    Auto-check passed

  • AI Persistence

    TanStack/ai

    Durability and state persistence for TanStack AI chats with @tanstack/ai-persistence.

    3.2k GitHub stars~3.3k tokensUpdated today
    Auto-check passed

Works with

Questions about Add Example Tutorial

What does Add Example Tutorial do?

A skill your agent uses when adding a public teaching example or a docs tutorial. Add Example Tutorial is an agent skill from TanStack/ai. Use when adding a public teaching example or a docs tutorial.

When should I use Add Example Tutorial?

Add Example Tutorial fits situations like: adding a public teaching example; A docs tutorial; an internal Nx playground (that is new-react-playground); for a package API change with no walkthrough.

How do I install Add Example Tutorial in Claude Code?

Run `npx skills add TanStack/ai --skill add-example-tutorial -a claude-code`. Or copy the skill folder (.grok/skills/add-example-tutorial in TanStack/ai) into .claude/skills/add-example-tutorial in your project. Claude Code loads it when a task matches its description.

How do I install Add Example Tutorial in Codex?

Run `npx skills add TanStack/ai --skill add-example-tutorial -a codex`. Or copy the skill folder (.grok/skills/add-example-tutorial in TanStack/ai) into .agents/skills/add-example-tutorial in your project. Codex loads it when a task matches its description.

Can I use Add Example Tutorial 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 add-example-tutorial -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/add-example-tutorial, .gemini/skills/add-example-tutorial, .github/skills/add-example-tutorial and .opencode/skills/add-example-tutorial in your project.

What does Add Example Tutorial need to run?

Going by SKILL.md and its folder, Add Example Tutorial needs the command-line tools its instructions call (gh, pnpm and npx). Our summary lists: Node.js.

Does Add Example Tutorial access the network?

SKILL.md contains no URLs. Its commands use gh and npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Add Example Tutorial 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 Add Example Tutorial use?

Add Example Tutorial 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 Add Example Tutorial use?

About 1.4k tokens (SKILL.md is roughly 5.5k 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 Add Example Tutorial?

Skills that share tags, products or a category with Add Example Tutorial: Game Changing Features (openstatusHQ/data-table-filters, 2.3k stars), React Frontend Development Guidelines (diet103/claude-code-infrastructure-showcase, 10k stars), Wagmi Feature Development (wevm/wagmi, 6.8k stars) and Tanstack Query Best Practices (DeckardGer/tanstack-agent-skills, 222 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Add Example Tutorial?

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.