@maestro-ai/mcp-server 1.2.0 → 2.1.0

package/dist/content/skills/specialist-desenvolvimento-frontend/resources/templates/historia-frontend.md

@@ -0,0 +1,243 @@
+# 📋 História de Usuário Frontend
+
+## 🎯 Informações Básicas
+
+**ID da História:** [HIST-XXX]  
+**Título:** [Título claro e conciso]  
+**Prioridade:** [Alta/Média/Baixa]  
+**Sprint:** [Sprint XXX]  
+**Data:** [Data de criação]  
+**Responsável:** [Nome do desenvolvedor]
+
+## 👥 Persona e Contexto
+
+**Persona:** [Nome da persona]  
+**Role:** [Papel do usuário]  
+**Necessidade:** [O que o usuário precisa]  
+**Motivação:** [Por que precisa disso]  
+**Frustração Atual:** [Problema atual que enfrenta]
+
+## 📝 User Story Format
+
+### Como um [persona],
+**Eu quero** [ação/funcionalidade],
+**Para que** [benefício/resultado].
+
+### Critérios de Aceite (Acceptance Criteria)
+
+#### Funcionalidade Principal
+- [ ] **Dado que** [contexto inicial], **quando** [ação], **então** [resultado esperado]
+- [ ] **Dado que** [contexto], **quando** [outra ação], **então** [outro resultado]
+- [ ] **Dado que** [contexto], **quando** [ação], **então** [resultado]
+
+#### Validação
+- [ ] **Campos obrigatórios** validados
+- [ ] **Mensagens de erro** claras e úteis
+- [ ] **Feedback visual** para ações do usuário
+- [ ] **Estados de loading** apropriados
+
+#### Integração
+- [ ] **API calls** funcionando com mocks
+- [ ] **Tratamento de erros** de API
+- [ ] **Cache** implementado onde necessário
+- [ ] **Offline support** (se aplicável)
+
+## 🎨 Design e UX
+
+### Design System
+- [ ] **Cores:** Seguir palette do design system
+- [ ] **Tipografia:** Fontes e tamanhos definidos
+- [ ] **Espaçamento:** Seguir grid system
+- [ ] **Border radius:** Consistente com design
+
+### Componentes
+- [ ] **Componentes existentes** reutilizados
+- [ ] **Novos componentes** criados se necessário
+- [ ] **Props tipadas** com TypeScript
+- [ ] **Variants** implementadas (se aplicável)
+
+### Responsividade
+- [ ] **Mobile-first** approach
+- [ ] **Breakpoints:** sm (640px), md (768px), lg (1024px), xl (1280px)
+- [ ] **Touch targets** mínimo 44px
+- [ ] **Layout adaptável** para diferentes telas
+
+### Animações
+- [ ] **Micro-interações** em elementos clicáveis
+- [ ] **Transições suaves** entre estados
+- [ ] **Loading states** animados
+- [ ] **Reduced motion** support
+
+## 🔧 Implementação Técnica
+
+### Stack Tecnológico
+- **Framework:** [React/Vue/Angular/Svelte]
+- **Styling:** [Tailwind CSS/Styled Components/Emotion]
+- **State Management:** [Redux/Zustand/Pinia/Vuex]
+- **Testing:** [Jest/Vitest + Testing Library]
+- **Build Tool:** [Vite/Webpack]
+
+### Estrutura de Arquivos
+```
+src/
+├── components/
+│   ├── [ComponentName]/
+│   │   ├── index.tsx
+│   │   ├── [ComponentName].tsx
+│   │   ├── [ComponentName].test.tsx
+│   │   └── [ComponentName].stories.tsx
+├── hooks/
+│   └── use[HookName].ts
+├── pages/
+│   └── [PageName].tsx
+└── types/
+    └── [TypeName].ts
+```
+
+### Componentes Principais
+- [ ] **[Component1]:** [Descrição e responsabilidades]
+- [ ] **[Component2]:** [Descrição e responsabilidades]
+- [ ] **[Component3]:** [Descrição e responsabilidades]
+
+### Hooks e Estado
+- [ ] **use[Hook1]:** [Descrição do hook]
+- [ ] **use[Hook2]:** [Descrição do hook]
+- [ ] **Estado global:** [Se aplicável]
+
+### API Integration
+- [ ] **Endpoints:** [Lista de endpoints necessários]
+- [ ] **Data fetching:** [Como os dados serão buscados]
+- [ ] **Error handling:** [Estratégia de tratamento de erros]
+- [ ] **Caching:** [Estratégia de cache]
+
+## 🧪 Testes
+
+### Testes Unitários
+- [ ] **Componentes:** 100% de cobertura de componentes críticos
+- [ ] **Hooks:** 100% de cobertura de hooks
+- [ ] **Utilitários:** 100% de cobertura de funções utilitárias
+- [ ] **Mock de APIs:** Todos os endpoints mockados
+
+### Testes de Integração
+- [ ] **User flows:** Fluxos principais testados
+- [ ] **API integration:** Integração com backend testada
+- [ ] **Formulários:** Validação e submissão testadas
+- [ ] **Navegação:** Transições entre páginas testadas
+
+### Testes E2E
+- [ ] **Cenários críticos:** Caminhos felizes testados
+- [ ] **Cross-browser:** Chrome, Firefox, Safari testados
+- [ ] **Mobile:** iOS e Android testados
+- [ ] **Accessibility:** Screen readers testados
+
+### Cobertura de Testes
+- **Target:** >80% cobertura geral
+- **Components:** >90% cobertura
+- **Hooks:** >95% cobertura
+- **Pages:** >70% cobertura
+
+## 📱 Performance
+
+### Métricas
+- [ ] **LCP (Largest Contentful Paint):** < 2.5s
+- [ ] **FID (First Input Delay):** < 100ms
+- [ ] **CLS (Cumulative Layout Shift):** < 0.1
+- [ ] **TTI (Time to Interactive):** < 3.8s
+
+### Otimizações
+- [ ] **Code splitting:** Implementado por rota
+- [ ] **Lazy loading:** Imagens e componentes pesados
+- [ ] **Bundle size:** < 500KB gzipped
+- [ ] **Image optimization:** WebP, lazy loading
+
+### Monitoramento
+- [ ] **Error tracking:** Sentry/LogRocket configurado
+- [ ] **Performance monitoring:** Web Vitals monitorados
+- [ ] **User analytics:** Eventos trackeados
+- [ ] **A/B testing:** Framework configurado
+
+## ♿ Acessibilidade
+
+### WCAG 2.1 AA Compliance
+- [ ] **Contraste:** Mínimo 4.5:1 para texto normal
+- [ ] **Focus management:** Ordem lógica de tab
+- [ ] **Screen reader:** ARIA labels apropriados
+- [ ] **Keyboard navigation:** 100% navegável por teclado
+
+### Testes de Acessibilidade
+- [ ] **Automated:** axe-core integration
+- [ ] **Manual:** Screen reader testing
+- [ ] **Keyboard:** Navegação por teclado
+- [ ] **Color blind:** Simulação de daltonismo
+
+## 🔐 Segurança
+
+### Validação
+- [ ] **Input sanitization:** Todos os inputs validados
+- [ ] **XSS prevention:** Conteúdo sanitizado
+- [ ] **CSRF protection:** Tokens implementados
+- [ ] **Content Security Policy:** Headers configurados
+
+### Dados Sensíveis
+- [ ] **PII protection:** Dados mascarados em logs
+- [ ] **API keys:** Variáveis de ambiente
+- [ ] **Local storage:** Dados sensíveis criptografados
+- [ ] **Session management:** Timeout implementado
+
+## 📋 Checklist de Deploy
+
+### Pré-Deploy
+- [ ] **Build sucesso:** Sem erros de build
+- [ ] **Testes passando:** 100% dos testes
+- [ ] **Lint:** Sem warnings de lint
+- [ ] **TypeScript:** Sem erros de TS
+
+### Review
+- [ ] **Code review:** Aprovado por peer
+- [ ] **Design review:** Aprovado por UX
+- [ ] **Security review:** Aprovado por security
+- [ ] **Performance review:** Métricas OK
+
+### Deploy
+- [ ] **Staging:** Testado em staging
+- [ ] **Canary:** Deploy gradual (se aplicável)
+- [ ] **Monitoring:** Alertas configurados
+- [ ] **Rollback:** Plano de rollback pronto
+
+## 📊 Métricas de Sucesso
+
+### Técnicas
+- [ ] **Performance:** Core Web Vitals metas atingidas
+- [ ] **Quality:** >80% cobertura de testes
+- [ ] **Accessibility:** 100% WCAG AA compliance
+- [ ] **Bundle size:** < 500KB gzipped
+
+### Negócio
+- [ ] **User engagement:** Taxa de cliques esperada
+- [ ] **Conversion:** Taxa de conversão esperada
+- [ ] **Error rate:** < 1% de erros
+- [ ] **Load time:** < 3 segundos
+
+## 🔄 Iteração Futura
+
+### Próximas Melhorias
+- [ ] **Feature 1:** [Descrição da melhoria]
+- [ ] **Feature 2:** [Descrição da melhoria]
+- [ ] **Feature 3:** [Descrição da melhoria]
+
+### Technical Debt
+- [ ] **Refactoring:** [Componentes a refatorar]
+- [ ] **Upgrades:** [Dependências a atualizar]
+- [ ] **Optimization:** [Otimizações pendentes]
+
+## 📝 Notas e Observações
+
+[Espaço para notas adicionais, decisões tomadas, bloqueios, etc.]
+
+---
+
+**Status:** [ ] Em Progresso / [ ] Em Review / [ ] Aprovado / [ ] Deployed  
+**Score de Qualidade:** [ ] / 100  
+**Tempo Estimado:** [ ] horas  
+**Tempo Real:** [ ] horas  
+**Sprint:** [ ] / [ ] story points