reversa-selo-generativo

name	reversa-selo-generativo
description	Cria selos visuais generativos seeded com p5.js, gerando HTML standalone com arte algorítmica reprodutível derivada de um hash ou string.
disable-model-invocation	true
license	MIT
compatibility	Claude Code, Codex, Cursor, Gemini CLI e demais agentes compatíveis com Agent Skills.
metadata	{"author":"sandeco","version":"1.0.0","framework":"reversa","team":"shared-skills","role":"generative-seal"}

Selo Generativo

Cria selos visuais únicos e reprodutíveis para projetos do Reversa usando p5.js. Cada projeto recebe seu próprio artwork generativo derivado de um seed determinístico: o mesmo seed gera o mesmo selo, sempre.

Inspirado no padrão Art Blocks (seeded randomness) e na skill algorithmic-art da Anthropic, mas com escopo deliberadamente menor: produz apenas o selo, não um manifesto filosófico, não uma plataforma de exploração. É um elemento decorativo de identidade.

Quando usar

• Hero da index.html do mini-site gerado pelo /reversa-documentation.
• Mini-selo no header de cada página do mini-site (versão reduzida).
• Capa de slides no deck.html.
• Identidade visual de qualquer artefato gerado pelo Reversa que precise de uma marca distintiva.

A skill é leve por design: usa só p5.js, gera canvas único, exporta como SVG ou PNG. Não tem sidebar de exploração, não tem múltiplos modos, não tem animação obrigatória (animação é opcional).

Princípios

1. Reprodutibilidade absoluta: mesmo seed sempre gera o mesmo selo.
2. Paleta limitada: 3 a 5 cores por selo, derivadas do estilo visual escolhido.
3. Composição equilibrada: forma central reconhecível com elementos auxiliares orbitando ou compondo.
4. Sem texto no canvas: o selo é puramente visual; nome do projeto e título ficam fora do canvas, em HTML.
5. Adaptável de tamanho: o mesmo canvas funciona em 64x64 (mini-selo header) e 800x800 (hero grande).
6. Sem dependências além de p5.js: nada de GSAP, dat.GUI, lodash. Só p5.

Fluxo de Trabalho

1. Receber o seed

O seed pode vir de:

• String direta: usuário ou agente passa um hash sha256, nome do projeto, ou qualquer string.
• Caminho de arquivo: usuário aponta para .reversa/soul.md, a skill computa sha256 do conteúdo.
• Fallback: se nada for fornecido, usar sha256 do timestamp atual (selo "do momento", não reprodutível).

async function computeSeed(input) {
    const enc = new TextEncoder();
    const data = enc.encode(input);
    const hashBuffer = await crypto.subtle.digest("SHA-256", data);
    const hashArray = Array.from(new Uint8Array(hashBuffer));
    const hashHex = hashArray.map((b) => b.toString(16).padStart(2, "0")).join("");
    return hashHex;
}

O seed é uma string hexadecimal de 64 caracteres. A skill extrai múltiplos números dele para alimentar parâmetros distintos.

2. Escolher paleta

A paleta deriva do estilo visual escolhido pelo usuário do /reversa-documentation, ou pode ser fornecida diretamente.

Consultar references/PALETTE_BY_STYLE.md para a tabela completa de paletas por estilo. As 4 paletas base são:

Estilo	Paleta
sober	Tons neutros: cinzas, azul-petróleo, terracota leve, branco quebrado
premium	Dark mode: preto profundo, dourado, vermelho-vinho, prata, azul-meia-noite
dense	Saturados: laranja, ciano, magenta, lima, índigo
exploratory	Pastéis luminosos: rosa-aurora, ciano-glaciar, lilás-névoa, branco luz

A escolha de qual cor é "central" e quais são "auxiliares" sai do seed.

3. Escolher padrão generativo

A skill tem 5 padrões consagrados, cada um com aparência distinta. O seed determina qual padrão usar (primeiros 2 dígitos hex modulo 5):

Padrão	Aparência	Quando combina
flow-field	Campos de fluxo Perlin, traços orgânicos curvos	Estilo sober, exploratory
particle-orbit	Partículas orbitando um centro com trilhas	Estilo premium, exploratory
crystal-lattice	Forma cristalina simétrica, geometria limpa	Estilo dense, sober
wave-interference	Padrões de interferência tipo moiré, ondas circulares	Estilo premium, dense
noise-strata	Estratos de ruído horizontal, paisagem abstrata	Estilo sober, exploratory

Detalhes em references/GENERATIVE_PATTERNS.md.

A skill pode aceitar override do padrão via parâmetro, ignorando a derivação por seed.

4. Gerar o código

Estrutura do HTML resultante:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Selo: <!-- PROJECT_NAME --></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>
    <style>
        body { margin: 0; display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--seal-bg, #0a0a14); }
        #seal-container { display: block; }
        .label { color: var(--seal-fg, #eaeaea); text-align: center; margin-top: 16px; font-family: system-ui, sans-serif; }
    </style>
</head>
<body>
    <div>
        <div id="seal-container"></div>
        <div class="label"><!-- PROJECT_NAME --></div>
    </div>
    <script id="seal-config" type="application/json">
        <!-- CONFIG_JSON -->
    </script>
    <script>
        // 1. Ler config (seed, paleta, padrão, tamanho)
        // 2. Seedar p5.js: randomSeed(seedInt); noiseSeed(seedInt);
        // 3. Executar padrão escolhido
        // 4. Salvar canvas como referência
    </script>
</body>
</html>

Regras fundamentais:

1. HTML standalone: arquivo único, p5.js via CDN, nada externo.
2. p5.js 1.9.0+: usar https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js.
3. Seeded sempre: randomSeed(seedInt) e noiseSeed(seedInt) no primeiro setup, antes de qualquer chamada a random() ou noise().
4. Conversão de hash hex para int: pegar primeiros 16 chars hex, converter via parseInt(hex.slice(0, 16), 16).
5. Canvas quadrado: tamanho default 800x800, mas parametrizável.
6. noLoop(): por default o selo é estático. Se animação for solicitada, usar frameRate(30) e algoritmo de baixo custo.
7. Sem texto no canvas: nome do projeto fica em <div class="label"> fora do canvas.

5. Variantes de tamanho

A skill aceita parâmetro size para gerar selo grande (hero, 800x800), médio (capa de slide, 400x400) ou mini (header, 64x64 ou 128x128).

Em selos menores (<200px), aplicar simplificações automáticas:

• Reduzir contagem de partículas em 80%.
• Aumentar espessura de traços proporcionalmente.
• Desativar animação.

6. Salvar e entregar

Output é HTML standalone. O canvas pode ser exportado como PNG via botão (opcional) ou como SVG para uso em headers (recomendado para mini-selos: SVG escala perfeitamente).

function exportSVG() {
    // Padrões compatíveis com SVG (crystal-lattice, wave-interference) podem ser regenerados como SVG real.
    // Padrões raster (flow-field denso) exportam como PNG embutido em <img>.
}

Para uso em outras páginas do mini-site (mini-selo no header), gerar uma vez em SVG, embutir inline no HTML do viewer template.

Diretrizes de qualidade

• Reconhecibilidade: o selo deve ter uma forma central forte; quem viu uma vez deve reconhecer o projeto pelo selo.
• Equilíbrio cromático: nunca usar todas as cores da paleta no mesmo selo; tipicamente 1 cor dominante (60%), 1 secundária (30%), 1 acento (10%).
• Não chamar mais atenção que o conteúdo: o selo é identidade, não foco. Em hero grande, ok ser protagonista; em mini-selo no header, deve ceder espaço ao nome do projeto.
• Acessibilidade: contraste mínimo entre fundo e elementos primários. Selos com fundo escuro têm elementos claros e vice-versa.
• Idioma: comentários em pt-br, sem travessão.

Diretrizes de código

• Constantes nomeadas no topo: tamanho, paleta, parâmetros do padrão visíveis no início.
• Função única de geração: cada padrão é uma função drawFlowField(), drawCrystalLattice(), etc, isolada e testável.
• Sem efeitos colaterais globais: tudo escopado dentro de setup() e draw() do p5.

Tratamento de erros

Consultar references/ERRORS.md para cenários (p5.js indisponível, canvas não suportado, seed inválido, tamanho extremo).