# Frontend Slides > Skill de geração de apresentações (decks) em HTML single-file, com palco fixo 1920×1080 que escala uniformemente (letterbox, nunca reflow). Antes de escrever o deck inteiro, gera 3 previews reais de uma única slide (preset seguro, template ousado, curinga) para o usuário escolher por imagem, não por descrição em prosa. Cobre 12 presets nomeados, exporta para PDF via Playwright e deploy no Vercel. Trigger em: "criar uma apresentação", "gera os slides", "deck de apresentação", "slides em HTML", "apresentação para pitch", "slide deck", "converte esse PPTX", "apresentação estilo Keynote", "deck single-file", "slides fixos 16:9", "apresentação sem usar PowerPoint", "exportar essa apresentação em PDF". - Skill: `felvieira/frontend-slides` (Agent Skill, multi-file: 6 files) - Install (CLI): `npx skillmds@latest add felvieira/frontend-slides` - Raw SKILL.md: https://api.skillmd.com/api/skills/felvieira/frontend-slides/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: felvieira (https://skillmd.com/u/felvieira) - Updated: 2026-09-21 - Page: https://skillmd.com/skills/felvieira/frontend-slides --- # Frontend Slides — Decks HTML com Palco Fixo Apresentação como página web real, não como export de ferramenta de slide. O palco é fixo em 1920×1080 e escala como uma unidade — o conteúdo nunca reflui por dispositivo, porque um slide desenhado pra ficar bonito em 1920×1080 vira ilegível se colunas rearranjam sozinhas num viewport menor. ## Governanca Global Esta skill segue `GLOBAL.md`, `policies/execution.md`, `policies/handoffs.md`, `policies/anti-ai-writing.md`. **Gate anti-AI-slop:** antes de entregar, confirmar que nenhuma das escolhas abaixo caiu em clichê de geração automática — ver seção "Anti-AI-Slop" adiante. Se o deck usa Inter, Arial, Roboto ou fonte de sistema, ou gradiente roxo-sobre-branco, recomeçar a escolha tipográfica/cromática antes de entregar. ## Quando Usar - pedido de apresentação/deck/slides para pitch, demo, relatório, ou aula - converter um PPTX existente para uma versão web navegável - apresentação que precisa rodar em qualquer navegador sem instalar PowerPoint/Keynote - deck que precisa ser exportável em PDF mantendo o layout exato ## Quando Nao Usar - landing page ou site estruturado como jornada de scroll — isso é `skills/64-scroll-storytelling/SKILL.md` - documento longo em prosa (relatório, PRD) — isso é `skills/10-documenter/SKILL.md` ou um Artifact em Markdown - apresentação que o usuário já pediu explicitamente em PowerPoint/Google Slides nativo (`.pptx` de saída, não HTML) — usar a skill/ferramenta de geração de PPTX apropriada, não esta - diagrama técnico isolado sem contexto de apresentação inteira — isso é `skills/76-diagram-validated/SKILL.md` ## Entradas Esperadas - tema/conteúdo da apresentação, ou arquivo `.pptx` existente para converter - audiência e contexto (pitch investidor, demo técnica, aula, relatório interno) — muda o tom e a ousadia visual apropriada - preferência de vibe quando o usuário já tiver uma (ex.: "quero algo estilo terminal/dev tools") — se não tiver, as 3 previews da Fase 2 cobrem esse espaço ## Saidas Esperadas - deck HTML single-file completo, com `engine/viewport-base.css` incluído por inteiro - 3 previews de uma única slide (Fase 2) antes de construir o deck completo - PDF exportado quando pedido, via `references/export-pdf.sh` - deploy no Vercel quando pedido, via `references/deploy.sh` ## Protocolo ### 1. Palco fixo — regra não-negociável Todo slide é desenhado em 1920×1080. O `engine/viewport-base.css` (copiado por inteiro, nunca editado) trava o viewport do navegador, cria o `.deck-stage` de 1920×1080 com `transform-origin: 0 0`, e o JavaScript da apresentação aplica `transform: scale(...)` para caber no viewport real — letterbox/pillarbox quando a proporção não bate, nunca reflow de conteúdo. **Nunca usar `display: none/block` para trocar de slide** — isso quebra o layout. Usar `.active`/`.visible`, que o CSS já resolve via `visibility`/`opacity`/`pointer-events`. ### 2. Três previews antes de construir o deck inteiro Antes de escrever a apresentação completa, gerar **3 HTMLs de uma única slide** — mostrar, não descrever: | Slot | Tipo | Fonte | |---|---|---| | Preview A | Preset seguro | um dos 12 presets nomeados (ver tabela abaixo) | | Preview B | Template ousado | direção visual mais arriscada, alinhada à vibe pedida | | Preview C | Curinga | outra direção ousada, ou design customizado pro tema específico | **Regra:** cada preview parece um primeiro slide real do deck — sem metadado interno visível ("Opção A", nome do preset, "preview.md"). O usuário aponta qual gostou, ou pede um quarto rumo. ### 3. Os 12 presets nomeados | # | Preset | Vibe | |---|---|---| | 1 | Bold Signal | confiante, moderno, alto impacto | | 2 | Electric Studio | energético, vibrante | | 3 | Creative Voltage | criativo, elétrico | | 4 | Dark Botanical | escuro, orgânico | | 5 | Notebook Tabs | calmo, focado, estilo caderno | | 6 | Pastel Geometry | suave, geométrico | | 7 | Split Pastel | dividido, pastel | | 8 | Vintage Editorial | editorial, retrô | | 9 | Neon Cyber | cyberpunk, neon | | 10 | Terminal Green | dev tools, terminal | | 11 | Swiss Modern | minimalista, grid preciso | | 12 | Paper & Ink | calmo, editorial, papel | Cada preset tem tipografia e paleta próprias — não misturar fonte/cor de dois presets diferentes no mesmo deck. Detalhe completo de tipografia/cor por preset em `references/style-presets.md`. **Pegadinha de CSS a evitar:** `right: -clamp(...)` ou `margin-left: -min(...)` são descartados silenciosamente pelo navegador — CSS não aceita `-` direto antes de uma função. Envolver em `calc(-1 * clamp(...))` sempre que precisar negar o valor de uma função CSS. ### 4. Anti-AI-Slop — o que nunca escolher - **Fontes banidas:** Arial, Inter, Roboto, ou qualquer fonte de sistema sem carregamento explícito. Escolher uma fonte com caráter, específica da vibe do preset escolhido. - **Paleta banida:** gradiente roxo sobre fundo branco — o clichê mais reconhecível de design gerado por IA. - **Layout banido:** padrão previsível, "cookie-cutter", genérico o bastante pra caber em qualquer apresentação de qualquer tema. - **Movimento:** preferir **um** page-load bem orquestrado com reveals escalonados (`animation-delay`) a várias micro-interações espalhadas — um momento coreografado gera mais impacto que ruído disperso. - **Fundo:** camadas de gradiente CSS ou padrão geométrico para dar atmosfera, em vez de cor sólida plana. ### 5. Converter PPTX existente `references/extract-pptx.py ` (requer `python-pptx`) extrai título, conteúdo e imagens de cada slide — usar como matéria-prima para reconstruir no palco fixo, não como conversão automática 1:1 (o PPTX original não segue a disciplina anti-slop desta skill). ### 6. Exportar e publicar - `references/export-pdf.sh [saida.pdf]` — captura via Playwright, `--compact` renderiza em 1280×720 para arquivo menor - `references/deploy.sh ` — deploy no Vercel, aceita pasta ou arquivo HTML único, detecta imagens referenciadas automaticamente ## Anti-Padroes - editar o `engine/viewport-base.css` para "resolver" um comportamento específico — o motor é a base compartilhada; comportamento bespoke vai em CSS/JS próprio da apresentação, não no arquivo base - usar `display: none/block` pra trocar slide, quebrando o cálculo de layout do palco fixo - pular a Fase 2 (3 previews) e ir direto pro deck completo — o usuário não teve chance de redirecionar cedo, quando é barato - descrever os 3 previews em texto em vez de gerar os HTMLs reais — "mostrar, não descrever" é o ponto central da Fase 2 - misturar tipografia/cor de dois presets diferentes no mesmo deck - Inter/Arial/Roboto, gradiente roxo-sobre-branco, ou qualquer combinação do gate anti-slop ## Evidencia de Conclusao - deck HTML completo com `engine/viewport-base.css` incluído por inteiro, sem edição - 3 previews foram gerados e um foi escolhido (ou o usuário pediu um 4º rumo) antes do deck completo - gate anti-AI-slop conferido: sem fonte de sistema, sem gradiente roxo-sobre-branco, sem layout genérico - reduced-motion respeitado (`prefers-reduced-motion` já coberto pelo `viewport-base.css`) ## Handoff ### Recebe de - Skill 01 (po-feature-spec) — quando a apresentação é parte de uma entrega de produto (pitch de feature, relatório de release) - Skill 13 (marketing-copy) — quando o deck é material de venda e o copy já foi definido ### Entrega para - Skill 22 (accessibility-specialist) — quando a apresentação precisa de auditoria formal de acessibilidade além do reduced-motion já coberto - Humano — para revisão de conteúdo e escolha final entre os 3 previews Seguir `policies/handoffs.md`. ## Integracao com Pipeline - **Orchestrator (09):** roteia para cá quando o pedido é apresentação/deck, distinto de landing page scroll-driven (skill 64) ou documento em prosa (skill 10) - **Diagram Validated (76):** consumidor esperado quando um slide do deck precisa de um diagrama técnico rigoroso embutido ## Fontes Skill adaptada de [zarazhangrui/frontend-slides](https://github.com/zarazhangrui/frontend-slides) (MIT). `engine/viewport-base.css` é copiado quase-verbatim (mecanismo genérico de palco fixo, sem acoplamento ao resto do repo original) — mesmo padrão de curadoria aplicado à skill 64 (scroll-storytelling). Os 12 nomes de preset, o mecanismo de 3 previews da Fase 2, e os princípios anti-AI-slop foram traduzidos e adaptados; a paleta/tipografia detalhada de cada preset fica em `references/style-presets.md`. **Nota de manutenção:** o repositório de origem está sem atividade desde 2026-06-23, com issues e PRs abertos não endereçados pelo mantenedor original — esta skill assume manutenção própria do conteúdo curado a partir daqui, sem depender de atualizações futuras do upstream.