Cerulean

Cerulean: apresentações por cenas que mudam a cada passo

Você projeta e o Cerulean constrói. Escreve três arquivos: o roteiro em JSON, as cenas programadas em JS e a pele em CSS. scripts/build.py os valida e os converte em um HTML autônomo com o visualizador incluído.

Cada cena é uma ideia contada em 2 a 4 passos. À esquerda vai um cartão de passos. À direita vai uma ilustração programada para aquela cena: o objeto real do tema, com sua própria coreografia, que avança suave a cada passo e tem vida própria (flutua, flui, pulsa). Também pode ser uma captura ou foto que se aproxima e é legendada. Que cada cena se veja e se mova de forma diferente é o que torna uma apresentação do Cerulean boa.

Cada apresentação tem também sua própria identidade visual, que você projeta para aquele tema: o mundo onde vive (seus objetos), a paleta, as tipografias, o ritmo de fundos e uma pele CSS escrita inteiramente para ela. Uma apresentação sobre segurança parece um console; uma de história, um impresso de época. Dois temas distintos não devem parecer da mesma coleção, e tapando o título deve-se adivinhar do que se trata.

Fluxo

1. Entender a encomenda. Você precisa do tema, do conteúdo (anotações, pontos, texto colado) e, se houver, das imagens. Se só derem o tema, desenvolva-o com conhecimento geral bem estabelecido. Não interrompa para pedir imagens: se faltar alguma, deixe seu espaço reservado. Por padrão: português, de 5 a 9 cenas.

2. Ler o guia, uma vez. Leia references/direccion.md (a identidade visual), references/formato.md (o JSON) e references/escenas.md (o kit, o tempo e o catálogo de animações por tipo de ideia). assets/ejemplo.js tem 7 cenas completas: leia-o apenas se tiver dúvidas sobre como resolver algo.

3. Projetar a identidade com o processo de direccion.md: o mundo do tema (onde vive e de 6 a 10 objetos reconhecíveis), o mood, a paleta extraída dessa cena, as tipografias que aquele mundo usaria, o ritmo e o movimento, cada um com sua linha em why. Passe no teste de genericidade: tapando o título, adivinha-se o tema?

4. Escrever o roteiro em presentaciones/<tema>.json: textos, passos, notas e o bloco design. Crie a pasta se não existir. Distribua "fundo" e "papel" conforme o ritmo.

5. Escrever a pele em presentaciones/<tema>.css: o cartão, a capa, os títulos, as legendas, os detalhes e as entradas, como seriam vistos naquele mundo (o que se pode vestir e o que não, em direccion.md).

6. Planejar as cenas antes de programar: para cada uma, que tipo de ideia explica (idea), sua metáfora em uma frase (form) com um objeto do mundo do tema, e o que muda a cada passo. Pelo menos 3 tipos de ideia, nenhuma metáfora repetida. Use imagem apenas para coisas reais que a pessoa quer mostrar (seu aplicativo, um produto, um lugar).

7. Programar as cenas em presentaciones/<tema>.js (escena("nome", (K) => {…})), com seu "draw" no JSON. De 20 a 60 linhas por cena. Desenhe o artefato do mundo, plano por padrão (ver escenas.md).

8. Gerar e revisar:

   python "<pasta desta skill>/scripts/build.py" presentaciones/<tema>.json
   

   Escreve presentaciones/<tema>.html. Corrija os avisos (nomes sem cena, erros de sintaxe, imagens pendentes, direção visual incompleta, pele rejeitada, falta de variedade, semelhança com uma apresentação anterior). Se tiver navegador, revise sem gastar em capturas:

   • Sirva a prévia: python "<pasta desta skill>/scripts/preview.py" presentaciones/<tema>.json em segundo plano, e abra http://localhost:8767.
   • Execute JSON.stringify(CERULEAN_REPORT()) na página. Diz quais cenas têm erros, peças fora do canvas ou passos em que nada muda, e quais textos não são legíveis com a pele (legibilidade). Corrija e execute novamente; a página recarrega sozinha.
   • Faça uma única captura da visão geral (botão "Todas" ou tecla G) para julgar o conjunto: que a identidade se nota (cores, letra, estilo de desenho) e que as cenas não se parecem entre si. Não capture passo a passo: é o que mais gasta tempo e tokens.

9. Entregar. Dê o caminho do HTML e explique em poucas linhas como se usa:

   • → ou espaço avança, ← retrocede.
   • F tela cheia, N notas, G visão geral.
   • E modo edição: corrigir textos, arrastar imagens e mover ou redimensionar o cartão e a ilustração (alças ✥ e ⤡). "Baixar cópia" salva um HTML com as alterações.
   • O botão PDF salva com uma cena por página.

   Se restarem imagens pendentes, termine com sua lista: cena, o que deve mostrar e o nome presentaciones/imagenes/escena-<n>.png.

Regras que não se negociam

• Não invente números, datas, citações, nomes nem estudos. As cifras que aparecem em uma cena vêm do conteúdo ou de conhecimento muito estabelecido, e também estão no texto do passo.
• Não coloque uma imagem inventada ou qualquer uma no lugar de uma real que falta: deixe o espaço reservado.
• Cada cena tem sua própria ilustração e sua própria coreografia, e muda a cada passo.
• Cada apresentação tem sua própria identidade, projetada para seu tema: seu mundo, sua paleta, suas tipografias e sua pele. A paleta, as tipografias e o aspecto padrão não são uma escolha.
• Nunca edite assets/ para uma apresentação específica: o visualizador e o kit são comuns a todas.