@maestro-ai/mcp-server 1.1.0 → 2.0.0

package/dist/content/skills/specialist-ux-design/mcp_functions/validate_ux.py

@@ -0,0 +1,379 @@
+"""
+Função MCP de Validação - Especialista UX Design
+Referência para implementação no servidor MCP
+"""
+
+def validate_ux_design(artifacts):
+    """
+    Valida qualidade dos documentos de UX Design
+    
+    Args:
+        artifacts (dict): Dicionário com documentos gerados
+            - design_doc: Documento de design completo
+            - wireframes: Wireframes de todas as telas
+            - jornada_usuario: Mapa de jornadas do usuário
+            - prototipos: Protótipos interativos (opcional)
+    
+    Returns:
+        dict: Resultado da validação com score
+    """
+    
+    # Validar inputs
+    required_artifacts = ['design_doc', 'wireframes', 'jornada_usuario']
+    for artifact in required_artifacts:
+        if artifact not in artifacts:
+            raise ValueError(f"Artefato obrigatório faltando: {artifact}")
+    
+    # Inicializar validação
+    validation_result = {
+        "score": 0,
+        "status": "REPROVADO",
+        "coverage": {},
+        "issues": [],
+        "recommendations": [],
+        "details": {}
+    }
+    
+    # 1. Validar Cobertura de Requisitos (30 pontos)
+    requirements_score = validate_requirements_coverage(artifacts['design_doc'])
+    validation_result["coverage"]["requirements"] = requirements_score["percentage"]
+    validation_result["details"]["requirements"] = requirements_score["details"]
+    validation_result["score"] += requirements_score["score"]
+    
+    # 2. Validar Usabilidade WCAG 2.1 AA (25 pontos)
+    accessibility_score = validate_accessibility_wcag(artifacts['wireframes'])
+    validation_result["coverage"]["accessibility"] = accessibility_score["percentage"]
+    validation_result["details"]["accessibility"] = accessibility_score["details"]
+    validation_result["score"] += accessibility_score["score"]
+    
+    # 3. Validar Responsividade (20 pontos)
+    responsiveness_score = validate_responsiveness(artifacts['wireframes'])
+    validation_result["coverage"]["responsiveness"] = responsiveness_score["percentage"]
+    validation_result["details"]["responsiveness"] = responsiveness_score["details"]
+    validation_result["score"] += responsiveness_score["score"]
+    
+    # 4. Validar Consistência Visual (15 pontos)
+    consistency_score = validate_visual_consistency(artifacts)
+    validation_result["coverage"]["consistency"] = consistency_score["percentage"]
+    validation_result["details"]["consistency"] = consistency_score["details"]
+    validation_result["score"] += consistency_score["score"]
+    
+    # 5. Validar Jornadas do Usuário (10 pontos)
+    journeys_score = validate_user_journeys(artifacts['jornada_usuario'])
+    validation_result["coverage"]["journeys"] = journeys_score["percentage"]
+    validation_result["details"]["journeys"] = journeys_score["details"]
+    validation_result["score"] += journeys_score["score"]
+    
+    # Calcular percentual geral
+    validation_result["score"] = min(validation_result["score"], 100)
+    
+    # Determinar status
+    if validation_result["score"] >= 75:
+        validation_result["status"] = "APROVADO"
+    elif validation_result["score"] >= 60:
+        validation_result["status"] = "PARCIAL"
+    else:
+        validation_result["status"] = "REPROVADO"
+    
+    # Gerar recomendações
+    validation_result["recommendations"] = generate_recommendations(validation_result)
+    
+    return validation_result
+
+def validate_requirements_coverage(design_doc):
+    """Valida cobertura de requisitos funcionais"""
+    score = 0
+    details = {
+        "functional_requirements": 0,
+        "user_stories": 0,
+        "acceptance_criteria": 0,
+        "business_rules": 0
+    }
+    
+    # Verificar se todos os requisitos funcionais estão mapeados
+    if "functional_requirements" in design_doc.get("sections", {}):
+        details["functional_requirements"] = 100
+        score += 10
+    
+    # Verificar user stories
+    if "user_stories" in design_doc.get("sections", {}):
+        details["user_stories"] = 100
+        score += 8
+    
+    # Verificar critérios de aceite
+    if "acceptance_criteria" in design_doc.get("sections", {}):
+        details["acceptance_criteria"] = 100
+        score += 7
+    
+    # Verificar regras de negócio
+    if "business_rules" in design_doc.get("sections", {}):
+        details["business_rules"] = 100
+        score += 5
+    
+    return {
+        "score": score,
+        "percentage": (score / 30) * 100,
+        "details": details
+    }
+
+def validate_accessibility_wcag(wireframes):
+    """Valida conformidade WCAG 2.1 AA"""
+    score = 0
+    details = {
+        "color_contrast": 0,
+        "keyboard_navigation": 0,
+        "screen_reader": 0,
+        "alt_text": 0,
+        "focus_indicators": 0
+    }
+    
+    # Verificar contraste de cores
+    if "color_contrast" in wireframes.get("accessibility", {}):
+        details["color_contrast"] = 100
+        score += 6
+    
+    # Verificar navegação por teclado
+    if "keyboard_navigation" in wireframes.get("accessibility", {}):
+        details["keyboard_navigation"] = 100
+        score += 6
+    
+    # Verificar suporte a screen readers
+    if "screen_reader" in wireframes.get("accessibility", {}):
+        details["screen_reader"] = 100
+        score += 5
+    
+    # Verificar textos alternativos
+    if "alt_text" in wireframes.get("accessibility", {}):
+        details["alt_text"] = 100
+        score += 4
+    
+    # Verificar indicadores de foco
+    if "focus_indicators" in wireframes.get("accessibility", {}):
+        details["focus_indicators"] = 100
+        score += 4
+    
+    return {
+        "score": score,
+        "percentage": (score / 25) * 100,
+        "details": details
+    }
+
+def validate_responsiveness(wireframes):
+    """Valida design responsivo"""
+    score = 0
+    details = {
+        "mobile_breakpoint": 0,
+        "tablet_breakpoint": 0,
+        "desktop_breakpoint": 0,
+        "flexible_layouts": 0,
+        "adaptive_images": 0
+    }
+    
+    # Verificar breakpoint mobile
+    if "mobile" in wireframes.get("breakpoints", {}):
+        details["mobile_breakpoint"] = 100
+        score += 5
+    
+    # Verificar breakpoint tablet
+    if "tablet" in wireframes.get("breakpoints", {}):
+        details["tablet_breakpoint"] = 100
+        score += 4
+    
+    # Verificar breakpoint desktop
+    if "desktop" in wireframes.get("breakpoints", {}):
+        details["desktop_breakpoint"] = 100
+        score += 4
+    
+    # Verificar layouts flexíveis
+    if "flexible_grids" in wireframes.get("layout", {}):
+        details["flexible_layouts"] = 100
+        score += 4
+    
+    # Verificar imagens adaptativas
+    if "adaptive_images" in wireframes.get("layout", {}):
+        details["adaptive_images"] = 100
+        score += 3
+    
+    return {
+        "score": score,
+        "percentage": (score / 20) * 100,
+        "details": details
+    }
+
+def validate_visual_consistency(artifacts):
+    """Valida consistência visual"""
+    score = 0
+    details = {
+        "color_system": 0,
+        "typography": 0,
+        "icon_system": 0,
+        "spacing": 0,
+        "component_library": 0
+    }
+    
+    design_doc = artifacts.get('design_doc', {})
+    wireframes = artifacts.get('wireframes', {})
+    
+    # Verificar sistema de cores
+    if "color_palette" in design_doc.get("visual_design", {}):
+        details["color_system"] = 100
+        score += 4
+    
+    # Verificar tipografia
+    if "typography" in design_doc.get("visual_design", {}):
+        details["typography"] = 100
+        score += 3
+    
+    # Verificar sistema de ícones
+    if "icon_system" in design_doc.get("visual_design", {}):
+        details["icon_system"] = 100
+        score += 3
+    
+    # Verificar espaçamento
+    if "spacing_system" in wireframes.get("layout", {}):
+        details["spacing"] = 100
+        score += 3
+    
+    # Verificar biblioteca de componentes
+    if "component_library" in wireframes.get("components", {}):
+        details["component_library"] = 100
+        score += 2
+    
+    return {
+        "score": score,
+        "percentage": (score / 15) * 100,
+        "details": details
+    }
+
+def validate_user_journeys(jornada_usuario):
+    """Valida jornadas do usuário"""
+    score = 0
+    details = {
+        "touchpoints": 0,
+        "user_flows": 0,
+        "pain_points": 0,
+        "opportunities": 0,
+        "measurement": 0
+    }
+    
+    # Verificar pontos de contato
+    if "touchpoints" in jornada_usuario.get("sections", {}):
+        details["touchpoints"] = 100
+        score += 3
+    
+    # Verificar fluxos de usuário
+    if "user_flows" in jornada_usuario.get("sections", {}):
+        details["user_flows"] = 100
+        score += 2
+    
+    # Verificar pontos de dor
+    if "pain_points" in jornada_usuario.get("sections", {}):
+        details["pain_points"] = 100
+        score += 2
+    
+    # Verificar oportunidades
+    if "opportunities" in jornada_usuario.get("sections", {}):
+        details["opportunities"] = 100
+        score += 2
+    
+    # Verificar métricas
+    if "metrics" in jornada_usuario.get("sections", {}):
+        details["measurement"] = 100
+        score += 1
+    
+    return {
+        "score": score,
+        "percentage": (score / 10) * 100,
+        "details": details
+    }
+
+def generate_recommendations(validation_result):
+    """Gera recomendações baseadas nos resultados da validação"""
+    recommendations = []
+    
+    # Recomendações para requisitos
+    if validation_result["coverage"]["requirements"] < 100:
+        recommendations.append({
+            "category": "Requisitos",
+            "priority": "Alta",
+            "description": "Mapear todos os requisitos funcionais no design",
+            "action": "Revisar design-doc.md e adicionar requisitos faltantes"
+        })
+    
+    # Recomendações para acessibilidade
+    if validation_result["coverage"]["accessibility"] < 100:
+        recommendations.append({
+            "category": "Acessibilidade",
+            "priority": "Alta",
+            "description": "Garantir conformidade WCAG 2.1 AA completa",
+            "action": "Adicionar contraste, navegação por teclado e screen readers"
+        })
+    
+    # Recomendações para responsividade
+    if validation_result["coverage"]["responsiveness"] < 100:
+        recommendations.append({
+            "category": "Responsividade",
+            "priority": "Média",
+            "description": "Implementar design para todos os dispositivos",
+            "action": "Criar layouts para mobile, tablet e desktop"
+        })
+    
+    # Recomendações para consistência
+    if validation_result["coverage"]["consistency"] < 100:
+        recommendations.append({
+            "category": "Consistência",
+            "priority": "Média",
+            "description": "Padronizar elementos visuais",
+            "action": "Criar sistema de cores, tipografia e componentes"
+        })
+    
+    # Recomendações para jornadas
+    if validation_result["coverage"]["journeys"] < 100:
+        recommendations.append({
+            "category": "Jornadas",
+            "priority": "Baixa",
+            "description": "Detalhar jornadas completas do usuário",
+            "action": "Mapear todos os pontos de contato e fluxos"
+        })
+    
+    return recommendations
+
+# Exemplo de uso
+if __name__ == "__main__":
+    artifacts_example = {
+        "design_doc": {
+            "sections": {
+                "functional_requirements": ["RF-001", "RF-002"],
+                "user_stories": ["Story 1", "Story 2"],
+                "visual_design": {
+                    "color_palette": ["#primary", "#secondary"],
+                    "typography": "Font system"
+                }
+            }
+        },
+        "wireframes": {
+            "accessibility": {
+                "color_contrast": "WCAG AA",
+                "keyboard_navigation": "Tab navigation"
+            },
+            "breakpoints": {
+                "mobile": "320px",
+                "tablet": "768px",
+                "desktop": "1024px"
+            },
+            "layout": {
+                "flexible_grids": "CSS Grid",
+                "spacing_system": "8px grid"
+            }
+        },
+        "jornada_usuario": {
+            "sections": {
+                "touchpoints": ["Login", "Dashboard"],
+                "user_flows": ["Main flow", "Alternative flow"],
+                "pain_points": ["Issue 1", "Issue 2"]
+            }
+        }
+    }
+    
+    result = validate_ux_design(artifacts_example)
+    print(result)

package/dist/content/skills/specialist-ux-design/resources/checklists/ux-validation.md

@@ -0,0 +1,77 @@
+# Checklist de Validação de UX Design - Maestro Skills
+
+## 🎯 Score mínimo de aprovação: 75 pontos
+
+---
+
+## 📋 Estrutura do Documento (15 pts)
+- [ ] **Sumário executivo** completo
+- [ ] **Arquitetura de informação** definida
+- [ ] **Wireframes** listados e descritos
+- [ ] **Design visual** documentado
+- [ ] **Jornadas** mapeadas por persona
+- [ ] **Prototipagem** com links válidos
+- [ ] **Histórico de versões** atualizado
+
+## 🧭 Arquitetura de Informação (10 pts)
+- [ ] Mapa do site completo
+- [ ] Fluxos principais descritos
+- [ ] Navegação consistente
+- [ ] Hierarquia visual clara
+- [ ] Componentes globais definidos
+
+## 🧱 Wireframes (20 pts)
+- [ ] Lista de telas cobre 100% dos requisitos
+- [ ] Componentes documentados
+- [ ] Estados (default, loading, empty, erro) cobertos
+- [ ] Responsividade mapeada (mobile/tablet/desktop)
+- [ ] Anotações claras para desenvolvimento
+
+## 🎨 Design Visual (10 pts)
+- [ ] Paleta e tipografia definidas
+- [ ] Iconografia e componentes padronizados
+- [ ] Microcopy alinhado ao tom de voz
+- [ ] Feedback visual para interações
+- [ ] Considerações de acessibilidade (WCAG AA)
+
+## 👣 Jornadas do Usuário (10 pts)
+- [ ] Personas atualizadas e validadas
+- [ ] Jornada principal detalhada por etapa
+- [ ] Emoções e dores mapeadas
+- [ ] Oportunidades identificadas por etapa
+- [ ] KPIs vinculados à jornada
+
+## 🧪 Prototipagem e Testes (10 pts)
+- [ ] Protótipo navegável disponível
+- [ ] Interações principais implementadas
+- [ ] Teste com usuários realizado
+- [ ] Feedback coletado e registrado
+- [ ] Ajustes aplicados pós-teste
+
+## 🔄 Integração com Requisitos (10 pts)
+- [ ] Cada RF possui tela correspondente
+- [ ] RNFs (performance, acessibilidade) respeitados
+- [ ] Regras de negócio refletidas no design
+- [ ] Restrições técnicas consideradas
+- [ ] Interfaces externas representadas
+
+## ✅ Checklist Final (10 pts)
+- [ ] Wireframes entregues em formato padronizado
+- [ ] Jornadas assinadas por stakeholders
+- [ ] Protótipo aprovado pelo time
+- [ ] Documentação carregada em docs/03-ux-design
+- [ ] Score ≥ 75 pontos
+
+---
+
+## 📊 Classificação
+- **90-100 pts** → ✅ Excelente (pronto para Modelagem de Domínio)
+- **80-89 pts** → ✅ Bom (ajustes menores)
+- **75-79 pts** → ⚠️ Aceitável (revisões recomendadas)
+- **< 75 pts** → ❌ Reprovado (revisar design)
+
+---
+
+**Última atualização:** 2026-01-29  
+**Framework:** Maestro Skills Modernas  
+**Status:** ✅ Produção Ready

package/dist/content/skills/specialist-ux-design/resources/examples/ux-examples.md

@@ -0,0 +1,161 @@
+# Exemplos de UX Design - Input/Output Pairs
+
+## 🎯 Exemplo 1: SaaS de Gestão Financeira
+
+### Input do Usuário
+```
+Preciso de um design para um SaaS de gestão financeira para PMEs.
+O PRD destaca 3 personas: CFO, Contador e CEO.
+Temos requisitos de dashboard financeiro, fluxo de aprovação e relatórios.
+A identidade visual deve ser confiável, moderna e clean.
+```
+
+### Output Gerado (Resumo)
+```markdown
+## Arquitetura de Informação
+- Dashboard principal com 4 widgets (Receitas, Despesas, Caixa, Metas)
+- Menu lateral com seções de relatórios, fluxo de aprovação e configurações
+- Navegação resumida em breadcrumbs + tabs contextuais
+
+## Wireframes
+- WF-001: Dashboard → Overview financeiro com filtros rápidos
+- WF-002: Fluxo de aprovação → Cards com status e ação rápida
+- WF-003: Relatório detalhado → Tabelas com drill-down e exportação
+
+## Design Visual
+- Paleta: Azul petróleo (confiança) + tons neutros
+- Tipografia: Inter + Space Grotesk
+- Componentes: Botões com feedback, cards com tags de status
+
+## Jornadas
+1. CFO → Analisa KPIs → Aprova despesas → Gera relatório
+2. Contador → Registra lançamentos → Anexa documentos → Atualiza status
+3. CEO → Consulta indicadores → Valida metas → Compartilha insights
+
+## Protótipo
+- Link Figma: https://figma.com/file/ux-finance-saas
+- Microinterações: Hover com context info, loading skeletons
+- Acessibilidade: Contraste AA, navegação por teclado
+
+## Validação
+- 5 usuários testados (CFO/Contador)
+- 92% entendimento na primeira tentativa
+- Ajustes aplicados nos filtros e tooltips
+```
+
+---
+
+## 🛒 Exemplo 2: App Mobile de Delivery
+
+### Input do Usuário
+```
+Preciso criar o UX para um app mobile de delivery focado em restaurantes locais.
+Teremos personas de Cliente Final, Entregador e Dono do Restaurante.
+Requisitos incluem onboarding, catálogo de restaurantes e tracking em tempo real.
+```
+
+### Output Gerado (Resumo)
+```markdown
+## Arquitetura de Informação
+- Flow mobile-first com bottom navigation (Home, Busca, Pedidos, Perfil)
+- Sistema de cards com fotos grandes e rating dos restaurantes
+- Tracking em tempo real com mapa e status do pedido
+
+## Wireframes
+- WF-001: Onboarding → 3 telas com benefits + personalização
+- WF-002: Catálogo → Carrossel de categorias + filtros inteligentes
+- WF-003: Detalhe do pedido → Linha do tempo + status do entregador
+
+## Design Visual
+- Paleta quente (laranjas + tons escuros)
+- Tipografia circular para headlines + IBM Plex para texto
+- Iconografia friendly, layout modular com sombras leves
+
+## Jornadas
+1. Cliente → Busca restaurante → Personaliza pedido → Acompanha entrega
+2. Entregador → Recebe pedido → Navega com mapa → Conclui entrega
+3. Dono → Avalia pedidos → Atualiza cardápio → Recebe feedback
+
+## Protótipo
+- Ferramenta: Figma (modo protótipo mobile)
+- Interações: Swipe cards, drag para remover itens, pull-to-refresh
+- Microcopy: Mensagens humanizadas ("Seu pedido está saindo do forno")
+
+## Validação
+- Teste com 6 usuários (Android/iOS)
+- Ajustes em filtros de busca e CTA de reordenar
+- NPS do fluxo: 62 → 74 após iterações
+```
+
+---
+
+## 🏥 Exemplo 3: Plataforma de Telemedicina
+
+### Input do Usuário
+```
+Preciso desenhar a interface para uma plataforma de telemedicina.
+Personas: Paciente, Médico e Atendimento.
+Funcionalidades: agendamento, videoconsulta, prontuário digital, prescrições.
+Identidade visual precisa transmitir confiança e acolhimento.
+```
+
+### Output Gerado (Resumo)
+```markdown
+## Arquitetura de Informação
+- Home com cards de "Próxima consulta" e "Agendar nova"
+- Seções de exames, prescrições, histórico e mensagens
+- Fluxo de videoconsulta integrado com chat e upload de arquivos
+
+## Wireframes
+- WF-001: Agenda → Calendário + cards de consulta
+- WF-002: Videoconsulta → Tela dividida (vídeo + anotações)
+- WF-003: Prontuário → Tabs por tipo de registro + timeline
+
+## Design Visual
+- Paleta em tons de azul + verde suave (confiança e acolhimento)
+- Tipografia: Source Sans + Merriweather
+- Componentes com cantos arredondados, espaçamento generoso
+
+## Jornadas
+1. Paciente → Entra → Agenda consulta → Recebe confirmação → Videoconsulta → Feedback
+2. Médico → Consulta agenda → Sala virtual → Anotações → Prescreve medicamentos
+3. Atendimento → Garante disponibilidade → Resolve problemas técnicos
+
+## Protótipo
+- Figma com flows completos desktop + mobile responsivo
+- Integração de estados (esperando médico, conexão instável, consulta encerrada)
+- Feedback visual em tempo real durante chamada
+
+## Validação
+- Testes moderados com 4 pacientes e 3 médicos
+- Ajustes no fluxo de upload de exames
+- Score SUS: 84/100
+```
+
+---
+
+## 📊 Análise de Padrões
+
+### Framework Aplicado
+- **Personas → Jornadas → Wireframes → Design Visual → Protótipo → Validação**
+- **Todo artefato carrega match direto com requisitos**
+- **Microcopy humanizado** e alinhado ao tom da marca
+- **Componentização** segue padrão Atomic Design
+
+### Métricas Utilizadas
+- **Tempo total** de jornada (from onboarding to goal)
+- **Taxa de conversão** por etapa
+- **NPS** pré e pós iteração
+- **SUS** para usabilidade percebida
+
+### Quality Gates
+- **Cobertura completa** das personas e jornadas
+- **WCAG AA** garantida nos componentes críticos
+- **Feedback com usuários reais** antes de consolidar
+- **Score ≥ 75** na validação automática
+
+---
+
+**Última atualização:** 2026-01-29  
+**Framework:** Maestro Skills Modernas  
+**Status:** ✅ Produção Ready