frontend-slides

Frontend Slides

Crie apresentações HTML sem dependências, ricas em animação, 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 de 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

Inegociáveis

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

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

Fluxo de Trabalho

1. Detectar Modo

Escolha um caminho:

• Nova apresentação: o usuário tem um tópico, anotações ou um rascunho completo
• Conversão de PPT: o usuário tem .ppt ou .pptx
• Melhoria: o usuário já tem slides HTML e deseja melhorias

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, anotações brutas, apenas o tópico

Se o usuário tiver conteúdo, peça para colá-lo antes da estilização.

3. Descobrir Estilo

Padrão: 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 sensação 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 tipografia/cor/movimento claramente e ter menos de aproximadamente 100 linhas de conteúdo do 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:

• presentation.html
• ou [nome-da-apresentacao].html

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

Estrutura obrigatória:

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

5. Garantir Ajuste à Viewport

Trate isso como uma barreira rígida.

Regras:

• cada .slide deve usar height: 100vh; height: 100dvh; overflow: hidden;
• toda tipografia 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 os arquivos de prévia temporários, 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 SO atual:

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

Conversão de PPT / PPTX

Para conversão de 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 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 seleção de estilo de uma nova apresentação.

Mantenha a conversão multiplataforma. Não dependa de ferramentas exclusivas do macOS quando o Python pode 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 vários arquivos.
• Fontes podem vir do Google Fonts ou Fontshare.
• Prefira fundos atmosféricos, hierarquia tipográfica forte e uma direção visual clara.
• Use formas abstratas, gradientes, grades, ruídos e geometria em vez de ilustrações.

JavaScript

Inclua:

• navegação por teclado
• navegação por toque / swipe
• navegação por roda do mouse
• indicador de progresso ou índice de slide
• gatilhos de animação ao entrar na tela

Acessibilidade

• use estrutura semântica (main, section, nav)
• mantenha contraste legível
• suporte navegação apenas por teclado
• respeite prefers-reduced-motion

Limites de Densidade de Conteúdo

Use estes máximos, a menos que o usuário peça explicitamente slides mais densos e a legibilidade ainda se mantenha:

Tipo de slide	Limite
Título	1 título + 1 subtítulo + tagline opcional
Conteúdo	1 título + 4-6 marcadores ou 2 parágrafos curtos
Grade de recursos	Máximo de 6 cards
Código	Máximo de 8-10 linhas
Citação	1 citação + atribuição
Imagem	1 imagem limitada pela viewport

Anti-Padrões

• gradientes genéricos de startup sem identidade visual
• decks com fontes do sistema, a menos que seja intencionalmente editorial
• longas paredes de marcadores
• blocos de código que precisam de rolagem
• caixas de conteúdo com altura fixa que quebram em telas curtas
• funções CSS negadas inválidas como -clamp(...)

Habilidades ECC Relacionadas

• frontend-patterns para padrões de componente e interação ao redor do deck
• liquid-glass-design quando uma apresentação pega emprestado intencionalmente a estética de vidro da Apple
• e2e-testing se você precisar de verificação automatizada do navegador para o deck final

Lista de Verificação da Entrega

• a apresentação roda a partir de um arquivo local no navegador
• cada slide cabe na viewport sem rolagem
• o estilo é distinto e intencional
• a animação é significativa, não ruidosa
• movimento reduzido é respeitado
• caminhos de arquivo e pontos de personalização são explicados na entrega