Voltar
Storybook 11 chega em beta com skills oficiais e ferramentas CLI headless para agentes
🧩CEVIU

Storybook 11 chega em beta com skills oficiais e ferramentas CLI headless para agentes

Aprofundamento CEVIU

Aprofundamento

O Storybook 11 beta muda o papel da ferramenta: além de ser um workshop de componentes, ele passa a servir de fonte de contexto para agentes de código. A premissa do time é que componentes, stories e testes mantidos pela equipe são o contexto que o agente precisa para não gerar componentes duplicados, APIs erradas e estados faltando. O pacote ficou 25% menor, e a entrega de contexto chega a ser até 10 vezes mais rápida que na versão 10, segundo a fonte.

O centro da versão são as skills oficiais. A ui-workflow guia o agente na construção de UI, na escrita de stories, nos testes e na apresentação para revisão humana. A component-docs permite consultar APIs, metadados, documentação e exemplos de componentes existentes em formato econômico em tokens. O comando storybook tools test run roda testes funcionais e de acessibilidade com Vitest, e o storybook tools review create monta uma revisão no navegador, agrupando stories dos componentes alterados. As skills são instaladas no upgrade e em projetos novos, e também estão no skills.sh e em plugins para Claude Code e Codex.

Por que isso importa

Para quem opera um design system, a leitura é que o catálogo de stories deixa de ser só documentação e vira infraestrutura para agentes. Quanto melhor a cobertura de estados e a documentação dos componentes, melhor tende a ser o resultado do agente. A recomendação de skills em vez de MCP, por funcionarem sem um Storybook rodando, também facilita o uso em ambiente local e em automações.

Perguntas frequentes

O que são as skills do Storybook 11?

São instruções oficiais que orientam agentes de código a usar o Storybook. A ui-workflow cobre construir, testar e apresentar UI, e a component-docs ajuda a achar componentes existentes e consultar suas APIs antes de criar algo novo.

Como testar o Storybook 11 beta?

Em um projeto existente, rode npx storybook@next upgrade, que aplica automigrações e indica o que mudar à mão. Em um projeto novo, use npm create storybook@next. A versão estável está prevista para dezembro.

Preciso reescrever minhas stories para o CSF 4?

Não de imediato. O Storybook 11 traz codemods para atualizar stories existentes, permite migrar de forma incremental e mantém o CSF 3 totalmente suportado.

Quais frameworks recebem melhorias?

React, Vue, Angular, Web Components e Svelte. React passa a usar react-component-meta, Vue usa vue-component-meta, Angular ganha o @storybook/angular-vite, Web Components geram o manifesto de elementos customizados e Svelte vira framework core com suporte a Svelte 5 e SvelteKit 3.

Fontes

Avalie este artigo:
Categoria
CEVIU
Publicado
10 de novembro de 2026
Editoria
CEVIU

Quer receber mais sobre CEVIU?

Conteúdo curado diariamente, direto no seu e-mail.

Conteúdo curado diariamenteDiversas categoriasCancele quando quiser