---
name: diagnosticar-saude-frontend
description: >
  Diagnóstico sistemático de saúde do frontend: componentes, composables,
  estados de UI, acessibilidade e integração com API.
scope: local
---

# Skill: Diagnosticar Saúde do Frontend

## Objetivo

Analisar a saúde de um módulo frontend Vue 3 para identificar problemas antes de corrigi-los.

## Etapas

### 1. Verificar Estrutura de Componentes

```sh
# Listar componentes e tamanho
fd "*.vue" <modulo>-front/src/ --exec wc -l {} | sort -rn | head -20

# Detectar componentes acima do limite (250 linhas)
fd "*.vue" <modulo>-front/src/ --exec sh -c 'lines=$(wc -l < "$1"); [ "$lines" -gt 250 ] && echo "$lines $1"' _ {}

# Verificar se usam defineComponent com setup()
rg "defineComponent" --include='*.vue' <modulo>-front/src/ -l
```

### 2. Verificar Estados de Interface

```sh
# Detectar componentes sem estado de loading
rg "loading|carregando|isLoading" --include='*.vue' <modulo>-front/src/ -l

# Detectar componentes sem tratamento de erro
rg "erro|error|catch" --include='*.vue' <modulo>-front/src/ -l

# Detectar componentes sem estado vazio
rg "vazio|empty|sem.*dados|nenhum" --include='*.vue' <modulo>-front/src/ -l
```

### 3. Verificar Integração com Schemas

```sh
# Verificar se schemas são importados do *-comuns
rg "from.*comuns" --include='*.ts' --include='*.vue' <modulo>-front/src/ | head -20

# Detectar schemas redefinidos no front (violação)
rg "z\.object\(\{" --include='*.ts' --include='*.vue' <modulo>-front/src/ -l

# Detectar uso de any
rg "as any|: any" --include='*.ts' --include='*.vue' <modulo>-front/src/ -n
```

### 4. Verificar Composables

```sh
# Listar composables existentes
fd "use*.ts" <modulo>-front/src/composables/ -l

# Verificar composables duplicando lógica
rg "ref\(|reactive\(|computed\(" --include='*.vue' <modulo>-front/src/ -c | sort -t: -k2 -rn | head -10
```

### 5. Verificar Mensagens ao Usuário

```sh
# Detectar mensagens técnicas expostas ao usuário
rg "Error:|Exception:|null|undefined|NaN" --include='*.vue' <modulo>-front/src/ -n

# Verificar se mensagens usam linguagem do domínio
rg "snackbar\|toast\|notify\|mensagem\|alerta" --include='*.vue' --include='*.ts' <modulo>-front/src/ -n
```

### 6. Gerar Relatório

```markdown
# Diagnóstico Frontend — [nome do módulo]

## Resumo
- **Componentes analisados:** N
- **Composables verificados:** N
- **Problemas encontrados:** N

## Problemas Detectados

### 🔴 Crítico
| Componente | Problema | Impacto | Ação |
|------------|----------|---------|------|

### 🟡 Moderado
| Componente | Problema | Impacto | Ação |
|------------|----------|---------|------|

### 🟢 Baixo
| Componente | Problema | Impacto | Ação |
|------------|----------|---------|------|

## Plano de Correção (priorizado)
1. ...
```

## Referências

- Rule: `global/rules/diagnostico-antes-correcao`
- Skill: `global/skills/diagnosticar-antes-corrigir/SKILL`
- Rule: `global/rules/estrutura-vue` (via ag-front)