wigtn/wigtn-plugins

Gerador de Apresentações WIGTN (PPT Generator)

Skill para criar apresentações em HTML único com a identidade da marca WIGTN. Sem depender de templates (.pptx), o Claude desenha do zero usando princípios da marca e referências.

Princípios Fundamentais

1. Baseado em princípios, sem templates — Não depende de arquivos de template fixos. Lê os tokens de marca e princípios de layout de references/ e gera cada apresentação sob demanda.
2. Fidelidade à Marca (Brand Fidelity) — Use apenas os HEX exatos. Proibido usar "cores parecidas". Tinta #1E1E28, Roxo de assinatura (Pantone 265) #9B51E0.
3. Ponto Roxo de Assinatura Repetido — O ponto roxo (•) vindo do ponto final de wigtn. é a assinatura da marca. Em cada slide, repita consistentemente pelo menos um motivo de ponto roxo (ponto ao lado do número da página, ponto no número da seção, ponto de canto, ponto de progressão, etc.).
4. Tema Claro/Escuro Duplo — Escolha um dos dois conforme o ambiente de apresentação. Não misture em uma mesma apresentação.
5. Ajuste à Viewport — Todos os slides devem ter exatamente 100vh. Scroll interno dentro do slide é absolutamente proibido.
6. Proibido slide só com texto — Cada slide deve conter pelo menos um elemento visual (forma, bloco de cor, ponto, linha, ícone).
7. Mostre, não pergunte — Não pergunte sobre o design. Depois de confirmar o tema e o conteúdo, gere imediatamente, mostre com screenshot e então ajuste.
8. Zero dependências — Arquivo HTML único. Apresentável diretamente no navegador (apenas um link CDN <link> para fontes é permitido).

Marca (Resumo)

Token	Valor	Uso
Tinta (Naval)	#1E1E28	Fundo escuro / Texto claro
Roxo (Pantone 265)	#9B51E0	Ponto de assinatura, destaque, link
Roxo Escuro	#6B2EAA	Sombra do ponto, profundidade, fim do gradiente
Branco	#FFFFFF	Fundo claro / Texto escuro

A paleta completa (snippet :root para Claro/Escuro), regras de uso das variações de logotipo, tipografia e regras do ponto de assinatura devem ser aplicados depois de ler references/brand.md .

Fluxo de Trabalho (4 Fases)

Fase 0: Tema + Conteúdo (1 pergunta ao usuário)

Pergunte de uma vez usando AskUserQuestion:

1. Tema — Claro (sala clara, estilo documento) / Escuro (palco, keynote). Inclua recomendação.
2. Propósito — Conferência / Compartilhamento em equipe / Pitch deck / Treinamento / Relatório executivo
3. Quantidade — 5–10 slides / 10–20 slides / 20+ slides
4. Mensagem principal e imagens — Conteúdo a transmitir, se há imagens e onde posicioná-las

Confirme também os metadados da capa: nome do apresentador, data, empresa/produto.

Fase 1: Estruturação do Design

Decomponha o conteúdo em um mapa de slides. Limite de densidade: capa com título e subtítulo; corpo com no máximo 4–6 tópicos (ou blocos visuais equivalentes) por slide. Se exceder, divida automaticamente.

Estrutura básica: Capa → Índice → (Divisão de seção → Conteúdo N) × Capítulos → Encerramento (Agradecimentos). Escolha qual layout de corpo usar para cada slide em references/design-guide.md.

Fase 2: Diagramas (se necessário)

Se precisar de fluxogramas ou arquitetura, chame a skill handdrawn-diagram do mesmo plugin para criar um diagrama commitável (SVG+PNG) e insira no slide. Se o tom de desenho à mão for inadequado, desenhe diretamente com formas CSS/SVG simples.

Fase 3: Geração do HTML

1. Leia references/brand.md e references/design-guide.md .
2. Escreva um HTML único aplicando os tokens :root do tema escolhido. Regras obrigatórias:
   • .slide { height: 100vh; height: 100dvh; overflow: hidden; }
   • Todas as fontes e espaçamentos usam clamp(min, pref, max) (proibido px fixo sozinho)
   • Media queries baseadas em altura (max-height: 700px/600px) para redução gradual
   • Barra de progresso + pontos de navegação (roxos) + teclado/toque/swipe + prefers-reduced-motion
   • Ponto roxo de assinatura repetido em todos os slides
   • Inserção do logotipo: siga as regras de "Uso do Logotipo" abaixo
3. Preencha o conteúdo com animações contidas (profissional: 0.2–0.4s de fade/slide).

Fase 4: Validação e Entrega

Verifique o ajuste à viewport, a consistência da marca e a assinatura do ponto via screenshot. Se houver Playwright/Chrome, renderize PNGs por slide e leia para verificar; caso contrário, oriente o usuário a abrir no navegador.

Geração concluída:
- HTML: docs/{nome-do-arquivo}-presentation.html (no navegador, pressione F para tela cheia → setas do teclado/swipe)

Uso do Logotipo

O logotipo WIGTN é ativo exclusivo da equipe e não é commitado no plugin público (.gitignore). Busque na seguinte ordem de prioridade:

1. ${CLAUDE_PLUGIN_ROOT}/skills/wigtn-ppt/assets/logo/ — Logotipo empacotado (local da equipe; *.png está em .gitignore, portanto não existe em clones do repositório público)
2. <project>/docs/images/ — Local dos ativos de marca da equipe (também em .gitignore, não incluído no repositório público)
3. Fallback para wordmark CSS/SVG — Se não houver PNG nos dois caminhos acima (estado padrão em clones públicos ou ambientes novos), renderize wigtn + ponto roxo diretamente como fonte/SVG (snippet em brand.md). O fallback sempre funciona.

Ao usar o logotipo, copie o arquivo para o workspace da apresentação (ex.: docs/workspace/) e referencie-o no HTML com caminho relativo. As variações por tema seguem a tabela de mapeamento em brand.md (Claro → logotipo NAVY, Escuro → logotipo BRANCO).

Anti-Padrões (Evitar)

• Clichê de gradiente roxo (#6366f1), fundo branco com roxo/rosa básico → use apenas o roxo WIGTN #9B51E0
• Usar Inter/Roboto/Arial como fonte de exibição (quebra o tom da marca)
• Centralizar todos os elementos, repetir grade de cartões idênticos
• Usar min-height (permite transbordo do slide) → use obrigatoriamente height
• Omitir a assinatura do ponto, misturar temas, substituir por "cor parecida"

Referências

• references/brand.md — Sistema de marca WIGTN: paleta Claro/Escuro, variações e posicionamento do logotipo, regras do ponto roxo, tipografia, fallback CSS wordmark
• references/design-guide.md — Princípios de layout por tipo de slide (capa/índice/seção/corpo/encerramento), regras de viewport, animações, anti-padrões
• Skill design-system-reference — Reutilize ideias de densidade de layout e hierarquia tipográfica (Suíço Minimal, Editorial, Corporativo Minimal são os mais próximos do tom WIGTN). Mas cores, ponto e logotipo devem ser sempre sobrescritos com os tokens WIGTN.
• Skill handdrawn-diagram — Para slides que precisam de diagramas

Checklist

• Fase 0: Perguntar ao usuário (AskUserQuestion) sobre tema (Claro/Escuro) + conteúdo em uma única interação
• Fase 1: Mapa de slides + limite de densidade
• Fase 2: Identificar slides que precisam de diagrama (handdrawn-diagram)
• Fase 3: Ler brand.md + design-guide.md → gerar HTML único (viewport, ponto roxo, logotipo)
• Fase 4: Validar com screenshot → entregar