Fluig Code Review

Revisão Geral de Código Frontend Fluig

Esta skill revisa código frontend de customização Fluig e emite achados por severidade; ela não duplica convenções — os arquivos de context/ são a fonte de verdade, referenciada abaixo. O detalhe operacional (checklist e template) está em assets/.

Objetivo

Revisar, com responsabilidade única, a qualidade geral de código frontend Fluig (widgets, Custom Elements, FreeMarker, CSS), identificando desvios das convenções públicas e oficiais e produzindo um relatório de achados classificados por severidade, cada um vinculado à regra correspondente do arquivo de contexto. A skill não reescreve o código — ela aponta problemas e recomenda correções.

Quando Usar

• Antes de um merge, para uma revisão ampla de qualidade de um widget ou Custom Element.
• Quando o desenvolvedor quer um diagnóstico transversal (ES6+, convenções de widget, i18n, segurança, CSS/Style Guide, acessibilidade e performance) em vez de uma revisão especializada.
• Quando há suspeita de múltiplas categorias de problema no mesmo arquivo.
• Para preparar um relatório de revisão estruturado a ser anexado a um pull request.

Para revisões aprofundadas em um único eixo, prefira as skills especializadas: fluig-review-performance, fluig-review-security, fluig-review-accessibility e fluig-best-practices.

Entradas Esperadas

Contexto de Referência (Fonte de Verdade)

Leia antes de executar — não reproduza o conteúdo aqui:

• conventions.md — ES6+, nomenclatura, convenções de widget (fluig-style-guide, instanceId só em id com _, instance() sem instanceId, bindings), Custom Elements, i18n, segurança (WCMAPI.validateXSS, DOMPurify.sanitize), REST interna (WCMAPI/FLUIGC.ajax) e CSS.
• style-guide.md — reutilização de componentes/helpers/grid do Style Guide e variáveis de cor var(--fs-color-*) (sem hexadecimal fixo, suporte a dark mode).

Regras Aplicáveis (Resumo Executivo)

Somente o mínimo para orientar a revisão; o detalhe está no contexto e o checklist completo em assets/checklist.md. Cada achado deve citar a regra de origem.

• ES6+: const/let (sem var), arrow functions, template literals, async/await; sem misturar jQuery e ES6+ no mesmo arquivo → ver conventions.md.
• Widget: raiz com fluig-style-guide; instanceId apenas em id com separador _; instance() sem instanceId; bindings com chave sem o prefixo data- → ver conventions.md.
• Custom Element: nome de arquivo [name].[category].js; classe PascalCase; sem Shadow DOM; topo do arquivo só com import → ver conventions.md.
• i18n: todo texto visível via ${i18n.getTranslation('chave')}; nunca acessar i18n como objeto JS; cuidado com template literals → ver conventions.md.
• Segurança: entrada do usuário sanitizada (DOMPurify.sanitize / WCMAPI.validateXSS); textContent em vez de innerHTML inseguro; sem eval()/new Function() com dados dinâmicos; escape FreeMarker → ver conventions.md.
• REST interna: chamadas a endpoints internos via WCMAPI/FLUIGC.ajax (nunca fetch/$.ajax direto) → ver conventions.md.
• CSS: reutilizar Style Guide; CSS escopado à raiz; sem style inline/<style>; sem hexadecimal fixo (var(--fs-color-*)) → ver conventions.md e style-guide.md.
• Acessibilidade: HTML semântico, rótulos/nome acessível, navegação por teclado, contraste → ver conventions.md e style-guide.md.
• Performance: DOM agrupado, sem seletores repetidos, debounce/throttle, dados sob demanda → ver conventions.md.

Escala de Severidade

Classifique cada achado em um destes níveis:

Procedimento

1. Identificar o tipo de artefato e os eixos aplicáveis (ES6+, widget/Custom Element, i18n, segurança, CSS/Style Guide, acessibilidade, performance).
2. Percorrer o checklist completo em assets/checklist.md, categoria por categoria.
3. Para cada desvio, registrar um achado com: localização, descrição, severidade (escala acima) e a regra de contexto correspondente (conventions.md ou style-guide.md, com a seção).
4. Recomendar a correção objetiva de cada achado, referenciando a skill especializada quando fizer sentido (ex.: fluig-validate-security, fluig-dark-mode, fluig-internationalization).
5. Consolidar os achados no formato de assets/output-template.md, ordenando do mais grave ao menos grave.
6. Validar a própria revisão com o checklist de validação abaixo antes de entregar.

Saída Esperada

Um relatório de revisão seguindo assets/output-template.md, contendo:

• Resumo com a contagem de achados por severidade e a avaliação geral.
• Achados agrupados por severidade (crítico → baixo); cada achado com localização, descrição, severidade e a regra de contexto referenciada.
• Recomendações acionáveis por achado, indicando a skill especializada aplicável quando útil.

A skill não altera o código — apenas diagnostica e recomenda.

Exemplo de Uso

Trecho revisado e achado correspondente.

// Código revisado (trecho)
container.innerHTML = userInput;                 // entrada do usuário
$.ajax({ url: '/api/internal/list' });           // endpoint interno via $.ajax

## Achados

### 🔴 Crítico
- **DOM/Segurança — linha 1:** `innerHTML` recebe `userInput` sem sanitização (vetor de XSS).
  - Regra: `conventions.md` › Segurança (APIs públicas).
  - Recomendação: usar `textContent` ou `DOMPurify.sanitize(userInput)` antes de inserir. Ver skill `fluig-validate-security`.

### 🟠 Alto
- **REST interna — linha 2:** chamada a endpoint interno via `$.ajax` direto.
  - Regra: `conventions.md` › Chamadas REST internas.
  - Recomendação: usar `FLUIGC.ajax` (ou `WCMAPI` no legado) para enviar o token de sessão.

Checklist de Validação

• Todos os eixos aplicáveis foram percorridos via assets/checklist.md.
• Cada achado tem severidade atribuída conforme a escala (crítico/alto/médio/baixo).
• Cada achado referencia a regra do arquivo de contexto (conventions.md/style-guide.md, com a seção).
• O relatório segue assets/output-template.md, do mais grave ao menos grave.
• O relatório inclui Pontos Positivos e um Plano de Ação ordenado por urgência.
• As recomendações são acionáveis e apontam a skill especializada quando aplicável.
• A revisão não alterou o código — apenas diagnosticou e recomendou.