GoodLadTom/navaigate-present

O que navaigate-present faz?

Apresentações interativas com a marca do próprio membro. A skill não vem com nenhuma marca ou estilo pré-definido. Cada deck tem a aparência da marca do membro, nunca da NavAIgate. Antes do primeiro deck, ela descobre o estilo desejado: pergunta, pesquisa o site do membro e os sites que ele adora, e mostra direções para escolher.

O que todo deck mantém, independentemente da marca:

• Uma ideia por tela. As palavras ficam à esquerda: um rótulo, um título que aparece palavra por palavra com uma frase de destaque, e um parágrafo curto e simples. Uma demonstração ao vivo em canvas fica à direita.
• A demonstração ensina na prática. O apresentador pressiona, arrasta ou alterna um elemento, e a tela responde imediatamente: números contam, gráficos redesenham, cartões deslizam para novos lugares. Toda mudança é suave, nada pula.
• Nada nunca está morto. Cada demonstração reproduz sua chegada quando o slide entra em vista, e mantém algum movimento suave enquanto espera. O fundo da página se move lentamente e ondula onde você clica.
• Funciona como uma palestra. A seta para baixo (ou Espaço, Page Down ou seta para a direita) avança exatamente um slide. Para cima e para a esquerda voltam, e Home e End pulam para as extremidades. F ativa tela cheia. Uma barra de progresso agrupada corre na parte inferior, a barra superior nomeia o slide, e um slide de mapa permite pular para qualquer lugar. Isso vem de template/core.js: nunca altere em um slide.
• É testado como um filme. Cada slide é capturado em três tamanhos e cada controle é pressionado. Nada sobrepõe, corta ou lança erro.

Fale de forma simples: a maioria dos membros não são programadores. Diga o que está acontecendo em uma linha antes de cada etapa e guarde os comandos para você, a menos que eles peçam. As marcas deles ficam em suas próprias pastas, ~/.navaigate-present/brands/, então atualizar esta skill nunca as afeta.

0. Qual marca?

Execute python -I scripts/brand.py list.

• Nenhuma marca ainda, ou eles querem uma nova: faça a configuração (seções 1 a 4) primeiro. Leva cerca de 15 minutos.
• Uma marca: use-a. Várias: pergunte qual, a menos que o pedido torne óbvio.

1. Perguntas

Diga a eles o que vai acontecer: algumas perguntas, uma olhada no site deles e nos estilos que gostam, depois duas ou três direções para escolher. Pergunte com AskUserQuestion (uma chamada, quatro perguntas):

1. Como deve parecer? Calmo e premium / Ousado e energético / Amigável e acolhedor / Limpo e técnico.
2. Claro ou escuro? Claro / Escuro / Combinar com meu site / Mostrar ambos.
3. Cantos em botões e tags? Totalmente arredondados (pílulas) / Suavemente arredondados / Quadrados / Combinar com meu site.
4. Fundo atrás dos slides? Uma grade de pontos suave / Uma rede fina / Linhas de papel quadriculado / Simples.

Depois pergunte no chat, em uma mensagem:

• o nome da marca e o site;
• o logotipo (um caminho de arquivo, ou arraste-o). SVG é melhor, caso contrário um PNG com fundo transparente. Diga que pode vir do site se eles não tiverem o arquivo;
• diretrizes da marca se eles tiverem (um PDF ou um link);
• um a três estilos que eles adoram: sites, apresentações, marcas ou capturas de tela, até de outros setores. Diga que pode ser qualquer coisa que eles gostariam que seus slides parecessem;
• qualquer coisa que eles nunca queiram ver (por exemplo, pílulas, emojis ou neon);
• para quem são as apresentações, em uma linha;
• onde salvar os decks (sugira uma pasta <Marca> presentations nos Documentos deles).

2. Pesquisa

1. O site deles e seus favoritos. Execute python -I scripts/research.py "~/.navaigate-present/research/<slug>" <site deles> <cada referência>. Para cada site, ele salva uma captura de tela da primeira tela e da página, e quaisquer logotipos que encontrar no cabeçalho. Ele também mede as fontes, cores de fundo e texto, cores de destaque, cantos e estilo de rótulo que a página realmente usa. Olhe cada captura de tela. Os números dizem o que está lá, e as imagens dizem como parece.
2. As diretrizes deles, se eles as enviaram. Leia o PDF: suas cores, fontes e regras superam qualquer coisa que um site mostre.
3. Sem site e sem favoritos? Pesquise na web três ou quatro sites bem projetados na área deles e pesquise-os, apenas para inspiração. Se Firecrawl estiver conectado, firecrawl_search os encontra, e raspar com formats: ["branding"] fornece uma segunda leitura das cores e fontes de um site.
4. Diga a eles o que você encontrou, em palavras simples e algumas linhas. Por exemplo: "Seu site usa um verde escuro sobre creme, com uma serifa para títulos. O deck que você adora é escuro e usa cantos quadrados e muito espaço."

O que extrair de um favorito: sua sensação (claro ou escuro, quanto espaço, o caráter da fonte, cantos, quanto uso de cor). Nunca pegue seu logotipo, nomes de produtos, palavras ou layout exato. As próprias cores, logotipo e nome do membro permanecem dele.

3. Direções

Crie dois ou três rascunhos de marca em ~/.navaigate-present/drafts/<slug>-a, -b e -c. Cada um recebe um brand.json (veja references/BRAND.md), uma cópia do logotipo e um nome de "direction" de algumas palavras. Por exemplo:

• A, fiel à sua marca: as próprias cores, fontes e cantos do site deles.
• B, mais próximo de : as cores e o logotipo deles, com o modo, caráter da fonte, cantos e fundo do favorito.
• C, uma alternativa: um contraste claro, como escuro se A for claro, ou um par de fontes diferente. Deve ainda estar dentro da marca.

Siga as respostas deles: a sensação, claro ou escuro, os cantos e o fundo. Onde disseram "combinar com meu site", use o que a pesquisa mediu. Depois:

1. Execute python -I scripts/brand.py check <pasta do rascunho> para cada um e corrija cada linha PROBLEMA.
2. Execute python -I scripts/brand.py compare <rascunho a> <rascunho b> [<rascunho c>]. Ele constrói a abertura e um slide de gráfico em cada direção e os coloca lado a lado em uma imagem, directions.png.
3. Mostre a imagem e o caminho completo do index.html de cada direção, para que possam navegar por ela. Pergunte qual eles gostam, ou o que misturar ("As cores de A com a fonte de B"). Ajuste e compare novamente até que uma esteja certa.

4. Salvar a marca

1. Escreva a direção escolhida, com as alterações deles, em ~/.navaigate-present/brands/<slug>/ (brand.json, logotipo e quaisquer arquivos de fonte).
2. Execute python -I scripts/brand.py check <slug>, depois python -I scripts/brand.py sample <slug>. Isso constrói todos os cinco slides de exemplo na marca e os captura.
3. Mostre a folha de contato e forneça o caminho completo do index.html da amostra. Quando eles estiverem satisfeitos, a configuração está concluída, e todo deck futuro usará esta marca.

5. Criando um deck

1. Briefing. Para quem é, o que eles devem aprender, aproximadamente quantos slides, onde será exibido, e os fatos que pode usar. Use apenas fatos que o membro forneça ou que você possa obter. Nunca invente um recurso, um número ou uma citação.
2. Esboço. Execute python -I scripts/new_deck.py "<pasta do deck>" "<título>" <slug da marca>. Isso inicia o deck com os slides de exemplo. Depois escreva _build/deck.json: os grupos (eles se tornam a barra de progresso) e a ordem dos slides. Para cada slide, decida a única coisa que o apresentador pressionará e o que isso prova. Um slide sem nada para pressionar é um slide fraco.
3. Texto. Escreva label, headline, hl e body de cada slide em uma única passagem, para que o deck tenha uma voz, na voz da marca de brand.json. Títulos têm de 5 a 10 palavras, com hl (2 a 4 palavras) dentro do título. Corpos têm no máximo cerca de 45 palavras. Palavras simples e frases curtas, sem travessões e sem "alavancar", "sem costuras" ou "desbloquear". Se as skills de estilo de escrita e humanizador estiverem instaladas, use-as.
4. Construção. Construa cada slide de acordo com references/SLIDE-BUILDER.md. Os slides são pastas separadas, para que auxiliares possam construí-los em paralelo. Dê a cada auxiliar esse manual, seus IDs de slide, o slug da marca, os fatos e uma ideia de demonstração por slide.
5. Teste. Execute python -I scripts/build.py "<deck>", depois python -I scripts/shoot.py "<deck>" 1920 1080, e depois o mesmo em 1440 900 e 1280 720. Cada execução deve imprimir missing copy: none, fit: clean e console: clean. Olhe cada captura de tela, incluindo as tiradas após cada controle ser pressionado.
6. Revisão. Leia cada slide como o público faria. A demonstração prova o título? As palavras são simples e verdadeiras? Os números de exemplo somam e estão rotulados como "Exemplo de números"? Verifique a lista never da marca.
7. Entrega. Forneça o caminho completo do index.html do deck. É um único arquivo que funciona offline, exceto Google Fonts, mais assets/ se um slide carregar imagens.

Regras

• Cores e fontes vêm apenas da marca. No CSS, use os tokens (--accent, --accent-ink, --s1, --text, --muted, --line e os demais). No canvas, use E.COL e E.FONT, E.HEAD e E.LABEL. Nunca digite uma cor hexadecimal em um slide: é isso que permite que um slide funcione em todas as marcas.
• Palavras de destaque usam --accent-ink (ou E.COL.accentInk), o destaque ajustado até que seja legível no fundo. Preenchimentos usam --accent, e palavras em um preenchimento de destaque usam --on-accent.
• Cantos seguem a marca. Use var(--rp) para botões e tags, var(--r) para cartões e E.R no canvas. Nunca digite 999px.
• O logotipo é sempre o arquivo real do membro, incorporado pela construção (<!--LOGO--> em uma seção). Nunca o redesenhe e nunca peça a um gerador de imagens por ele. Sem arquivo de logotipo, o nome da marca é definido em sua fonte de título. Dê ao logotipo uma caixa fixa e encaixe-o dentro (object-fit: contain).
• Números são reais ou rotulados. Exemplos matemáticos devem somar e dizer "Exemplo de números".
• Dinheiro e números usam locale e currency da marca (E.money, E.num). O idioma é o da marca (inglês britânico por padrão).

Arquivos

• template/page.html: a estrutura e todo o sistema de design CSS, tudo em tokens de marca.
• template/engine.js (E): o kit de desenho (curvas, cartões, texto, rótulos, cursor, ondulação, ticks, linhas de gráfico suaves, grades, dinheiro, os fundos).
• template/core.js (P): cópia, o título palavra por palavra, estágios, teclado e progresso, controles, o loop.
• scripts/research.py: capturas e medições de sites.
• scripts/brandkit.py: transforma brand.json em tokens, fontes e logotipo, com verificação de contraste.
• scripts/brand.py: lista, verifica, compara e amostra marcas.
• scripts/new_deck.py inicia um deck, scripts/build.py constrói um e scripts/shoot.py testa um.
• references/BRAND.md: o formato brand.json. references/SLIDE-BUILDER.md: o contrato do slide e regras de demonstração (dê a cada auxiliar).
• examples/slides/: start (revelação do logotipo), path (o mapa), idea (controles deslizantes conduzindo um gráfico), switch (um antes e depois que reorganiza) e close. Eles são o padrão que todo novo slide deve corresponder.

Lições já aprendidas

• </script em qualquer lugar no código embutido, mesmo em um comentário, encerra o script da página prematuramente. build.py o escapa.
• O passo de um input range deve cair em seu valor padrão, ou o navegador o ajusta para o passo mais próximo.
• Um logotipo com apenas largura e altura máxima transborda sua caixa, e a máscara de revelação então o corta. Dê a ele largura e altura, e encaixe-o dentro.
• Controles que shoot.py pressiona nunca devem ser verdadeiramente disabled. Use aria-disabled="true".
• Algumas fontes Google não têm certos pesos (Space Mono tem apenas 400 e 700). brand.py check encontra os pesos que cada fonte possui e os salva.
• Muitas marcas mantêm seus botões pretos e colocam a cor de destaque em palavras e ícones. research.py também olha lá, então leia sua lista de destaque junto com as capturas de tela.
• Here-documents em um shell podem consumir barras invertidas e aspas. Escreva arquivos de slide e scripts com uma ferramenta de escrita de arquivos.