From 45cd8d2f0353a381f89fd43c9cfdc0df832d8446 Mon Sep 17 00:00:00 2001 From: Tiago Date: Sun, 4 Oct 2026 10:42:23 -0300 Subject: [PATCH] Initial SeConectai briefing system --- .env.example | 25 + .eslintrc.json | 3 + .gitignore | 9 + Caddyfile | 8 + Conhecimento/AGENTS.md | 260 ++ Conhecimento/README.md | 77 + Conhecimento/agents/00-project-analyzer.md | 65 + Conhecimento/agents/01-codebase-guardian.md | 46 + Conhecimento/agents/02-ui-ux.md | 51 + Conhecimento/agents/03-design-system.md | 52 + Conhecimento/agents/04-frontend.md | 42 + Conhecimento/agents/05-forms.md | 45 + Conhecimento/agents/06-dashboard.md | 48 + Conhecimento/agents/07-landing-page.md | 37 + Conhecimento/agents/08-responsive.md | 42 + Conhecimento/agents/09-accessibility.md | 32 + Conhecimento/agents/10-seo.md | 26 + Conhecimento/agents/11-performance.md | 30 + Conhecimento/agents/12-visual-qa.md | 35 + Conhecimento/agents/13-regression-check.md | 25 + Conhecimento/agents/accessibility.md | 6 + Conhecimento/agents/dashboard.md | 6 + Conhecimento/agents/design-system.md | 6 + Conhecimento/agents/frontend.md | 6 + Conhecimento/agents/landing-page.md | 6 + Conhecimento/agents/performance.md | 6 + Conhecimento/agents/responsive.md | 6 + Conhecimento/agents/seo.md | 6 + Conhecimento/agents/ui-ux.md | 6 + Conhecimento/agents/visual-qa.md | 6 + Conhecimento/checklists/post-change.md | 17 + Conhecimento/checklists/pre-change.md | 11 + Conhecimento/prompts/auditar-projeto.md | 25 + Conhecimento/prompts/criar-dashboard.md | 16 + Conhecimento/prompts/criar-site.md | 23 + Conhecimento/prompts/fix-mobile.md | 17 + Conhecimento/prompts/melhorar-frontend.md | 19 + Conhecimento/prompts/revisao-final.md | 20 + Conhecimento/skills/design-system.md | 23 + Conhecimento/skills/forms.md | 14 + Conhecimento/skills/nextjs.md | 13 + Conhecimento/skills/react.md | 13 + Conhecimento/skills/responsive.md | 15 + Conhecimento/skills/tables.md | 18 + Conhecimento/skills/tailwind.md | 16 + Conhecimento/skills/vue.md | 9 + Dockerfile | 36 + README.md | 133 + Schema/00-arquitetura-briefing-site.md | 51 + Schema/01-setup-projeto-docker.md | 23 + Schema/02-banco-prisma-schema.md | 26 + Schema/03-seed-briefing-do-docx.md | 35 + Schema/04-autenticacao-e-cadastro.md | 35 + Schema/05-motor-do-formulario-briefing.md | 30 + Schema/06-botao-ajuda-popup.md | 29 + Schema/07-rascunho-autosave-e-envio.md | 23 + Schema/08-upload-anexos-checklist.md | 26 + Schema/09-painel-admin.md | 25 + Schema/10-exportacao-pdf-e-notificacoes.md | 22 + Schema/11-lgpd-e-seguranca.md | 26 + Schema/12-deploy-producao.md | 24 + Schema/99-progresso.md | 29 + Schema/briefing-seed.json | 2174 +++++++++++++++++ app/(admin)/admin/actions.ts | 136 ++ app/(admin)/admin/briefings/[id]/page.tsx | 137 ++ .../admin/clientes/[id]/mostrar-cpf.tsx | 28 + app/(admin)/admin/clientes/[id]/page.tsx | 101 + app/(admin)/admin/clientes/page.tsx | 89 + app/(admin)/admin/page.tsx | 110 + app/(admin)/admin/perguntas/page.tsx | 90 + app/(auth)/actions.ts | 7 + .../briefings/[id]/[secao]/actions.ts | 97 + app/(cliente)/briefings/[id]/[secao]/page.tsx | 108 + .../briefings/[id]/[secao]/secao-form.tsx | 205 ++ .../[id]/cabecalho-briefing-form.tsx | 37 + app/(cliente)/briefings/[id]/page.tsx | 110 + .../briefings/[id]/revisao/actions.ts | 67 + .../[id]/revisao/envio-briefing-form.tsx | 66 + app/(cliente)/briefings/[id]/revisao/page.tsx | 131 + app/(cliente)/briefings/actions.ts | 9 + app/(cliente)/briefings/page.tsx | 74 + app/(cliente)/minha-conta/actions.ts | 87 + app/(cliente)/minha-conta/conta-form.tsx | 87 + app/(cliente)/minha-conta/page.tsx | 77 + app/(publico)/cadastro/actions.ts | 131 + app/(publico)/cadastro/cadastro-form.tsx | 128 + app/(publico)/cadastro/page.tsx | 37 + app/(publico)/login/actions.ts | 33 + app/(publico)/login/login-form.tsx | 47 + app/(publico)/login/page.tsx | 29 + app/(publico)/privacidade/page.tsx | 25 + app/(publico)/recuperar-senha/actions.ts | 66 + app/(publico)/recuperar-senha/page.tsx | 26 + .../recuperar-senha/recuperar-senha-form.tsx | 39 + app/(publico)/redefinir-senha/actions.ts | 69 + app/(publico)/redefinir-senha/page.tsx | 36 + .../redefinir-senha/redefinir-senha-form.tsx | 44 + app/(publico)/termos/page.tsx | 25 + app/api/anexos/[id]/route.ts | 63 + app/api/auth/[...nextauth]/route.ts | 3 + .../perguntas/[perguntaId]/anexos/route.ts | 86 + app/api/briefings/[id]/pdf/route.ts | 29 + app/api/health/route.ts | 27 + app/api/minha-conta/exportar/route.ts | 14 + app/globals.css | 34 + app/layout.tsx | 22 + app/page.tsx | 69 + auth.ts | 101 + components.json | 19 + components/ajuda/AjudaButton.tsx | 95 + components/form/AnexoField.tsx | 177 ++ components/form/PerguntaField.tsx | 158 ++ components/ui/alert.tsx | 39 + components/ui/badge.tsx | 30 + components/ui/button.tsx | 52 + components/ui/card.tsx | 40 + components/ui/checkbox.tsx | 27 + components/ui/dialog.tsx | 103 + components/ui/input.tsx | 19 + components/ui/label.tsx | 20 + components/ui/progress.tsx | 24 + components/ui/radio-group.tsx | 35 + components/ui/table.tsx | 46 + components/ui/textarea.tsx | 18 + docker-compose.prod.yml | 84 + docker-compose.yml | 45 + lib/account-service.ts | 88 + lib/admin-service.ts | 203 ++ lib/anexo-service.ts | 75 + lib/briefing-pdf.tsx | 154 ++ lib/briefing-queries.ts | 17 + lib/briefing-service.ts | 271 ++ lib/crypto.ts | 60 + lib/db.ts | 18 + lib/format.ts | 7 + lib/mail.ts | 33 + lib/notifications.ts | 110 + lib/pdf-data.ts | 59 + lib/rate-limit.ts | 23 + lib/request-security.ts | 33 + lib/storage.ts | 134 + lib/utils.ts | 6 + lib/validators.ts | 115 + middleware.ts | 42 + next-env.d.ts | 4 + next.config.mjs | 44 + package.json | 59 + postcss.config.mjs | 8 + prisma/.gitkeep | 1 + prisma/briefing-seed.json | 2174 +++++++++++++++++ prisma/migrations/0001_init/migration.sql | 149 ++ .../0002_configuracao/migration.sql | 10 + .../0003_admin_auditoria_notas/migration.sql | 27 + .../0004_envios_notificacao/migration.sql | 22 + .../0005_solicitacoes_exclusao/migration.sql | 16 + prisma/schema.prisma | 282 +++ prisma/seed.ts | 154 ++ scripts/backup.sh | 28 + scripts/release.sh | 5 + scripts/restore.sh | 26 + tailwind.config.ts | 56 + tsconfig.json | 23 + types/next-auth.d.ts | 22 + 163 files changed, 12659 insertions(+) create mode 100644 .env.example create mode 100644 .eslintrc.json create mode 100644 .gitignore create mode 100644 Caddyfile create mode 100644 Conhecimento/AGENTS.md create mode 100644 Conhecimento/README.md create mode 100644 Conhecimento/agents/00-project-analyzer.md create mode 100644 Conhecimento/agents/01-codebase-guardian.md create mode 100644 Conhecimento/agents/02-ui-ux.md create mode 100644 Conhecimento/agents/03-design-system.md create mode 100644 Conhecimento/agents/04-frontend.md create mode 100644 Conhecimento/agents/05-forms.md create mode 100644 Conhecimento/agents/06-dashboard.md create mode 100644 Conhecimento/agents/07-landing-page.md create mode 100644 Conhecimento/agents/08-responsive.md create mode 100644 Conhecimento/agents/09-accessibility.md create mode 100644 Conhecimento/agents/10-seo.md create mode 100644 Conhecimento/agents/11-performance.md create mode 100644 Conhecimento/agents/12-visual-qa.md create mode 100644 Conhecimento/agents/13-regression-check.md create mode 100644 Conhecimento/agents/accessibility.md create mode 100644 Conhecimento/agents/dashboard.md create mode 100644 Conhecimento/agents/design-system.md create mode 100644 Conhecimento/agents/frontend.md create mode 100644 Conhecimento/agents/landing-page.md create mode 100644 Conhecimento/agents/performance.md create mode 100644 Conhecimento/agents/responsive.md create mode 100644 Conhecimento/agents/seo.md create mode 100644 Conhecimento/agents/ui-ux.md create mode 100644 Conhecimento/agents/visual-qa.md create mode 100644 Conhecimento/checklists/post-change.md create mode 100644 Conhecimento/checklists/pre-change.md create mode 100644 Conhecimento/prompts/auditar-projeto.md create mode 100644 Conhecimento/prompts/criar-dashboard.md create mode 100644 Conhecimento/prompts/criar-site.md create mode 100644 Conhecimento/prompts/fix-mobile.md create mode 100644 Conhecimento/prompts/melhorar-frontend.md create mode 100644 Conhecimento/prompts/revisao-final.md create mode 100644 Conhecimento/skills/design-system.md create mode 100644 Conhecimento/skills/forms.md create mode 100644 Conhecimento/skills/nextjs.md create mode 100644 Conhecimento/skills/react.md create mode 100644 Conhecimento/skills/responsive.md create mode 100644 Conhecimento/skills/tables.md create mode 100644 Conhecimento/skills/tailwind.md create mode 100644 Conhecimento/skills/vue.md create mode 100644 Dockerfile create mode 100644 README.md create mode 100644 Schema/00-arquitetura-briefing-site.md create mode 100644 Schema/01-setup-projeto-docker.md create mode 100644 Schema/02-banco-prisma-schema.md create mode 100644 Schema/03-seed-briefing-do-docx.md create mode 100644 Schema/04-autenticacao-e-cadastro.md create mode 100644 Schema/05-motor-do-formulario-briefing.md create mode 100644 Schema/06-botao-ajuda-popup.md create mode 100644 Schema/07-rascunho-autosave-e-envio.md create mode 100644 Schema/08-upload-anexos-checklist.md create mode 100644 Schema/09-painel-admin.md create mode 100644 Schema/10-exportacao-pdf-e-notificacoes.md create mode 100644 Schema/11-lgpd-e-seguranca.md create mode 100644 Schema/12-deploy-producao.md create mode 100644 Schema/99-progresso.md create mode 100644 Schema/briefing-seed.json create mode 100644 app/(admin)/admin/actions.ts create mode 100644 app/(admin)/admin/briefings/[id]/page.tsx create mode 100644 app/(admin)/admin/clientes/[id]/mostrar-cpf.tsx create mode 100644 app/(admin)/admin/clientes/[id]/page.tsx create mode 100644 app/(admin)/admin/clientes/page.tsx create mode 100644 app/(admin)/admin/page.tsx create mode 100644 app/(admin)/admin/perguntas/page.tsx create mode 100644 app/(auth)/actions.ts create mode 100644 app/(cliente)/briefings/[id]/[secao]/actions.ts create mode 100644 app/(cliente)/briefings/[id]/[secao]/page.tsx create mode 100644 app/(cliente)/briefings/[id]/[secao]/secao-form.tsx create mode 100644 app/(cliente)/briefings/[id]/cabecalho-briefing-form.tsx create mode 100644 app/(cliente)/briefings/[id]/page.tsx create mode 100644 app/(cliente)/briefings/[id]/revisao/actions.ts create mode 100644 app/(cliente)/briefings/[id]/revisao/envio-briefing-form.tsx create mode 100644 app/(cliente)/briefings/[id]/revisao/page.tsx create mode 100644 app/(cliente)/briefings/actions.ts create mode 100644 app/(cliente)/briefings/page.tsx create mode 100644 app/(cliente)/minha-conta/actions.ts create mode 100644 app/(cliente)/minha-conta/conta-form.tsx create mode 100644 app/(cliente)/minha-conta/page.tsx create mode 100644 app/(publico)/cadastro/actions.ts create mode 100644 app/(publico)/cadastro/cadastro-form.tsx create mode 100644 app/(publico)/cadastro/page.tsx create mode 100644 app/(publico)/login/actions.ts create mode 100644 app/(publico)/login/login-form.tsx create mode 100644 app/(publico)/login/page.tsx create mode 100644 app/(publico)/privacidade/page.tsx create mode 100644 app/(publico)/recuperar-senha/actions.ts create mode 100644 app/(publico)/recuperar-senha/page.tsx create mode 100644 app/(publico)/recuperar-senha/recuperar-senha-form.tsx create mode 100644 app/(publico)/redefinir-senha/actions.ts create mode 100644 app/(publico)/redefinir-senha/page.tsx create mode 100644 app/(publico)/redefinir-senha/redefinir-senha-form.tsx create mode 100644 app/(publico)/termos/page.tsx create mode 100644 app/api/anexos/[id]/route.ts create mode 100644 app/api/auth/[...nextauth]/route.ts create mode 100644 app/api/briefings/[briefingId]/perguntas/[perguntaId]/anexos/route.ts create mode 100644 app/api/briefings/[id]/pdf/route.ts create mode 100644 app/api/health/route.ts create mode 100644 app/api/minha-conta/exportar/route.ts create mode 100644 app/globals.css create mode 100644 app/layout.tsx create mode 100644 app/page.tsx create mode 100644 auth.ts create mode 100644 components.json create mode 100644 components/ajuda/AjudaButton.tsx create mode 100644 components/form/AnexoField.tsx create mode 100644 components/form/PerguntaField.tsx create mode 100644 components/ui/alert.tsx create mode 100644 components/ui/badge.tsx create mode 100644 components/ui/button.tsx create mode 100644 components/ui/card.tsx create mode 100644 components/ui/checkbox.tsx create mode 100644 components/ui/dialog.tsx create mode 100644 components/ui/input.tsx create mode 100644 components/ui/label.tsx create mode 100644 components/ui/progress.tsx create mode 100644 components/ui/radio-group.tsx create mode 100644 components/ui/table.tsx create mode 100644 components/ui/textarea.tsx create mode 100644 docker-compose.prod.yml create mode 100644 docker-compose.yml create mode 100644 lib/account-service.ts create mode 100644 lib/admin-service.ts create mode 100644 lib/anexo-service.ts create mode 100644 lib/briefing-pdf.tsx create mode 100644 lib/briefing-queries.ts create mode 100644 lib/briefing-service.ts create mode 100644 lib/crypto.ts create mode 100644 lib/db.ts create mode 100644 lib/format.ts create mode 100644 lib/mail.ts create mode 100644 lib/notifications.ts create mode 100644 lib/pdf-data.ts create mode 100644 lib/rate-limit.ts create mode 100644 lib/request-security.ts create mode 100644 lib/storage.ts create mode 100644 lib/utils.ts create mode 100644 lib/validators.ts create mode 100644 middleware.ts create mode 100644 next-env.d.ts create mode 100644 next.config.mjs create mode 100644 package.json create mode 100644 postcss.config.mjs create mode 100644 prisma/.gitkeep create mode 100644 prisma/briefing-seed.json create mode 100644 prisma/migrations/0001_init/migration.sql create mode 100644 prisma/migrations/0002_configuracao/migration.sql create mode 100644 prisma/migrations/0003_admin_auditoria_notas/migration.sql create mode 100644 prisma/migrations/0004_envios_notificacao/migration.sql create mode 100644 prisma/migrations/0005_solicitacoes_exclusao/migration.sql create mode 100644 prisma/schema.prisma create mode 100644 prisma/seed.ts create mode 100755 scripts/backup.sh create mode 100755 scripts/release.sh create mode 100755 scripts/restore.sh create mode 100644 tailwind.config.ts create mode 100644 tsconfig.json create mode 100644 types/next-auth.d.ts diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..2ea0fbc --- /dev/null +++ b/.env.example @@ -0,0 +1,25 @@ +DATABASE_URL="postgresql://briefing:briefing@db:5432/briefing?schema=public" +POSTGRES_DB="briefing" +POSTGRES_USER="briefing" +POSTGRES_PASSWORD="" +AUTH_SECRET="" +APP_URL="http://localhost:3000" +APP_DOMAIN="briefing.example.com" +LETSENCRYPT_EMAIL="admin@example.com" +CPF_ENC_KEY="" +CPF_HASH_KEY="" +SMTP_HOST="" +SMTP_PORT="587" +SMTP_USER="" +SMTP_PASS="" +SMTP_FROM="" +ADMIN_EMAIL="" +ADMIN_INITIAL_PASSWORD="" +EVOLUTION_API_URL="" +EVOLUTION_API_KEY="" +EVOLUTION_API_INSTANCE="" +ADMIN_WHATSAPP="" +UPLOAD_DIR="/app/storage/uploads" +UPLOAD_MAX_MB="25" +BACKUP_DIR="./backups" +BACKUP_RETENTION_DAYS="14" diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..957cd15 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": ["next/core-web-vitals"] +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3c5aa94 --- /dev/null +++ b/.gitignore @@ -0,0 +1,9 @@ +node_modules +.next +out +dist +.env +.env*.local +*.log +storage/uploads +coverage diff --git a/Caddyfile b/Caddyfile new file mode 100644 index 0000000..c99bfe0 --- /dev/null +++ b/Caddyfile @@ -0,0 +1,8 @@ +{ + email {$LETSENCRYPT_EMAIL} +} + +{$APP_DOMAIN} { + encode gzip zstd + reverse_proxy app:3000 +} diff --git a/Conhecimento/AGENTS.md b/Conhecimento/AGENTS.md new file mode 100644 index 0000000..9c58f37 --- /dev/null +++ b/Conhecimento/AGENTS.md @@ -0,0 +1,260 @@ +# Vibe Frontend Agents — Orquestrador Principal + +Este arquivo é a fonte central de regras para qualquer IA/agente que trabalhe neste projeto. +Ele deve ser lido **antes de qualquer alteração**. Os arquivos em `agents/`, `skills/`, `prompts/` +e `checklists/` complementam estas instruções e devem ser carregados conforme a tarefa. + +--- + +## 1. Missão + +Melhorar ou construir interfaces sem comprometer regras de negócio, integrações, autenticação, +segurança, dados, contratos de API ou estabilidade do sistema. + +O objetivo não é apenas “deixar bonito”. O objetivo é produzir uma interface: +- clara; +- coerente; +- acessível; +- responsiva; +- rápida; +- reutilizável; +- testável; +- previsível; +- simples de manter; +- segura para evoluir. + +--- + +## 2. Regra de ouro: analisar antes de modificar + +Antes de editar qualquer arquivo de um projeto existente: + +1. Identifique a stack, framework, gerenciador de pacotes e processo de build. +2. Mapeie a estrutura de pastas e responsabilidades principais. +3. Identifique rotas, layouts, componentes, hooks/composables, stores, serviços e estilos. +4. Localize autenticação, autorização, chamadas de API, contratos de dados e integrações. +5. Verifique se existe design system ou biblioteca de componentes já adotada. +6. Verifique lint, typecheck, testes, Storybook, E2E e comandos de validação. +7. Entenda exatamente o escopo solicitado pelo usuário. +8. Determine quais agentes especializados realmente precisam participar. +9. Só então altere o código. + +Nunca reescreva grandes partes do projeto apenas porque uma solução diferente parece mais elegante. + +--- + +## 3. Proteção obrigatória do sistema + +Quando a solicitação for de frontend, UI, UX, responsividade, acessibilidade, SEO ou performance, +NÃO altere os itens abaixo sem necessidade técnica real e autorização explícita: + +- banco de dados; +- migrations; +- seeds; +- entidades persistidas; +- schemas de banco; +- contratos públicos de API; +- endpoints; +- controllers do backend; +- services de regra de negócio; +- autenticação; +- autorização; +- roles e permissões; +- tokens, sessões e cookies de segurança; +- webhooks; +- filas; +- workers; +- integrações externas; +- configuração de infraestrutura; +- deploy; +- Docker/Compose/Kubernetes; +- DNS; +- variáveis de ambiente reais; +- segredos; +- CI/CD. + +### Exceção + +Se a alteração de frontend exigir mudança em uma dessas áreas: +1. não faça a alteração silenciosamente; +2. explique a dependência; +3. proponha a menor mudança possível; +4. preserve compatibilidade retroativa quando viável; +5. só implemente se a tarefa autorizar. + +--- + +## 4. Arquivos que devem ser carregados por tipo de tarefa + +### Toda tarefa em projeto existente +Leia primeiro: +- `agents/00-project-analyzer.md` +- `agents/01-codebase-guardian.md` + +### UI/UX ou melhoria visual +Leia: +- `agents/02-ui-ux.md` +- `agents/03-design-system.md` +- `agents/04-frontend.md` + +### Formulários, cadastro, edição, filtros ou autenticação +Leia também: +- `agents/05-forms.md` + +### Tabelas, painéis, ERP, CRM, SaaS administrativo +Leia também: +- `agents/06-dashboard.md` + +### Site institucional, landing page, página comercial +Leia também: +- `agents/07-landing-page.md` +- `agents/10-seo.md` + +### Mobile/responsividade +Leia: +- `agents/08-responsive.md` + +### Acessibilidade +Leia: +- `agents/09-accessibility.md` + +### Performance +Leia: +- `agents/11-performance.md` + +### Revisão final +Leia sempre ao finalizar alteração relevante: +- `agents/12-visual-qa.md` +- `agents/13-regression-check.md` + +--- + +## 5. Pipeline padrão + +### Fase A — Descoberta +1. Ler este `AGENTS.md`. +2. Ler `00-project-analyzer.md`. +3. Ler `01-codebase-guardian.md`. +4. Inspecionar o projeto. +5. Registrar stack, arquitetura, riscos e escopo. + +### Fase B — Planejamento +1. Classificar a tarefa. +2. Selecionar somente os agentes necessários. +3. Identificar componentes afetados. +4. Identificar dependências e riscos de regressão. +5. Elaborar um plano mínimo de mudança. + +### Fase C — Implementação +1. Reutilizar padrões existentes. +2. Alterar o menor número razoável de arquivos. +3. Preservar contratos existentes. +4. Tratar estados de UI. +5. Evitar duplicação. +6. Não adicionar dependências sem justificativa. + +### Fase D — Validação +1. Build. +2. Typecheck. +3. Lint. +4. Testes disponíveis. +5. Navegação principal. +6. Mobile e desktop. +7. Estados loading/erro/vazio/sucesso. +8. Acessibilidade básica. +9. Console sem erros relevantes. +10. Revisão visual. +11. Checagem de regressão. + +### Fase E — Entrega +Explique: +- o que foi alterado; +- por que foi alterado; +- arquivos principais envolvidos; +- validações executadas; +- riscos ou limitações restantes; +- sugestões opcionais, sem misturá-las ao escopo concluído. + +--- + +## 6. Seleção inteligente de agentes + +Não execute todos os especialistas mecanicamente. + +Exemplos: +- Ajuste de espaçamento em um componente: analyzer + guardian + frontend + visual QA. +- Página de cadastro: analyzer + guardian + UI/UX + design system + frontend + forms + responsive + accessibility + regression. +- Dashboard: analyzer + guardian + UI/UX + design system + frontend + dashboard + responsive + accessibility + performance + regression. +- Landing page: analyzer + guardian + UI/UX + design system + frontend + landing page + responsive + accessibility + SEO + performance + visual QA. + +--- + +## 7. Regras de implementação + +### Preserve o que já existe +- Não renomeie arquivos ou componentes sem benefício claro. +- Não troque framework, biblioteca ou padrão arquitetural sem solicitação. +- Não converta JS para TS, CSS para Tailwind, Redux para Zustand etc. como efeito colateral. +- Não faça “limpeza geral” fora do escopo. + +### Dependências +Antes de instalar uma dependência: +1. verifique se o projeto já oferece solução equivalente; +2. verifique se a plataforma/framework tem recurso nativo; +3. avalie custo de bundle e manutenção; +4. justifique a instalação. + +### Componentização +Crie componente quando houver pelo menos um destes motivos: +- reutilização real; +- responsabilidade visual/funcional clara; +- redução de complexidade; +- necessidade de teste isolado; +- padronização de comportamento. + +Não crie componentes microscópicos sem ganho prático. + +--- + +## 8. Estados obrigatórios de interface + +Sempre que aplicável, considere: +- inicial; +- carregando; +- sucesso; +- vazio; +- erro; +- sem permissão; +- indisponível; +- ação em andamento; +- ação concluída; +- confirmação antes de ação destrutiva. + +Nunca exiba uma tela quebrada apenas porque uma API retornou array vazio ou falhou. + +--- + +## 9. Regras de dados + +- Não invente métricas reais. +- Não fabrique dados de produção. +- Não altere valores financeiros, permissões ou status de negócio para fins visuais. +- Diferencie mock, fixture e dado real. +- Respeite locale, moeda, fuso e formatação existente. +- Não exponha secrets ou tokens no frontend. + +--- + +## 10. Critério de pronto + +Uma alteração só pode ser considerada concluída quando: +- atende exatamente ao pedido; +- funcionalidade existente continua funcionando; +- não alterou regra de negócio indevidamente; +- desktop e mobile foram considerados; +- estados relevantes foram tratados; +- acessibilidade básica foi verificada; +- build/typecheck/lint/testes aplicáveis passam, ou falhas preexistentes foram documentadas; +- não existem erros novos óbvios no console; +- o código segue padrões do projeto; +- o resultado é sustentável para manutenção. diff --git a/Conhecimento/README.md b/Conhecimento/README.md new file mode 100644 index 0000000..cec5099 --- /dev/null +++ b/Conhecimento/README.md @@ -0,0 +1,77 @@ +# Vibe Frontend Agents v2 + +Pacote de instruções para orientar ferramentas de Vibe Coding e agentes de IA em projetos frontend. +A versão 2 transforma o `AGENTS.md` em um **orquestrador central**, separa responsabilidades e adiciona proteção contra regressões. + +## Estrutura + +```text +AGENTS.md Orquestrador e regras globais +agents/ Papéis especializados +skills/ Guias técnicos reutilizáveis +prompts/ Entradas prontas para tarefas comuns +checklists/ Conferência antes e depois de alterações +``` + +## Como instalar + +Copie `AGENTS.md`, `agents/`, `skills/`, `prompts/` e `checklists/` para a raiz do projeto. + +> Importante: o suporte automático a `AGENTS.md` varia entre ferramentas. Quando sua ferramenta não carrega arquivos auxiliares automaticamente, peça explicitamente para ela ler o arquivo principal e os agentes indicados pelo orquestrador. + +## Fluxo recomendado — projeto existente + +1. `prompts/auditar-projeto.md` +2. revisar diagnóstico quando a tarefa exigir auditoria formal; +3. `prompts/melhorar-frontend.md` ou prompt especializado; +4. implementar; +5. `prompts/revisao-final.md`. + +## Fluxo recomendado — dashboard + +Use `prompts/criar-dashboard.md`. + +## Fluxo recomendado — landing page + +Use `prompts/criar-site.md`. + +## Fluxo recomendado — correção mobile + +Use `prompts/fix-mobile.md`. + +## Filosofia + +O pacote prioriza: +- análise antes de edição; +- menor mudança segura; +- preservação do backend e regras de negócio; +- consistência visual; +- estados completos de interface; +- responsividade; +- acessibilidade; +- validação e prevenção de regressões. + +## Ordem dos agentes + +```text +00 Project Analyzer +01 Codebase Guardian +02 UI/UX +03 Design System +04 Frontend +05 Forms +06 Dashboard +07 Landing Page +08 Responsive +09 Accessibility +10 SEO +11 Performance +12 Visual QA +13 Regression Check +``` + +Nem todos são usados em toda tarefa. O `AGENTS.md` explica a seleção. + +## Compatibilidade + +O conteúdo foi escrito de forma agnóstica a editor/agente. Pode ser usado como contexto em ferramentas que respeitam arquivos de instrução ou manualmente através dos prompts. diff --git a/Conhecimento/agents/00-project-analyzer.md b/Conhecimento/agents/00-project-analyzer.md new file mode 100644 index 0000000..552d01d --- /dev/null +++ b/Conhecimento/agents/00-project-analyzer.md @@ -0,0 +1,65 @@ +# Agente 00 — Project Analyzer + +## Papel +É o primeiro especialista de qualquer projeto existente. Sua função é compreender o sistema sem alterar código. + +## Objetivo +Criar um mapa confiável do projeto para evitar mudanças cegas, retrabalho e regressões. + +## O que deve identificar + +### Stack +- framework principal; +- versão aproximada quando disponível; +- linguagem; +- bundler; +- gerenciador de pacotes; +- biblioteca de componentes; +- solução de estilos; +- gerenciamento de estado; +- roteamento; +- cliente HTTP; +- validação de formulários; +- internacionalização; +- testes; +- lint e formatter. + +### Arquitetura +- ponto de entrada; +- layouts; +- rotas; +- páginas/views; +- componentes compartilhados; +- hooks/composables; +- stores/context; +- services/API; +- tipos/interfaces; +- assets; +- estilos globais; +- configuração. + +### Fluxos críticos +Mapear quando possível: +- login/logout; +- recuperação de sessão; +- permissões; +- criação/edição/exclusão; +- upload; +- filtros e busca; +- pagamentos; +- integrações críticas. + +## Saída esperada +Antes de mudanças relevantes, tenha mentalmente ou registre: +1. Stack detectada. +2. Arquivos mais importantes. +3. Padrões existentes. +4. Áreas sensíveis. +5. Arquivos provavelmente afetados pela tarefa. +6. Riscos. +7. Validações possíveis. + +## Proibições +- Não implementar durante a análise inicial. +- Não concluir que algo “não existe” sem procurar adequadamente. +- Não sugerir reescrita completa por preferência pessoal. diff --git a/Conhecimento/agents/01-codebase-guardian.md b/Conhecimento/agents/01-codebase-guardian.md new file mode 100644 index 0000000..a26f9a4 --- /dev/null +++ b/Conhecimento/agents/01-codebase-guardian.md @@ -0,0 +1,46 @@ +# Agente 01 — Codebase Guardian + +## Papel +Proteger comportamento existente, contratos e regras de negócio durante alterações de frontend. + +## Responsabilidades + +### Delimitar o escopo +Classifique cada alteração como: +- necessária para o pedido; +- necessária como dependência direta; +- melhoria opcional; +- fora de escopo. + +Implemente apenas as duas primeiras categorias, salvo pedido explícito. + +### Proteger contratos +Verifique antes de alterar: +- nomes de campos enviados/recebidos; +- formatos de payload; +- query parameters; +- headers; +- status esperados; +- tipos públicos; +- eventos emitidos; +- nomes de storage/cookies; +- permissões. + +### Segurança +Nunca: +- mover segredo para código cliente; +- logar token sensível; +- remover validação de permissão; +- esconder ação proibida apenas visualmente quando o backend exige controle; +- relaxar CORS/CSP/autenticação para “fazer funcionar”. + +### Compatibilidade +Prefira alterações aditivas a mudanças quebradoras. + +## Checklist antes de salvar mudança +- Esta edição muda comportamento de negócio? +- Muda contrato de API? +- Muda autenticação ou autorização? +- Remove alguma capacidade existente? +- Afeta fluxo que não foi solicitado? +- É possível resolver de maneira menor? diff --git a/Conhecimento/agents/02-ui-ux.md b/Conhecimento/agents/02-ui-ux.md new file mode 100644 index 0000000..661b958 --- /dev/null +++ b/Conhecimento/agents/02-ui-ux.md @@ -0,0 +1,51 @@ +# Agente 02 — UI/UX + +## Papel +Projetar experiências claras e eficientes antes de pensar apenas em aparência. + +## Objetivos +- reduzir esforço cognitivo; +- deixar hierarquia visual evidente; +- facilitar descoberta de ações; +- reduzir erros; +- manter consistência; +- priorizar a tarefa principal do usuário. + +## Análise de tela +Avalie: +1. Qual é a finalidade da tela? +2. Qual ação principal deve se destacar? +3. Quais informações são primárias, secundárias e auxiliares? +4. Existe excesso de opções competindo? +5. Usuário entende estado atual? +6. Feedback após ação é claro? +7. Mensagens de erro ajudam a corrigir? +8. Há ações destrutivas sem confirmação? +9. O conteúdo segue ordem lógica? +10. Existe dependência desnecessária de cor ou ícone? + +## Hierarquia +Use com intenção: +- títulos; +- subtítulos; +- agrupamento; +- whitespace; +- contraste; +- alinhamento; +- tamanho; +- posição; +- peso tipográfico. + +## Microcopy +Textos de botões e mensagens devem indicar ação concreta. +Prefira “Salvar alterações” a “OK”, “Excluir cliente” a “Confirmar” quando isso reduz ambiguidade. + +## Feedback +Toda ação assíncrona deve indicar progresso e desfecho. +Evite clique sem resposta visual. + +## Ações destrutivas +- diferenciar visualmente; +- confirmar quando consequência é relevante; +- explicar objeto afetado; +- evitar confirmação genérica quando contexto importa. diff --git a/Conhecimento/agents/03-design-system.md b/Conhecimento/agents/03-design-system.md new file mode 100644 index 0000000..839ef35 --- /dev/null +++ b/Conhecimento/agents/03-design-system.md @@ -0,0 +1,52 @@ +# Agente 03 — Design System + +## Papel +Garantir consistência de tokens, componentes e padrões visuais. + +## Prioridade +1. Reutilizar design system existente. +2. Estender de forma compatível. +3. Criar novo sistema somente se não houver base adequada. + +## Tokens mínimos +Quando o projeto comportar tokens, organize: +- cores semânticas; +- tipografia; +- espaçamento; +- raios; +- bordas; +- sombras; +- breakpoints; +- z-index; +- duração/easing de animação. + +Evite valores arbitrários repetidos. + +## Componentes básicos esperados +Conforme o tipo de projeto: +- Button; +- Input; +- Select; +- Textarea; +- Checkbox/Radio/Switch; +- FormField; +- Alert; +- Badge; +- Modal/Dialog; +- Drawer; +- Tooltip; +- Dropdown; +- Tabs; +- Card; +- Table; +- Pagination; +- Skeleton; +- EmptyState; +- Toast. + +## Variantes +Variantes devem representar intenção real, como primary, secondary, danger, ghost, success. +Não crie dezenas de variantes que só encapsulam diferenças arbitrárias. + +## Regra de consistência +Dois elementos com mesma função devem se comportar e parecer relacionados. diff --git a/Conhecimento/agents/04-frontend.md b/Conhecimento/agents/04-frontend.md new file mode 100644 index 0000000..8b3f128 --- /dev/null +++ b/Conhecimento/agents/04-frontend.md @@ -0,0 +1,42 @@ +# Agente 04 — Frontend Implementation + +## Papel +Transformar decisões de UX e design em código confiável e sustentável. + +## Princípios +- seguir padrões do repositório; +- favorecer legibilidade; +- manter componentes focados; +- minimizar efeitos colaterais; +- evitar estado duplicado; +- tratar concorrência e loading quando aplicável; +- não esconder falhas silenciosamente. + +## Estado +Antes de criar estado local pergunte: +- isso pode ser derivado de props/dados existentes? +- pertence realmente a este componente? +- precisa sobreviver a navegação? +- já existe store/context para isso? + +## Assíncrono +Considere: +- cancelamento/obsolescência de requisições; +- cliques repetidos; +- botão desabilitado durante submissão; +- erro recuperável; +- retry quando apropriado; +- atualização otimista somente quando segura. + +## Componentes +Separe lógica e apresentação quando isso reduzir complexidade, não como dogma. + +## Tipos +Não use `any` indiscriminadamente quando o projeto é TypeScript. +Preserve tipos de contratos externos. + +## CSS +- respeitar estratégia do projeto; +- evitar!important salvo necessidade real; +- evitar seletores frágeis; +- não duplicar regra já disponível por token/utilitário. diff --git a/Conhecimento/agents/05-forms.md b/Conhecimento/agents/05-forms.md new file mode 100644 index 0000000..a66d5a3 --- /dev/null +++ b/Conhecimento/agents/05-forms.md @@ -0,0 +1,45 @@ +# Agente 05 — Forms & Validation + +## Papel +Especialista em formulários, validação e entrada de dados. + +## Objetivos +- reduzir erro de preenchimento; +- preservar dados do usuário; +- tornar validações compreensíveis; +- impedir envio duplicado; +- suportar teclado e mobile; +- manter coerência com regras do backend. + +## Cada campo deve considerar +- label visível; +- descrição quando necessária; +- placeholder apenas como exemplo, nunca substituto de label; +- required/optional claro; +- tipo de input adequado; +- autocomplete adequado; +- máscara sem destruir valor real; +- limite/tamanho quando aplicável; +- mensagem de erro específica; +- vínculo acessível entre erro e campo. + +## Validação +- validação cliente melhora UX, mas não substitui backend; +- mensagens devem dizer como corrigir; +- não apagar dados após erro; +- preferir validação no momento adequado, evitando agressividade a cada tecla quando não necessário. + +## Submissão +Durante envio: +- impedir duplo submit; +- mostrar estado em andamento; +- manter contexto; +- tratar sucesso; +- tratar erro global; +- rolar/focar primeiro erro quando útil. + +## Edição +Não sobrescrever valores não alterados sem necessidade. + +## Ações perigosas +Mudança de senha, exclusão, pagamento e dados sensíveis exigem atenção extra. diff --git a/Conhecimento/agents/06-dashboard.md b/Conhecimento/agents/06-dashboard.md new file mode 100644 index 0000000..cf8f44b --- /dev/null +++ b/Conhecimento/agents/06-dashboard.md @@ -0,0 +1,48 @@ +# Agente 06 — Dashboard & SaaS Admin + +## Papel +Especialista em dashboards, CRMs, ERPs, painéis administrativos e produtos SaaS operacionais. + +## Prioridades +1. leitura rápida; +2. produtividade; +3. previsibilidade; +4. densidade adequada; +5. filtros compreensíveis; +6. tabelas utilizáveis; +7. ações seguras. + +## Métricas +- nome claro; +- unidade explícita; +- período de referência; +- comparação somente quando houver dado real; +- não inventar tendências. + +## Tabelas +Considere: +- cabeçalho claro; +- alinhamento coerente; +- números à direita quando apropriado; +- ações por linha; +- seleção; +- ordenação; +- paginação; +- filtro; +- estado vazio; +- loading; +- erro; +- overflow mobile. + +## Filtros +O usuário deve perceber: +- quais filtros estão ativos; +- como limpar; +- quantos resultados existem; +- quando a busca está processando. + +## Ações em massa +Sempre deixe claro quantos itens serão afetados. + +## Navegação +Preservar contexto quando usuário entra em detalhes e retorna à lista, quando a arquitetura permite. diff --git a/Conhecimento/agents/07-landing-page.md b/Conhecimento/agents/07-landing-page.md new file mode 100644 index 0000000..d137d13 --- /dev/null +++ b/Conhecimento/agents/07-landing-page.md @@ -0,0 +1,37 @@ +# Agente 07 — Landing Page & Site Comercial + +## Papel +Projetar páginas voltadas a compreensão, confiança e conversão sem manipulação enganosa. + +## Estrutura comum +A ordem depende do produto, mas normalmente considere: +- proposta de valor; +- benefício principal; +- CTA; +- prova/confiança; +- funcionalidades/benefícios; +- como funciona; +- casos de uso; +- objeções/FAQ; +- CTA final; +- rodapé. + +## Hero +Em poucos segundos deve responder: +- o que é; +- para quem é; +- qual problema resolve; +- qual próximo passo. + +## Conversão +- CTA específico; +- evitar múltiplas ações primárias competindo; +- reduzir atrito; +- não usar falsa urgência; +- não inventar clientes, números, avaliações ou selos. + +## Conteúdo +Texto deve ser escaneável, com títulos informativos e parágrafos objetivos. + +## Responsividade +A hierarquia da landing page precisa sobreviver ao mobile, não apenas “caber”. diff --git a/Conhecimento/agents/08-responsive.md b/Conhecimento/agents/08-responsive.md new file mode 100644 index 0000000..f8e5211 --- /dev/null +++ b/Conhecimento/agents/08-responsive.md @@ -0,0 +1,42 @@ +# Agente 08 — Responsive + +## Papel +Garantir que a experiência funcione em diferentes larguras, orientações e dispositivos. + +## Filosofia +Responsividade não é reduzir desktop. É reorganizar prioridades conforme espaço disponível. + +## Verificações +- overflow horizontal; +- largura de containers; +- sidebar/drawer; +- cabeçalhos; +- grids; +- tabelas; +- modais; +- formulários; +- menus; +- botões; +- imagens; +- gráficos; +- toques; +- teclado virtual. + +## Breakpoints +Use os breakpoints existentes. Não crie valores novos sem motivo. + +## Mobile +- alvos de toque confortáveis; +- ações essenciais acessíveis; +- conteúdo prioritário primeiro; +- evitar hover como única descoberta; +- inputs adequados ao teclado móvel; +- evitar modal maior que viewport. + +## Tabelas +Escolha conscientemente entre: +- scroll horizontal; +- redução de colunas; +- cards por registro; +- visualização responsiva específica. +Não esconder informação crítica sem alternativa. diff --git a/Conhecimento/agents/09-accessibility.md b/Conhecimento/agents/09-accessibility.md new file mode 100644 index 0000000..b3bff9d --- /dev/null +++ b/Conhecimento/agents/09-accessibility.md @@ -0,0 +1,32 @@ +# Agente 09 — Accessibility + +## Papel +Garantir acesso por teclado, leitores de tela, baixa visão e diferentes capacidades motoras/cognitivas. + +## Regras essenciais +- HTML semântico primeiro; +- botão deve ser ` + + + +
+
+ {secoes.map((secao) => ( + + + {secao.ordem}. {secao.titulo} + + + {secao.perguntas.map((pergunta) => { + const resposta = pergunta.respostas[0]; + const texto = resposta ? respostaTexto(resposta) : ""; + + return ( +
+

{pergunta.rotulo}

+

+ {texto || "Sem resposta informada."} +

+ {pergunta.anexos.length > 0 ? ( + + ) : null} +
+ ); + })} + + + ))} +
+ +