Suporte upstream incluído

Arquivos de suporte são incluídos em caminhos relativos à skill. Veja UPSTREAM-NOTICE.md para suas fontes fixadas, licenças, hashes e alterações de importação.

Segurança do helper restaurada

O exportador de PDF inicia um servidor apenas de loopback restrito ao diretório do deck selecionado. Playwright e Chromium já devem estar instalados no projeto do deck; o helper não os baixa. Revise o HTML e os ativos locais antes de abri-los em um navegador.

Disponibilidade de material de suporte

Estes caminhos permanecem indisponíveis nesta cópia do catálogo:

• <support-root>/scripts/deploy.sh

Não invoque uma etapa que exija um desses arquivos. Obtenha o material original e revise suas dependências, licença e efeitos antes do uso. Etapas inline independentes e os helpers incluídos podem prosseguir dentro do escopo autorizado do usuário.

Slides Frontend

Quando Usar

Use esta skill quando precisar criar apresentações HTML deslumbrantes e ricas em animações do zero ou convertendo arquivos do PowerPoint. Use quando o usuário quiser construir uma apresentação, converter um PPT/PPTX para a web ou criar slides para uma palestra/apresentação. Ajuda não-designers a descobrir sua estética através da exploração visual...

Crie apresentações HTML ricas em animações e sem dependências, que rodam inteiramente no navegador.

Princípios Fundamentais

1. Zero Dependências — Arquivos HTML únicos com CSS/JS inline. Sem npm, sem ferramentas de build.
2. Mostre, Não Conte — Gere prévias visuais, não escolhas abstratas. As pessoas descobrem o que querem vendo.
3. Design Distinto — Sem "lixo de IA" genérico. Cada apresentação deve parecer feita sob medida.
4. Divulgação Progressiva — Leia primeiro os índices de estilo leves. Para templates ousados, use pequenos cartões de prévia para visualizações de estilo e carregue o design.md completo apenas após o usuário escolher esse template.
5. Palco Fixo 16:9 (NÃO NEGOCIÁVEL) — Cada deck usa uma tela de slide de 1920×1080 escalada como um todo para a viewport. Os slides devem permanecer 16:9 em todas as telas, incluindo telefones. Não refaça o layout do conteúdo do slide para caber no dispositivo.

Estéticas de Design

Você tende a convergir para resultados genéricos, "na distribuição". No design frontend, isso cria o que os usuários chamam de estética de "lixo de IA". Evite isso: crie frontends criativos e distintos que surpreendam e encantem.

Foque em:

• Tipografia: Escolha fontes que sejam bonitas, únicas e interessantes. Evite fontes genéricas como Arial e Inter; opte em vez disso por escolhas distintas que elevem a estética do frontend.
• Cor e Tema: Comprometa-se com uma estética coesa. Use variáveis CSS para consistência. Cores dominantes com acentos nítidos superam paletas tímidas e distribuídas uniformemente. Inspire-se em temas de IDE e estéticas culturais.
• Movimento: Use animações para efeitos e microinterações. Priorize soluções apenas com CSS para HTML. Use a biblioteca Motion para React quando disponível. Foque em momentos de alto impacto: um carregamento de página bem orquestrado com revelações escalonadas (animation-delay) cria mais encanto do que microinterações dispersas.
• Fundos: Crie atmosfera e profundidade em vez de usar cores sólidas por padrão. Camadas de gradientes CSS, use padrões geométricos ou adicione efeitos contextuais que combinem com a estética geral.

Evite estéticas genéricas geradas por IA:

• Famílias de fontes superutilizadas (Inter, Roboto, Arial, fontes do sistema)
• Esquemas de cores clichês (particularmente gradientes roxos em fundos brancos)
• Layouts e padrões de componentes previsíveis
• Design "cookie-cutter" que carece de caráter específico do contexto.

Interprete criativamente e faça escolhas inesperadas que pareçam genuinamente projetadas para o contexto. Varie entre temas claros e escuros, fontes diferentes, estéticas diferentes. Você ainda tende a convergir para escolhas comuns (Space Grotesk, por exemplo) entre gerações. Evite isso: é crucial que você pense fora da caixa!

Regras de Palco Fixo

Estas invariantes se aplicam a CADA slide em CADA apresentação:

• Cada deck tem um wrapper de viewport que preenche a janela do navegador.
• Cada slide é criado dentro de um palco fixo de 1920×1080.
• O palco escala uniformemente para caber na viewport. Pode ter letterbox/pillarbox; não deve refazer o layout do conteúdo.
• Não use breakpoints responsivos para reorganizar o conteúdo do slide para telefones.
• Use medidas internas fixas do slide no tamanho de design de 1920×1080.

…