@maestro-ai/mcp-server 1.1.0 → 2.0.0

package/dist/content/skills/specialist-desenvolvimento-frontend/resources/checklists/frontend-validation.md

@@ -0,0 +1,365 @@
+# 📋 Checklist de Validação - Especialista em Desenvolvimento Frontend
+
+## 🎯 Visão Geral
+
+Este checklist contém os critérios de qualidade obrigatórios para validar artefatos frontend gerados pelo especialista. Utilize este checklist para garantir que todos os componentes, páginas e funcionalidades atendam aos padrões de qualidade exigidos.
+
+## 🏆 Sistema de Pontuação
+
+**Score Mínimo para Aprovação:** 75 pontos
+
+### Distribuição de Pontos
+- **Estrutura do Projeto:** 20 pontos
+- **Componentes:** 25 pontos
+- **Testes:** 20 pontos
+- **Performance:** 15 pontos
+- **Acessibilidade:** 10 pontos
+- **Segurança:** 10 pontos
+
+---
+
+## 📁 Estrutura do Projeto (20 pontos)
+
+### Diretórios Obrigatórios (10 pontos)
+- [ ] **src/components/** - Diretório de componentes presente
+- [ ] **src/pages/** - Diretório de páginas presente
+- [ ] **src/hooks/** - Diretório de hooks presente
+- [ ] **src/types/** - Diretório de tipos TypeScript presente
+- [ ] **src/tests/** - Diretório de testes presente
+- [ ] **src/utils/** - Diretório de utilitários presente
+- [ ] **src/styles/** - Diretório de estilos presente
+- [ ] **src/assets/** - Diretório de assets presente
+- [ ] **docs/10-frontend/** - Diretório de documentação frontend
+- [ ] **public/** - Diretório público presente
+
+### Arquivos de Configuração (5 pontos)
+- [ ] **package.json** - Configuração do projeto presente
+- [ ] **tsconfig.json** - Configuração TypeScript presente (se usar TS)
+- [ ] **tailwind.config.js** - Configuração Tailwind presente (se usar)
+- [ ] **vite.config.ts** - Configuração Vite/Webpack presente
+- [ ] **.eslintrc.js** - Configuração ESLint presente
+
+### Arquivos de Documentação (5 pontos)
+- [ ] **README.md** - Documentação do projeto presente
+- [ ] **historia-frontend.md** - História de usuário documentada
+- [ ] **CHANGELOG.md** - Registro de alterações presente
+- [ ] **CONTRIBUTING.md** - Guia de contribuição presente
+- [ ] **.storybook/** - Configuração Storybook presente
+
+### Frontend-First (Obrigatório)
+- [ ] **Contrato API validado** - CONT-XXX aprovado antes do FE
+- [ ] **Mocks ativos** - MSW/Mock server rodando com handlers do contrato
+- [ ] **Consumo via mocks** - FE aponta apenas para mock até integração
+
+---
+
+## 🧩 Componentes (25 pontos)
+
+### Estrutura de Componentes (10 pontos)
+- [ ] **Nomenclatura padrão** - Componentes com PascalCase
+- [ ] **Diretório próprio** - Cada componente em seu diretório
+- [ ] **Index.tsx** - Arquivo de exportação presente
+- [ ] **Component.tsx** - Arquivo principal do componente
+- [ ] **Component.test.tsx** - Arquivo de teste presente
+- [ ] **Component.stories.tsx** - Storybook story presente
+- [ ] **Types separados** - Tipos em arquivo dedicado
+- [ ] **Estilos separados** - Estilos em arquivo dedicado (se aplicável)
+- [ ] **Props tipadas** - Interface de props bem definida
+- [ ] **Default exports** - Export padrão implementado
+
+### Qualidade do Código (8 pontos)
+- [ ] **TypeScript** - 100% tipado (se usando TS)
+- [ ] **ESLint** - Sem warnings ou errors
+- [ ] **Prettier** - Código formatado consistentemente
+- [ ] **React Hooks** - Uso correto de hooks
+- [ ] **State management** - Estado bem gerenciado
+- [ ] **Error boundaries** - Tratamento de erros implementado
+- [ ] **Loading states** - Estados de carregamento implementados
+- [ ] **Empty states** - Estados vazios implementados
+
+### Reusabilidade (7 pontos)
+- [ ] **Props configuráveis** - Componente configurável via props
+- [ ] **Variants** - Múltiplas variantes implementadas
+- [ ] **Composição** - Componente composto por outros menores
+- [ ] **Responsividade** - Adaptável a diferentes telas
+- [ ] **Theming** - Suporte a temas (se aplicável)
+- [ ] **Internacionalização** - Suporte a i18n (se aplicável)
+- [ ] **Customização** - Estilos customizáveis
+
+---
+
+## 🧪 Testes (20 pontos)
+
+### Cobertura de Testes (8 pontos)
+- [ ] **Componentes** - >90% cobertura de componentes
+- [ ] **Hooks** - >95% cobertura de hooks
+- [ ] **Páginas** - >70% cobertura de páginas
+- [ ] **Utilitários** - 100% cobertura de utilitários
+- [ ] **Geral** - >80% cobertura total
+- [ ] **Caminhos felizes** - Todos os fluxos principais testados
+- [ ] **Casos de erro** - Todos os casos de erro testados
+- [ ] **Edge cases** - Casos extremos testados
+
+### Tipos de Testes (6 pontos)
+- [ ] **Unitários** - Testes unitários implementados
+- [ ] **Integração** - Testes de integração implementados
+- [ ] **E2E** - Testes end-to-end implementados
+- [ ] **Visual** - Testes visuais (Screenshot/Storybook)
+- [ ] **Performance** - Testes de performance implementados
+- [ ] **Acessibilidade** - Testes de acessibilidade implementados
+
+### Qualidade dos Testes (6 pontos)
+- [ ] **Descrições claras** - Testes com descrições claras
+- [ ] **Arrange-Act-Assert** - Padrão AAA seguido
+- [ ] **Mocks** - Mocks bem implementados
+- [ ] **Dados de teste** - Dados de teste isolados
+- [ ] **CI/CD** - Testes executados no pipeline
+- [ ] **Relatórios** - Relatórios de cobertura gerados
+
+---
+
+## ⚡ Performance (15 pontos)
+
+### Otimizações de Bundle (5 pontos)
+- [ ] **Code splitting** - Implementado por rota
+- [ ] **Tree shaking** - Código não utilizado removido
+- [ ] **Minificação** - CSS/JS minificados
+- [ ] **Compression** - Gzip/Brotli habilitado
+- [ ] **Bundle size** - < 500KB gzipped
+
+### Otimizações de Runtime (5 pontos)
+- [ ] **Lazy loading** - Componentes pesados com lazy loading
+- [ ] **Images** - Otimização de imagens (WebP, lazy load)
+- [ ] **Memoization** - React.memo/useMemo/useMemo onde aplicável
+- [ ] **Virtualization** - Listas longas virtualizadas
+- [ ] **Debouncing/Throttling** - Eventos otimizados
+
+### Métricas de Performance (5 pontos)
+- [ ] **LCP** - < 2.5s (Largest Contentful Paint)
+- [ ] **FID** - < 100ms (First Input Delay)
+- [ ] **CLS** - < 0.1 (Cumulative Layout Shift)
+- [ ] **TTI** - < 3.8s (Time to Interactive)
+- [ ] **FCP** - < 1.8s (First Contentful Paint)
+
+---
+
+## ♿ Acessibilidade (10 pontos)
+
+### WCAG 2.1 AA Compliance (6 pontos)
+- [ ] **Contraste** - Mínimo 4.5:1 para texto normal
+- [ ] **Focus management** - Ordem lógica de tabulação
+- [ ] **Screen reader** - ARIA labels apropriados
+- [ ] **Keyboard navigation** - 100% navegável por teclado
+- [ ] **Semantic HTML** - HTML semântico correto
+- [ ] **Alt text** - Imagens com alt text descritivo
+
+### Testes de Acessibilidade (4 pontos)
+- [ ] **axe-core** - Integração com axe-core
+- [ ] **Screen reader** - Testado com NVDA/JAWS
+- [ ] **Keyboard** - Testado apenas com teclado
+- [ ] **Color blind** - Testado simulando daltonismo
+
+---
+
+## 🔐 Segurança (10 pontos)
+
+### Validação de Input (4 pontos)
+- [ ] **Sanitização** - Todos os inputs sanitizados
+- [ ] **XSS prevention** - Conteúdo sanitizado
+- [ ] **CSRF protection** - Tokens CSRF implementados
+- [ ] **Content Security Policy** - Headers CSP configurados
+
+### Dados Sensíveis (3 pontos)
+- [ ] **PII protection** - Dados mascarados em logs
+- [ ] **API keys** - Variáveis de ambiente
+- [ ] **Local storage** - Dados sensíveis criptografados
+
+### Ferramentas de Segurança (3 pontos)
+- [ ] **eslint-plugin-security** - Plugin de segurança ESLint
+- [ ] **Dependabot** - Alertas de dependências
+- [ ] **Helmet** - Headers de segurança (se aplicável)
+
+---
+
+## 📊 Cálculo do Score Final
+
+### Fórmula
+```
+Score Final = (Estrutura + Componentes + Testes + Performance + Acessibilidade + Segurança)
+Score Máximo = 100 pontos
+Aprovação = Score Final ≥ 75 pontos
+```
+
+### Exemplo de Cálculo
+```
+Estrutura: 18/20 pontos
+Componentes: 22/25 pontos
+Testes: 16/20 pontos
+Performance: 12/15 pontos
+Acessibilidade: 8/10 pontos
+Segurança: 7/10 pontos
+
+Score Final = 18 + 22 + 16 + 12 + 8 + 7 = 83/100 pontos
+Status: ✅ APROVADO
+```
+
+---
+
+## 🚨 Critérios de Bloqueio
+
+### Must Have (Bloqueia aprovação)
+- **Score < 75** - Score abaixo do mínimo
+- **Sem testes** - Cobertura < 50%
+- **Sem acessibilidade** - WCAG < 50% compliance
+- **Vulnerabilidades críticas** - Security issues
+- **Performance crítica** - LCP > 4s
+
+### Should Have (Penaliza score)
+- **Cobertura 60-80%** - Testes insuficientes
+- **Acessibilidade 50-80%** - WCAG parcial
+- **Performance moderada** - LCP 2.5-4s
+- **Documentação incompleta** - Falta docs importantes
+
+### Could Have (Opcional)
+- **Storybook stories** - Documentação visual
+- **Performance avançada** - LCP < 1.5s
+- **Acessibilidade AAA** - WCAG 2.2 AAA
+- **Testes visuais** - Visual regression tests
+
+---
+
+## 📋 Processo de Validação
+
+### 1. Validação Automática
+```bash
+# Executar validação automatizada
+npm run validate:frontend
+
+# Verificar score
+npm run validate:score
+
+# Gerar relatório
+npm run validate:report
+```
+
+### 2. Validação Manual
+- [ ] **Revisão de código** - Code review completo
+- [ ] **Testes manuais** - Testes exploratórios
+- [ ] **Testes de acessibilidade** - Screen reader testing
+- [ ] **Testes de performance** - Lighthouse audit
+
+### 3. Validação de Integração
+- [ ] **Cross-browser** - Chrome, Firefox, Safari
+- [ ] **Cross-device** - Mobile, tablet, desktop
+- [ ] **API integration** - Integração com backend
+- [ ] **Deploy testing** - Testes em staging
+
+---
+
+## 📈 Métricas e Monitoramento
+
+### KPIs de Qualidade
+- **Score médio** - Score médio das validações
+- **Taxa de aprovação** - % de aprovações
+- **Tempo de correção** - Tempo para corrigir issues
+- **Recorrência** - Issues que se repetem
+
+### Dashboard de Monitoramento
+```json
+{
+  "metrics": {
+    "validation_score": 83,
+    "approval_rate": 0.85,
+    "avg_correction_time": "2.5 days",
+    "recurring_issues": ["accessibility", "performance"]
+  },
+  "trends": {
+    "score_trend": "up",
+    "approval_trend": "stable",
+    "quality_trend": "improving"
+  }
+}
+```
+
+---
+
+## 🎯 Recomendações de Melhoria
+
+### Baseado no Score
+
+#### Score < 60 (Crítico)
+1. **Priorizar testes** - Implementar cobertura básica
+2. **Acessibilidade mínima** - WCAG 2.1 AA essencial
+3. **Segurança básica** - Validação de inputs
+4. **Estrutura padrão** - Organizar diretórios
+
+#### Score 60-75 (Precisa Melhorar)
+1. **Aumentar cobertura** - >80% testes
+2. **Performance** - Otimizações básicas
+3. **Documentação** - Completar docs
+4. **Componentes** - Melhorar reusabilidade
+
+#### Score 75-85 (Bom)
+1. **Performance avançada** - Otimizações avançadas
+2. **Testes E2E** - Completar suíte de testes
+3. **Acessibilidade total** - WCAG 2.1 AA completo
+4. **Storybook** - Documentação visual
+
+#### Score > 85 (Excelente)
+1. **Inovações** - Novas features
+2. **Performance极致** - Core Web Vitals perfeitos
+3. **Acessibilidade AAA** - WCAG 2.2 AAA
+4. **Auto-otimização** - Ferramentas automáticas
+
+---
+
+## 📚 Referências e Recursos
+
+### Documentação
+- [React Best Practices](https://react.dev/learn)
+- [TypeScript Handbook](https://www.typescriptlang.org/docs/)
+- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
+- [Web.dev Performance](https://web.dev/performance/)
+- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)
+
+### Ferramentas
+- **Lighthouse** - Auditoria de performance
+- **axe-core** - Testes de acessibilidade
+- **Jest** - Framework de testes
+- **Storybook** - Documentação de componentes
+- **Bundle Analyzer** - Análise de bundle
+
+### Checklists Adicionais
+- [React Performance Checklist](https://react.dev/learn/render-and-commit)
+- [Accessibility Checklist](https://www.a11yproject.com/checklist/)
+- [Security Checklist](https://owasp.org/www-project-secure-coding-practices-quick-reference-guide/)
+
+---
+
+## 🔄 Processo de Melhoria Contínua
+
+### 1. Coleta de Feedback
+- [ ] **Code reviews** - Feedback estruturado
+- [ ] **User testing** - Testes com usuários
+- [ ] **Analytics** - Métricas de uso
+- [ ] **Error tracking** - Monitoramento de erros
+
+### 2. Análise de Dados
+- [ ] **Identificar padrões** - Issues recorrentes
+- [ ] **Analisar tendências** - Evolução da qualidade
+- [ ] **Benchmarking** - Comparar com padrões
+- [ ] **Root cause** - Análise de causa raiz
+
+### 3. Implementação de Melhorias
+- [ ] **Atualizar checklist** - Manter checklist relevante
+- [ ] **Automatizar** - Novas validações automáticas
+- [ ] **Treinar equipe** - Compartilhar conhecimentos
+- [ ] **Documentar** - Registrar aprendizados
+
+---
+
+**Versão:** 1.0  
+**Data:** 2026-01-29  
+**Status:** Production Ready  
+**Próxima Revisão:** 2026-02-29  
+**Responsável:** Frontend Team