Frontend Slides: apresentações HTML com estilo escolhido antes do lote

ANÁLISE EDITORIAL

Uma apresentação pode ficar bonita no arquivo e falhar na hora de mostrar: letra pequena, elementos cortados, transições que distraem e uma identidade visual escolhida só depois de todas as telas prontas. A Frontend Slides inverte essa ordem. A Skill pede o objetivo, o tamanho e a densidade do material, produz três prévias de estilo para escolha e só então orienta a criação do deck em HTML. É uma ferramenta de trabalho para quem aceita revisar código e apresentação no navegador, não um botão que transforma qualquer PowerPoint em resultado pronto.

O que esta Skill faz de verdade

O arquivo SKILL.md do projeto, mantido por Zara Zhang, descreve três modos: criar uma apresentação, converter um PPTX existente ou melhorar um deck HTML. O núcleo da criação trabalha com um palco fixo de 1920 por 1080 pixels, em proporção 16:9, escalado por inteiro para a janela. A regra é preservar a composição, inclusive em celular, e não reorganizar os cartões como uma página responsiva comum. Isso pode deixar bordas livres em telas com outra proporção, mas evita que um slide se desmonte ao ser projetado.

O fluxo começa por uma conversa curta sobre finalidade, duração, material disponível e densidade. Um deck para acompanhar uma fala pede menos texto do que um relatório para leitura posterior. Em seguida, o agente deve gerar três prévias visuais diferentes. A pessoa escolhe ou pede ajuste antes da versão completa. A Skill também documenta navegação entre slides, animações, edição posterior e a verificação de sobreposição e corte. A saída central é um HTML com CSS e JavaScript embutidos; não é um arquivo PPTX editável por objetos no PowerPoint.

Na consulta de 13 de outubro de 2026, o repositório no GitHub registrava 30.563 estrelas. Esse número mede interesse no projeto, não a qualidade de uma apresentação gerada. A versão analisada aqui é o commit 9906a34d640d2111f724544cbc50f7f130569ae1, e a licença do repositório é MIT.

Para quem serve

Ela faz sentido para quem prepara aulas, palestras, demonstrações de produto ou relatórios visuais e pode abrir o resultado no navegador para conferir cada tela. Também pode ajudar uma equipe que já tem um HTML e precisa corrigir corte, hierarquia ou movimento sem refazer tudo. O ganho concreto é a conversa sobre densidade e estilo antes de investir no deck inteiro. Quem precisa de um PPTX com cada forma e caixa de texto editável separadamente deve escolher outro fluxo; a saída principal desta Skill não oferece essa garantia.

Compatibilidade e pré-requisitos

O README oficial documenta instalação como plugin do Claude Code, instalação manual da Skill e leitura do SKILL.md por outros agentes com acesso ao sistema de arquivos. Para começar do zero ou melhorar HTML, você precisa de um agente capaz de ler instruções, escrever arquivos e apresentar prévias, além de um navegador para testar o resultado. A afirmação de “zero dependências” vale para o HTML final de um deck simples, não para todos os fluxos acessórios.

A conversão de PPTX depende de Python e do script scripts/extract-pptx.py, com python-pptx quando necessário. Exportar PDF usa o script de origem e Playwright; publicar em uma URL usa outro script e uma conta no serviço configurado pelo mantenedor. Esses arquivos executáveis não estão no ZIP hospedado pelo Bastidores. Se a sua tarefa exige conversão, exportação ou deploy, abra o repositório oficial e audite o fluxo completo antes de rodar qualquer comando.

Instalação recomendada

1. Baixe o pacote local pelo cartão no topo desta página. Antes de extrair, compare o SHA-256 do arquivo com ba5446656211bc6eb5f304a09bd4147e7be93ca5f0413ce53e6c9377550e68cc. Se o valor divergir, descarte o arquivo e não instale.
2. Abra ORIGEM.md e LICENSE. Confira o commit, o SHA do SKILL.md e a lista de ausências. O pacote contém textos de orientação, CSS e índice JSON, não scripts de instalação.
3. Em um projeto de teste, copie a pasta extraída para o local de Skills aceito pelo seu agente, preservando os caminhos relativos. No Claude Code, siga o método manual documentado no README; para outros agentes, consulte a documentação do próprio produto, pois os diretórios e comandos podem mudar.
4. Peça ao agente apenas uma apresentação curta de teste. Autorize leitura das fontes necessárias e escrita somente na pasta de saída. Ainda não conecte serviços de publicação nem entregue apresentações confidenciais.

O botão de download local e o botão de repositório oficial no cartão superior têm funções diferentes. O primeiro oferece um recorte documental auditado e sem scripts. O segundo leva à origem completa e atual, que pode ter mudado depois do commit registrado.

Configuração antes do primeiro uso

Separe um briefing com público, finalidade, duração desejada, fontes aprovadas e a decisão sobre densidade: slides para acompanhar a fala ou para leitura sem apresentador. Diga quais dados podem aparecer, quais são internos e quais imagens já têm licença de uso. Se houver marca, forneça o manual e os arquivos autorizados; não peça ao agente para adivinhar identidade visual por um print solto. Para uma apresentação existente, entregue uma cópia do HTML e dos recursos locais, nunca o único original.

O pacote inclui STYLE_PRESETS.md, html-template.md, animation-patterns.md, viewport-base.css e descrições textuais dos modelos do diretório bold-template-pack. Ele não inclui os scripts da origem. Preserve esses arquivos juntos: o SKILL.md faz referência a eles, e o CSS define o palco fixo. Se usar fotos, gráficos ou fontes externas, confirme licenças e disponibilidade separadamente.

Primeiro uso seguro e resultado esperado

Um teste útil é pedir cinco slides para explicar um processo que você conhece bem, com um exemplo de entrada, uma decisão e um encerramento. Peça ao agente que mostre as três prévias e pare. Escolha uma, ajuste contraste ou hierarquia se necessário e só então permita a geração do arquivo completo. Ao abrir o HTML, navegue por todos os slides com teclado e controles visíveis. Confira se nenhum texto sai da área de 16:9, se as imagens aparecem e se a apresentação continua legível em uma janela menor.

O resultado esperado é um HTML navegável que respeita a direção aprovada, não uma apresentação final automaticamente correta. Revise números, citações, atribuições, ortografia e ordem dos argumentos contra as fontes originais. Teste também a preferência por movimento reduzido; animação não deve esconder conteúdo de quem a desativou. Se o material for compartilhar com terceiros, verifique se referências a arquivos locais continuam resolvendo fora do seu computador.

Permissões e riscos

A Skill, sozinha, é texto. O risco aparece nas permissões do agente que a usa e nos comandos adicionais escolhidos. Um agente com escrita pode substituir HTML e recursos; com rede, pode buscar fontes externas ou publicar conteúdo; com os scripts oficiais, pode instalar dependências ou enviar o deck a um serviço. Por isso, separe a etapa de criação local da etapa de distribuição. Inspecione o diff e os recursos incorporados antes de subir o resultado. Não inclua dados pessoais, segredos ou documentos de cliente em prévias compartilháveis sem aprovação.

A capa desta página é uma ilustração editorial exclusiva. A captura acima é um exemplo real mostrado pela documentação do mantenedor. Nenhuma das duas demonstra que um deck foi gerado ou testado neste ambiente.

Erros comuns e como investigar

• Slides cortados no celular: confirme que o estágio 1920 por 1080 é escalado como um todo e que o conteúdo não ultrapassa a área. Não resolva apenas reduzindo a fonte até ela ficar ilegível; divida um slide muito denso.
• Todos os slides aparecem de uma vez: confira as classes de visibilidade previstas em viewport-base.css. O guia alerta para conflitos quando a troca de slide depende apenas de display.
• Imagem não aparece após compartilhar: procure caminhos absolutos do computador e dependências externas. Empacote recursos autorizados com caminhos relativos e teste a cópia em outra máquina ou URL de prévia.
• O agente pede script ausente: o ZIP do Bastidores é documental. Para PPTX, PDF ou deploy, procure os scripts no commit oficial e avalie dependências, acesso à rede e destino antes de executar.
• O deck ficou bonito, mas não comunica: volte ao briefing e à densidade. Peça uma frase central por slide e compare o texto com as fontes antes de mexer em cor ou transição.

Versão, licença e download local

Esta curadoria fixa o commit 9906a34d640d2111f724544cbc50f7f130569ae1 de zarazhangrui/frontend-slides, consultado em 13/10/2026. O repositório apresenta licença MIT, que permite redistribuição com o aviso de copyright e a licença preservados. O ZIP local inclui esses avisos e o arquivo ORIGEM.md. SHA-256 do pacote: ba5446656211bc6eb5f304a09bd4147e7be93ca5f0413ce53e6c9377550e68cc. Ele é uma seleção documental, não substitui o repositório para os fluxos com scripts.

Depois da extração, compare também o SHA-256 do SKILL.md com 491b333f92e31f97395d6ca54f1a6e390f223db4174935f024be6ba9a0ba1a8f. Essa checagem identifica o texto auditado; não prova que a saída produzida pelo agente está correta.

Fontes primárias

• Repositório Frontend Slides no commit auditado.
• Instruções originais da Skill e README do mantenedor.
• Licença MIT do projeto.
• Licença do repositório das capturas de estilo.