reversa-selo-generativo
Cria selos visuais generativos seeded com p5.js, gerando HTML standalone com arte algorítmica reprodutível derivada de um hash ou string.
ソース情報
- リポジトリ
- sandeco/reversa
- ソースの最終更新活動
- 2026年7月31日 03:02
- 検出された SKILL.md の言語
- ポルトガル語
- スター
- 1,603
- フォーク
- 414
インストール方法
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
ソースファイルを確認
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
ファイルエクスプローラー
5 ファイルSKILL.md を表示中
SKILL.md
ソースの指示 · 読み取り専用プレビュー- 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).
```javascript
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:
```html
<!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).
```javascript
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).
GitHubで見る