Storybook skill

O que ela faz

A skill passa ao Claude as boas práticas do Storybook pra escrever arquivos .stories.tsx no formato CSF 3.0. Ele declara o meta com satisfies Meta, deixa o title de fora pro Storybook montar a barra lateral pelo caminho do arquivo e liga a documentação automática com a tag autodocs.

Os valores padrão das props vão em args no nível do componente, e cada story só muda o que difere, como variant ou disabled. Os tipos de controle ficam por conta do Storybook, que lê do TypeScript; só se definem à mão quando há motivo, como campo de texto pro children.

Também cobre decorators pra envolver a story em tema, rotas, idioma ou store de estado, parameters de layout e fundo, e os arquivos main.ts e preview.ts da pasta .storybook. Os exemplos são em React com Vite.

Nas palavras de quem fez

Quando usar

• Criar as stories de um componente novo
• Passar stories antigas do formato CSF 2.0 pro 3.0
• Montar a vitrine visual de uma biblioteca de componentes
• Ajustar o main.ts e o preview.ts do Storybook num projeto React com Vite

Depois de instalar, é só pedir assim

• Escreve as stories do componente Button com as variantes primary, secondary e disabled
• Converte as stories dessa pasta pro formato CSF 3.0, sem title e com os args no meta
• Coloca um decorator com o ThemeProvider escuro em todas as stories do Card

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

• Gen Agent Trust HubPassou
• SocketPassou
• SnykPassou

Perguntas