ckm:slides

Visão geral

O que é ckm:slides?

ckm:slides é uma skill de IA para desenhar apresentações HTML completas e estratégicas. Em vez de gerar apenas uma lista solta de tópicos, ela orienta o agente a produzir uma estrutura de apresentação coerente, pronta para o navegador, usando:

• Chart.js para visualizações de dados
• Design tokens para temas visuais consistentes
• Layouts responsivos para diferentes dispositivos
• Fórmulas de copywriting para mensagens persuasivas
• Estratégias de slides comprovadas para tipos de decks comuns

A skill é otimizada para criar apresentações de marketing, pitch decks, relatórios para stakeholders e demos de produto em que história e estrutura são igualmente importantes.

Para quem é ckm:slides?

ckm:slides é uma boa opção se você:

• Cria apresentações para marketing, vendas, captação de recursos ou relatórios
• Prefere apresentações em HTML/JavaScript em vez de arquivos PowerPoint tradicionais
• Quer padrões de layout e templates reutilizáveis em vez de começar de um slide em branco
• Precisa de estruturas narrativas claras (por exemplo, YC seed deck, pitch de vendas, QBR) incorporadas ao seu processo

Desenvolvedores, profissionais de product marketing, fundadores e times de analytics podem usar essa skill para ir de “tema + número desejado de slides” a um plano de apresentação HTML estruturado.

Que problemas ela resolve?

ckm:slides ajuda você a evitar:

• Decks desorganizados, sem um arco narrativo claro
• Layouts e tipografia inconsistentes entre os slides
• Textos fracos e genéricos que não convencem
• Ter que integrar manualmente gráficos Chart.js em cada nova apresentação

Ao combinar padrões de layout, fórmulas de copywriting e um template HTML pronto para uso, a skill fornece ao agente tudo o que ele precisa para planejar um deck forte e gerar HTML pronto para implementação.

Quando ckm:slides não é uma boa opção?

ckm:slides provavelmente não é ideal se você:

• Precisa de arquivos nativos PowerPoint ou Keynote em vez de HTML
• Não trabalha com front‑end ou não consegue hospedar assets HTML/JS
• Só precisa de um slide pontual e não de um deck completo

Nesses casos, um gerador de slides em texto simples ou uma ferramenta que exporte .pptx pode ser mais adequado.

Como usar

Instalação e configuração

Para adicionar a skill de slides do repositório nextlevelbuilder/ui-ux-pro-max-skill ao ambiente do seu agente, instale com:

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill slides

Após a instalação:

1. Abra SKILL.md em .claude/skills/slides para entender o comportamento em alto nível e os argumentos.
2. Revise a pasta references/ para ver os padrões e templates nos quais a skill se baseia:
   • references/layout-patterns.md
   • references/html-template.md
   • references/copywriting-formulas.md
   • references/slide-strategies.md
   • references/create.md

Não é necessário nenhum passo adicional de build para a própria skill; ela roda como parte do ambiente existente do seu agente. Você, porém, precisará de uma forma de servir ou abrir o HTML gerado (por exemplo, salvando em um arquivo e abrindo no navegador).

Padrão básico de invocação

A skill espera argumentos no formato:

• [topic] [slide-count]

e oferece suporte ao subcomando create. Uma chamada típica a partir do prompt do seu agente pode ser algo como:

Use the ckm:slides skill to create a "create" deck about "Series A fundraising narrative" with 12 slides.

Internamente, o roteamento segue este fluxo (definido em SKILL.md):

1. Fazer o parse do subcomando em $ARGUMENTS (primeira palavra, por exemplo create).
2. Carregar o arquivo de referência correspondente (para create, é references/create.md).
3. Usar os argumentos restantes (tema e número de slides) para gerar a estrutura e o conteúdo do deck.

Fluxo de trabalho recomendado para criar um novo deck

1. Defina o objetivo e a audiência

Antes de invocar ckm:slides, deixe claro:

• Objetivo (por exemplo, captar uma rodada seed, fechar um contrato enterprise, atualizar o board)
• Audiência principal (VCs, prospects, liderança, times internos, participantes de conferência)
• Número aproximado de slides

Inclua esse contexto nos seus argumentos para que a skill possa escolher a estrutura e os padrões certos.

2. Escolha (ou deixe a skill escolher) uma estratégia de slides

O arquivo references/slide-strategies.md lista 15 estruturas de deck comuns, como:

• YC Seed Deck (10–12 slides)
• Sales Pitch (7–10 slides)
• Product Demo (5–8 slides)
• QBR, reunião de board, webinar, workshop e mais

Você pode:

• Pedir explicitamente uma estrutura (por exemplo, “Use a YC seed deck structure”), ou
• Deixar o agente inferir o melhor encaixe com base no seu objetivo e na audiência.

Cada estratégia inclui um roteiro slide a slide e um arco emocional (por exemplo, curiosidade → frustração → esperança → confiança → confiança/credibilidade → urgência) para manter a história coerente.

3. Gere a copy usando fórmulas persuasivas

O arquivo references/copywriting-formulas.md fornece 25 fórmulas, incluindo:

• PAS (Problem–Agitate–Solution) para slides de problema
• AIDA (Attention–Interest–Desire–Action) para ganchos e CTAs
• FAB (Features–Advantages–Benefits) para slides de features e produto
• Cost of Inaction e Before–After–Bridge para urgência e transformação

A skill usa essas fórmulas para estruturar títulos, corpo de texto e CTAs por slide. Incentive o agente a:

• Mapear cada tipo de slide para uma fórmula apropriada
• Usar a linguagem de template fornecida como ponto de partida
• Ajustar o tom para a sua marca e o nível de sofisticação da audiência

4. Aplique padrões de layout e animações

O arquivo references/layout-patterns.md define 25 padrões de layout baseados em CSS, como:

• Title Slide
• Problem Statement
• Solution Overview
• Feature Grid
• Metrics Dashboard
• Comparison Table
• Timeline Flow
• Team Grid
• Pricing Cards
• CTA Closing

Cada layout inclui:

• Um caso de uso recomendado
• Classes de animação de exemplo (animate-fade-up, animate-stagger, animate-scale, etc.)
• Estruturas CSS de exemplo para tipos de slides comuns

Ao pedir para o agente gerar seu deck, inclua instruções como:

For each slide, assign a layout class from layout-patterns.md and, where relevant, an animation class.

Isso mantém o deck visualmente consistente e fácil de estilizar em CSS.

5. Use o template de slides em HTML

O arquivo references/html-template.md fornece uma estrutura HTML completa para o deck, incluindo:

• <head> com Chart.js incluído via CDN
• Um sistema de temas baseado em tokens usando variáveis CSS em :root
• Um container .slide-deck e elementos .slide dimensionados para proporção 16:9
• Estilos base de tipografia e layout

Um fluxo típico é:

1. Começar a partir do template HTML fornecido.
2. Inserir os slides gerados como elementos <section> ou <div> com as classes adequadas.
3. Colar seus design tokens (por exemplo, de embed-tokens.cjs) dentro do bloco :root.
4. Adicionar quaisquer elementos <canvas> de Chart.js e o JavaScript correspondente para os gráficos.

A skill pode gerar:

• Um rascunho do arquivo HTML completo, ou
• Apenas a estrutura de slides do <body>, para você colar no seu próprio shell template.

6. Conecte as visualizações de dados com Chart.js

Para decks orientados a dados (dashboards de métricas, slides de tração, QBRs, relatórios de board), ckm:slides é projetado para funcionar com Chart.js (como mostrado em html-template.md).

Você pode orientar o agente a:

• Criar elementos <canvas> para gráficos dentro dos layouts de slide relevantes
• Sugerir objetos de configuração Chart.js (datasets, labels, colors) com base nas suas métricas
• Incluir blocos <script> que inicializam esses gráficos no carregamento da página

Você é responsável por fornecer os dados reais e validar a configuração dos gráficos, mas a skill entrega a estrutura necessária.

7. Exporte e apresente

Quando o HTML do deck estiver pronto:

1. Salve o arquivo como .html no seu projeto.
2. Abra diretamente no navegador ou sirva via seu servidor web preferido.
3. Use navegação por teclado ou JS customizado (se você adicionar) para avançar entre os slides.

Se você precisar compartilhar com stakeholders acostumados a PowerPoint, pode compartilhar a tela do navegador ou exportar os slides como imagens/PDF via recurso de impressão para PDF do navegador.

Dicas para obter melhores resultados com ckm:slides

• Seja explícito em relação ao número de slides e à estrutura, sempre que possível.
• Diga ao agente qual decisão o deck deve apoiar (investimento, compra, alinhamento, etc.).
• Indique quais slides devem incluir gráficos e de que tipo (linha, barra, pizza etc.).
• Peça uma tabela listando número do slide, título, objetivo, layout e fórmula principal de copywriting para revisar o plano antes de gerar o conteúdo completo.

FAQ

O que exatamente o ckm:slides gera?

ckm:slides foi projetado para gerar:

• Um roteiro slide a slide com objetivos e arco narrativo
• Rascunhos de texto para cada slide, usando fórmulas como PAS, AIDA e FAB
• Sugestões de layout com base nos padrões pré‑definidos em layout-patterns.md
• Estrutura HTML/CSS para um deck responsivo baseado em tokens
• Estrutura inicial de Chart.js para slides com visualização de dados

A saída exata depende de como você faz o prompt ao agente, mas o foco principal é conteúdo estratégico de slides em HTML, não apenas um documento de texto genérico.

O ckm:slides cria arquivos PowerPoint (.pptx)?

Não. ckm:slides é focado em apresentações HTML. Ele usa HTML, CSS e Chart.js para criar apresentações que você abre no navegador. Se precisar de arquivos .pptx, será necessário um passo separado de exportação ou conversão fora desta skill.

Posso personalizar o design para combinar com minha marca?

Sim. O arquivo html-template.md usa design tokens via variáveis CSS. Você pode:

• Substituir os valores de tokens em :root pelos cores, tipografia e espaçamento da sua marca
• Estender as classes CSS para layouts ou animações customizadas
• Adicionar seus próprios componentes (logos, rodapés, marcas d’água)

ckm:slides oferece um ponto de partida estruturado; você traz o sistema de marca.

Como funciona o subcomando create?

O subcomando create é o principal ponto de entrada descrito em references/create.md. Quando você invoca create com argumentos, a skill:

1. Trata <task>$ARGUMENTS</task> como a descrição do deck desejado.
2. Usa a base de conhecimento (padrões de layout, fórmulas de copywriting, estratégias de slides, template HTML) para desenhar um deck persuasivo alinhado a essa tarefa.

Normalmente você não chama create diretamente via CLI; em vez disso, instrui o seu agente a usar a skill ckm:slides com o subcomando create.

Para que tipos de deck o ckm:slides é melhor?

Com base nos padrões em slide-strategies.md, ckm:slides é especialmente útil para:

• Decks de captação de recursos (YC Seed Deck, Series A)
• Pitches de vendas e demos de produto
• QBRs (relatórios trimestrais de negócios) e atualizações de board
• Webinars, workshops e palestras em conferências
• Apresentações de estudos de caso e análises competitivas

Todos esses formatos dependem de uma história clara, texto persuasivo e, muitas vezes, gráficos — exatamente o que a base de conhecimento da skill foi ajustada para oferecer.

Como lido com navegação e controles de teclado?

O template HTML base foca em layout e visual. A navegação (setas do teclado, clique para avançar, indicadores de progresso) não está totalmente definida no trecho de referência e fica a cargo da sua implementação. Você pode:

• Adicionar JavaScript para ouvir as teclas ArrowLeft / ArrowRight e mudar o slide visível
• Usar hashes na URL ou data attributes para controlar o slide ativo
• Integrar com um framework de slideshow em HTML existente, se preferir

ckm:slides ajuda você a desenhar o conteúdo e a estrutura; o comportamento de navegação depende do seu setup de front‑end.

Preciso entender JavaScript para usar ckm:slides?

Ter familiaridade básica com front‑end é muito útil, especialmente se você:

• Quer modificar ou estender o template HTML
• Precisa configurar gráficos Chart.js e interações

No entanto, grande parte do trabalho pesado (estrutura da história, escolha de layouts, padrões de copywriting) não é técnico. Pessoas não desenvolvedoras também podem se beneficiar, colaborando com um desenvolvedor para finalizar o HTML e os gráficos.

Onde posso ver todos os padrões e estratégias disponíveis?

Abra o diretório da skill (geralmente .claude/skills/slides) e revise:

• SKILL.md para visão geral do comportamento, argumentos e roteamento
• references/layout-patterns.md para layouts e estruturas CSS
• references/html-template.md para o shell base do deck HTML
• references/copywriting-formulas.md para frameworks de copy persuasiva
• references/slide-strategies.md para estruturas completas de deck e arcos emocionais

Explorar esses arquivos dá uma visão clara do que ckm:slides consegue fazer e ajuda você a criar prompts mais precisos ao gerar decks.