specialist-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
```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)