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)