Using Storybook
Asvarox/allkaraoke
Conventions for this project's Storybook — how stories are filed under Foundations / Components / Game, and the rule that any change to the design language must be reflected in the using-tailwind…
Invoke FIRST, before creating, editing, or deleting components, stories, styles, CSS, themes, colors, or design tokens — anything that changes how the UI looks, no exceptions.
Install Stories
$ npx skills add sanity-io/sanity --skill stories -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install sanity-io/sanity stories --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/sanity-io/sanity.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/stories .claude/skills/stories && 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 "stories" agent skill from https://github.com/sanity-io/sanity/tree/main/.agents/skills/stories into .claude/skills/stories/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "stories", 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/sanity-io/sanity/tree/main/.agents/skills/storiesType 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 sanity-io/sanity --skill stories -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install sanity-io/sanity stories --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/sanity-io/sanity.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/stories .agents/skills/stories && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "stories" agent skill from https://github.com/sanity-io/sanity/tree/main/.agents/skills/stories into .agents/skills/stories/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "stories", 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 sanity-io/sanity --skill stories -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install sanity-io/sanity stories --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/sanity-io/sanity.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/stories .cursor/skills/stories && 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 "stories" agent skill from https://github.com/sanity-io/sanity/tree/main/.agents/skills/stories into .cursor/skills/stories/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "stories", 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/sanity-io/sanity.git --path .agents/skills/stories--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 sanity-io/sanity --skill stories -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install sanity-io/sanity stories --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/sanity-io/sanity.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/stories .gemini/skills/stories && 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 "stories" agent skill from https://github.com/sanity-io/sanity/tree/main/.agents/skills/stories into .gemini/skills/stories/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "stories", 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 sanity-io/sanity storiesInstalls 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 sanity-io/sanity --skill stories -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/sanity-io/sanity.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/stories .github/skills/stories && 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 "stories" agent skill from https://github.com/sanity-io/sanity/tree/main/.agents/skills/stories into .github/skills/stories/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "stories", 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 sanity-io/sanity --skill stories -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install sanity-io/sanity stories --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/sanity-io/sanity.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/stories .opencode/skills/stories && 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 "stories" agent skill from https://github.com/sanity-io/sanity/tree/main/.agents/skills/stories into .opencode/skills/stories/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "stories", 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
stories- GitHub stars
- 6.4k
- Token cost
- ~621 tokens
- SKILL.md length
- 315 words
- Files
- 1
- Skills in repo
- 34
- Repo updated
- First seen
- Licence
- MIT
At a glance
Invoke FIRST, before creating, editing, or deleting components, stories, styles, CSS, themes, colors, or design tokens — anything that changes how the UI looks, no exceptions.
- Works in 3 steps: Storybook must be installed in the… → Storybook must be at least 10.5 (or next… → Ensure @storybook/addon-mcp is…
- Tasks that involve Design tokens
- Calls npx
What it does
Stories is an agent skill from sanity-io/sanity, published by the product's own GitHub organization. Invoke FIRST, before creating, editing, or deleting components, stories, styles, CSS, themes, colors, or design tokens — anything that changes how the UI looks, no exceptions. Also for starting or previewing Storybook to verify UI, requests to show, browse, or list components, stories, or UI states, and docs, props, or usage lookups.
Its SKILL.md is about 620 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 Frontend & Design, covering Design tokens. It works with Storybook. The repository describes itself as: Sanity Studio – Rapidly configure content workspaces powered by structured content. The licence is MIT.
When your agent uses it
- Tasks that involve Design tokens
Example prompts
- “/stories”
Requirements
- Node.js
Workflow steps
3 steps, taken from the first numbered list in SKILL.md.
- Storybook must be installed in the project. Invoke the /storybook-init skill to set up Storybook, but only if the user explicitly invoked…
- Storybook must be at least 10.5 (or next while 10.5 is not yet released). Invoke the /storybook-upgrade skill to upgrade it, but only if…
- Ensure @storybook/addon-mcp is installed. If it is missing, install it with npx storybook add @storybook/addon-mcp.
What it can do on your machine
Read from SKILL.md and the folder at commit efa15fb. 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:
npx
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use 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
Stories loads about 621 tokens when it runs. Until then it costs about 86 tokens; SKILL.md has 315 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 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 sanity-io/sanity at commit efa15fb, republished under its MIT licence (© sanity-io). 315 words, ~621 tokens.
Download SKILL.mdSave it as
.claude/skills/stories/SKILL.md (or your agent's skills folder).- name
- stories
- description
- Invoke FIRST, before creating, editing, or deleting components, stories, styles, CSS, themes, colors, or design tokens — anything that changes how the UI looks, no exceptions. Also for starting or previewing Storybook to verify UI, requests to show, browse, or list components, stories, or UI states, and docs, props, or usage lookups.
Prerequisites:
- Storybook must be installed in the project. Invoke the
/storybook-initskill to set up Storybook, but only if the user explicitly invoked this skill and approves a Storybook installation. - Storybook must be at least 10.5 (or
nextwhile 10.5 is not yet released). Invoke the/storybook-upgradeskill to upgrade it, but only if the user explicitly approved a Storybook upgrade. - Ensure
@storybook/addon-mcpis installed. If it is missing, install it withnpx storybook add @storybook/addon-mcp.
Run the Storybook dev server and every storybook ai command from the same working directory: the package where Storybook is installed (in a monorepo often a leaf package such as packages/ui).
Run STORYBOOK_FEATURE_AI_CLI=1 npx storybook ai --help and read the output in its entirety to get the mandatory, ordered workflow for working on UI changes, writing stories, and keeping stories in sync with every frontend component you create, modify, or delete. This workflow explains how to write stories, preview stories, and display a curated Storybook review.
Before invoking any storybook ai command for the first time in a session, run STORYBOOK_FEATURE_AI_CLI=1 npx storybook ai <command> --help and read it fully. The top-level help only lists the commands; each command's payload shape and usage rules (which fields to include when) live in its own help output. Never guess a --json payload from the command name — a validation error only reports missing required fields, not the optional fields the workflow expects you to provide.
Some commands require a running Storybook dev server. When Claude preview tooling is available, start the dev server through that tooling:
- Ensure there is a Storybook launch entry in
.claude/launch.json(thepreview_starttool description documents the file format) withautoPort: trueandport: 6006. Use the project's preferred package manager and existingpackage.jsonStorybook script instead of inventing a new command whenever possible. - Start the Storybook launch entry with the
preview_starttool.
© sanity-io, 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 .agents/skills/stories of sanity-io/sanity.
Open the folder on GitHubat commit efa15fb
Used in 1 other repository
We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders. This page covers the copy in sanity-io/sanity, which our catalogue first saw on October 7, 2026.
Compare with similar skills
Stories 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 |
|---|---|---|---|---|---|---|
| Stories this skillsanity-io/sanity | 6.4k | — | ~621 | Automated safety check: Pass | MIT | |
| Using StorybookAsvarox/allkaraoke | 261 | — | ~412 | Automated safety check: Pass | None | |
| Design SystemsMindrally/skills | 271 | — | ~1.8k | Automated safety check: Pass | Apache-2.0 | |
| Writing UI ComponentsPostHog/posthog | 40k | — | ~4.1k | Automated safety check: Pass | Custom licence | |
| Design Systemrampstackco/claude-skills | 945 | — | ~2.4k | Automated safety check: Pass | MIT | |
| Composer UIdxos/dxos | 526 | — | ~9.3k | Automated safety check: Pass | Custom licence |
Similar skills
Design Systems
Mindrally/skills
Comprehensive design system guidelines for building consistent, accessible, and scalable component libraries.
- Official
Writing UI Components
PostHog/posthog
Structure and abstraction rules for PostHog UI code — any React component or frontend file under frontend/src/ or products//frontend/.
Design System
rampstackco/claude-skills
Build or audit a design system including component library, design tokens, naming conventions, contribution model, and documentation.
Composer UI
dxos/dxos
A skill your agent uses when building or styling plugin UI with Composer's design system — the @dxos/react-ui packages.
Figma Design System Builder
warpdotdev/warp
Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.
More from sanity-io/sanity
All 34 skills in this repo- Official
Playwright CLI
sanity-io/sanity
Automates browser interactions for web testing, form filling, screenshots, and data extraction.
- Official
Find Skills
sanity-io/sanity
Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities.
- Official
Vercel React Best Practices
sanity-io/sanity
React and Next.js performance optimization guidelines from Vercel Engineering.
- Official
Before And After
sanity-io/sanity
Add existing screenshots or screen recordings to a GitHub pull request as a before/after or preview block.
- Official
React Devtools
sanity-io/sanity
React DevTools CLI for AI agents. An agent skill from sanity-io/sanity.
- Official
TDD
sanity-io/sanity
Test-driven development with red-green-refactor loop. An agent skill from sanity-io/sanity.
Related
Works with
Categories
Questions about Stories
What does Stories do?
Invoke FIRST, before creating, editing, or deleting components, stories, styles, CSS, themes, colors, or design tokens — anything that changes how the UI looks, no exceptions. Stories is an agent skill from sanity-io/sanity, published by the product's own GitHub organization. Invoke FIRST, before creating, editing, or deleting components, stories, styles, CSS, themes, colors, or design tokens — anything that changes how the UI looks, no exceptions.
When should I use Stories?
Stories fits situations like: tasks that involve Design tokens.
How do I install Stories in Claude Code?
Run `npx skills add sanity-io/sanity --skill stories -a claude-code`. Or copy the skill folder (.agents/skills/stories in sanity-io/sanity) into .claude/skills/stories in your project. Claude Code loads it when a task matches its description.
How do I install Stories in Codex?
Run `npx skills add sanity-io/sanity --skill stories -a codex`. Or copy the skill folder (.agents/skills/stories in sanity-io/sanity) into .agents/skills/stories in your project. Codex loads it when a task matches its description.
Can I use Stories 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 sanity-io/sanity --skill stories -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/stories, .gemini/skills/stories, .github/skills/stories and .opencode/skills/stories in your project.
What does Stories need to run?
Going by SKILL.md and its folder, Stories needs the command-line tools its instructions call (npx). Our summary lists: Node.js.
Does Stories access the network?
SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Stories 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 Stories use?
Stories 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 Stories use?
About 621 tokens (SKILL.md is roughly 2.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 Stories?
Skills that share tags, products or a category with Stories: Using Storybook (Asvarox/allkaraoke, 261 stars), Design Systems (Mindrally/skills, 271 stars), Writing UI Components (PostHog/posthog, 40k stars) and Design System (rampstackco/claude-skills, 945 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Stories?
sanity-io (a GitHub organization, an official publisher) maintains it in sanity-io/sanity, which has 6,352 GitHub stars. The repository holds 34 skills in this directory. The repository was last updated on October 9, 2026.
Source: sanity-io/sanity on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.