Slides de Frontend

Crie apresentações HTML ricas em animações e sem dependências, que rodam inteiramente no navegador.

Inspirado pela abordagem de exploração visual apresentada no trabalho de zarazhangrui (crédito: @zarazhangrui).

Quando Ativar

• Criando um deck para palestra, pitch, workshop ou apresentação interna
• Convertendo slides .ppt ou .pptx em uma apresentação HTML
• Melhorando o layout, movimento ou tipografia de uma apresentação HTML existente
• Explorando estilos de apresentação com um usuário que ainda não sabe sua preferência de design

Não Negociáveis

1. Zero dependências: por padrão, um único arquivo HTML autocontido com CSS e JS inline.
2. Ajuste à viewport é obrigatório: cada slide deve caber em uma viewport sem rolagem interna.
3. Mostrar, não contar: use prévias visuais em vez de questionários de estilo abstratos.
4. Design distintivo: evite decks genéricos com gradiente roxo, Inter sobre branco, com aparência de modelo.
5. Qualidade de produção: mantenha o código comentado, acessível, responsivo e com bom desempenho.

Antes de gerar, leia STYLE_PRESETS.md para a base CSS segura para viewport, limites de densidade, catálogo de presets e armadilhas de CSS.

Fluxo de Trabalho

1. Detectar Modo

Escolha um caminho:

• Nova apresentação: o usuário tem um tópico, notas ou rascunho completo
• Conversão de PPT: o usuário tem .ppt ou .pptx
• Melhoria: o usuário já tem slides HTML e quer aprimoramentos

2. Descobrir Conteúdo

Pergunte apenas o mínimo necessário:

• propósito: pitch, ensino, palestra em conferência, atualização interna
• duração: curta (5-10), média (10-20), longa (20+)
• estado do conteúdo: texto finalizado, notas gerais, apenas tópico

Se o usuário tiver conteúdo, peça para ele colar antes de estilizar.

3. Descobrir Estilo

Por padrão, use exploração visual.

Se o usuário já souber o preset desejado, pule as prévias e use-o diretamente.

Caso contrário:

1. Pergunte qual sentimento o deck deve criar: impressionado, energizado, focado, inspirado.
2. Gere 3 arquivos de prévia de slide único em .ecc-design/slide-previews/.
3. Cada prévia deve ser autocontida, mostrar claramente tipografia/cor/movimento e ficar abaixo de aproximadamente 100 linhas de conteúdo de slide.
4. Pergunte ao usuário qual prévia manter ou quais elementos misturar.

Use o guia de presets em STYLE_PRESETS.md ao mapear humor para estilo.

4. Construir a Apresentação

Gere um dos seguintes:

• presentation.html
• [presentation-name].html

Use uma pasta assets/ apenas quando o deck contiver imagens extraídas ou fornecidas pelo usuário.

Estrutura necessária:

• seções de slide semânticas
• uma base CSS segura para viewport de STYLE_PRESETS.md
• propriedades CSS personalizadas para valores de tema
• uma classe controladora de apresentação para navegação por teclado, roda do mouse e toque
• Intersection Observer para animações de revelação
• suporte a reduced-motion

5. Garantir o Ajuste à Viewport

Trate isso como um ponto de controle rigoroso.

Regras:

• cada .slide deve usar height: 100vh; height: 100dvh; overflow: hidden;
• todo tipo e espaçamento devem escalar com clamp()
• quando o conteúdo não couber, divida em vários slides
• nunca resolva overflow diminuindo o texto abaixo de tamanhos legíveis
• nunca permita barras de rolagem dentro de um slide

Use os limites de densidade e o bloco CSS obrigatório em STYLE_PRESETS.md.

6. Validar

Verifique o deck finalizado nestes tamanhos:

• 1920x1080
• 1280x720
• 768x1024
• 375x667
• 667x375

Se a automação do navegador estiver disponível, use-a para verificar se nenhum slide transborda e se a navegação por teclado funciona.

7. Entregar

Na entrega:

• exclua arquivos temporários de prévia, a menos que o usuário queira mantê-los
• abra o deck com o abridor apropriado para a plataforma quando útil
• resuma o caminho do arquivo, o preset usado, a contagem de slides e os pontos fáceis de personalização do tema

Use o abridor correto para o sistema operacional atual:

• macOS: open file.html
• Linux: xdg-open file.html
• Windows: start "" file.html

Conversão de PPT / PPTX

Para conversão do PowerPoint:

1. Prefira python3 com python-pptx para extrair texto, imagens e notas.
2. Se python-pptx não estiver disponível, pergunte se deve instalá-lo ou recorrer a um fluxo de trabalho manual/baseado em exportação.
3. Preserve a ordem dos slides, notas do apresentador e ativos extraídos.
4. Após a extração, execute o mesmo fluxo de trabalho de seleção de estilo de uma nova apresentação.

Mantenha a conversão multiplataforma. Não dependa de ferramentas exclusivas para macOS quando o Python puder fazer o trabalho.

Requisitos de Implementação

HTML / CSS

• Use CSS e JS inline, a menos que o usuário queira explicitamente um projeto com múltiplos arquivos.
• Fontes podem vir do Google Fonts ou Fontshare.
• Prefira fundos atmosféricos, forte hierarquia tipográfica e uma direção visual clara.

…