.agent/skills/diagnosticar-saude-frontend/SKILL.md

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

# 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

# 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

# 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

# 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

# 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

5.5. Verificar Poluição Visual e Hierarquia (Refactoring UI)

# Detectar excesso de linhas divisórias (<v-divider>) poluindo componentes
rg "<v-divider" --include='*.vue' <modulo>-front/src/ -c | sort -t: -k2 -rn | head -10

# Detectar múltiplos botões sólidos ou destrutivos concorrentes na mesma tela
rg 'variant="flat"|variant="elevated"|color="error"' --include='*.vue' <modulo>-front/src/ -n

# Detectar ícones Lucide superdimensionados a seco (> 28px sem container)
rg ':size="(3[2-9]|[4-9][0-9])"' --include='*.vue' <modulo>-front/src/ -n

6. Gerar Relatório

# 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
• Rule: global/rules/refactoring-ui-hierarquia-despoluicao
• Livro Refactoring UI (Paiol): https://adm.paiol.idz.one/estaticos/Refactoring-UI-Steve-Schoger-Adam-Wathan.pdf
• Skill: global/skills/diagnosticar-antes-corrigir/SKILL
• Rule: global/rules/estrutura-vue (via front)