{"slug": "storybook-11-beta", "title": "Storybook 11 beta", "summary": "Storybook 11 beta ships official coding-agent skills, Claude and Codex plugins, and headless CLI tools so agents can pull component context, run Vitest-powered functional and accessibility tests, and prepare browser reviews, the Storybook team announced. The release includes a new `storybook tools` CLI command that delivers cold-start docgen results to agents roughly 10x faster than Storybook 10.x on large projects such as Chromatic, in a package 25% smaller, and upgrades the story format to fully type-safe CSF 4 with codemods for incremental migration while CSF 3 remains supported. Storybook said it continues to support MCP across all core frameworks but recommends skills as the more ergonomic local option because agents can fetch component context without a running Storybook instance.", "body_md": "# Storybook 11 beta\n\nAgent-ready design systems for React, Vue, Angular, Web Components, and Svelte\n\n[@mshilman](https://twitter.com/@mshilman)\n\nCoding agents can build UI quickly, but without context a lot of it is slop. Duplicate components. Wrong APIs. Missing states.\n\nStorybook 11 beta provides fundamental context for how your UI is composed. We're releasing official skills and headless CLI tools so that agents can automatically pull context, test UI, and present their work for your review.\n\nWhat's more, all of this comes in a 25% smaller package. We overhauled our architecture to deliver context up to 10x faster than Storybook 10.x on large projects.\n\n🌟 Official skills for coding agents\n\n🤖 Claude and Codex plugins\n\n🛠️ Headless CLI tools for your own workflows\n\n🏭 Type-safe stories\n\n📚 Agent-ready docgen for all core frameworks\n\n## Storybook skills\n\nSkills are the centerpiece of Storybook 11. The `ui-workflow` skill guides the agent through building UI with your components, writing stories, testing its work, and presenting it for human review.\n\n**Use your components.** The `component-docs` skill helps the agent find existing components and query their APIs, metadata, documentation, and code examples in a token-efficient format before it starts building.\n\n**Test.** With `storybook tools test run`, the agent runs functional and accessibility tests powered by Vitest. It can test specific stories or the entire project, inspect failures, fix its work, and rerun tests before handing it over.\n\n**Review.** The agent uses `storybook tools review create` to prepare a browser review. It groups stories for changed components and affected pages, with summaries of the changes and key states to check. You can see what the agent built and review its work at a glance.\n\nSkills get installed on upgrade and in new projects. They are also available on [skills.sh](http://skills.sh/?ref=storybookblog.ghost.io) and in Claude Code and Codex plugins. Learn more from [our documentation](https://storybook.js.org/docs/11/ai/connect?ref=storybookblog.ghost.io).\n\nStorybook continues to support MCP, which has expanded support for all core frameworks. But we recommend skills as the most ergonomic way to use Storybook locally with agents, because they let agents fetch component context without a running Storybook instance.\n\n## Storybook CLI\n\nStorybook 11's CLI contains a new [`tools` command](https://storybook.js.org/docs/11/api/cli-options?ref=storybookblog.ghost.io#tools) that exposes a fast, headless Storybook. In addition to powering the official skills, the new CLI makes it easy to write your own skills, tools, and workflows.\n\n```\nnpx storybook@next tools --help\n\n# List components and documentation with their IDs\nnpx storybook@next tools docs list\nnpx storybook@next tools docs show --id \"your-component-id\"\n```\n\nStorybook’s CLI is fast. It attaches to an existing dev server when a tool needs the browser, as `storybook tools review create` does, and bypasses the dev server entirely when it’s not needed. On large projects like Chromatic, cold-start docgen results are delivered to agents ~10x faster than in Storybook 10. We anticipate another 2x improvement once TypeScript 7.1 stabilizes.\n\n## Type-safe stories\n\nStorybook 11 upgrades CSF, our story format for component examples. [CSF 4](https://storybook.js.org/docs/11/writing-stories/csf?ref=storybookblog.ghost.io) is fully type-safe with a modern, ergonomic “factories” API. Storybook addons can extend the type system to add parameters and other config options.\n\n``` python\nimport preview from '../.storybook/preview';\nimport { Button } from './Button';\n\nconst meta = preview.meta({\n\tcomponent: Button,\n  parameters: { layout: 'centered' },\n});\n\nexport const Primary = meta.story({ args: { primary: true } });\n// etc.\n```\n\nStorybook 11 provides codemods to automatically upgrade your existing stories. You can upgrade incrementally and CSF 3 remains fully supported. For more information, see [the docs](https://storybook.js.org/docs/11/writing-stories/csf/upgrade?ref=storybookblog.ghost.io).\n\n## Framework support\n\nIn the process of rebuilding Storybook’s core architecture, we've also leveled up all our core frameworks, especially when it comes to docgen extraction and code snippet examples.\n\n**React.** React users get fast, accurate component metadata from `react-component-meta`. It replaces the existing options of `react-docgen` and `react-docgen-typescript`, providing better accuracy and performance.\n\n**Vue.** We've upgraded to `vue-component-meta` to give Vue users better component metadata. We are also working with maintainer [Tobias Diez](https://github.com/tobiasdiez?ref=storybookblog.ghost.io) to ensure that Storybook for Nuxt is agent-ready.\n\n**Angular.** `@storybook/angular-vite` is a new collaboration with Analog.js maintainer [Brandon Roberts](https://github.com/brandonroberts?ref=storybookblog.ghost.io) and the Angular Core team. It’s insanely fast, provides high quality component metadata, and solves hundreds of outstanding issues from `@storybook/angular`. If you’re on Angular 21+, [here’s how to migrate](https://storybook.js.org/docs/11/get-started/frameworks/angular-vite?ref=storybookblog.ghost.io).\n\n**Web Components.** Web components are getting some long overdue love in Storybook. We collaborated with `wc-storybook-helpers` creator [Burton Smith](https://github.com/break-stuff?ref=storybookblog.ghost.io) to integrate controls support for slots, events, CSS variables, and more based on your custom elements manifest (CEM). Additionally, Storybook now computes the CEM if it’s not provided and automatically updates it on code changes.\n\n**Svelte.** Svelte has been promoted to a core Storybook framework. Storybook 11 supports Svelte 5 and SvelteKit 3, no longer requires an addon for Svelte CSF, and has seen significant docgen performance improvement due to a rewrite of the TypeScript integration. Many thanks to Svelte core maintainer [Paolo Ricciuti](https://github.com/paoloricciuti?ref=storybookblog.ghost.io) for designing the type safe factory upgrade to Svelte Native CSF.\n\n## Try it out today\n\nWe want your help to get Storybook 11 ready for release in December.\n\nRun the upgrade command on your project. It applies automigrations and tells you what to change by hand, if necessary. The [migration guide](https://storybook.js.org/docs/11/releases/migration-guide?ref=storybookblog.ghost.io) lists every breaking change.\n\n```\nnpx storybook@next upgrade\n```\n\nYou can also install it in a new project:\n\n```\nnpm create storybook@next\n```\n\nIf you run into any problems, please file a GitHub issue with a reproduction. We've also opened GitHub discussions for each of the major feature areas.", "url": "https://wpnews.pro/news/storybook-11-beta", "canonical_source": "https://storybook.js.org/blog/storybook-11-beta/", "published_at": "2026-11-09 18:32:46+00:00", "updated_at": "2026-11-09 18:50:49.042939+00:00", "lang": "en", "topics": ["ai-agents", "developer-tools", "ai-tools", "agent-protocols"], "entities": ["Storybook", "Storybook 11", "Claude", "Codex", "Vitest", "Chromatic", "MCP", "CSF 4"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/storybook-11-beta", "markdown": "https://wpnews.pro/news/storybook-11-beta.md", "text": "https://wpnews.pro/news/storybook-11-beta.txt", "jsonld": "https://wpnews.pro/news/storybook-11-beta.jsonld"}}