Especialista em Desenvolvimento Frontend

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

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)

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)

# 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)