New: 98,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

Official agent skill

Storybook Stories

by PostHog in PostHog/code

Write Storybook stories for PostHog UI components. An agent skill from PostHog/code.

OfficialMITAuto-check passedFrontend & Design

Install Storybook Stories

skills CLI
$ npx skills add PostHog/code --skill storybook-stories -a claude-code

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

GitHub CLI
$ gh skill install PostHog/code storybook-stories --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/PostHog/code.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/storybook-stories .claude/skills/storybook-stories && 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
storybook-stories
GitHub stars
179
Token cost
~929 tokens
SKILL.md length
346 words
Files
1
Skills in repo
10
Repo updated
First seen
Licence
MIT

At a glance

Write Storybook stories for PostHog UI components. An agent skill from PostHog/code.

  • Fixing a .stories.tsx file under packages/ui
  • SKILL.md covers Every story is already wrapped…, The gotcha: data never arrives…, The fix: split a pure… and Conventions
  • Calls pnpm
  • Tasks that involve gRPC and Protobuf

What it does

Storybook Stories is an agent skill from PostHog/code, published by the product's own GitHub organization. Write Storybook stories for PostHog UI components. Covers the provider stack stories run inside, the key gotcha that tRPC/useHostTRPC queries never resolve in Storybook (so data-fetching components render empty), and the pure-presentational split that makes a component storyable. Use when adding or fixing a .stories.tsx file under packages/ui.

Its SKILL.md is about 930 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 gRPC and Protobuf and React components. It works with Storybook, PostHog and tRPC. The repository describes itself as: The era of self-driving development is here. The licence is MIT.

When your agent uses it

  • Fixing a .stories.tsx file under packages/ui
  • Tasks that involve gRPC and Protobuf
  • Tasks that involve React components

Example prompts

  • “/storybook-stories”

What it can do on your machine

Read from SKILL.md and the folder at commit a4c32df. 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

Storybook Stories loads about 929 tokens when it runs. Until then it costs about 91 tokens; SKILL.md has 346 words of instructions outside code blocks.

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

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 PostHog/code at commit a4c32df, republished under its MIT licence (© PostHog). 346 words, ~929 tokens.

Download SKILL.mdSave it as .claude/skills/storybook-stories/SKILL.md (or your agent's skills folder).
name
storybook-stories
description
Write Storybook stories for PostHog UI components. Covers the provider stack stories run inside, the key gotcha that tRPC/useHostTRPC queries never resolve in Storybook (so data-fetching components render empty), and the pure-presentational split that makes a component storyable. Use when adding or fixing a *.stories.tsx file under packages/ui.

Storybook stories in PostHog

Stories live next to components as *.stories.tsx and are collected by apps/code/.storybook/main.ts (its glob includes packages/ui/src/**/*.stories.tsx). Run/build:

bash
pnpm --filter code storybook        # dev server on :6006
pnpm --filter code build-storybook  # static build (also a good CI/typecheck gate)

Every story is already wrapped (don't re-wrap)

apps/code/.storybook/preview.tsx applies two global decorators, so a story should not add its own providers or <Theme>:

  • withAppProviders — a QueryClient, the host tRPC context, a DI ServiceProvider, and a minimal TanStack Router. So useHostTRPC(), useService(), useRouterState(), etc. render instead of throwing "must be used within a Provider".
  • A <Theme> (Radix) bound to the dark/light toolbar global.

Add a per-story decorator only to constrain layout (e.g. wrap in a maxWidth div so a full-width component sizes realistically).

The gotcha: data never arrives in Storybook

This is the thing that wastes time. In withAppProviders the tRPC ipcLink is a no-op (apps/code/.storybook/mocks/electron-trpc.ts), so:

  • Any query issued through useHostTRPC() (and hooks built on it, like useClaudeCliSessions) stays pending forever — query.data is undefined, permanently.
  • useService(TOKEN) returns an inert proxy stub for anything not explicitly bound (service.foo().bar never throws, but calls are no-ops). Only a few tokens resolve for real: HOST_TRPC_CLIENT (a no-op client with a handful of stubbed methods), IMPERATIVE_QUERY_CLIENT, DIFF_WORKER_FACTORY.

So a component that fetches its own data renders its empty/loading branch in Storybook — frequently null. Storying it directly shows nothing.

The fix: split a pure presentational component

Separate the data/wiring from the rendering, and story the pure part — which also satisfies the repo rule "components render; hooks wrap exactly one query" (AGENTS.md). Keep both in the same file:

tsx
// Pure — takes data + handlers as props. This is what the story targets.
export function WidgetList({ items, onPick }: WidgetListProps) { … }

// Container — does the tRPC/useService wiring, renders <WidgetList/>.
export function Widget({ repoPath }: WidgetProps) {
  const { data } = useSomeQuery(repoPath);
  return <WidgetList items={data?.items ?? []} onPick={…} />;
}

Then each story is just args for WidgetList — one per visual state (empty, single, over-limit, in-flight/disabled, fallback text, …). Real example: packages/ui/src/features/task-detail/components/ContinueCliSessions.tsx + .stories.tsx.

Filtering/branching that lives in the container (not the pure view) isn't exercised by these visual stories — cover it with a small unit test if it's worth pinning.

Conventions

  • title groups in the sidebar, e.g. "Task Detail/ContinueCliSessions".
  • Build fixtures with a small factory (session(overrides)) rather than repeating object literals across stories.
  • Date.now()/new Date() are fine in stories, but fixed ISO strings keep relative-time output stable enough for visual review.
  • Typecheck covers stories (they're .tsx under the package); a build-storybook additionally catches Storybook-specific breakage.

© PostHog, 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 .claude/skills/storybook-stories of PostHog/code.

Open the folder on GitHubat commit a4c32df

Used in 2 other repositories

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

Compare with similar skills

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

Storybook Stories compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Storybook Stories this skillPostHog/code179—~929Automated safety check: PassMIT
Writing UI ComponentsPostHog/posthog40k—~4.1kAutomated safety check: PassCustom licence
Phoenix FrontendArize-ai/phoenix12k—~709Automated safety check: PassCustom licence
Fumadocsbetter-notify/better-notify313—~2.3kAutomated safety check: PassMIT
Wonder BlocksKhan/wonder-blocks163—~3.2kAutomated safety check: PassMIT
DaleuiDaleStudy/daleui119—~675Automated safety check: PassMIT

Similar skills

  • Writing UI Components

    PostHog/posthog

    Official

    Structure and abstraction rules for PostHog UI code — any React component or frontend file under frontend/src/ or products//frontend/.

    40k GitHub stars~4.1k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Phoenix Frontend

    Arize-ai/phoenix

    Frontend development guidelines for the Phoenix AI observability platform.

    12k GitHub stars~709 tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Fumadocs

    better-notify/better-notify

    A skill your agent uses when writing MDX documentation pages for a Fumadocs project — frontmatter, meta.json, page ordering, and fumadocs-ui React components available inside MDX content.

    313 GitHub stars~2.3k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

  • Wonder Blocks

    Khan/wonder-blocks

    Implements user interfaces using the Wonder Blocks (WB) design system — Khan Academy's React component library.

    163 GitHub stars~3.2k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Daleui

    DaleStudy/daleui

    Use the daleui React design system with semantic Panda CSS tokens and accessible components.

    119 GitHub stars~675 tokensUpdated 3 days ago
    Frontend & DesignAuto-check passed

  • Create Component

    pagezero-dev/pagezero

    Creates a new UI component with implementation, index, tests, and Storybook stories following PageZERO conventions.

    143 GitHub stars~896 tokensUpdated 10 days ago
    Frontend & DesignAuto-check passed

More from PostHog/code

All 10 skills in this repo

  • Canvas Templates

    PostHog/code

    Official

    How PostHog "canvas" dashboards work end-to-end — the two rendering tiers (json-render vs freeform React-in-iframe), the agent system prompts that steer each, and the RIGHT way to fetch PostHog data…

    179 GitHub stars~2.2k tokensUpdated 2 mo ago
    Auto-check passed

  • Dynamic Workflows

    PostHog/code

    Official

    How to write JavaScript workflow scripts for the workflow tool - fanning work out across many isolated subagents with agent(), parallel(), and pipeline(), then synthesizing one result.

    179 GitHub stars~2.3k tokensUpdated 2 mo ago
    Auto-check passed

  • MCP Servers

    PostHog/code

    Official

    Install, configure, authenticate, and troubleshoot MCP (Model Context Protocol) servers for this agent.

    179 GitHub stars~1.9k tokensUpdated 2 mo ago
    Auto-check passed

  • Merging PRs

    PostHog/code

    Official

    Merge a PR into main through the Trunk merge queue and babysit it until it lands.

    179 GitHub stars~1.3k tokensUpdated 2 mo ago
    Auto-check passed

  • Onboarding Videos

    PostHog/code

    Official

    Add, replace, and optimize the looping demo videos in the onboarding "welcome" bento grid (packages/ui/src/features/onboarding).

    179 GitHub stars~1.7k tokensUpdated 2 mo ago
    Auto-check passed

  • Quill Code

    PostHog/code

    Official

    Edit the @posthog/quill design system locally and consume the change in this repo (posthog-code) before it is published to npm.

    179 GitHub stars~1.1k tokensUpdated 2 mo ago
    Auto-check passed

Works with

Categories

Questions about Storybook Stories

What does Storybook Stories do?

Write Storybook stories for PostHog UI components. An agent skill from PostHog/code. Storybook Stories is an agent skill from PostHog/code, published by the product's own GitHub organization. Write Storybook stories for PostHog UI components.

When should I use Storybook Stories?

Storybook Stories fits situations like: fixing a .stories.tsx file under packages/ui; tasks that involve gRPC and Protobuf; tasks that involve React components.

How do I install Storybook Stories in Claude Code?

Run `npx skills add PostHog/code --skill storybook-stories -a claude-code`. Or copy the skill folder (.claude/skills/storybook-stories in PostHog/code) into .claude/skills/storybook-stories in your project. Claude Code loads it when a task matches its description.

How do I install Storybook Stories in Codex?

Run `npx skills add PostHog/code --skill storybook-stories -a codex`. Or copy the skill folder (.claude/skills/storybook-stories in PostHog/code) into .agents/skills/storybook-stories in your project. Codex loads it when a task matches its description.

Can I use Storybook 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 PostHog/code --skill storybook-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/storybook-stories, .gemini/skills/storybook-stories, .github/skills/storybook-stories and .opencode/skills/storybook-stories in your project.

What does Storybook Stories need to run?

Going by SKILL.md and its folder, Storybook Stories needs the command-line tools its instructions call (pnpm).

Does Storybook Stories 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 Storybook 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 Storybook Stories use?

Storybook 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 Storybook Stories use?

About 929 tokens (SKILL.md is roughly 3.7k 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 Storybook Stories?

Skills that share tags, products or a category with Storybook Stories: Writing UI Components (PostHog/posthog, 40k stars), Phoenix Frontend (Arize-ai/phoenix, 12k stars), Fumadocs (better-notify/better-notify, 313 stars) and Wonder Blocks (Khan/wonder-blocks, 163 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Storybook Stories?

PostHog (a GitHub organization, an official publisher) maintains it in PostHog/code, which has 179 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on August 5, 2026.

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