diegosouzapw 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:
- Qual stack frontend está sendo usado?
- Qual design system ou UI library?
- Quais componentes são prioridade?
- 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 mocksdocs/03-ux/design-doc.md- Design document e componentesdocs/09-plano-execucao/backlog.md- Backlog priorizadodocs/03-ux/stitch-output/- Protótipos Stitch (se existirem)
Outputs Gerados
src/components/- Componentes reutilizáveissrc/pages/- Pages compostassrc/hooks/- Hooks e storessrc/tests/- Testes unitários e E2Edocs/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óriacomponent-story.md- Template para component storiesui-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
async def initialize_frontend_structure(params):
"""Cria estrutura base de frontend com template padrão"""
# Implementação MCP externa
Validação
async def validate_frontend_quality(params):
"""Valida qualidade dos componentes frontend"""
# Implementação MCP externa
Processamento
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)
- Componentes validados automaticamente
- Testes executados com sucesso
- Storybook gerado para documentação
- 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
- Identifique stack do projeto
- Filtre por Severity: High primeiro
- Aplique Code Good examples
- Evite Code Bad anti-patterns
Skills Complementares
react-patterns- Padrões Reactfrontend-design- Design frontendtailwind-patterns- Padrões Tailwindnextjs-best-practices- Melhores práticas Next.jsanimation-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
- Component → UI isolada, props tipadas
- Hook/Store → Estado + chamadas API (mock)
- Page → Composição + layout
- Testes → Unitários + E2E
Verificação Stitch (Obrigatória)
# 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:
- Identifique stack do projeto
- Filtre por Severity: High primeiro
- Aplique Code Good examples
- 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-patternsfrontend-designtailwind-patternsnextjs-best-practicesanimation-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)