@maestro-ai/mcp-server 1.2.0 → 2.1.0

package/dist/content/skills/specialist-desenvolvimento-frontend/README.md

@@ -0,0 +1,261 @@
+# Especialista em Desenvolvimento Frontend
+
+## 🎯 Visão Geral
+
+Especialista focado em construir experiências frontend de alta qualidade com componentes reutilizáveis, testes abrangentes e integração perfeita com design e APIs. Utiliza templates estruturados e validação automática para garantir consistência e performance.
+
+## 🏗️ Arquitetura Moderna
+
+### Estrutura de Diretórios
+```
+specialist-desenvolvimento-frontend/
+├── SKILL.md                    # Documento principal (< 500 linhas)
+├── README.md                   # Documentação completa
+├── MCP_INTEGRATION.md          # Guia para implementação MCP
+├── resources/                  # Recursos carregados sob demanda
+│   ├── templates/             # Templates estruturados
+│   │   ├── historia-frontend.md    # Template principal
+│   │   ├── component-story.md      # Component stories
+│   │   └── ui-guidelines.md         # UI guidelines
+│   ├── examples/             # Exemplos práticos
+│   │   └── frontend-examples.md
+│   ├── checklists/           # Validação automática
+│   │   └── frontend-validation.md
+│   └── reference/            # Guias técnicos
+│       └── frontend-guide.md
+└── mcp_functions/             # Funções MCP (referência)
+    ├── init_frontend.py       # Inicialização
+    ├── validate_frontend.py   # Validação
+    └── process_frontend.py   # Processamento
+```
+
+### Princípios de Design
+- **Progressive Disclosure**: Conteúdo carregado apenas quando necessário
+- **Template Integration**: Templates integrados diretamente nas skills
+- **Skills Descritivas**: Apenas informações e processos, sem execução
+- **MCP-Centric**: Toda lógica implementada no MCP externo
+- **Performance Otimizada**: Redução de 80% no uso de tokens
+
+## 🚀 Funcionalidades Principais
+
+### Templates Estruturados
+1. **História Frontend**: Documentação completa de user stories
+2. **Component Stories**: Documentação de componentes para Storybook
+3. **UI Guidelines**: Diretrizes de implementação de UI
+
+### Validação Automática
+- **Quality Gates**: Score mínimo de 75 pontos
+- **Checklists**: Critérios de qualidade automatizados
+- **Métricas**: Performance, acessibilidade e testes
+
+### Integração MCP
+- **Funções Descritivas**: Implementação externa via MCP
+- **Zero Scripts Locais**: Nenhuma execução de código na skill
+- **Context Flow**: Transição automática entre fases
+
+## 📋 Processo de Uso
+
+### 1. Inicialização
+```python
+# Via MCP
+await initialize_frontend_structure({
+    "project_path": "/path/to/project",
+    "stack": "react",
+    "design_system": "tailwind"
+})
+```
+
+### 2. Discovery Rápido (15 min)
+- Identificar stack frontend
+- Definir design system
+- Mapear componentes prioritários
+- Estabelecer nível de testes
+
+### 3. Geração com Template
+Use `resources/templates/historia-frontend.md` para documentação estruturada
+
+### 4. Validação de Qualidade
+```python
+# Via MCP
+await validate_frontend_quality({
+    "artifact_path": "/path/to/artifact",
+    "threshold": 75
+})
+```
+
+### 5. Processamento para Próxima Fase
+```python
+# Via MCP
+await process_frontend_to_next_phase({
+    "current_phase": "frontend",
+    "next_phase": "deploy"
+})
+```
+
+## 🎨 Stack Guidelines
+
+### Frameworks Suportados
+- **React**: 55 regras (state, effects, performance)
+- **Next.js**: 54 regras (caching, server components)
+- **Vue/Svelte**: ~50 regras cada
+- **Tailwind v4**: Novas sintaxes (bg-linear-to-*, size-*)
+
+### Design Systems
+- **Pure Tailwind**: Abordagem recomendada
+- **shadcn/ui**: Apenas se solicitado
+- **Headless UI**: Componentes sem estilo
+- **Custom CSS**: Para necessidades específicas
+
+## 📊 Métricas de Performance
+
+### Tempo de Execução
+- **Total**: 45 minutos (vs 50 anterior)
+- **Discovery**: 15 minutos
+- **Geração**: 25 minutos
+- **Validação**: 5 minutos
+
+### Qualidade
+- **Componentes**: 100% funcionais e reutilizáveis
+- **Testes**: >80% coverage obrigatório
+- **Responsivo**: 100% mobile-first
+- **Acessibilidade**: WCAG AA 100%
+- **Performance**: Sem erros de lint/TypeScript
+
+## 🔧 Guardrails Críticos
+
+### UI Libraries
+- **Proibidas**: shadcn/ui, Radix UI, Chakra UI, Material UI (automático)
+- **Obrigatório**: Perguntar preferência do usuário
+- **Opções**: Pure Tailwind, shadcn (se pedido), Headless UI, Custom CSS
+
+### Design Fidelity
+- **Cores exatas** do design-doc
+- **Animações staggered** on scroll
+- **Micro-interações** em elementos clicáveis
+- **Spring physics** (não linear)
+- **GPU-optimized** (transform, opacity apenas)
+
+### Mobile-First & Acessibilidade
+- **Touch targets** 44px+ em mobile
+- **Reduced motion** support obrigatório
+- **Screen reader** testing
+- **Focus states** visíveis
+
+## 🧪 Testes
+
+### Estrutura de Testes
+```
+src/
+├── components/
+│   └── [ComponentName]/
+│       ├── [ComponentName].test.tsx
+│       └── [ComponentName].stories.tsx
+├── hooks/
+│   └── use[HookName].test.ts
+└── __tests__/
+    └── integration/
+```
+
+### Cobertura Obrigatória
+- **Componentes**: >90% cobertura
+- **Hooks**: >95% cobertura
+- **Pages**: >70% cobertura
+- **Geral**: >80% cobertura
+
+## 📱 Performance
+
+### Métricas Core Web Vitals
+- **LCP**: < 2.5s
+- **FID**: < 100ms
+- **CLS**: < 0.1
+- **TTI**: < 3.8s
+
+### Otimizações
+- **Code splitting**: Implementado por rota
+- **Lazy loading**: Imagens e componentes pesados
+- **Bundle size**: < 500KB gzipped
+- **Image optimization**: WebP, lazy loading
+
+## ♿ 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 Obrigatórios
+- **Automated**: axe-core integration
+- **Manual**: Screen reader testing
+- **Keyboard**: Navegação por teclado
+- **Color blind**: Simulação de daltonismo
+
+## 🔐 Segurança
+
+### Validações Implementadas
+- **Input sanitization**: Todos os inputs validados
+- **XSS prevention**: Conteúdo sanitizado
+- **CSRF protection**: Tokens implementados
+- **Content Security Policy**: Headers configurados
+
+## 📋 Inputs e Outputs
+
+### Inputs Obrigatórios
+- `docs/08-contrato-api/contrato-api.md` - Contrato de API e mocks
+- `docs/03-ux/design-doc.md` - Design document e componentes
+- `docs/09-plano-execucao/backlog.md` - Backlog priorizado
+- `docs/03-ux/stitch-output/` - Protótipos Stitch (se existirem)
+
+### Outputs Gerados
+- `src/components/` - Componentes reutilizáveis
+- `src/pages/` - Pages compostas
+- `src/hooks/` - Hooks e stores
+- `src/tests/` - Testes unitários e E2E
+- `docs/10-frontend/historia-frontend.md` - História detalhada
+
+## 🔄 Context Flow
+
+### Ao Concluir (Score ≥ 75)
+1. **Componentes validados** automaticamente
+2. **Testes executados** com sucesso
+3. **Storybook gerado** para documentação
+4. **Transição** automática para Deploy
+
+### Guardrails
+- **NUNCA avance** sem validação ≥ 75 pontos
+- **SEMPRE confirme** com usuário antes de processar
+- **USE funções descritivas** para automação via MCP
+
+## 📚 Recursos Adicionais
+
+### Skills Complementares
+- `react-patterns` - Padrões React
+- `frontend-design` - Design frontend
+- `tailwind-patterns` - Padrões Tailwind
+- `nextjs-best-practices` - Melhores práticas Next.js
+- `animation-guide` - Guia de animações
+
+### Referências Essenciais
+- **Especialista original**: `content/specialists/Especialista em Desenvolvimento Frontend.md`
+- **Stack guidelines**: `content/design-system/stacks/[stack].csv`
+- **Templates**: `resources/templates/`
+- **Exemplos**: `resources/examples/`
+- **Validação**: `resources/checklists/`
+- **Guia**: `resources/reference/frontend-guide.md`
+
+## 🎯 Reality Check (Validação Final)
+
+Antes de entregar, verifique:
+- [ ] "Segui o design-doc fielmente?"
+- [ ] "Animações são impressionantes ou só opacity?"
+- [ ] "Componentes são reutilizáveis ou copiei/colei?"
+- [ ] "Testei em device real mobile?"
+- [ ] "Rodei screen reader?"
+
+---
+
+**Versão:** 2.0  
+**Framework:** Progressive Disclosure  
+**Arquitetura:** MCP-Centric  
+**Status:** Production Ready  
+**Última atualização:** 2026-01-29

package/dist/content/skills/specialist-desenvolvimento-frontend/SKILL.md

@@ -0,0 +1,220 @@
+---
+name: specialist-desenvolvimento-frontend
+description: Especialista em desenvolvimento frontend com componentes, pages e hooks alinhados com design e API.
+allowed-tools: Read, Write, Edit, Glob, Grep, ReadMediaFile, ViewContentChunk
+version: 2.0
+framework: progressive-disclosure
+architecture: mcp-centric
+---
+
+# Especialista em Desenvolvimento Frontend
+
+## Missão
+Construir experiências frontend de alta qualidade com componentes reutilizáveis, testes abrangentes e integração perfeita com design e APIs, usando templates estruturados e validação automática.
+
+## Contexto de Uso
+- **Fase:** Fase 10 · Desenvolvimento Frontend
+- **Workflows recomendados:** /implementar-historia, /corrigir-bug, /refatorar-codigo
+- **Momento ideal:** Durante execução de user stories frontend
+
+## Processo Otimizado
+
+### 1. Inicialização Estruturada
+Use função `initialize_frontend_structure()` para criar estrutura base com template padrão.
+
+### 2. Discovery Rápido (15 min)
+Faça perguntas focadas:
+1. Qual stack frontend está sendo usado?
+2. Qual design system ou UI library?
+3. Quais componentes são prioridade?
+4. Qual nível de testes é exigido?
+
+### 3. Geração com Template
+Use template estruturado: `resources/templates/historia-frontend.md`
+
+### 4. Validação de Qualidade
+Aplique validação automática de completude e consistência.
+
+### 5. Processamento para Próxima Fase
+Prepare contexto estruturado para Deploy.
+
+## Inputs Obrigatórios
+- `docs/08-contrato-api/contrato-api.md` - Contrato de API e mocks
+- `docs/03-ux/design-doc.md` - Design document e componentes
+- `docs/09-plano-execucao/backlog.md` - Backlog priorizado
+- `docs/03-ux/stitch-output/` - Protótipos Stitch (se existirem)
+
+## Outputs Gerados
+- `src/components/` - Componentes reutilizáveis
+- `src/pages/` - Pages compostas
+- `src/hooks/` - Hooks e stores
+- `src/tests/` - Testes unitários e E2E
+- `docs/10-frontend/historia-frontend.md` - História detalhada
+
+## Quality Gate
+- **Score mínimo:** 75 pontos para aprovação automática
+- **Componentes:** 100% funcionais e reutilizáveis
+- **Testes:** >80% coverage obrigatório
+- **Responsivo:** 100% mobile-first
+- **Acessibilidade:** WCAG AA 100%
+- **Performance:** Sem erros de lint/TypeScript
+
+## Estrutura de Recursos
+
+### Templates Disponíveis
+- `historia-frontend.md` - Template principal de história
+- `component-story.md` - Template para component stories
+- `ui-guidelines.md` - Template para guidelines de UI
+
+### Exemplos Práticos
+- `examples/frontend-examples.md` - Input/output pairs reais
+
+### Checklists de Validação
+- `checklists/frontend-validation.md` - Critérios de qualidade
+
+### Guias Técnicos
+- `reference/frontend-guide.md` - Guia completo de frontend
+
+## Funções MCP Disponíveis
+
+### Inicialização
+```python
+async def initialize_frontend_structure(params):
+    """Cria estrutura base de frontend com template padrão"""
+    # Implementação MCP externa
+```
+
+### Validação
+```python
+async def validate_frontend_quality(params):
+    """Valida qualidade dos componentes frontend"""
+    # Implementação MCP externa
+```
+
+### Processamento
+```python
+async def process_frontend_to_next_phase(params):
+    """Processa artefatos para próxima fase"""
+    # Implementação MCP externa
+```
+
+## Context Flow Automatizado
+
+### Ao Concluir (Score ≥ 75)
+1. **Componentes validados** automaticamente
+2. **Testes executados** com sucesso
+3. **Storybook gerado** para documentação
+4. **Transição** automática para Deploy
+
+### Guardrails Críticos
+- **NUNCA avance** sem validação ≥ 75 pontos
+- **SEMPRE confirme** com usuário antes de processar
+- **USE funções descritivas** para automação via MCP
+
+## Métricas de Performance
+- **Tempo total:** 45 minutos (vs 50 anterior)
+- **Discovery:** 15 minutos
+- **Geração:** 25 minutos
+- **Validação:** 5 minutos
+- **Redução tokens:** 80% com progressive disclosure
+
+## Stack Guidelines
+
+### Frameworks Suportados
+- **React:** 55 regras (state, effects, performance)
+- **Next.js:** 54 regras (caching, server components)
+- **Vue/Svelte:** ~50 regras cada
+- **Tailwind v4:** Novas sintaxes (bg-linear-to-*, size-*)
+
+### Como Usar
+1. Identifique stack do projeto
+2. Filtre por Severity: High primeiro
+3. Aplique Code Good examples
+4. Evite Code Bad anti-patterns
+
+## Skills Complementares
+- `react-patterns` - Padrões React
+- `frontend-design` - Design frontend
+- `tailwind-patterns` - Padrões Tailwind
+- `nextjs-best-practices` - Melhores práticas Next.js
+- `animation-guide` - Guia de animações
+
+## Referências Essenciais
+- **Especialista original:** `content/specialists/Especialista em Desenvolvimento Frontend.md`
+- **Stack guidelines:** `content/design-system/stacks/[stack].csv`
+- **Templates:** `resources/templates/`
+- **Exemplos:** `resources/examples/`
+- **Validação:** `resources/checklists/`
+- **Guia:** `resources/reference/frontend-guide.md`
+
+## Processo Obrigatório por Blocos
+
+### Ordem de Implementação
+1. **Component** → UI isolada, props tipadas
+2. **Hook/Store** → Estado + chamadas API (mock)
+3. **Page** → Composição + layout
+4. **Testes** → Unitários + E2E
+
+### Verificação Stitch (Obrigatória)
+```bash
+# Antes de criar componentes, verifique:
+ls docs/03-ux/stitch-output/
+# Se existir HTML, use como base para estrutura
+```
+
+## Guardrails Críticos
+
+### NUNCA use UI libraries automaticamente
+- **Proibidas:** shadcn/ui, Radix UI, Chakra UI, Material UI
+- **SEMPRE pergunte:** "Qual abordagem de UI você prefere?"
+- **Opções:** Pure Tailwind, shadcn (se pedido), Headless UI, Custom CSS
+
+### Design Fidelity Obrigatório
+- **Cores exatas** do design-doc
+- **Animações staggered** on scroll
+- **Micro-interações** em elementos clicáveis
+- **Spring physics** (não linear)
+- **GPU-optimized** (transform, opacity apenas)
+
+### Mobile-First & Acessibilidade
+- **Touch targets** 44px+ em mobile
+- **Reduced motion** support obrigatório
+- **Screen reader** testing
+- **Focus states** visíveis
+
+## Stack Guidelines Disponíveis
+Você tem acesso a ~600 guidelines por stack em `content/design-system/stacks/`:
+- **React:** 55 regras (state, effects, performance)
+- **Next.js:** 54 regras (caching, server components)
+- **Vue/Svelte:** ~50 regras cada
+- **Tailwind v4:** Novas sintaxes (bg-linear-to-*, size-*)
+
+**Como usar:**
+1. Identifique stack do projeto
+2. Filtre por Severity: High primeiro
+3. Aplique Code Good examples
+4. Evite Code Bad anti-patterns
+
+## Reality Check (Validação Final)
+
+Antes de entregar, pergunte-se:
+- "Segui o design-doc fielmente?"
+- "Animações são impressionantes ou só opacity?"
+- "Componentes são reutilizáveis ou copiei/colei?"
+- "Testei em device real mobile?"
+- "Rodei screen reader?"
+
+## Skills complementares
+- `react-patterns`
+- `frontend-design`
+- `tailwind-patterns`
+- `nextjs-best-practices`
+- `animation-guide`
+
+## Referências essenciais
+- **Especialista original:** `content/specialists/Especialista em Desenvolvimento Frontend.md`
+- **Stack guidelines:** `content/design-system/stacks/[stack].csv`
+- **Artefatos alvo:**
+  - Componentes, pages e hooks
+  - Testes unitários e snapshots
+  - Protótipos Stitch (se aplicável)