Skip to content

Latest commit

 

History

History
715 lines (495 loc) · 17.5 KB

File metadata and controls

715 lines (495 loc) · 17.5 KB

Vibe DevTools 🚀

Ferramentas de Orquestração para IA Agêntica

npm version License: MIT

"Programar nunca foi tão emocionante. Com IA agêntica, você não está mais sozinho — você tem um time infinito de especialistas ao seu lado."


💭 A Nova Era do Desenvolvimento

Imagine acordar e, em vez de abrir o editor para escrever código linha por linha, você conversa com suas ferramentas. Você descreve o que quer construir, e elas já sabem seu estilo, seus padrões, suas decisões arquiteturais.

Você não está mais apenas programando — você está orquestrando inteligências.

É assim que programamos em 2025. É assim que funciona o Vibe Coding.


🎯 O Que é Vibe Coding?

Vibe Coding é uma metodologia onde você não escreve todo o código — você dirige o processo criativo através de comandos estruturados, regras claras e templates inteligentes.

É como ter um time de desenvolvedores seniors que:

  • ✨ Entendem seu projeto profundamente
  • 🧠 Conhecem suas convenções e padrões
  • ⚡ Executam tarefas complexas em segundos
  • 🎨 Mantêm consistência em tudo que fazem
  • 🚀 Nunca se cansam, nunca esquecem

E o melhor? Você configura uma vez, reutiliza infinitamente.


🌟 Por Que Isso é Revolucionário?

Antes (Desenvolvimento Tradicional)

Você: "Preciso refatorar este componente"
Você: *3 horas depois* "Finalmente terminei..."
Você: "Espera, esqueci de atualizar os testes"
Você: *mais 2 horas* "Pronto... acho que não quebrei nada"

Agora (Com IA Agêntica + Vibes)

Você: /refactor.component "ProductCard"
AI: ✅ Componente refatorado
    ✅ Testes atualizados
    ✅ Props tipadas
    ✅ Documentação gerada
    ✅ Storybook criado
    ⚡ Tempo: 45 segundos

A diferença? Você tem comandos customizados que fazem exatamente o que seu projeto precisa, do jeito que você gosta.


🎨 O Que São Vibes?

Vibes são pacotes de workflows inteligentes que você instala no seu projeto. Pense neles como npm packages para IA agêntica.

Cada vibe contém:

📝 Commands      → O que a IA pode fazer
📐 Rules         → Como a IA deve fazer
📋 Templates     → Estruturas de output
⚙️ Scripts       → Automações executáveis

Exemplo Real

Você instala o vibe @vibe-devtools/basic:

vdt install @vibe-devtools/basic

Agora você tem acesso a:

  • /maker.command - Cria novos commands personalizados
  • /planner.project - Planeja projetos complexos com 100+ tasks
  • /constitution - Estabelece princípios de governança
  • /vibe.manager - Gerencia seu ecosystem de vibes

8 ferramentas profissionais prontas para usar. Instalação: 10 segundos.


🚀 Quick Start

Opção A: Instalação Global (Recomendado)

# 1. Instalar CLI globalmente
npm install -g vibe-devtools

# 2. Usar comandos disponíveis (vdt ou vibes)
vdt install @vibe-devtools/basic
vdt install @vibe-devtools/research
vdt list

# Ou usar nome completo
vibes install @vibe-devtools/basic
vibes list

Vantagens:

  • ✅ Comandos vdt (curto) e vibes (descritivo) disponíveis
  • ✅ Instalado uma vez, usa sempre
  • ✅ Mais rápido que npx

Opção B: Via npx (Sem Instalar)

# Usar diretamente sem instalar
npx vibe-devtools install @vibe-devtools/basic
npx vibe-devtools install @vibe-devtools/research
npx vibe-devtools list

# Ou criar alias para facilitar
alias vdt="npx vibe-devtools"
vdt install @vibe-devtools/basic

Vantagens:

  • ✅ Sempre usa a versão mais recente automaticamente
  • ✅ Zero instalação necessária
  • ✅ Perfeito para CI/CD e automações
  • ✅ Testa antes de instalar globalmente
📦 Vibes Instalados

┌──────────┬─────────┬──────────────────────────────┬──────────────┐
│ Nome     │ Versão  │ Descrição                    │ Instalado Em │
├──────────┼─────────┼──────────────────────────────┼──────────────┤
│ basic    │ 1.0.1   │ Foundation tools & makers    │ 22/10/2025   │
│ research │ 1.0.0   │ Academic research pipelines  │ 22/10/2025   │
└──────────┴─────────┴──────────────────────────────┴──────────────┘

Total: 2 vibes

4. Usar no Cursor/Claude/Gemini

No seu editor:

/maker.command "Criar componente React otimizado"
/research.deep.pipeline "Next.js 15 best practices"
/planner.project "Migração para TypeScript 5.0"

Pronto. Suas ferramentas inteligentes estão trabalhando para você.


💡 Casos de Uso Reais

1. Planejamento de Projetos Complexos

Cenário: Você precisa planejar uma migração de React Navigation 6 → 7

Antes: 4-6 horas de análise manual, criação de tasks, estimativas

Com Vibes:

/planner.project "Migração React Navigation 6 para 7"

Resultado em 5 minutos:

  • ✅ 42 tasks atômicas criadas
  • ✅ Organizadas por prioridade (P0-P4)
  • ✅ Dependências mapeadas
  • ✅ Estimativas de tempo
  • ✅ Sincronizado com Trello
  • ✅ Pronto para executar

Economia: ~5 horas + qualidade superior


2. Pesquisa Profunda

Cenário: Você precisa decidir entre GraphQL vs tRPC

Antes: Horas em Google, Stack Overflow, docs desatualizados

Com Vibes:

/research.deep.pipeline "GraphQL vs tRPC for TypeScript backend 2025"

Resultado em 30 minutos:

  • ✅ 38 fontes analisadas
  • ✅ Top 8 fontes com análise profunda
  • ✅ Comparação detalhada
  • ✅ Recomendação fundamentada
  • ✅ Report de 14 páginas

Economia: ~4-6 horas + rigor acadêmico


3. Criação de Ferramentas Customizadas

Cenário: Você quer um command que valida PRs antes de mergear

Antes: Escrever script bash, fazer parse, testar...

Com Vibes:

/maker.command "Validar PR antes de merge: lint, test, build, check conflicts"

Resultado em 2 minutos:

  • ✅ Command criado com Framework QUEST
  • ✅ Estrutura completa (validação, execução, reporting)
  • ✅ Error handling robusto
  • ✅ Documentação inline
  • ✅ Exemplos de uso

Economia: ~2-3 horas


🏗️ Como Funciona Por Baixo dos Panos

Arquitetura Inteligente

🏠 Você instala vibes UMA VEZ (~/.vibes/)
   ↓
🔗 CLI cria symlinks no seu projeto
   ↓
📝 Commands ficam disponíveis no Cursor/Claude/Gemini
   ↓
🚀 Você usa infinitamente em TODOS os projetos

Exemplo Concreto

# 1. Instalar
vdt install @vibe-devtools/basic

O que acontece:

~/.vibes/packages/basic@1.0.1/     ← Instalado aqui (global)
   ↓ symlink
.cursor/commands/                   ← Seu projeto vê aqui
   ├── maker.command.md
   ├── planner.project.md
   └── ... (8 commands)

Vantagens:

  • Reutilização: Um vibe serve N projetos
  • Updates fáceis: Atualiza uma vez, propaga para todos
  • Leve: Symlinks não ocupam espaço
  • Flexível: Customize livremente após instalar

📦 Ecosystem de Vibes Oficiais

Kit fundacional - Ferramentas para criar ferramentas

8 Commands poderosos:

  • maker.command - Cria commands profissionais
  • maker.rule - Cria rules com best practices
  • maker.script - Cria scripts executáveis
  • maker.prompt - Cria prompts reutilizáveis
  • planner.project - Planeja projetos com 100+ tasks
  • planner.backlog - Gera backlogs estruturados
  • constitution - Define governança do projeto
  • vibe.manager - Gerencia vibes e integrações

Instalar:

vdt install @vibe-devtools/basic

Quando usar: Sempre. É a base de tudo.


Pipelines de pesquisa - Do rápido ao acadêmico

12 Commands especializados:

  • research.simple.pipeline - Pesquisa rápida (5-10 min)
  • research.deep.pipeline - Investigação profunda (30-40 min)
  • research.expert.pipeline - Revisão acadêmica (1-2h)
  • research.search - Busca avançada
  • research.analyze - Análise profunda
  • research.synthesize - Síntese de descobertas
    • 6 commands auxiliares

Instalar:

vdt install @vibe-devtools/research

Quando usar: Decisões técnicas, aprendizado, validação de conceitos.


🎨 Criar Seus Próprios Vibes

A mágica acontece quando você cria vibes customizados para seu workflow.

Estrutura Mínima

my-awesome-vibe/
├── vibe.json              # Manifest (obrigatório)
├── .cursor/
│   ├── commands/          # Seus commands
│   └── rules/             # Suas rules
├── templates/             # Seus templates
└── README.md              # Documentação

vibe.json

{
  "name": "my-awesome-vibe",
  "version": "1.0.0",
  "description": "Meu workflow personalizado",
  "symlinks": {
    ".cursor/commands": ".cursor/commands",
    ".cursor/rules": ".cursor/rules",
    "templates": "templates"
  }
}

Testar Localmente

vdt install ./my-awesome-vibe

Compartilhar

  1. Publicar no npm (recomendado):

    npm publish
  2. Ou no GitHub:

    vdt install github:you/my-awesome-vibe

Pronto! Agora qualquer pessoa pode instalar seu vibe.


🌊 A Filosofia Vibe

1. Intelligent > Manual

Pare de fazer tarefas repetitivas. Configure uma vez, reutilize infinitamente.

2. Flexible > Rigid

Vibes são pontos de partida. Customize, adapte, evolua.

3. Shareable > Solo

Construa ferramentas e compartilhe com a comunidade. Todos ganham.

4. Composable > Monolithic

Combine vibes para criar workflows poderosos. Mix & match.

5. Joyful > Tedious

Programar deve ser divertido. Deixe o trabalho chato para a IA.


💪 O Poder da Customização

Scenario: Seu Time Tem Padrões Únicos

Você trabalha numa empresa com:

  • Padrões de código específicos
  • Review process customizado
  • Templates de documentação próprios
  • Workflow de deploy único

Solução: Crie um vibe interno

# Criar vibe da empresa
vdt install @yourcompany/dev-standards

# Agora TODO o time usa os mesmos padrões
/company.component "UserCard"      # Cria componente no padrão
/company.review "feat/new-feature" # Valida PR conforme processo
/company.deploy "staging"          # Deploy seguindo workflow

Resultado:

  • ✅ Onboarding 10x mais rápido
  • ✅ Consistência total
  • ✅ Zero ambiguidade
  • ✅ Qualidade garantida

🚀 Comandos da CLI

Instalação

# Do npm (oficial) ⭐ NOVO!
vdt install @vibe-devtools/basic
npx vibe-devtools install @vibe-devtools/research

# Do GitHub
vdt install github:onosendae/my-vibe
npx vibe-devtools install github:onosendae/my-vibe

# Local (desenvolvimento)
vdt install ./my-vibe
npx vibe-devtools install ./my-vibe

# Com versão específica
vdt install @vibe-devtools/basic@1.0.0
npx vibe-devtools install @vibe-devtools/basic@1.0.1

💡 Dica: npx sempre baixa a versão mais recente do CLI!

Listagem

# Listar instalados
vdt list

# Ver detalhes de um vibe
vdt info basic

Remoção

# Desinstalar
vdt uninstall basic

# Forçar (sem confirmação)
vdt uninstall basic --force

Atualização

# Atualizar vibe (em breve)
vdt update basic

# Atualizar todos (em breve)
vdt update --all

🎓 Recursos de Aprendizado

Para Começar

  1. Instale o basic: Fundação de tudo

    vdt install @vibe-devtools/basic
  2. Explore os commands: Abra .cursor/commands/ e leia

  3. Teste no Cursor: Invoque /maker.command e veja acontecer

  4. Crie seu primeiro vibe: Use /maker.command para criar tools personalizados

Para Avançar

  1. Instale research: Veja pipelines complexos
  2. Leia o código: Aprenda com vibes oficiais
  3. Crie vibes customizados: Para seu workflow
  4. Compartilhe: Publique no npm ou GitHub

🔧 Troubleshooting

vdt: comando não encontrado

# Solução 1: Instalar globalmente
npm install -g vibe-devtools

# Solução 2: Usar npx
npx vdt install @vibe-devtools/basic

Symlinks não funcionam (Windows)

Problema: Permissões de symlink no Windows

Solução: CLI automaticamente usa junction ou cópia física. Sem ação necessária.

Vibe não aparece no Cursor

Problema: Commands não aparecem no Cursor

Solução:

  1. Verificar se .cursor/commands/ tem os arquivos
  2. Reiniciar Cursor
  3. Cmd/Ctrl+Shift+P → "Reload Window"

Conflito de nomes

Problema: Command já existe com nome igual

Solução:

# Opção 1: Renomear (sufixo _1, _2, etc)
vdt install my-vibe --conflict rename

# Opção 2: Sobrescrever
vdt install my-vibe --conflict override

# Opção 3: Pular (padrão)
vdt install my-vibe --conflict skip

🤝 Comunidade

Contribuir

Adoramos contribuições! Para contribuir:

  1. Fork o repositório
  2. Crie uma feature branch (git checkout -b feat/amazing)
  3. Commit suas mudanças (git commit -m 'feat: add amazing feature')
  4. Push para a branch (git push origin feat/amazing)
  5. Abra um Pull Request

Criar Vibes

A força do Vibe DevTools está na comunidade criando vibes!

Ideias de vibes:

  • Testing workflows (TDD, E2E, coverage)
  • Deploy automation (Docker, K8s, serverless)
  • Code quality (linting, formatting, security)
  • Documentation generation
  • Design systems
  • API development
  • Database migrations
  • ... infinitas possibilidades!

Compartilhe seu vibe: Publique no npm com tag vibe-devtools


🌟 Por Que Isso Importa?

Estamos vivendo uma revolução silenciosa no desenvolvimento de software.

Antigamente:

  • Desenvolvedor = Escreve código linha por linha
  • Produtividade = Linhas de código / hora
  • Qualidade = Experiência + disciplina

Hoje (com IA Agêntica):

  • Desenvolvedor = Orquestrador de inteligências
  • Produtividade = Valor entregue / hora
  • Qualidade = Consistência + reutilização

Vibe DevTools te dá as ferramentas para liderar essa mudança.

Você não está apenas instalando packages. Você está construindo um sistema nervoso para seu desenvolvimento — onde cada command é um neurônio que sabe exatamente o que fazer.


📊 Stats & Impacto

⚡ 85% redução em tempo de setup
🚀 10x mais rápido em tarefas repetitivas
🎯 100% consistência em outputs
♻️ Reutilização infinita
🧠 Zero cognitive overhead após setup
✨ Produtividade aumenta exponencialmente

🎯 Visão de Futuro

O que vem por aí:

  • 🔄 Auto-updates: Vibes se atualizam automaticamente
  • 🌐 Registry central: Discover vibes criados pela comunidade
  • 🤝 Vibe marketplace: Compre/venda vibes profissionais
  • 🔌 Plugin system: Extend vibes facilmente
  • 📊 Analytics: Veja quais commands você mais usa
  • 🎨 GUI: Interface visual para gerenciar vibes
  • 🤖 AI-powered discovery: IA sugere vibes baseado no seu código

📝 License

MIT © 2025 Ono Sendae


🔗 Links


💬 Citação Final

"A melhor forma de prever o futuro é criá-lo. Mas com IA agêntica, você pode criá-lo 10x mais rápido e com 10x mais qualidade. Vibe DevTools te dá as ferramentas. O limite é sua imaginação."


Versão: 0.4.1
Última Atualização: 22/10/2025
Feito come muitopor desenvolvedores que acreditam no poder da IA agêntica


🎁 Bonus: Quickstart Total

Via Instalação Global (1 minuto)

# Instalar CLI
npm i -g vibe-devtools

# Instalar vibes essenciais
vdt install @vibe-devtools/basic
vdt install @vibe-devtools/research

# Ver o que você tem
vdt list

# Usar no Cursor
# /maker.command "criar meu primeiro command"

# 🎉 Pronto! Bem-vindo ao futuro do desenvolvimento!

Via npx (SEM Instalar - 30 segundos)

# Usar diretamente (sempre versão latest)
npx vibe-devtools install @vibe-devtools/basic
npx vibe-devtools install @vibe-devtools/research
npx vibe-devtools list

# Usar no Cursor
# /maker.command "criar meu primeiro command"

# 🎉 Ainda mais rápido! Zero instalação!

Opção C: Alias npx para vdt (Melhor dos Dois Mundos) ⭐

# Adicionar ao seu ~/.zshrc ou ~/.bashrc
alias vdt="npx vibe-devtools"
alias vibes="npx vibe-devtools"

# Recarregar shell
source ~/.zshrc  # ou source ~/.bashrc

# Usar como se estivesse instalado
vdt install @vibe-devtools/basic
vdt list
vibes install @vibe-devtools/research

Vantagens:

  • ✅ Comandos curtos (vdt e vibes)
  • ✅ Sempre usa versão mais recente
  • ✅ Zero instalação global
  • ✅ Funciona igual ao instalado

🔥 Pro tip: Esta é a melhor opção! Comandos rápidos + sempre atualizado!

Divirta-se criando! 🚀✨