Developer tool
Storybook agent skills for Claude Code, Codex and other agents.
- skills
- 106
- official
- 12
- Type
- Developer tool
- Website
- storybook.js.org
- Official GitHub
- storybookjs
Storybook skills, ranked
Ranked by score. Sort bymost stars,trending,newest,recently updated
Official (12 skills)
| # | Skill | Repository | Stars | Used in | Tokens | Auto-check | Licence | Updated |
|---|---|---|---|---|---|---|---|---|
| 1 | Inspect and profile the React component tree of a running Storybook story through chrome-devtools-mcp (React DevTools over the Chrome DevTools Protocol, via react-devtools-cdt-mcp). | sanity-io/ | 176 | — | ~2k | Automated safety check: Pass | MIT | today |
| 2 | Locate and modify TypeScript configuration in RedisInsight. An agent skill from redis/RedisInsight. | redis/ | 8.9k | — | ~1.3k | Automated safety check: Pass | Unknown | 2 days ago |
| 3 | Write Storybook stories for PostHog UI components. An agent skill from PostHog/code. | PostHog/ | 179 | — | ~929 | Automated safety check: Pass | MIT | 2 mo ago |
| 4 | Add, review, and maintain Chromatic visual regression coverage in the Sanity monorepo via dev/storybook stories, the vitest browser-mode suite, and Playwright e2e snapshots. | sanity-io/ | 6.4k | — | ~3.4k | Automated safety check: Pass | MIT | today |
| 5 | 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. | sanity-io/ | 6.4k | — | ~621 | Automated safety check: Pass | MIT | today |
| 6 | A skill your agent uses when adding Storybook to a project that does not have Storybook configured yet. | sanity-io/ | 6.4k | — | ~150 | Automated safety check: Pass | MIT | today |
| 7 | A skill your agent uses when Storybook is already installed and the user wants a working preview file and stories for real components. | sanity-io/ | 6.4k | — | ~155 | Automated safety check: Pass | MIT | today |
| 8 | Create a React component using the Container/Presentation pattern in src/components by asking for the component name and type (ui or features), then scaffold files that follow this repository's… | github/ | 40k | — | ~1k | Automated safety check: Pass | MIT | today |
| 9 | A skill your agent uses when Storybook exists but needs an upgrade. | sanity-io/ | 6.4k | — | ~111 | Automated safety check: Pass | MIT | today |
| 10 | A skill your agent uses when writing a Storybook story for a component gated on a feature flag — boolean flags or multivariate/experiment-arm variants. | PostHog/ | 721 | — | ~1.1k | Automated safety check: Pass | MIT | today |
| 11 | Structure and abstraction rules for PostHog UI code — any React component or frontend file under frontend/src/ or products//frontend/. | PostHog/ | 721 | — | ~4k | Automated safety check: Pass | MIT | today |
| 12 | Inspects PostHog Visual Review (VR) runs that gate PR merges with screenshot regression checks. | PostHog/ | 721 | — | ~9.1k | Automated safety check: Pass | MIT | today |
Community
| # | Skill | Repository | Stars | Used in | Tokens | Auto-check | Licence | Updated |
|---|---|---|---|---|---|---|---|---|
| 13 | Multi-style illustrations from Chinese article text (配图 / illustration): quirky sketch, warm storybook, product proposal; OR custom IP enrollment (自定义 IP / 录入 IP / 上传形象 / 新建 IP). | GiMi-Xiaomi/ | 701 | — | ~1.7k | Automated safety check: Pass | MIT | 2 mo ago |
| 14 | Frontend development guidelines for the Phoenix AI observability platform. | Arize-ai/ | 12k | — | ~709 | Automated safety check: Pass | Unknown | today |
| 15 | 15.Review PR Review blade PRs by fetching diff, checking CI status, and getting Storybook URL. | razorpay/ | 656 | — | ~1.1k | Automated safety check: Pass | MIT | today |
| 16 | Use when writing or changing Vitest or React Testing Library tests under `web/` or `packages/dify-ui/`, or when the user explicitly requests… | langgenius/ | 158k | — | ~242 | Automated safety check: Pass | Unknown | today |
| 17 | 17.Hand Drawn A skill your agent uses when users ask for a hand-drawn or illustrated image prompt, name one of the repository's 18 numbered styles or the 3.1 stable variant, or mention triggers such as… | threerocks/ | 1.4k | — | ~234 | Automated safety check: Pass | MIT | 1 mo ago |
| 18 | Builds Social Income's monthly newsletter HTML (website/emails/newsletter/YYYY-MM-newsletter.html) from the latest entry in the "Proofreading" tab of the Monthly Updates Google Doc. | socialincome-san/ | 159 | — | ~2.6k | Automated safety check: Pass | Unknown | today |
| 19 | 19.Clean Vm Safely clean the local loop VM by reporting and removing stale loop runs, inactive Next.js or Storybook servers, optional browser windows, and unused loop-created worktrees without disturbing active… | axeldelafosse/ | 281 | — | ~906 | Automated safety check: Pass | MIT | 6 mo ago |
| 20 | Check the visual impact of an edit mid-task with uiverify check — render just the components you're touching on the UI Verify fleet and diff them against the real CI baseline, without opening a PR… | igrlk/ | 154 | 1 repo | ~1.4k | Automated safety check: Pass | MIT | 23 days ago |
| 21 | Audit ported storybook-rsbuild source files against the CURRENT upstream Storybook source, grouped by the local package that owns each port, independent of commit history. | rstackjs/ | 156 | — | ~2.5k | Automated safety check: Pass | MIT | 7 days ago |
| 22 | Conventions for creating, modifying, and reviewing production-faithful Storybook stories in the Phoenix frontend (js/app/stories, js/app/.storybook). | Arize-ai/ | 12k | — | ~1.9k | Automated safety check: Pass | Unknown | today |
| 23 | Qovery Console coding standards, architecture guidelines, naming conventions, testing practices, and development workflows. | Qovery/ | 227 | — | ~924 | Automated safety check: Pass | MIT | yesterday |
| 24 | Author economical visual tests — full visual coverage in the fewest billable snapshots. | igrlk/ | 154 | 1 repo | ~1.1k | Automated safety check: Pass | MIT | 23 days ago |
| 25 | Build, run, and drive the Umbraco.UI (UUI) web-component library via its Storybook. | umbraco/ | 152 | — | ~1.2k | Automated safety check: Pass | MIT | yesterday |
| 26 | Implements user interfaces using the Wonder Blocks (WB) design system — Khan Academy's React component library. | Khan/ | 163 | — | ~3.2k | Automated safety check: Pass | MIT | today |
| 27 | 27.Daleui Use the daleui React design system with semantic Panda CSS tokens and accessible components. | DaleStudy/ | 119 | — | ~675 | Automated safety check: Pass | MIT | yesterday |
| 28 | Create StoryLite component stories in consumer projects that use StoryLite public packages, explaining StoryLite's CSF-like story format with examples from single-story files to advanced args… | itsjavi/ | 143 | — | ~1.4k | Automated safety check: Pass | MIT | 12 days ago |
| 29 | Check and analyze upstream Storybook repository changes that may need to be synced to storybook-rsbuild. | rstackjs/ | 156 | — | ~5.2k | Automated safety check: Pass | MIT | 7 days ago |
| 30 | 30.Qovery UI Design review and implementation guidance for the Qovery Console. | Qovery/ | 227 | — | ~2k | Automated safety check: Pass | GPL-3.0 | yesterday |
| 31 | Creates a new UI component with implementation, index, tests, and Storybook stories following PageZERO conventions. | pagezero-dev/ | 143 | — | ~896 | Automated safety check: Pass | MIT | 6 days ago |
| 32 | 32.Storybook Storybook best practices for Wonder Blocks component stories. | Khan/ | 163 | — | ~4.2k | Automated safety check: Pass | MIT | today |
| 33 | Checks deps update in widely consumed repos will cause problems or not, and ranks dependency updates by downstream impact for prioritisation. | cultureamp/ | 176 | — | ~1.3k | Automated safety check: Pass | MIT | yesterday |
| 34 | Final step of the AI Storybook pipeline. An agent skill from hassancs91/claude-image-generation. | hassancs91/ | 100 | — | ~1.7k | Automated safety check: Pass | MIT | 1 mo ago |
| 35 | Update component documentation when code changes. An agent skill from AgnosticUI/agnosticui. | AgnosticUI/ | 826 | — | ~607 | Automated safety check: Pass | Apache-2.0 | 3 mo ago |
| 36 | 36.UI Component A skill your agent uses when creating new UI components under apps/web/src/components/ | hiroppy/ | 418 | — | ~832 | Automated safety check: Pass | MIT | today |
| 37 | Write or update Storybook stories and docs MDX for a Radix NG primitive following project conventions. | radix-ng/ | 274 | — | ~3.7k | Automated safety check: Pass | MIT | 8 days ago |
| 38 | Diff the Figma component library against the MQTT Viewer frontend and produce a handover doc listing exactly what code needs to change. | mqtt-viewer/ | 133 | — | ~990 | Automated safety check: Pass | GPL-3.0 | today |
| 39 | コンポーネントを新規作成・更新する。CSS、HTML、Storybook Stories、テスト、JavaScript（Custom Elements）の実装を含む。 | digital-go-jp/ | 112 | — | ~7.3k | Automated safety check: Pass | MIT | 28 days ago |
| 40 | A skill your agent uses when creating a new component for the design system. | LucasBassetti/ | 129 | — | ~2.1k | Automated safety check: Pass | MIT | 3 days ago |
| 41 | Make Storybook stories deterministic for UI Verify so captures stop coming back "changed" without a real change (flaky diffs). | igrlk/ | 154 | — | ~1.9k | Automated safety check: Pass | MIT | 23 days ago |
| 42 | Extract and compare computed CSS styles between a baseline URL and a dev/Storybook URL using Playwright MCP evaluate calls. | bitovi/ | 121 | — | ~2.4k | Automated safety check: Pass | MIT | 26 days ago |
| 43 | Review a BEEQ StencilJS component against design system guidelines and project standards. | Endava/ | 163 | — | ~1.7k | Automated safety check: Pass | Apache-2.0 | yesterday |
| 44 | Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. | alirezarezvani/ | 28k | 5 repos | ~3.9k | Automated safety check: Pass | MIT | 1 mo ago |
| 45 | Read before changing any component, page, or styles. An agent skill from igrlk/storybook-addon-test-codegen. | igrlk/ | 154 | 1 repo | ~493 | Automated safety check: Pass | MIT | 23 days ago |
| 46 | Create new core components for GodUI (@godui/components) — animated, drop-in replacements for shadcn/ui with strict GPU-only motion. | LucasBassetti/ | 129 | — | ~7.4k | Automated safety check: Pass | MIT | 3 days ago |
| 47 | Splits a plain English story into a numbered list of SCENES — each scene being one moment that gets exactly one illustration AND one narration clip downstream. | hassancs91/ | 100 | — | ~2.3k | Automated safety check: Pass | MIT | 1 mo ago |
| 48 | Write Storybook stories and MDX docs for BEEQ web components. | Endava/ | 163 | — | ~968 | Automated safety check: Pass | Apache-2.0 | yesterday |
Questions, answered from the data.
What is the best Storybook skill?
React Devtools MCP (official) from sanity-io/ui ranks first of the 106 Storybook skills listed here, with the highest score: its repository has 176 GitHub stars, its SKILL.md loads about 2k tokens and it passes the automated safety check with no findings. Next come Tsconfigs and Storybook Stories.
Is there an official Storybook skill?
12 of the 106 Storybook skills are official, published by the vendor's own GitHub organization: React Devtools MCP, Tsconfigs, Storybook Stories, Sanity Visual Regression, Stories and 7 more.
How are these skills ranked?
By Skill Navigator score, which combines the GitHub stars of the skill's repository (shared across that repo's skills and discounted for large collections), how many other GitHub owners carry a copy of the skill, and automated SKILL.md quality checks, minus penalties for safety-check warnings and for each further skill from the same repository. Skills that fail the safety check are not listed.