Skill: Validador de Slides
Objetivo
Inspecionar o index.html gerado pela /mira-builder e produzir um relatório de conformidade: estilo, assets, estrutura HTML e boas práticas do padrão do projeto. Chamada automaticamente pela /mira-builder após gerar o HTML, ou manualmente para validar uma apresentação existente.
Fluxo de Execução
Passo 1: Localizar o arquivo
Identifique o index.html a validar:
- Chamado pela
/mira-builder: caminho conhecido decks/<deck>/index.html
- Chamado pelo usuário: pergunte qual capítulo ou aceite o caminho direto
Passo 2: Ler o HTML completo
Leia o index.html inteiro.
Passo 3: Executar as verificações
Execute cada verificação abaixo e registre PASS ou FAIL com detalhes.
Checklist de Verificações
A. Cores (crítico)
| # |
Verificação |
Como checar |
| A1 |
Cor primária é #FF904D |
Buscar ocorrências de #FF904D (deve existir). Buscar #FFA203 ou #e47d5b (não deve existir) |
| A2 |
Fundo é #000000 |
Buscar background: #000000 no body. Buscar #222222 ou #1a1a2e (não deve existir) |
| A3 |
rgba usa 255, 144, 77 |
Buscar rgba(255, 144, 77 (deve existir). Buscar rgba(255, 162, 3 (não deve existir) |
B. Identidade Visual (crítico)
| # |
Verificação |
Como checar |
| B1 |
Logo no header |
Buscar <img com canal_sandeco_logo.png dentro do <header> |
| B2 |
Logo no footer |
Buscar <img com canal_sandeco_logo.png após o </main> |
| B3 |
Arquivo logo existe |
Verificar se canal_sandeco_logo.png existe na pasta do slide |
| B4 |
Nenhum SVG genérico no lugar da logo |
Buscar <svg próximo de "sandeco" ou "logo" (não deve existir) |
C. Vídeos (crítico)
| # |
Verificação |
Como checar |
| C1 |
Vídeo no header |
Buscar <video dentro do <header> com src="header-bg.mp4" |
| C2 |
Arquivo header-bg.mp4 existe |
Verificar se o arquivo existe na pasta do slide |
| C3 |
Atributos obrigatórios |
Todo <video deve ter autoplay, loop, muted, playsinline |
| C4 |
Opacidade 50% |
Todo <video deve ter opacity: 0.5 ou opacity-50 |
| C5 |
Overlay gradient |
Após cada <video, deve haver um <div com linear-gradient |
D. Layout dos Cards (importante)
| # |
Verificação |
Como checar |
| D1 |
Largura max-w-5xl |
Cards devem usar max-w-5xl. Buscar max-w-3xl, max-w-2xl, max-w-6xl em cards (não deve existir, exceto dentro de parágrafos <p> onde max-w-3xl é permitido) |
| D2 |
Padding adequado |
Cards devem usar p-8 ou p-10. Buscar p-16 em cards (não deve existir) |
| D3 |
Gap entre cards |
<main> deve ter gap-[60vh] |
| D4 |
Glassmorphism |
Deve existir backdrop-filter: blur(10px) no CSS |
E. Tipografia (importante)
| # |
Verificação |
Como checar |
| E1 |
Fonte Inter |
Buscar fonts.googleapis.com com Inter no <head> |
| E2 |
Títulos de card |
Títulos <h3> dentro de cards devem usar text-3xl ou text-4xl. Buscar text-5xl em <h3> (não deve existir) |
| E3 |
Título principal |
O <h1> do header pode usar text-5xl ou text-7xl (permitido) |
F. Estrutura e Navegação (importante)
| # |
Verificação |
Como checar |
| F1 |
Barra de progresso |
Buscar id="reading-progress" |
| F2 |
Botão próximo card |
Buscar id="next-card" |
| F3 |
Botão começar no header |
Buscar id="header-next-btn" |
| F4 |
AOS inicializado |
Buscar AOS.init |
| F5 |
Lucide inicializado |
Buscar lucide.createIcons |
| F6 |
D3.js carregado |
Buscar d3.v7 no <head> (se houver cards D3) |
| F7 |
setupFullScreenWrappers |
Buscar setupFullScreenWrappers |
G. Conteúdo e Composição (qualidade)
| # |
Verificação |
Como checar |
| G1 |
Mínimo de cards |
Contar elementos glass-card ou cards dentro de <main>. Mínimo: 8 |
| G2 |
Variedade de templates |
Identificar tipos de cards usados. Mínimo: 3 tipos diferentes |
| G3 |
CTA presente |
Buscar indicadores de card CTA (botão de ação, link para livro/canal) |
| G4 |
Sem cards repetidos em sequência |
Verificar se não há 2 cards do mesmo tipo seguidos |
| G5 |
Sem placeholders residuais |
Buscar [TITULO], [DESCRICAO], [DELAY], [ICONE] e outros placeholders não substituídos |
| G6 |
Sem número de slides no header |
Buscar [DESTAQUE_NUMERICO] (não deve existir) |
H. Assets do Capítulo (importante)
| # |
Verificação |
Como checar |
| H1 |
Imagens referenciadas existem |
Para cada <img src="..."> no HTML, verificar se o arquivo existe na pasta |
| H2 |
Vídeos referenciados existem |
Para cada <source src="...mp4">, verificar se o arquivo existe na pasta |
I. Segurança (importante)
| # |
Verificação |
Como checar |
| I1 |
Código escapado |
Em blocos <code> ou <pre>, buscar < e > não escapados (exceto tags HTML internas). Deve usar < e > |
Passo 4: Gerar o Relatório
Apresente o relatório neste formato:
# Relatorio de Validacao: [Capitulo]
**Arquivo:** decks/<deck>/index.html
**Data:** YYYY-MM-DD
**Total de verificacoes:** XX
**Passou:** XX | **Falhou:** XX | **Avisos:** XX
## Resultados
### Criticos (devem ser corrigidos)
- [FAIL] A1: Cor #FFA203 encontrada nas linhas 45, 112
- [PASS] B1: Logo presente no header
### Importantes (recomendado corrigir)
- [FAIL] D1: Card na linha 89 usa max-w-3xl em vez de max-w-5xl
- [PASS] E1: Fonte Inter carregada
### Qualidade (sugestoes)
- [WARN] G4: Cards 3 e 4 sao ambos card_lista
- [PASS] G1: 12 cards encontrados
## Correcoes Sugeridas
Para cada FAIL, indique:
1. **Linha(s):** onde esta o problema
2. **Atual:** o que esta escrito
3. **Correto:** o que deveria estar
4. **Como corrigir:** instrucao especifica de edicao
Níveis de severidade
- Crítico (categorias A, B, C): Problemas visuais graves ou assets faltantes. Não publicar sem corrigir.
- Importante (categorias D, E, F, H, I): Desvios do padrão que afetam qualidade mas não impedem o uso.
- Qualidade (categoria G): Sugestões de composição e variedade.
Passo 5: Oferecer correção automática
Após o relatório, pergunte:
"Encontrei X problemas. Quer que eu corrija automaticamente os itens críticos e importantes?"
Se aceitar, aplique as correções no index.html com edições pontuais (Edit tool) e rode a validação de novo para confirmar.
Notas
- NÃO modifica o conteúdo textual dos slides, apenas problemas técnicos e de conformidade
- Problema ambíguo (ex: card poderia ser lista ou grid): classifique como WARN, não FAIL
- Placeholders residuais (G5) são sempre FAIL crítico: indicam montagem incompleta
1---2name: mira-validator3description: Valida o HTML gerado pela /mira-builder, checando conformidade visual, estrutural e de assets. Use SEMPRE que a /mira-builder terminar de gerar um index.html, ou quando o usuário quiser verificar a qualidade de uma apresentação existente, revisar se os slides seguem o padrão, ou diagnosticar problemas visuais em slides já criados.4---56# Skill: Validador de Slides78## Objetivo910Inspecionar o `index.html` gerado pela `/mira-builder` e produzir um relatório de conformidade: estilo, assets, estrutura HTML e boas práticas do padrão do projeto. Chamada automaticamente pela `/mira-builder` após gerar o HTML, ou manualmente para validar uma apresentação existente.1112## Fluxo de Execução1314### Passo 1: Localizar o arquivo1516Identifique o `index.html` a validar:17- Chamado pela `/mira-builder`: caminho conhecido `decks/<deck>/index.html`18- Chamado pelo usuário: pergunte qual capítulo ou aceite o caminho direto1920### Passo 2: Ler o HTML completo2122Leia o `index.html` inteiro.2324### Passo 3: Executar as verificações2526Execute cada verificação abaixo e registre PASS ou FAIL com detalhes.2728---2930## Checklist de Verificações3132### A. Cores (crítico)3334| # | Verificação | Como checar |35|---|------------|-------------|36| A1 | Cor primária é `#FF904D` | Buscar ocorrências de `#FF904D` (deve existir). Buscar `#FFA203` ou `#e47d5b` (não deve existir) |37| A2 | Fundo é `#000000` | Buscar `background: #000000` no body. Buscar `#222222` ou `#1a1a2e` (não deve existir) |38| A3 | rgba usa `255, 144, 77` | Buscar `rgba(255, 144, 77` (deve existir). Buscar `rgba(255, 162, 3` (não deve existir) |3940### B. Identidade Visual (crítico)4142| # | Verificação | Como checar |43|---|------------|-------------|44| B1 | Logo no header | Buscar `<img` com `canal_sandeco_logo.png` dentro do `<header>` |45| B2 | Logo no footer | Buscar `<img` com `canal_sandeco_logo.png` após o `</main>` |46| B3 | Arquivo logo existe | Verificar se `canal_sandeco_logo.png` existe na pasta do slide |47| B4 | Nenhum SVG genérico no lugar da logo | Buscar `<svg` próximo de "sandeco" ou "logo" (não deve existir) |4849### C. Vídeos (crítico)5051| # | Verificação | Como checar |52|---|------------|-------------|53| C1 | Vídeo no header | Buscar `<video` dentro do `<header>` com `src="header-bg.mp4"` |54| C2 | Arquivo header-bg.mp4 existe | Verificar se o arquivo existe na pasta do slide |55| C3 | Atributos obrigatórios | Todo `<video` deve ter `autoplay`, `loop`, `muted`, `playsinline` |56| C4 | Opacidade 50% | Todo `<video` deve ter `opacity: 0.5` ou `opacity-50` |57| C5 | Overlay gradient | Após cada `<video`, deve haver um `<div` com `linear-gradient` |5859### D. Layout dos Cards (importante)6061| # | Verificação | Como checar |62|---|------------|-------------|63| D1 | Largura `max-w-5xl` | Cards devem usar `max-w-5xl`. Buscar `max-w-3xl`, `max-w-2xl`, `max-w-6xl` em cards (não deve existir, exceto dentro de parágrafos `<p>` onde `max-w-3xl` é permitido) |64| D2 | Padding adequado | Cards devem usar `p-8` ou `p-10`. Buscar `p-16` em cards (não deve existir) |65| D3 | Gap entre cards | `<main>` deve ter `gap-[60vh]` |66| D4 | Glassmorphism | Deve existir `backdrop-filter: blur(10px)` no CSS |6768### E. Tipografia (importante)6970| # | Verificação | Como checar |71|---|------------|-------------|72| E1 | Fonte Inter | Buscar `fonts.googleapis.com` com `Inter` no `<head>` |73| E2 | Títulos de card | Títulos `<h3>` dentro de cards devem usar `text-3xl` ou `text-4xl`. Buscar `text-5xl` em `<h3>` (não deve existir) |74| E3 | Título principal | O `<h1>` do header pode usar `text-5xl` ou `text-7xl` (permitido) |7576### F. Estrutura e Navegação (importante)7778| # | Verificação | Como checar |79|---|------------|-------------|80| F1 | Barra de progresso | Buscar `id="reading-progress"` |81| F2 | Botão próximo card | Buscar `id="next-card"` |82| F3 | Botão começar no header | Buscar `id="header-next-btn"` |83| F4 | AOS inicializado | Buscar `AOS.init` |84| F5 | Lucide inicializado | Buscar `lucide.createIcons` |85| F6 | D3.js carregado | Buscar `d3.v7` no `<head>` (se houver cards D3) |86| F7 | setupFullScreenWrappers | Buscar `setupFullScreenWrappers` |8788### G. Conteúdo e Composição (qualidade)8990| # | Verificação | Como checar |91|---|------------|-------------|92| G1 | Mínimo de cards | Contar elementos `glass-card` ou cards dentro de `<main>`. Mínimo: 8 |93| G2 | Variedade de templates | Identificar tipos de cards usados. Mínimo: 3 tipos diferentes |94| G3 | CTA presente | Buscar indicadores de card CTA (botão de ação, link para livro/canal) |95| G4 | Sem cards repetidos em sequência | Verificar se não há 2 cards do mesmo tipo seguidos |96| G5 | Sem placeholders residuais | Buscar `[TITULO]`, `[DESCRICAO]`, `[DELAY]`, `[ICONE]` e outros placeholders não substituídos |97| G6 | Sem número de slides no header | Buscar `[DESTAQUE_NUMERICO]` (não deve existir) |9899### H. Assets do Capítulo (importante)100101| # | Verificação | Como checar |102|---|------------|-------------|103| H1 | Imagens referenciadas existem | Para cada `<img src="...">` no HTML, verificar se o arquivo existe na pasta |104| H2 | Vídeos referenciados existem | Para cada `<source src="...mp4">`, verificar se o arquivo existe na pasta |105106### I. Segurança (importante)107108| # | Verificação | Como checar |109|---|------------|-------------|110| I1 | Código escapado | Em blocos `<code>` ou `<pre>`, buscar `<` e `>` não escapados (exceto tags HTML internas). Deve usar `<` e `>` |111112---113114## Passo 4: Gerar o Relatório115116Apresente o relatório neste formato:117118```119# Relatorio de Validacao: [Capitulo]120121**Arquivo:** decks/<deck>/index.html122**Data:** YYYY-MM-DD123**Total de verificacoes:** XX124**Passou:** XX | **Falhou:** XX | **Avisos:** XX125126## Resultados127128### Criticos (devem ser corrigidos)129- [FAIL] A1: Cor #FFA203 encontrada nas linhas 45, 112130- [PASS] B1: Logo presente no header131132### Importantes (recomendado corrigir)133- [FAIL] D1: Card na linha 89 usa max-w-3xl em vez de max-w-5xl134- [PASS] E1: Fonte Inter carregada135136### Qualidade (sugestoes)137- [WARN] G4: Cards 3 e 4 sao ambos card_lista138- [PASS] G1: 12 cards encontrados139140## Correcoes Sugeridas141142Para cada FAIL, indique:1431. **Linha(s):** onde esta o problema1442. **Atual:** o que esta escrito1453. **Correto:** o que deveria estar1464. **Como corrigir:** instrucao especifica de edicao147```148149### Níveis de severidade150151- **Crítico** (categorias A, B, C): Problemas visuais graves ou assets faltantes. Não publicar sem corrigir.152- **Importante** (categorias D, E, F, H, I): Desvios do padrão que afetam qualidade mas não impedem o uso.153- **Qualidade** (categoria G): Sugestões de composição e variedade.154155## Passo 5: Oferecer correção automática156157Após o relatório, pergunte:158159> "Encontrei **X problemas**. Quer que eu corrija automaticamente os itens críticos e importantes?"160161Se aceitar, aplique as correções no `index.html` com edições pontuais (Edit tool) e rode a validação de novo para confirmar.162163## Notas164165- NÃO modifica o conteúdo textual dos slides, apenas problemas técnicos e de conformidade166- Problema ambíguo (ex: card poderia ser lista ou grid): classifique como WARN, não FAIL167- Placeholders residuais (G5) são sempre FAIL crítico: indicam montagem incompleta
sandeco