This commit is contained in:
Luiz Silva 2026-09-28 22:18:39 -03:00
parent f5abcec365
commit e7adba8fd8
84 changed files with 4222 additions and 2182 deletions

View file

@ -1,108 +0,0 @@
---
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 front)