tadyuh76/slide-deck

Slide deck

Um deck aqui é um pequeno projeto React que renderiza slides 1920x1080, mais um pipeline que os transforma em um PowerPoint nativo (texto editável, notas do apresentador), um PDF e um script do apresentador. A pasta starter/ contém um deck completo funcional (12 slides de exemplo em vietnamita, tema azul, um exemplo de cada composição). Copie-a, substitua o conteúdo, mantenha o sistema.

Leia o briefing para três coisas antes de qualquer outra coisa: quem está na sala (presuma que não há conhecimento prévio, a menos que informado), quanto tempo dura o slot e qual é o esboço do próprio apresentador. O esboço do apresentador decide a ordem e o conteúdo. Seu trabalho é clareza e aparência, não novas afirmações.

1. Início

cp -R "<caminho-deste-skill>/starter" "<projeto>/<nome-do-deck>"
cd "<projeto>/<nome-do-deck>/deck" && npm install && npx playwright install chromium
npx vite                                                # servidor dev, porta em vite.config.ts

Depois defina os nomes: tools/deck-name.txt (nome do arquivo PPTX e PDF), o título em deck/index.html, o cabeçalho em deck/script-doc.mjs, os nomes das seções em deck/src/deck/types.ts (ACTS), e o texto do rodapé e logotipos em Chrome (deck/src/deck/Deck.tsx). Escolha uma porta livre em deck/vite.config.ts se outro deck estiver em execução.

Estrutura do projeto:

• deck/src/slides/*.tsx um arquivo por slide ou grupo, ordem em index.ts. Cada um exporta um SlideDef (id, título, ato, minutos, notas, Component).
• deck/src/ui/atoms.tsx peças compartilhadas: Bg, Header, HaloArt/Art, Feature (o painel destacado), IconTile, Stat, Source, LogoTile, AppIcon. Links.tsx desenha linhas de conexão com pontos lentos viajantes. World.tsx é um mapa-múndi pontilhado a partir de formas reais de países.
• deck/src/index.css contém os tokens de cor. Remodele alterando --accent, --accent-ink, os valores de fundo e os matizes rgba, não adicionando um segundo tema.
• tools/ geração de arte, construção, lançamento.

2. Regras de conteúdo (o que o proprietário corrigiu, em ordem de frequência)

1. Siga o documento do apresentador. Ordem das seções, redação das definições e cada número vêm dele. Quando o esboço tiver apenas um título, adicione o mínimo de uma fonte primária, vincule-o em Source e informe ao proprietário quais slides você preencheu. Nunca apresente uma contagem que a lista não suporte (uma lista anunciada como 30 nomes que contém 28: mostre a lista, omita o número, reporte).
2. Títulos são extremamente simples. Um título nomeia o slide em palavras que o público já usa: "5 cách thu thập dữ liệu xuyên biên giới", "Yêu cầu em tình huống khẩn cấp". Linhas inteligentes ou comprimidas são rejeitadas. Uma linha, até cerca de 40 caracteres a 66 px; a segunda metade na cor de destaque.
3. Texto mínimo, linguagem simples. Uma ideia por cartão, algumas linhas curtas. Termos comuns em inglês vão entre colchetes ou como uma pequena segunda linha ("service provider"). Dígitos, não palavras numéricas. Nenhum pequeno rótulo acima de um título, nenhum dois-pontos ou ponto médio como decoração, nenhum texto promocional.
4. Traduza tudo de um deck de origem para o idioma do público; mantenha nomes próprios e o termo em inglês onde os oficiais o encontrarão.
5. As notas do apresentador carregam o texto completo. O slide mantém a forma curta; as notas contêm as frases completas do apresentador do esboço, para que nada se perca. Some minutes contra o slot e reporte um excesso.
6. Logotipos reais para organizações reais (arquivos oficiais, nunca uma imitação gerada); registre de onde cada um veio em assets/logos-src/SOURCES.md. Logotipos de organizações que o proprietário solicitar vão em todos os slides em Chrome, grandes no título e encerramento.
7. Verificação de fatos em segundo plano. Envie um agente de pesquisa para os fatos que você está adicionando (datas, números de artigos, números de leis, contagens) e escreva o resultado em docs/facts.md com uma URL por item. Quando o valor do próprio apresentador diferir de fontes públicas, mantenha o dela e reporte a diferença.

3. Gráficos

Cada slide de conteúdo tem ilustração. Slides apenas com ícones foram considerados entediantes. Pequenos ícones lucide são aceitáveis apenas como marcadores de linha quando o slide também tiver arte.

• Uma família: objetos pseudo-3D compactos a partir de planos de cor plana, sem gradientes ou brilho, uma família de cores mais um pequeno marcador amarelo. As folhas de referência de estilo são assets/ref/blue-indicators.png e green-indicators.png. Cada bloco em uma folha deve ser plano: um bloco brilhante puxa novas imagens para gradientes. Para outra cor, recoloque uma folha para começar (tools/blue_ref.py), altere a linha da paleta em tools/art.mjs, gere um primeiro lote, depois reconstrua a folha a partir de 16 de seus melhores resultados e use-a daí em diante (a folha azul foi feita assim).
• Adicione uma linha por imagem a tools/art-list.tsv (nome<TAB>conceito). Um conceito é um objeto claro com no máximo dois detalhes de suporte e sem texto: "um envelope selado com um cadeado na aba e um distintivo de olho riscado".
• P=4 bash tools/art-batch.sh gera o que está faltando com a ferramenta de imagem do Codex CLI (cerca de 80 s cada; precisa ter codex instalado e logado, modelo definido em tools/art.mjs). Execute em segundo plano e continue escrevendo os slides. Algumas execuções falham silenciosamente: quando terminar, verifique se cada nome existe e execute novamente para os que faltam.
• docker build -q -t deck-pack -f tools/Dockerfile tools && docker run --rm -v "$PWD":/w -w /w deck-pack python tools/art_finish.py recorta-as em deck/public/art/*.webp. Use com <HaloArt name="..." size={...} />.
• Assuntos sensíveis (danos a crianças, suicídio, terrorismo) recebem símbolos de proteção: um guarda-chuva, um escudo, uma boia salva-vidas, uma placa de aviso.
• Mapas vêm de World.tsx (formas reais), nunca de um modelo de imagem. Diagramas (Venn, fluxos, hubs) são SVG no slide.

4. Composição: nenhum slide vizinho igual

Um deck onde cada slide é uma fileira de cartões iguais foi devolvido ("todo slide tendo layout muito similar"). Dê a cada slide a forma que seu conteúdo tem. O starter tem um exemplo trabalhado de cada:

Conteúdo	Composição	Slide do starter
Poucas partes em ordem	Etapas subindo ao longo de um caminho, grandes numerais fracos	s02-agenda.tsx
Uma ideia guarda-chuva mais várias outras	Bento: um bloco alto destacado e um 2x2	Terms em s03-terms.tsx
Um processo	Pipeline: estações numeradas em uma linha, fluindo para um painel de resultado	s05-preserve.tsx
Várias maneiras para uma coisa	Hub e raios	s06-channels.tsx
Tipos paralelos com os mesmos atributos	Linhas de largura total: imagem, pergunta, nome, conteúdos	DataTypes em s03-terms.tsx
Opções com um aviso	Grade de blocos mais um painel Feature	Emergency em s08-requests.tsx
Uma cadeia de transferências	Fluxo de nós com setas (Link de ui/Links.tsx)	nenhum no starter
Duas alternativas	Dois painéis largos	nenhum no starter
Áreas sobrepostas com um núcleo compartilhado	Venn, rótulos em linhas guia	Directorate em s11-venn.tsx
Lugares	Mapa pontilhado com pinos ou países iluminados, lista ao lado	s17b-map-list.tsx
Um centro com quatro funções	Disco no meio, itens nos cantos	AspDesk em s14-corners-bridge.tsx
Dois lados e o que passa entre eles	Ponte: duas margens, faixas entre	Gateway em s14-corners-bridge.tsx
Números que provam um ponto	Painel Feature com Stat	nenhum no starter

Quando o slide do próprio apresentador tiver uma ideia de diagrama (um Venn, uma lista ao lado de um mapa), mantenha a intenção e o conteúdo e redesenhe; não mantenha o estilo dela.

5. Trabalho de texto (cada um destes foi uma captura de tela rejeitada)

• Nada pula. Em um conjunto de cartões, o mesmo elemento começa na mesma altura em cada cartão. Faça os títulos terem o mesmo número de linhas (reformule ou dê a cada título duas linhas), então empilhe o resto diretamente abaixo. Sem espaços vazios e sem furos margin-top: auto entre um título e seu texto.
• Quebre linhas por significado. .slide é white-space: pre-line; escreva \n no final de uma frase: "Chuỗi bảo quản\nchứng cứ", nunca "Chuỗi bảo\nquản chứng cứ". Mantenha cada linha definida manualmente curta o suficiente para que o navegador nunca a quebre novamente; se quebrar, encurte a linha ou alargue a caixa. Listas de nomes também recebem linhas definidas manualmente (espaços inquebráveis quebraram o PowerPoint).
• Um tamanho por linha. Um número grande e sua unidade são dois blocos (Stat); uma palavra de destaque que lidera uma descrição é sua própria linha.
• Margens. O conteúdo permanece dentro de 120 px à esquerda e à direita e livre da faixa de logotipo (topo 30 a 98 px). Verifique rótulos em mapas e diagramas contra a borda direita.
• Slides abrem completos. Sem animação de entrada; no máximo uma revelação com clique, apenas quando a revelação é o ponto. Movimento ambiente (pontos fluindo, fundo do título) é aceitável.
• Sem widgets de progresso ou número de seção nos slides, a menos que solicitado; a barra de rodapé é suficiente.

6. Construir e verificar

zsh tools/release.sh     # cerca de 5 minutos: release/ recebe Deck/ (web), .pptx, .pdf, Kich-ban-trinh-bay.pdf

O lançamento salva novamente o arquivo através do Microsoft PowerPoint para que as fontes sejam incorporadas. Ele fecha o PowerPoint primeiro: verifique se nada não salvo está aberto, e ele pega uma pasta de bloqueio em /tmp para que duas sessões nunca salvem novamente ao mesmo tempo. Sem PowerPoint em um Mac, pule essa etapa em tools/release.sh; o deck ainda abre, com fontes que devem estar instaladas na máquina de apresentação.

A verificação é parte do trabalho, a cada rodada:

1. cd deck && npx vite build && node export.mjs ../tmp/export renderiza cada slide em tmp/export/sNN.png.
2. Olhe para cada slide em tamanho real, uma imagem de cada vez (reduza para 1600 px de largura). Folhas de contato escondem linhas quebradas, texto tocando bordas e fileiras desalinhadas. Procure por: linhas que quebraram onde você não as quebrou, texto perto ou sobre uma borda, títulos tocando os logotipos, inícios desiguais entre cartões, imagens faltando (um quadrado delineado vazio), rótulos sobrepostos.
3. Após o lançamento, olhe para tmp/lo/p-NN.png (o PowerPoint diagramado pelo LibreOffice) para os slides que você alterou. É aqui que caixas de texto transbordando aparecem. O LibreOffice renderiza tipo ligeiramente mais largo que o PowerPoint, então um quase erro lá é um risco real.
4. Corrija, reconstrua, olhe novamente. Diga claramente o que você olhou e o que não olhou.

Em seguida, copie release/ para uma pasta nomeada na Área de Trabalho, sirva release/Deck em localhost (docker run -d -p 127.0.0.1:<porta>:80 -v "$PWD/release/Deck":/usr/share/nginx/html:ro nginx:alpine), e abra a pasta quando solicitado.

7. Relatório

Comece com o que está pronto e onde. Em seguida, liste as decisões que são do proprietário ou do apresentador: qualquer coisa que você adicionou além do esboço, qualquer valor que você manteve que as fontes contradizem, qualquer contagem que não fecha, o tempo de execução contra o slot. Palavras simples, sem nomes de arquivos ou funções.