Initial SeConectai briefing system
This commit is contained in:
@@ -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.
|
||||
@@ -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.
|
||||
@@ -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.
|
||||
@@ -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?
|
||||
@@ -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.
|
||||
@@ -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.
|
||||
@@ -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.
|
||||
@@ -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.
|
||||
@@ -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.
|
||||
@@ -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”.
|
||||
@@ -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.
|
||||
@@ -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 `<button>` quando é ação;
|
||||
- link deve ser `<a>` quando navega;
|
||||
- todo input deve ter label;
|
||||
- foco visível;
|
||||
- ordem de tabulação lógica;
|
||||
- imagens informativas com texto alternativo;
|
||||
- imagens decorativas ignoradas adequadamente;
|
||||
- não depender apenas de cor;
|
||||
- contraste suficiente;
|
||||
- status dinâmico comunicado quando necessário.
|
||||
|
||||
## ARIA
|
||||
Use ARIA para complementar semântica, nunca para substituir HTML correto sem necessidade.
|
||||
|
||||
## Modais
|
||||
- mover foco ao abrir;
|
||||
- manter foco dentro quando apropriado;
|
||||
- fechar de forma previsível;
|
||||
- devolver foco ao elemento acionador.
|
||||
|
||||
## Erros de formulário
|
||||
Associar erro ao campo e fornecer instrução útil.
|
||||
|
||||
## Animação
|
||||
Respeitar preferências de redução de movimento quando houver animações relevantes.
|
||||
@@ -0,0 +1,26 @@
|
||||
# Agente 10 — SEO Técnico e On-page
|
||||
|
||||
## Papel
|
||||
Melhorar descoberta orgânica sem comprometer UX ou produzir conteúdo enganoso.
|
||||
|
||||
## Aplicação
|
||||
Principalmente sites públicos, landing pages, blogs, documentação e páginas indexáveis.
|
||||
Dashboards autenticados normalmente não precisam deste agente.
|
||||
|
||||
## Checklist
|
||||
- title único;
|
||||
- meta description adequada;
|
||||
- heading hierarchy;
|
||||
- canonical quando aplicável;
|
||||
- robots correto;
|
||||
- sitemap quando aplicável;
|
||||
- Open Graph/Twitter cards;
|
||||
- URLs legíveis;
|
||||
- links internos;
|
||||
- alt text útil;
|
||||
- dados estruturados somente quando verdadeiros;
|
||||
- SSR/SSG/prerender quando stack e caso exigirem.
|
||||
|
||||
## Conteúdo
|
||||
Não repetir palavra-chave artificialmente.
|
||||
SEO deve melhorar clareza, não prejudicar leitura.
|
||||
@@ -0,0 +1,30 @@
|
||||
# Agente 11 — Performance
|
||||
|
||||
## Papel
|
||||
Reduzir custo de carregamento, renderização e interação sem micro-otimização prematura.
|
||||
|
||||
## Prioridades
|
||||
1. gargalos reais;
|
||||
2. recursos grandes;
|
||||
3. JavaScript desnecessário;
|
||||
4. imagens;
|
||||
5. fontes;
|
||||
6. renderizações repetidas;
|
||||
7. listas grandes;
|
||||
8. requests redundantes.
|
||||
|
||||
## Avalie
|
||||
- tamanho de bundle;
|
||||
- lazy loading;
|
||||
- code splitting;
|
||||
- cache;
|
||||
- compressão;
|
||||
- imagens responsivas;
|
||||
- dimensões de mídia para evitar layout shift;
|
||||
- renderização de listas;
|
||||
- memoização somente quando traz benefício;
|
||||
- waterfalls de rede.
|
||||
|
||||
## Regra
|
||||
Não sacrificar legibilidade por otimizações sem evidência.
|
||||
Não remover funcionalidade para melhorar métrica sem autorização.
|
||||
@@ -0,0 +1,35 @@
|
||||
# Agente 12 — Visual QA
|
||||
|
||||
## Papel
|
||||
Revisar resultado final como usuário e como designer, buscando inconsistências visíveis.
|
||||
|
||||
## Revisar
|
||||
- alinhamentos;
|
||||
- espaçamentos;
|
||||
- tipografia;
|
||||
- contraste;
|
||||
- truncamento;
|
||||
- sobreposição;
|
||||
- z-index;
|
||||
- responsividade;
|
||||
- consistência de botões;
|
||||
- ícones;
|
||||
- estados hover/focus/disabled/loading;
|
||||
- mensagens de erro;
|
||||
- skeletons;
|
||||
- empty states;
|
||||
- modais/drawers;
|
||||
- scroll inesperado.
|
||||
|
||||
## Cenários mínimos
|
||||
- viewport amplo;
|
||||
- notebook;
|
||||
- tablet se relevante;
|
||||
- celular estreito;
|
||||
- conteúdo curto;
|
||||
- conteúdo longo;
|
||||
- dados vazios;
|
||||
- erro.
|
||||
|
||||
## Regra
|
||||
Não aprovar apenas porque “compila”. Qualidade visual e funcional devem coexistir.
|
||||
@@ -0,0 +1,25 @@
|
||||
# Agente 13 — Regression Check
|
||||
|
||||
## Papel
|
||||
Última barreira antes da entrega. Verifica se a alteração que resolveu um problema criou outro.
|
||||
|
||||
## Procedimento
|
||||
1. Compare escopo pedido com diff realizado.
|
||||
2. Procure alterações não relacionadas.
|
||||
3. Verifique imports, tipos e chamadas quebradas.
|
||||
4. Execute validações disponíveis.
|
||||
5. Refaça fluxo principal afetado.
|
||||
6. Teste estado feliz e pelo menos um erro relevante.
|
||||
7. Revise permissões e condições de exibição.
|
||||
8. Verifique mobile/desktop quando UI mudou.
|
||||
9. Verifique console.
|
||||
10. Registre limitações conhecidas.
|
||||
|
||||
## Classificação de falhas
|
||||
- Bloqueante: quebra função, build, segurança ou dados.
|
||||
- Alta: fluxo importante degradado.
|
||||
- Média: UX significativa, mas contornável.
|
||||
- Baixa: detalhe visual ou melhoria opcional.
|
||||
|
||||
## Entrega
|
||||
Nunca esconda falha de validação. Diferencie claramente problema novo de problema preexistente.
|
||||
@@ -0,0 +1,6 @@
|
||||
# Compatibilidade
|
||||
|
||||
Este arquivo foi mantido para compatibilidade com a versão anterior.
|
||||
A fonte atual é [`09-accessibility.md`](./09-accessibility.md).
|
||||
|
||||
Ao executar este papel, leia e siga integralmente `agents/09-accessibility.md`.
|
||||
@@ -0,0 +1,6 @@
|
||||
# Compatibilidade
|
||||
|
||||
Este arquivo foi mantido para compatibilidade com a versão anterior.
|
||||
A fonte atual é [`06-dashboard.md`](./06-dashboard.md).
|
||||
|
||||
Ao executar este papel, leia e siga integralmente `agents/06-dashboard.md`.
|
||||
@@ -0,0 +1,6 @@
|
||||
# Compatibilidade
|
||||
|
||||
Este arquivo foi mantido para compatibilidade com a versão anterior.
|
||||
A fonte atual é [`03-design-system.md`](./03-design-system.md).
|
||||
|
||||
Ao executar este papel, leia e siga integralmente `agents/03-design-system.md`.
|
||||
@@ -0,0 +1,6 @@
|
||||
# Compatibilidade
|
||||
|
||||
Este arquivo foi mantido para compatibilidade com a versão anterior.
|
||||
A fonte atual é [`04-frontend.md`](./04-frontend.md).
|
||||
|
||||
Ao executar este papel, leia e siga integralmente `agents/04-frontend.md`.
|
||||
@@ -0,0 +1,6 @@
|
||||
# Compatibilidade
|
||||
|
||||
Este arquivo foi mantido para compatibilidade com a versão anterior.
|
||||
A fonte atual é [`07-landing-page.md`](./07-landing-page.md).
|
||||
|
||||
Ao executar este papel, leia e siga integralmente `agents/07-landing-page.md`.
|
||||
@@ -0,0 +1,6 @@
|
||||
# Compatibilidade
|
||||
|
||||
Este arquivo foi mantido para compatibilidade com a versão anterior.
|
||||
A fonte atual é [`11-performance.md`](./11-performance.md).
|
||||
|
||||
Ao executar este papel, leia e siga integralmente `agents/11-performance.md`.
|
||||
@@ -0,0 +1,6 @@
|
||||
# Compatibilidade
|
||||
|
||||
Este arquivo foi mantido para compatibilidade com a versão anterior.
|
||||
A fonte atual é [`08-responsive.md`](./08-responsive.md).
|
||||
|
||||
Ao executar este papel, leia e siga integralmente `agents/08-responsive.md`.
|
||||
@@ -0,0 +1,6 @@
|
||||
# Compatibilidade
|
||||
|
||||
Este arquivo foi mantido para compatibilidade com a versão anterior.
|
||||
A fonte atual é [`10-seo.md`](./10-seo.md).
|
||||
|
||||
Ao executar este papel, leia e siga integralmente `agents/10-seo.md`.
|
||||
@@ -0,0 +1,6 @@
|
||||
# Compatibilidade
|
||||
|
||||
Este arquivo foi mantido para compatibilidade com a versão anterior.
|
||||
A fonte atual é [`02-ui-ux.md`](./02-ui-ux.md).
|
||||
|
||||
Ao executar este papel, leia e siga integralmente `agents/02-ui-ux.md`.
|
||||
@@ -0,0 +1,6 @@
|
||||
# Compatibilidade
|
||||
|
||||
Este arquivo foi mantido para compatibilidade com a versão anterior.
|
||||
A fonte atual é [`12-visual-qa.md`](./12-visual-qa.md).
|
||||
|
||||
Ao executar este papel, leia e siga integralmente `agents/12-visual-qa.md`.
|
||||
@@ -0,0 +1,17 @@
|
||||
# Checklist — Depois de Alterar
|
||||
|
||||
- [ ] Pedido foi atendido sem ampliar escopo indevidamente.
|
||||
- [ ] Build passa ou falha preexistente foi documentada.
|
||||
- [ ] Typecheck passa quando existe.
|
||||
- [ ] Lint passa quando existe.
|
||||
- [ ] Testes relevantes passam quando existem.
|
||||
- [ ] Não surgiram erros de console óbvios.
|
||||
- [ ] Loading foi considerado.
|
||||
- [ ] Empty state foi considerado.
|
||||
- [ ] Erro foi considerado.
|
||||
- [ ] Desktop foi verificado.
|
||||
- [ ] Mobile foi verificado.
|
||||
- [ ] Teclado/foco foram considerados.
|
||||
- [ ] Alteração não quebrou contrato de API.
|
||||
- [ ] Não houve mudança acidental em autenticação/permissão.
|
||||
- [ ] Diff final não contém alterações estranhas ao escopo.
|
||||
@@ -0,0 +1,11 @@
|
||||
# Checklist — Antes de Alterar
|
||||
|
||||
- [ ] Li `AGENTS.md`.
|
||||
- [ ] Identifiquei stack e gerenciador de pacotes.
|
||||
- [ ] Entendi a tarefa.
|
||||
- [ ] Identifiquei arquivos afetados.
|
||||
- [ ] Localizei regras de negócio relacionadas.
|
||||
- [ ] Verifiquei design system/componentes existentes.
|
||||
- [ ] Determinei riscos de regressão.
|
||||
- [ ] Não estou alterando backend/API/auth sem necessidade.
|
||||
- [ ] Selecionei somente os agentes necessários.
|
||||
@@ -0,0 +1,25 @@
|
||||
# Prompt — Auditar Projeto
|
||||
|
||||
Leia `AGENTS.md`, `agents/00-project-analyzer.md` e `agents/01-codebase-guardian.md` antes de começar.
|
||||
Não altere arquivos nesta etapa.
|
||||
|
||||
Faça uma auditoria detalhada do projeto cobrindo:
|
||||
1. stack e versões relevantes;
|
||||
2. estrutura e arquitetura;
|
||||
3. rotas e layouts;
|
||||
4. componentes reutilizáveis;
|
||||
5. estilos e design system;
|
||||
6. estado e data fetching;
|
||||
7. formulários;
|
||||
8. responsividade;
|
||||
9. acessibilidade;
|
||||
10. SEO quando aplicável;
|
||||
11. performance;
|
||||
12. qualidade do código;
|
||||
13. testes e validações disponíveis;
|
||||
14. riscos de segurança visíveis no frontend;
|
||||
15. dívidas técnicas que afetam diretamente a experiência.
|
||||
|
||||
Classifique achados como Bloqueante, Alto, Médio ou Baixo.
|
||||
Para cada achado informe: problema, impacto, evidência/arquivo e recomendação.
|
||||
Não invente problema sem evidência.
|
||||
@@ -0,0 +1,16 @@
|
||||
# Prompt — Criar Dashboard / Painel Administrativo
|
||||
|
||||
Leia `AGENTS.md` e aplique os agentes de análise, proteção, UI/UX, design system, frontend,
|
||||
dashboard, forms, responsive, accessibility, performance, visual QA e regression check.
|
||||
|
||||
Priorize:
|
||||
- produtividade;
|
||||
- hierarquia de informação;
|
||||
- filtros;
|
||||
- tabelas;
|
||||
- estados vazios;
|
||||
- feedback de ações;
|
||||
- segurança de operações destrutivas;
|
||||
- consistência entre telas.
|
||||
|
||||
Não invente métricas ou regras de negócio. Use dados fictícios somente se estiver claramente marcado como mock.
|
||||
@@ -0,0 +1,23 @@
|
||||
# Prompt — Criar Site / Landing Page
|
||||
|
||||
Leia `AGENTS.md` e aplique:
|
||||
- `agents/02-ui-ux.md`
|
||||
- `agents/03-design-system.md`
|
||||
- `agents/04-frontend.md`
|
||||
- `agents/07-landing-page.md`
|
||||
- `agents/08-responsive.md`
|
||||
- `agents/09-accessibility.md`
|
||||
- `agents/10-seo.md`
|
||||
- `agents/11-performance.md`
|
||||
- `agents/12-visual-qa.md`
|
||||
|
||||
Antes de implementar, determine:
|
||||
- público;
|
||||
- objetivo da página;
|
||||
- proposta de valor;
|
||||
- CTA principal;
|
||||
- conteúdo disponível;
|
||||
- identidade existente;
|
||||
- restrições técnicas.
|
||||
|
||||
Não invente logos, clientes, números, depoimentos ou certificações como fatos reais.
|
||||
@@ -0,0 +1,17 @@
|
||||
# Prompt — Corrigir Mobile
|
||||
|
||||
Leia `AGENTS.md`, `agents/00-project-analyzer.md`, `agents/01-codebase-guardian.md`,
|
||||
`agents/08-responsive.md`, `agents/09-accessibility.md` e `agents/13-regression-check.md`.
|
||||
|
||||
Procure especialmente:
|
||||
- overflow horizontal;
|
||||
- navegação impossível;
|
||||
- tabelas ilegíveis;
|
||||
- modais fora da viewport;
|
||||
- botões pequenos;
|
||||
- campos difíceis de preencher;
|
||||
- grids quebrados;
|
||||
- conteúdo cortado;
|
||||
- ações dependentes de hover.
|
||||
|
||||
Não mascare erro com `overflow-x: hidden` sem corrigir a causa.
|
||||
@@ -0,0 +1,19 @@
|
||||
# Prompt — Melhorar Frontend
|
||||
|
||||
Leia `AGENTS.md` e siga seu pipeline.
|
||||
|
||||
Objetivo: melhorar a interface existente sem alterar regras de negócio ou contratos desnecessariamente.
|
||||
|
||||
Etapas obrigatórias:
|
||||
1. analisar projeto;
|
||||
2. identificar arquivos afetados;
|
||||
3. selecionar agentes necessários;
|
||||
4. preservar padrões existentes;
|
||||
5. implementar mudanças mínimas e coesas;
|
||||
6. tratar estados relevantes;
|
||||
7. verificar responsividade e acessibilidade;
|
||||
8. executar validações disponíveis;
|
||||
9. executar `agents/12-visual-qa.md`;
|
||||
10. executar `agents/13-regression-check.md`.
|
||||
|
||||
Na entrega, descreva mudanças, validações e limitações.
|
||||
@@ -0,0 +1,20 @@
|
||||
# Prompt — Revisão Final
|
||||
|
||||
Não implemente novas funcionalidades nesta etapa, salvo correção direta de defeito encontrado.
|
||||
|
||||
Leia:
|
||||
- `agents/12-visual-qa.md`
|
||||
- `agents/13-regression-check.md`
|
||||
|
||||
Verifique:
|
||||
1. pedido original;
|
||||
2. diff realizado;
|
||||
3. build/typecheck/lint/testes;
|
||||
4. desktop/mobile;
|
||||
5. estados de UI;
|
||||
6. acessibilidade básica;
|
||||
7. console;
|
||||
8. regressões;
|
||||
9. alterações fora de escopo.
|
||||
|
||||
Entregue uma conclusão objetiva e liste qualquer limitação real restante.
|
||||
@@ -0,0 +1,23 @@
|
||||
# Skill — Design System
|
||||
|
||||
Use esta skill quando precisar criar, organizar ou ampliar padrões visuais.
|
||||
|
||||
## Método
|
||||
1. Inventarie tokens existentes.
|
||||
2. Inventarie componentes compartilhados.
|
||||
3. Identifique duplicações.
|
||||
4. Normalize primeiro os padrões mais repetidos.
|
||||
5. Preserve API de componentes sempre que possível.
|
||||
6. Documente novas variantes e estados.
|
||||
|
||||
## Tokens semânticos
|
||||
Prefira nomes como `surface`, `foreground`, `primary`, `danger`, `border-muted` a nomes puramente visuais como `blue500` quando o projeto já usa semântica.
|
||||
|
||||
## Estados obrigatórios de componentes interativos
|
||||
- default;
|
||||
- hover quando aplicável;
|
||||
- focus-visible;
|
||||
- active;
|
||||
- disabled;
|
||||
- loading quando aplicável;
|
||||
- error/invalid quando aplicável.
|
||||
@@ -0,0 +1,14 @@
|
||||
# Skill — Form Engineering
|
||||
|
||||
## Checklist rápido
|
||||
- labels;
|
||||
- tipos corretos;
|
||||
- validação cliente e servidor;
|
||||
- mensagens específicas;
|
||||
- foco em erro;
|
||||
- prevenção de duplo submit;
|
||||
- loading;
|
||||
- preservação de valores;
|
||||
- autocomplete;
|
||||
- acessibilidade;
|
||||
- máscaras sem corromper payload.
|
||||
@@ -0,0 +1,13 @@
|
||||
# Skill — Next.js
|
||||
|
||||
## Verifique a arquitetura usada
|
||||
- App Router ou Pages Router;
|
||||
- Server/Client Components;
|
||||
- estratégia de data fetching;
|
||||
- cache/revalidation;
|
||||
- metadata;
|
||||
- route handlers;
|
||||
- imagens/fontes.
|
||||
|
||||
Não misture padrões de versões diferentes sem necessidade.
|
||||
Mantenha código cliente mínimo quando Server Components estiverem disponíveis e adequados.
|
||||
@@ -0,0 +1,13 @@
|
||||
# Skill — React
|
||||
|
||||
## Regras
|
||||
- componentes devem ser previsíveis e com efeitos controlados;
|
||||
- não use `useEffect` para estado derivável;
|
||||
- mantenha dependências de efeitos corretas;
|
||||
- não duplique fonte de verdade;
|
||||
- keys de listas devem ser estáveis;
|
||||
- handlers devem refletir intenção clara;
|
||||
- Context não deve virar store global por conveniência.
|
||||
|
||||
## Performance
|
||||
Memoização só quando há custo ou rerender relevante. Evite `useMemo`/`useCallback` indiscriminados.
|
||||
@@ -0,0 +1,15 @@
|
||||
# Skill — Responsive Engineering
|
||||
|
||||
## Processo
|
||||
1. Descubra breakpoints existentes.
|
||||
2. Ache containers com largura fixa problemática.
|
||||
3. Identifique componentes que dependem de hover.
|
||||
4. Teste navegação, tabelas, formulários e modais.
|
||||
5. Corrija primeiro estrutura, depois detalhes.
|
||||
|
||||
## Anti-padrões
|
||||
- esconder metade do sistema no mobile;
|
||||
- fonte minúscula para fazer caber;
|
||||
- `overflow-x: hidden` para mascarar layout quebrado;
|
||||
- breakpoints arbitrários espalhados;
|
||||
- largura fixa em componentes reutilizáveis.
|
||||
@@ -0,0 +1,18 @@
|
||||
# Skill — Data Tables
|
||||
|
||||
## Objetivo
|
||||
Tabelas devem favorecer comparação e operação, não apenas exibir dados.
|
||||
|
||||
## Avaliar
|
||||
- ordenação;
|
||||
- filtros;
|
||||
- busca;
|
||||
- paginação;
|
||||
- seleção;
|
||||
- ações;
|
||||
- densidade;
|
||||
- responsividade;
|
||||
- estados;
|
||||
- persistência de contexto.
|
||||
|
||||
Nunca remova coluna importante no mobile sem oferecer outra forma de acesso ao dado.
|
||||
@@ -0,0 +1,16 @@
|
||||
# Skill — Tailwind CSS
|
||||
|
||||
Use somente quando Tailwind já fizer parte do projeto ou houver decisão explícita de adotá-lo.
|
||||
|
||||
## Regras
|
||||
- reutilizar tokens/configuração do projeto;
|
||||
- evitar classes arbitrárias repetidas;
|
||||
- extrair componente quando sequência extensa representa padrão reutilizável;
|
||||
- não substituir toda folha CSS existente sem necessidade;
|
||||
- usar `cn`/merge de classes conforme convenção existente;
|
||||
- respeitar variantes e dark mode existentes.
|
||||
|
||||
## Evitar
|
||||
- dezenas de valores `[13px]`, `[17px]`, `[#123456]` sem sistema;
|
||||
- `!` modifiers para vencer conflitos mal compreendidos;
|
||||
- copiar blocos enormes de classes em várias telas.
|
||||
@@ -0,0 +1,9 @@
|
||||
# Skill — Vue
|
||||
|
||||
## Regras
|
||||
- respeitar Options API ou Composition API predominante;
|
||||
- evitar mutação inesperada de props;
|
||||
- usar computed para valores derivados;
|
||||
- watchers apenas quando efeito colateral é necessário;
|
||||
- manter emits e props explícitos;
|
||||
- preservar convenções de Pinia/Vue Router existentes.
|
||||
Reference in New Issue
Block a user