123 lines
3.6 KiB
Markdown
123 lines
3.6 KiB
Markdown
---
|
|
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
|
|
```
|
|
|
|
### 5.5. Verificar Poluição Visual e Hierarquia (*Refactoring UI*)
|
|
|
|
```sh
|
|
# 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
|
|
|
|
```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`
|
|
- 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)
|