kirklin/kirklin-slides

Demonstração de slides (Slides de Apresentação)

Demonstração de slides cria imagens 16:9 usando páginas HTML. Cada página é um HTML de 1920×1080, que após aplicar o estilo selecionado é renderizado por um navegador headless como PNG 3840×2160, para inserir em documentos como propostas, relatórios e materiais de projeto.

CRÍTICO — Antes de criar qualquer página, DEVE-se ler com a ferramenta Read as seguintes especificações:

1. kirklin-slides-copy.md: Normas de texto, aplicáveis a todos os estilos.
2. kirklin-slides-layouts.md: Conteúdo e regras de layout dos 27 tipos de página.
3. kirklin-slides-components.md: Estrutura da página e nomes de classes dos componentes.
4. Especificações do estilo selecionado: cores, tamanhos de fonte e dimensões de cada layout. Localização dos arquivos na lista de estilos.
5. Antes de criar, renderizar, verificar, renumerar, exportar, visualizar estilos e capturar postagens, leia obrigatoriamente kirklin-slides-workflow.md.
6. Antes de adicionar um novo estilo, leia obrigatoriamente kirklin-slides-new-style.md.

Neste documento, <diretório do skill> refere-se ao diretório onde este arquivo está localizado.

Estilos

O estilo define as cores, fontes, tamanhos e decorações das imagens. Todos os estilos compartilham o mesmo conjunto de páginas de exemplo, nomes de classes de componentes e normas de texto. Os estilos atualmente disponíveis são:

Estilo	Nome em inglês	Cenário de uso	Especificação
Estilo escuro de lançamento	launch-dark	Projetos, apresentações de propostas, projeção em tela	kirklin-slides-style-launch-dark.md

As páginas de exemplo estão em assets/pages/. Os arquivos de estilo de cada estilo estão em assets/styles/<nome em inglês>/style.css. Execute node <diretório do skill>/scripts/preview-style.ts <nome em inglês> imagem_resumo.png para gerar uma imagem resumo de todas as páginas de exemplo de um estilo.

Cenários de uso

• Criar imagens para documentos como propostas, relatórios e materiais de projeto.
• Modificar ou complementar imagens existentes.
• Criar páginas avulsas como capa, cronograma, apresentação da equipe.
• Exportar todas as imagens na ordem do documento e gerar uma imagem resumo.
• Capturar postagens de redes sociais e inseri-las nas imagens.
• Adicionar um novo estilo com base em imagens fornecidas pelo usuário (por exemplo, um estilo claro).

Decisão rápida

• Quando o projeto já possui slides/style.css, manter esse estilo. A primeira linha do arquivo contém o nome do estilo em inglês; use esse nome para ler a especificação correspondente. Novas páginas devem ser colocadas no mesmo diretório pages/.
• Quando o usuário especifica um estilo, use o estilo especificado.
• Quando não há style.css no projeto e o usuário não especificou um estilo: se houver apenas um estilo, use-o diretamente; se houver múltiplos estilos, recomende um com base no conteúdo e no contexto. O usuário decide após visualizar a imagem resumo.
• Quando o usuário fornece um novo conjunto de imagens e solicita que sejam usadas daqui em diante, adicione o novo estilo conforme kirklin-slides-new-style.md. Os estilos existentes permanecem inalterados.
• Primeiro determine o título de cada página; depois escolha o layout com base no conteúdo principal. A correspondência entre conteúdo comum e layout é mostrada na tabela abaixo. A descrição completa está em kirklin-slides-layouts.md.

Conteúdo	Layout
Um número-chave	Número grande
Vários números	Blocos numéricos
Várias conclusões paralelas	Pontos-chave
Várias características ou capacidades	Lista de ícones
Escolha entre duas abordagens	Comparação
Itens agrupados em duas dimensões	Quadrante
Comparação de múltiplos itens em vários aspectos	Tabela
Comparação de valores numéricos	Barras horizontais
Valores numéricos agregados por período	Gráfico de colunas
Variação de um indicador ao longo do tempo	Gráfico de linhas
Composição de um total	Gráfico de rosca
Fases que diminuem progressivamente	Funil
Marcos importantes	Linha do tempo
Plano dividido em fases	Roadmap
Tarefas agendadas por semana	Gráfico de Gantt
Duas atividades simultâneas	Trilha dupla
Etapas sequenciais	Fluxo
Uma citação textual	Citação
Uma imagem com legenda	Imagem e texto
Postagem externa	Captura de tela
Membros e responsabilidades	Equipe
Parceiros	Mural de logos
Um trecho de código	Código

Limites principais

• O tamanho da tela de todos os estilos é 1920×1080; o resultado renderizado é 3840×2160.
• O texto fica dentro da área definida pelas margens do estilo, especificadas por quatro variáveis de margem no style.css.
• A página contém apenas estrutura, conteúdo e percentuais calculados a partir dos dados. Cores, tamanhos de fonte e outros estilos são determinados pelo estilo. O significado das cores é conforme a especificação do estilo.
• Cada página expressa um único tema. Quando o conteúdo é extenso, divida em várias páginas.
• Números, nomes de pessoas e datas vêm dos materiais do usuário, ou são calculados diretamente a partir deles (por exemplo, total, data de início/término, valor máximo). Números calculados são anotados com o método de cálculo no rodapé. Números que não estão nos materiais e não podem ser calculados não são inseridos na imagem, nem estimados.
• O texto de placeholder nas páginas de exemplo é completamente substituído pelo conteúdo do usuário. Blocos não fornecidos pelo usuário são removidos inteiramente.
• Gráficos comparáveis usam a mesma escala, com a escala indicada no rodapé.
• Os títulos são frases completas, terminadas com ponto final. Adicione espaços entre caracteres chineses e letras/números. Use "a" (pt) para intervalos numéricos.
• A numeração das imagens no documento segue a ordem de aparecimento. Após inserir uma nova página, renumerar.
• Os scripts são escritos em TypeScript. Scripts auxiliares no projeto também usam TypeScript.

Exemplo

# RUIM: título é um tópico, sem espaço entre números e caracteres chineses, intervalo usa til
Introdução ao processo de aprovação
Cada módulo precisa de 2~3 pessoas

# BOM: título é uma conclusão, termina com ponto final
O novo processo reduz a espera da aprovação em dois dias.
Cada módulo é responsável por 2 a 3 pessoas

# RUIM: dois gráficos de barras usam escalas diferentes; a opção selecionada usa uma cor que indica gravidade
# BOM: dois gráficos de barras usam a mesma escala, indicada no rodapé; a opção selecionada usa a cor definida no estilo para indicar seleção

Lista de verificação

• Cada página foi renderizada novamente após modificações e verificada com a ferramenta Read no PNG.
• O script de verificação não reportou problemas; não há texto de placeholder remanescente nas páginas.
• Todos os números, nomes de pessoas e datas estão nos materiais do usuário, ou podem ser calculados a partir deles.
• As legendas das imagens no documento correspondem aos títulos; a numeração segue a ordem de aparecimento.
• Quando o usuário solicitar exportação, o script de exportação foi executado sem erros e a imagem resumo foi visualizada.
• Após modificar scripts, páginas de exemplo ou estilos deste skill, todos os testes pnpm --dir <diretório do skill> test passam.

Fora do escopo deste skill

• Arquivos .pptx e slides online
• Cartazes, cards de redes sociais e design de páginas web
• Redação do corpo do documento

Referências

Arquivo	Descrição
kirklin-slides-copy.md	Normas de texto
kirklin-slides-layouts.md	Catálogo de layouts
kirklin-slides-components.md	Estrutura da página e componentes
kirklin-slides-workflow.md	Fluxo de trabalho e uso dos scripts
kirklin-slides-new-style.md	Adicionar novo estilo
kirklin-slides-style-launch-dark.md	Estilo escuro de lançamento
assets/pages/	27 páginas de exemplo compartilhadas
assets/styles/	Estilos de cada estilo
scripts/use-style.ts	Define o estilo para o projeto
scripts/add-page.ts	Copia uma página de exemplo por layout
scripts/render.ts	Renderiza páginas
scripts/check-pages.ts	Verifica texto e layout
scripts/export-slides.ts	Exporta todas as imagens do documento e imagem resumo
scripts/preview-style.ts	Gera imagem resumo de exemplo de um estilo
scripts/post-shot.ts	Captura postagem de rede social