JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 8
  • Score
    100M100P100Q107986F
  • License MIT

🚀 Orquestrador de agentes IA para desenvolvimento Full-Stack (React, NestJS, Go)

Package Exports

  • frontend-flow-agents
  • frontend-flow-agents/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (frontend-flow-agents) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🚀 Full-Stack Flow Agents v2.2

Orquestrador de agentes IA para desenvolvimento Full-Stack (React, NestJS, Go) com integração Claude avançada

NPM Version Downloads License

✨ O que é o Full-Stack Flow v2.2?

Full-Stack Flow é uma ferramenta que orquestra 29 agentes IA especializados para automatizar completamente o desenvolvimento Full-Stack (Frontend + Backend). A versão 2.2 expande o escopo original integrando agentes para NestJS, Go, PWA, testes automatizados e muito mais.

🌟 Agent Showcase - Destaques da Semana

🏆 Top Performers

agent_react_components

  • Badge: 🏆 Gold Standard
  • Problema: Criação manual de componentes é lenta e propensa a erros
  • Solução: Gera componente completo com TypeScript, testes e stories
  • Métricas: 94% taxa de sucesso | 45s tempo médio | 15.4k+ usos
  • Rating: ⭐⭐⭐⭐⭐ 4.8/5.0 (baseado em 450+ avaliações)
  • Exemplo: ff "criar card de produto com imagem, título, preço e botão de compra"

agent_security

  • Badge: 🛡️ Security First
  • Problema: Vulnerabilidades de segurança passam despercebidas
  • Solução: Análise profunda e correção automática de vulnerabilidades
  • Métricas: 98% taxa de sucesso | 45s tempo médio | 13.4k+ usos
  • Rating: ⭐⭐⭐⭐⭐ 4.9/5.0 (baseado em 380+ avaliações)
  • Exemplo: ff "auditar segurança do formulário de login"

agent_tailwind_estilization

  • Badge: 🏆 Gold Standard
  • Problema: Estilização manual consome muito tempo
  • Solução: Aplica estilos Tailwind pixel-perfect baseado em design
  • Métricas: 96% taxa de sucesso | 30s tempo médio | 14.3k+ usos
  • Rating: ⭐⭐⭐⭐⭐ 4.9/5.0 (baseado em 520+ avaliações)
  • Exemplo: ff "aplicar dark mode em todo o dashboard"

📊 Ver métricas completas de todos os agentes →

🆕 Novidades v2.2 Full-Stack

🚀 7 Novos Agentes Especializados

  • 🧠 MCP Memory Manager: Memória persistente e aprendizado contínuo
  • 🎭 Playwright Validation: Testes visuais e funcionais automatizados
  • ♿ Accessibility Auditor: WCAG compliance automático
  • 📱 PWA Progressive: Transformação em Progressive Web Apps
  • 🎨 Figma Extract: Extração de design tokens direto do Figma
  • 🏗️ NestJS Backend: APIs enterprise com NestJS
  • ⚡ Golang Backend: Microserviços de alta performance em Go

Novidades v2.0 Enhanced

🧠 Mesa Técnica Obrigatória com 13 Especialistas

  • 13 especialistas virtuais analisam TODA demanda antes da execução
  • Metodologia "3 hipóteses + 1 otimizada" garante decisões técnicas superiores
  • Gate obrigatório que bloqueia pipeline se solução não for sólida
  • Redução de 60% no risco técnico através de validação prévia

🔍 Classificador NLP Avançado

  • 95%+ precisão na classificação de demandas (vs 80% anterior)
  • Detecção inteligente de contexto, intenção e complexidade
  • Pipeline híbrido personalizado para cada tipo de demanda
  • Suporte especializado para React/TypeScript patterns

📊 Monitor Tempo Real

  • Dashboard visual com WebSocket para acompanhar pipelines
  • Progress tracking detalhado de cada agente
  • Métricas em tempo real: componentes criados, build time, cobertura
  • Tech stack detection automático (React, Next.js, TailwindCSS, etc.)

⚡ Arquitetura Híbrida

  • Modo Enhanced com recursos avançados ativado automaticamente
  • Fallback inteligente para modo padrão se Enhanced falhar
  • Compatibilidade total com projetos existentes

🤖 Integração Claude Code

  • Detecção automática: Identifica se Claude Code está instalado
  • Execução real: Agentes usam Claude para gerar código real
  • Modo fallback: Simula execução quando Claude não está disponível
  • Configuração simples: Funciona automaticamente quando disponível

📋 MCPs Obrigatórios

Para funcionamento completo, os agentes requerem os seguintes MCPs no Claude:

🎨 Design & UI

  • shadcn-ui - Componentes React (obrigatório para agent_react_components)
  • Context7 - Padrões atualizados (obrigatório para TODOS os agentes)

🔧 Desenvolvimento

  • Figma - Extração de tokens de design (agent_figma_extract)
  • GitHub - Automação Git/PR (agent_github_flow, agent_github_pullrequest)

⚡ Como Verificar MCPs

# No Claude Code, verificar MCPs instalados:
claude mcp list

# MCPs essenciais para Frontend Flow:
# ✅ shadcn-ui - Componentes UI
# ✅ Context7 - Padrões/documentação
# ✅ Figma - Design tokens
# ✅ GitHub - Automação Git

🎯 Uma solicitação → Código completo

# Instalar globalmente
npm install -g frontend-flow-agents

# Em qualquer projeto React
cd meu-projeto
frontend-flow init

# Exemplo 1: Componente básico
frontend-flow "criar botão de login responsivo"

# Exemplo 2: Com modo Enhanced
frontend-flow "criar dashboard analytics responsivo"

# 🔄 **Pipeline Enhanced v2.0 - TODOS os 29 Agentes:**

# 📋 **FASE 1: ANÁLISE & PLANEJAMENTO ENHANCED**
# → 1. agent_technical_roundtable - 🆕 Mesa técnica com 13 especialistas
# → 2. agent_nlp_classifier - 🆕 95%+ precisão na classificação
# → 3. agent_github_flow - Cria issue e branch feature/analytics-dashboard
# → 4. agent_master_orchestrator - Orquestra pipeline híbrido otimizado

# 🎨 **FASE 2: EXTRAÇÃO & CRIAÇÃO**
# → 4. agent_figma_extract - Extrai tokens, cores e medidas do Figma
# → 5. agent_react_components - Gera componente Button com shadcn-ui
# → 6. agent_redux_toolkit - SKIP (botão simples, sem estado global)

# 💅 **FASE 3: ESTILIZAÇÃO & UX**
# → 7. agent_tailwind_estilization - Aplica estilos pixel-perfect do Figma
# → 8. agent_animations - SKIP (sem animações na demanda)
# → 9. agent_responsiveness - Garante funcionamento mobile/desktop
# → 10. agent_accessibility - Adiciona ARIA labels e navegação por teclado

# 🌍 **FASE 4: INTERNACIONALIZAÇÃO**
# → 11. agent_i_18_n - SKIP (projeto sem configuração i18n)

# ⚡ **FASE 5: OTIMIZAÇÃO**
# → 12. agent_performance - Otimiza renders com React.memo se necessário
# → 13. agent_security - Valida props e entradas do componente

# 📊 **FASE 6: MÉTRICAS**
# → 14. agent_analytics - SKIP (projeto sem analytics configurado)

# 🔍 **FASE 7: QUALIDADE & TESTES**
# → 15. agent_code_quality - Valida lint, tipos TypeScript, build
# → 16. agent_integration_tests - Cria testes Vitest cobrindo 100%
# → 17. agent_e_2_e_cypress - SKIP (componente simples, sem fluxo E2E)

# ⚙️ **FASE 8: SISTEMA & OTIMIZAÇÃO**
# → 18. agent_pipeline_optimizer - Analisa performance do pipeline
# → 19. agent_state_manager - Gerencia estado do processo
# → 20. agent_cleanup_manager - Organiza arquivos temporários
# → 21. agent_metrics_collector - Coleta dados de performance

# 🎯 **FASE 9: FINALIZAÇÃO**
# → 22. agent_github_pullrequest - Cria PR com documentação completa

# ✨ **RESULTADO FINAL:**
# → Issue criada e documentada em português
# → Branch feature/figma-button criada automaticamente
# → Componente Button pixel-perfect baseado no Figma
# → Estilos TailwindCSS com tokens centralizados
# → Acessibilidade WCAG compliant
# → Responsividade mobile/desktop
# → Testes 100% coverage
# → Qualidade de código garantida
# → PR pronto para review com checklist automático

🧠 Pipeline Universal com Decisão Inteligente

✨ Todos os 29 Agentes, Sempre!

  • 🔄 Execução Universal: Todos os 29 agentes são SEMPRE executados
  • 🧠 Decisão Inteligente: Cada agente decide se deve agir ou pular baseado no contexto
  • ⚡ Otimização Automática: Sem desperdício, mas com cobertura 100% completa

📊 Categorias de Agentes

  • 🎯 CORE (sempre executam): react_components, tailwind_estilization, github_flow/pullrequest
  • 🛡️ QUALITY (quase sempre): security, accessibility, performance, code_quality, tests
  • 🎨 CONTEXTUAL (pulam inteligentemente): figma_extract, redux_toolkit, i18n, analytics, animations
  • ⚙️ SYSTEM (sempre executam): state_manager, cleanup_manager, metrics_collector, optimizer

🤖 Como Funciona

frontend-flow "criar botão simples"
# → Todos os 29 agentes são chamados
# → agent_figma_extract: SKIP (sem menção ao Figma)
# → agent_redux_toolkit: SKIP (componente simples)
# → agent_security: APPLY (sempre valida segurança)
# → agent_react_components: APPLY (sempre cria componente)
# → Resultado: Pipeline otimizado automaticamente!

🔧 Recursos Principais

🧠 Processamento Inteligente

  • Classificação NLP: Analisa solicitações em linguagem natural para orientar agentes
  • Pipeline Universal: TODOS os 29 agentes são executados sempre
  • Decisão Distribuída: Cada agente decide internamente se deve agir ou pular
  • Otimização automática: Identifica oportunidades de paralelização
  • Fallback inteligente: Continua funcionando mesmo com falhas

⚡ Performance

  • Execução paralela: Agentes independentes executam simultaneamente
  • Sistema de cache: Reutiliza resultados de execuções anteriores
  • Pipelines otimizados: Sequência de agentes adaptada ao contexto
  • Monitoramento: Acompanha progresso e performance em tempo real

🛡️ Confiabilidade

  • Recuperação de erros: Tenta resolver problemas automaticamente
  • Validação rigorosa: Verificações de qualidade em cada etapa
  • Preservação de estado: Mantém contexto durante toda execução
  • Backup automático: Pontos de recuperação em momentos críticos

🤖 29 Agentes Especializados

Core Development

  • agent_react_components - Componentes React com TypeScript
  • agent_tailwind_estilization - Estilização pixel-perfect
  • agent_redux_toolkit - Estado global otimizado
  • agent_figma_extract - Design tokens automáticos

Quality Assurance

  • agent_code_quality - Tolerância zero para erros
  • agent_security - Vulnerabilidades e melhores práticas
  • agent_accessibility - WCAG e inclusão
  • agent_integration_tests - Testes automatizados

Enterprise Features

  • agent_state_manager - Estado vivo em tempo real
  • agent_pipeline_optimizer - Otimização dinâmica
  • agent_auto_healing - Recuperação automática
  • agent_metrics_collector - Observabilidade completa

Backend & Full-Stack

  • agent_nestjs_backend - APIs enterprise com NestJS
  • agent_golang_backend - Microserviços em Go
  • agent_mcp_memory_manager - Memória persistente MCP
  • agent_pwa_progressive - Progressive Web Apps
  • agent_playwright_validation - Testes E2E avançados

Ver todos os 29 agentes →

🚀 Instalação e Uso

Instalação Global

npm install -g frontend-flow-agents

Setup em Projeto

cd meu-projeto-react
frontend-flow init

Executar Demandas

# Componente simples
frontend-flow "criar botão de login responsivo"

# Feature complexa
frontend-flow "implementar sistema de carrinho com checkout"

# Otimização
frontend-flow "melhorar performance da listagem de produtos"

# Refatoração
frontend-flow "refatorar autenticação com melhor segurança"

📊 Monitoramento em Tempo Real

O Frontend Flow mantém um arquivo de estado vivo que você pode acompanhar:

# Ver status atual
frontend-flow status

# Arquivo de estado em tempo real
cat .frontend-flow/temp/current_pipeline_state.md

Exemplo de estado vivo:

# 🚀 Pipeline Estado Vivo - feature_completa

**🎯 Status**: RUNNING | **📊 Progresso**: 65% | **⏱️ Tempo**: 8m 23s
**🎨 Demanda Original**: "criar dashboard de analytics"
**⏳ Estimativa Restante**: 4m 12s

## 🔄 Agentes em Execução Paralela

- 🟢 agent_react_components (85% concluído)
- 🟡 agent_redux_toolkit (45% concluído)
- ⏳ agent_tailwind_estilization (próximo)

🎯 Exemplos Práticos

E-commerce Dashboard

frontend-flow "criar dashboard para loja online com métricas de vendas, gráficos de performance e gestão de produtos"

Resultado: Sistema completo com componentes React, estado Redux, gráficos interativos, testes e documentação.

Sistema de Autenticação

frontend-flow "implementar login seguro com 2FA, recuperação de senha e controle de sessão"

Resultado: Fluxo completo de auth com validações, testes de segurança e integração.

Performance Optimization

frontend-flow "otimizar carregamento da página inicial reduzindo bundle size"

Resultado: Análise automatizada, code splitting, lazy loading e métricas de melhoria.

🔧 Compatibilidade

Frameworks Suportados

  • ✅ Next.js (App Router + Pages Router)
  • ✅ Vite + React
  • ✅ Create React App
  • ✅ React genérico

Tecnologias Integradas

  • ✅ TypeScript (detecção automática)
  • ✅ Tailwind CSS (configuração automática)
  • ✅ shadcn/ui (componentes premium)
  • ✅ Redux Toolkit (estado global)
  • ✅ ESLint + Prettier (quality gates)

Integrações Git

  • ✅ GitHub (issues + PRs automáticos)
  • ✅ GitLab (suporte planejado)
  • ✅ Bitbucket (suporte planejado)

🌟 Casos de Uso

Para Desenvolvedores

  • 🚀 Prototipagem rápida: De ideia a MVP em minutos
  • 🔧 Refatoração inteligente: Melhoria automática de código
  • 🐛 Debugging assistido: Identificação e correção de problemas
  • 📈 Otimização contínua: Performance e qualidade automatizada

Para Equipes

  • 👥 Padronização: Código consistente em toda equipe
  • 📊 Observabilidade: Métricas detalhadas de desenvolvimento
  • 🔄 CI/CD Integration: Pipeline automatizado
  • 📝 Documentação: Auto-gerada e sempre atualizada

Para Empresas

  • 💰 ROI Maximizado: 40-70% redução no tempo de desenvolvimento
  • 🛡️ Compliance: Padrões de segurança e acessibilidade
  • 📈 Escalabilidade: Suporte a projetos de qualquer tamanho
  • 🎯 Quality Assurance: Tolerância zero para bugs

🆕 Benefícios Exclusivos v2.0 Enhanced

Para Desenvolvedores

  • 🧠 Decisões Técnicas Superiores: Mesa técnica com 13 especialistas virtuais
  • 🎯 Pipeline Inteligente: Classificação 95%+ precisa automatiza seleção de agentes
  • 📊 Visibilidade Total: Dashboard tempo real mostra progresso detalhado
  • ⚡ Experiência Premium: Interface visual moderna com métricas

Para Tech Leads

  • 🛡️ Redução Risco: 60% menos problemas técnicos com validação prévia
  • 📈 Métricas Precisas: Tracking automático de componentes, build time, cobertura
  • 🔍 Observabilidade: Histórico completo de decisões técnicas
  • 🎯 Consistência: Padrões técnicos aplicados automaticamente

Para CTOs

  • 💡 Inovação: Primeira ferramenta com mesa técnica IA integrada
  • 📊 ROI Mensurável: Métricas precisas de produtividade e qualidade
  • 🚀 Competitive Advantage: Stack tecnológico diferenciado
  • 🔄 Future-proof: Arquitetura extensível para novos agentes

📚 Documentação

💡 CLI Completo

# Comandos principais
frontend-flow init                    # Inicializar projeto
frontend-flow "demanda"               # Executar pipeline
frontend-flow status                  # Ver status atual
frontend-flow doctor                  # Verificar saúde do sistema
frontend-flow clean                   # Limpar temporários

# 🆕 Comandos Enhanced v2.0
frontend-flow "demanda" --enhanced    # Forçar modo Enhanced
frontend-flow "demanda" --standard    # Forçar modo padrão
frontend-flow "demanda" --no-monitor  # Desabilitar monitor tempo real
frontend-flow dashboard               # Abrir dashboard (http://localhost:8081)

# Opções avançadas
frontend-flow "demanda" --dry-run     # Simular execução
frontend-flow "demanda" --verbose     # Logs detalhados
frontend-flow "demanda" --pipeline=performance_focus  # Pipeline específico

# Aliases disponíveis
ff "demanda"                          # Alias curto
ff doctor                             # Verificação rápida
ff dashboard                          # 🆕 Abrir monitor

🤝 Contribuição

Contribuições são bem-vindas! Veja CONTRIBUTING.md para detalhes.

Como contribuir:

  1. Fork o repositório
  2. Crie uma branch para sua feature
  3. Faça commit das mudanças
  4. Abra um Pull Request

📄 Licença

MIT © Saturnino Fábrica de Software

Made with ❤️ by Emerson Saturnino

Frontend Flow - Transformando ideias em código de produção automaticamente