frontend-slides

Frontend Slides

Crie apresentações HTML autossuficientes, 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

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

Inegociáveis

1. Sem dependências: padrão é um único arquivo HTML autocontido com CSS e JS inline.
2. Ajuste à janela de visualização é obrigatório: cada slide deve caber dentro de uma janela de visualização sem rolagem interna.
3. Mostre, não conte: use prévias visuais em vez de questionários abstratos de estilo.
4. Design marcante: evite decks genéricos com gradiente roxo, Inter sobre branco ou com 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 predefinições 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
• Aprimoramento: 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 soltas, apenas 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 a predefinição desejada, pule as prévias e use-a 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 tipografia/cor/movimento claramente e ter cerca de 100 linhas de conteúdo de slide.
4. Pergunte ao usuário qual prévia manter ou quais elementos misturar.

Use o guia de predefinições em STYLE_PRESETS.md ao mapear humor para estilo.

4. Construir a Apresentação

Saída:

• presentation.html
• [nome-da-apresentacao].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
• base CSS segura para viewport de STYLE_PRESETS.md
• propriedades personalizadas CSS para valores de tema
• 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 à Janela de Visualização

Trate isso como uma regra 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 transbordamento 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 houver automação de navegador disponível, use-a para verificar se nenhum slide transborda e se a navegação por teclado funciona.

7. Entregar

Na entrega:

• exclua arquivos de prévia temporários, a menos que o usuário queira mantê-los
• abra o deck com o abridor adequado à plataforma quando útil
• resuma o caminho do arquivo, a predefinição usada, 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 de trabalho manual/baseado em exportação.
3. Preserve a ordem dos slides, notas do apresentador e recursos 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 do 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 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ído e geometria em vez de ilustrações.

JavaScript

Inclua:

• navegação por teclado
• navegação por toque / deslize
• navegação por roda do mouse
• indicador de progresso ou índice de slides
• gatilhos de animação ao entrar (reveal-on-enter)

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 esses máximos, a menos que o usuário peça explicitamente slides mais densos e a legibilidade ainda seja mantida:

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

Antipadrões

• gradientes genéricos de startup sem identidade visual
• decks com fontes do sistema, a menos que intencionalmente editoriais
• 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 componentes e interação ao redor do deck
• liquid-glass-design quando uma apresentação intencionalmente empresta 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 é marcante 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