req-116: Revisão dos Modos de IA (ai_modes), Diretrizes das Três Camadas de CSS e Otimização do Contexto no Assistente IA

• Status do intake: ready-for-intake

• Data: 2026-08-15

• Origem: solicitação do Engenheiro Chefe após a implementação das três camadas de CSS (css, css_precompiled, css_compiled) e compilação Tailwind por recurso

• Classificação: revisão de prompts de IA, contratos de contexto e otimização de payload

• Batch candidato: BATCH-116

1. Contexto e Motivação

Com a introdução das três camadas de CSS no sistema:

1. css: CSS autoral escrito pelo desenvolvedor/usuário;

2. css_precompiled: CSS Tailwind gerado offline durante release/deploy;

3. css_compiled: CSS Tailwind compilado no navegador pelo Live Editor quando o conteúdo é alterado.

Os Modos de IA (ai_modes) utilizados no assistente do Live Editor (c2f-ai-panel) e nos formulários administrativos atualmente injetam apenas o {{css}} autoral e o {{html}} anterior no prompt do LLM.

É necessário revisar todos os modos de IA do sistema para garantir que:

• O agente de IA compreenda o contexto de estilização do framework ativo ({{framework_css}}, prioritariamente Tailwind CSS v4);

• As instruções deixem explícito que o retorno do agente deve priorizar classes utilitárias de Tailwind diretamente no HTML e apenas emitir CSS customizado no bloco css quando estritamente necessário;

• O payload de contexto enviado ao LLM seja inteligente e econômico: não despejar milhares de linhas de CSS compilado bruto (css_precompiled), o que esgotaria a janela de contexto e aumentaria a latência desnecessariamente, mas sim fornecer as informações necessárias de estilo com alta eficiência de tokens.

2. Escopo Técnico Requerido

Módulo 1: Inventário e Revisão de Todos os Modos de IA (ai_modes)

• Varrer e auditar todos os modos de IA existentes nos módulos do Gestor (em pt-br e en):

  • admin-paginas: modos paginas e paginas-editbar;

  • admin-layouts: modo layouts;

  • admin-componentes: modo componentes;

  • forms: modo forms e forms-search;

  • galleries: modo galleries;

  • menus: modo menus;

  • publisher-highlights: modo publisher-highlights;

  • publisher-index: modo publisher-index;

  • publisher-pages: modo publisher-pages.

Módulo 2: Atualização dos Prompts com Diretrizes das Camadas de CSS

• Ajustar os templates de prompt (.md) para orientar claramente o modelo:

  • Utilizar classes utilitárias modernas do Tailwind CSS no markup HTML;

  • Devolver CSS customizado no bloco markdown css apenas para regras que não possam ser expressas com as classes do framework;

  • Não emitir blocos boilerplate de reset, Preflight ou regras redundantes já fornecidas pelo framework;

  • Deixar claro que a compilação e pré-compilação do Tailwind são executadas automaticamente pela plataforma após a entrega do HTML/CSS.

Módulo 3: Ajuste do Pipeline de Contexto (html_editor_ajax_ia_requests)

• Em gestor/bibliotecas/html-editor.php (e no frontend correspondente em dashboard.toolbar.js / html-editor.js):

  • Enviar o CSS autoral (css) e, quando relevante na edição visual, o css_compiled gerado dinamicamente;

  • Garantir que o payload não envie blobs gigantescos de CSS bruto (css_precompiled), mantendo a requisição leve e focada;

  • Garantir sanitização e substituição determinística dos placeholders no prompt.

Módulo 4: Recompilação de Recursos e Sincronização

• Atualizar os arquivos físicos em resources/{pt-br,en}/ai_modes/ e sincronizar com gestor/db/data/ModosIaData.json.

• Validar que nenhum modo existente sofra regressão de contratos ou marcadores de loop (<!-- item < -->, @[[...]]@, etc.).

3. Critérios de Aceite e Validação

1. Todos os modos de IA do ModosIaData.json sincronizados e consistentes em PT-BR e EN.

2. Prompts claros quanto ao uso de Tailwind CSS e emissão limpa de HTML/CSS.

3. Testes unitários de renderização de prompt e requisições AJAX (html_editor_ajax_ia_requests) 100% verdes.

4. Nenhuma degradação de performance por envio excessivo de CSS bruto no payload do assistente.