O que storybook-workbench faz?
Pacote de habilidades de agente de IA para Storybook em React + Vite — auditar componentes reais versus 'slop', capturar fluxos, escrever histórias CSF3 e publicar. Claude Code / Codex / Cursor.
Visão Geral
Este skill fornece um conjunto de ferramentas acionadas por IA para:
- Auditar componentes existentes, classificando-os como 'reais' (bem escritos) ou 'slop' (baixa qualidade)
- Capturar fluxos de interação do usuário para gerar histórias automaticamente
- Escrever histórias no formato CSF3 (Component Story Format 3) para React + Vite
- Publicar o Storybook em ambientes de deploy
Público-alvo
Desenvolvedores que utilizam Storybook com React + Vite e desejam manter uma base de componentes de alta qualidade, com documentação automatizada e padronizada.
Plataformas Suportadas
- Claude Code: Agente de IA da Anthropic
- Codex: Agente de IA da OpenAI integrado ao terminal
- Cursor: Editor de código com IA integrada
Como Usar
-
Auditoria de componentes: Execute o comando de auditoria para analisar a qualidade dos componentes no diretório
src/components.storybook-workbench audit -
Captura de fluxos: Utilize a ferramenta de captura para registrar interações do usuário.
storybook-workbench capture -
Geração de histórias CSF3: O skill gera automaticamente histórias no formato CSF3.
storybook-workbench generate stories -
Publicação: Faça o deploy do Storybook.
storybook-workbench deploy
Configuração
Certifique-se de que o projeto possui:
- React 16.8+ (com hooks)
- Vite como bundler
- Storybook 7+ instalado
- Pacote
@storybook/react-viteconfigurado
Comandos
| Comando | Descrição |
|---|---|
audit | Audita componentes e classifica como real ou slop. |
capture | Captura fluxos de interação para geração de histórias. |
generate stories | Gera histórias CSF3 com base nos componentes auditados. |
deploy | Publica o Storybook em um servidor (ex: Netlify, Vercel). |
Exemplo de Uso com Claude Code
# Iniciar auditoria interativa
claude code --skill strongeron/storybook-workbench audit
# Gerar histórias automaticamente
claude code --skill strongeron/storybook-workbench generate stories
Contribuição
Este skill é open-source. Contribuições são bem-vindas através de issues e pull requests no repositório oficial.
Licença
MIT