83.3K+Baixar
Ir para o guia de uso
frontend-slidespor Zara Zhang

Frontend Slides Skill.

Uma skill de Claude Code e Codex para PPT e slide decks: apresentações HTML ricas em animação do zero ou convertidas de arquivos PowerPoint.

  • Presentations
  • Slides HTML
Baixar OpenDesignVer guia de uso
zarazhangrui/frontend-slides · SKILL.mdSKILL.md
--- name: frontend-slides description: Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices. --- ## Core Principles ## Design Aesthetics ## Fixed Stage Rules ## Phase 0: Detect Mode ## Phase 1: Content Discovery (New Presentations) ## Phase 2: Style Discovery
Front matter e títulos de seção lidos do arquivo upstream em 2026-09-14 · 28.057 caracteres no total

01 O que faz

O Que a Skill frontend-slides Faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

O Frontend Slides constrói apresentações HTML sem dependências e ricas em animação que rodam inteiramente no navegador, criadas do zero ou convertidas a partir de um arquivo .pptx. Foi escrito para não designers que descobrem sua estética observando em vez de escolher a partir de descrições abstratas: ele gera três prévias de estilo de slide único (um preset seguro, pelo menos um modelo arrojado e um wildcard) e deixa o usuário reagir a elas visualmente.

A quantidade de texto que um deck carrega é definida por uma escolha de densidade entre baixa densidade orientada por apresentador e alta densidade orientada à leitura. Todo deck é criado dentro de um palco fixo de 1920x1080 escalado uniformemente para o viewport, e a entrega pode terminar com uma URL ativa na Vercel ou uma exportação em PDF.

O que ele produz

  • Uma apresentação HTML autocontida com toda a estilização e o script inline.
  • Três arquivos temporários de prévia de estilo (style-a.html, style-b.html, style-c.html) que são excluídos no momento da entrega.
  • Opcionalmente, uma URL ativa na Vercel para compartilhar o deck por mensagem de texto, Slack ou e-mail, visualizável em qualquer dispositivo.
  • Opcionalmente, um PDF para e-mail, Slack ou impressão, produzido capturando cada slide em tela e combinando-os.
Veja o exemplo de prompt ↗

Como funciona

  1. 01
    Detectar o Modo

    A skill primeiro decide se o trabalho é um deck novo criado do zero, uma conversão de .pptx ou um aprimoramento de uma apresentação HTML existente, e aplica o caminho de fase correspondente.

  2. 02
    Fazer Perguntas de Descoberta em Uma Única Etapa

    Propósito, extensão, prontidão do conteúdo e densidade são perguntados juntos, usando uma UI nativa de perguntas estruturadas quando o ambiente possui uma, para que o usuário preencha tudo de uma vez.

  3. 03
    Gerar Três Prévias de Estilo

    Em vez de pedir ao usuário para nomear um estilo, a skill renderiza três prévias de slide de título único, abre-as automaticamente e pergunta qual delas prefere (ou se deseja misturar elementos).

  4. 04
    Gerar o Deck de Arquivo Único

    A apresentação completa é escrita como um único arquivo HTML que inclui inline todo o viewport-base.css obrigatório mais comentários seção por seção, usando a escolha de densidade e a receita de estilo selecionada.

  5. 05
    Converter um Arquivo PowerPoint

    Para uma fonte .pptx, o script Python incluído extrai o conteúdo, o usuário confirma títulos, resumos e contagens de imagens, e só então ocorrem a descoberta de estilo e a geração de HTML.

  6. 06
    Entregar e Só Depois Oferecer Compartilhamento

    Os arquivos de preview são excluídos, o deck é aberto no navegador, e o usuário é informado sobre navegação, variáveis CSS, fontes, a classe .reveal e edição inline antes de ser oferecida a implantação ou exportação em PDF.

02 Encontre o ideal para você

Quando Usar a Skill frontend-slides

Use a skill frontend-slides no Claude Code ou Codex quando o trabalho for PPT e apresentações de slides deste tipo. Adequação e limites abaixo são extraídos do próprio arquivo da skill.

Boa Combinação

  • Qualquer pessoa que queira slides criados para uma palestra ou pitch, ou um PPT/PPTX existente transformado em slides web.
  • Não designers que não conseguem declarar uma preferência visual, mas conseguem reagir a duas ou três opções renderizadas.
  • Alguém partindo de um arquivo PowerPoint que precisa de reestilização em vez de reautoria.
  • Melhorar um deck HTML que já existe, onde adições de conteúdo arriscam quebrar o ajuste de estágio fixo.
  • Decks que serão vistos em celulares, onde um estágio 16:9 em letterbox é aceitável, mas um layout específico para celular não é desejado.

Conheça os Limites

  • Decks que devem adaptar seu layout ao dispositivo de visualização; o conteúdo do slide nunca é refluído para caber em uma tela.
  • Esperar que uma exportação em PDF preserve movimento ou interatividade; trata-se de um snapshot estático.
  • Exportar um HTML criado externamente cujos slides usam um nome de classe diferente de .slide, o que faz o script de exportação não encontrar nada.

O Que Fornecer

  • PropósitoA ocasião direciona o pareamento de presets e o design wildcard; as opções oferecidas são pitch deck, tutorial de ensino, palestra de conferência ou apresentação interna.
  • ExtensãoUma contagem aproximada de slides, agrupada em curta, média ou longa, define quantos slides de seção e conteúdo o deck pode carregar.
  • Conteúdo existenteO usuário diz se todo o conteúdo está pronto, se há apenas notas rascunhadas, ou apenas um tópico, e compartilha o material para que o deck seja construído a partir dele.
  • Modo de densidadeUma única escolha inicial entre baixa densidade orientada por apresentador e alta densidade voltada para leitura, lembrada e aplicada à contagem de slides, escala tipográfica e layout ao longo de todo o processo.
  • Pasta de imagens (opcional)As imagens são avaliadas uma a uma quanto à usabilidade e cores dominantes, e o esboço é co-projetado em torno delas em vez de planejado antes.

03 Dentro da skill

Regras que o Skill frontend-slides Dá ao Claude Code e ao Codex

8 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

  1. Zero Dependências, Um Único Arquivo

    Os decks são arquivos HTML únicos com CSS e JS inline, então o skill não deve recorrer a npm, a um bundler ou a qualquer ferramenta de build.

  2. Nunca Refluir para o Dispositivo

    O estágio de 1920x1080 escala como um todo e pode ficar em letterbox em celulares; breakpoints responsivos não devem ser usados para reorganizar o conteúdo dos slides.

  3. Alternar Slides com Visibility, Não Display

    A alternância de slides usa .active / .visible com visibility, opacity e pointer-events; display: none e display: block são proibidos porque classes de layout posteriores podem sobrescrevê-los e revelar todos os slides ao mesmo tempo.

  4. Negar Funções CSS com Calc

    A negação direta de clamp(), min() ou max() é ignorada silenciosamente, então o skill precisa envolvê-la como calc(-1 * clamp(...)).

  5. Fontes do Fontshare ou Google Fonts

    Fontes do sistema nunca são usadas, e a seção de estética cita Inter, Roboto e Arial como famílias superutilizadas a evitar.

  6. Sem Nomes de Template no Slide

    Nomes de template e de slug existem apenas na mensagem ao usuário, nunca renderizados no preview ou no próprio slide, junto com outro texto interno do workflow.

  7. Dividir em Vez de Encolher

    Rolagem, overflow, painéis sobrepostos e texto abaixo do tamanho confortável de leitura são violações básicas; conteúdo além do limite de densidade se transforma em mais slides.

  8. Ler preview.md Antes de design.md

    Templates arrojados são pré-selecionados a partir do índice de seleção e lidos no nível de preview.md; o design.md completo de um template só é carregado na Fase 3, após o usuário escolhê-lo.

04 Coloque em prática

Instale frontend-slides no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicione frontend-slides ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal
npx skills add https://github.com/zarazhangrui/frontend-slides --skill frontend-slides

Formato genérico da CLI skills para SKILL.md; o repositório pode documentar seu próprio caminho.

Dê à skill uma primeira tarefa de PPT e apresentações de slides

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu material.

Starter prompt
It's [a 20-minute conference talk] and all I have is rough notes in [talk-notes.md]. Build me a new HTML presentation, about 12 slides, low density and speaker-led so it's one idea per slide. Show me some style previews before you generate the deck.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

  • Após qualquer modificação, confirme que o palco continua em 16:9, sem texto que exceda seu cartão, sem painéis se sobrepondo, e com screenshots que fiquem corretos em 1280x720 mais uma viewport de celular.
  • Avalie overflow e sobreposição a partir de screenshots renderizados no navegador, e não do código, pois painéis em grid podem se cobrir visualmente.
  • Leia o texto visível de cada preview antes de abri-lo, e revise se algum metadado interno tiver vazado para o slide.
  • Após implantar, abra a URL ativa e confirme que todas as imagens referenciadas realmente carregam.

No OpenDesign o frontend-slides já vem incluído: Plugins → Skills, selecione-o na barra superior.

Baixar OpenDesignLer o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author
Zara Zhang
Repository
github.com/zarazhangrui/frontend-slides Branch main
Arquivo da skill
SKILL.md Checksum de conteúdo registrado na verificação; commit 9906a34
License
MIT De LICENSE.
Estrelas do repositório
29.255 Snapshot do GitHub tirado em 14/09/2026 para todo o repositório zarazhangrui/frontend-slides. Não é uma classificação ou contagem de uso para frontend-slides.
Verificado pelo OpenDesign
2026-09-14 Arquivo fonte, caminho, texto de licença e contagem de estrelas foram verificados. Incluído no OpenDesign main (verificado em 2026-08-28); uma execução real não foi registrada nesta página.

Dentro do SKILL.md

  1. Princípios FundamentaisZero dependências, previews que mostram em vez de descrever, design distinto, divulgação progressiva e o palco fixo 16:9, que é inegociável.
  2. Estética de DesignOrientações de tipografia, cor, movimento e fundo voltadas a evitar tipografias e paletas genéricas de IA.
  3. Regras do Palco FixoInvariantes de CSS: canvas de 1920x1080, alternância .active/.visible, clamp somente fora do palco, suporte a reduced-motion.
  4. Fase 0: Detectar ModoClassifica o pedido como novo deck, conversão de PPT ou melhoria, com regras de modificação para arquivos existentes.
  5. Fase 1: Descoberta de Conteúdo (Novas Apresentações)Pergunta sobre propósito, extensão, prontidão do conteúdo e densidade em conjunto, depois avalia qualquer pasta de imagens fornecida.
  6. Fase 2: Descoberta de EstiloGera três previews a partir de um preset seguro, um template arrojado e um wildcard, seguindo regras estritas de autenticidade de preview.
  7. Fase 3: Gerar ApresentaçãoAplica a escolha de densidade e a receita de estilo selecionada, lê arquivos de apoio, gera um único arquivo HTML de palco fixo.
  8. Fase 4: Conversão de PPTExtrai o conteúdo do .pptx com um script Python, confirma com o usuário e então converte para o estilo escolhido.
  9. Fase 5: EntregaExclui os previews, abre o deck e resume detalhes do arquivo, navegação, pontos de personalização e edição inline.
  10. Fase 6: Compartilhar & Exportar (Opção
A Descrição da Própria Skill
"Crie apresentações HTML impressionantes e ricas em animação do zero ou convertendo arquivos PowerPoint. Use quando o usuário quiser criar uma apresentação, converter um PPT/PPTX para web ou criar slides para uma palestra/pitch. Ajuda não-designers a descobrir sua estética através de exploração visual em vez de escolhas abstratas."

Descrição front-matter do SKILL.md. O arquivo completo tem cerca de 28.057 caracteres. Leia o arquivo completo no GitHub.

Frontend Slides

Execute frontend-slides em um PPT Real e Tarefa de Decks de Slides.

A skill frontend-slides vem incluída no OpenDesign. Baixe o app, escolha a skill em Plugins → Skills, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesignVer todas as skills
Terminal
npx skills add https://github.com/zarazhangrui/frontend-slides --skill frontend-slides