---
name: reversa-selo-generativo
description: >
  Creates seeded generative visual seals using p5.js, generating standalone HTML with
  reproducible algorithmic art. Use this skill whenever the user asks for a seal,
  project visual identity, generative hero, reproducible unique cover, or artwork
  derived from a hash. Should be activated when the user mentions terms such as "seal",
  "generative seal", "project visual identity", "hero cover", "seeded artwork",
  "Art Blocks style", "p5.js generative", "reproducible cover", "documentation seal",
  or asks for a unique and reproducible decorative element derived from a string.
  Works with any string as a seed (sha256 hash of soul.md, project name, arbitrary ID).
  Always generates standalone HTML with p5.js via CDN.
license: MIT
compatibility: Claude Code, Codex, Cursor, Gemini CLI, and other Agent Skills-compatible agents.
metadata:
  author: pnocera
  version: "1.0.0"
  framework: reversa
  team: shared-skills
  role: generative-seal
---

# Generative Seal

Creates **unique and reproducible visual seals** for Reversa projects using p5.js. Each project receives its own generative artwork derived from a deterministic seed: the same seed always generates the same seal.

Inspired by the Art Blocks pattern (seeded randomness) and Anthropic's `algorithmic-art` skill, but with a deliberately smaller scope: it produces **only the seal**, not a philosophical manifesto, not an exploration platform. It is a decorative identity element.

## When to use

- **Hero of `index.html`** of the mini-site generated by `/reversa-documentation`.
- **Mini-seal in the header** of each mini-site page (reduced version).
- **Slide cover** in `deck.html`.
- **Visual identity** of any artifact generated by Reversa that needs a distinctive mark.

The skill is **lightweight by design**: uses only p5.js, generates a single canvas, exports as SVG or PNG. It has no exploration sidebar, no multiple modes, no mandatory animation (animation is optional).

## Principles

1. **Absolute reproducibility**: the same seed always generates the same seal.
2. **Limited palette**: 3 to 5 colors per seal, derived from the chosen visual style.
3. **Balanced composition**: recognizable central form with auxiliary elements orbiting or composing.
4. **No text on canvas**: the seal is purely visual; the project name and title are outside the canvas, in HTML.
5. **Size-adaptable**: the same canvas works at 64x64 (mini-seal header) and 800x800 (large hero).
6. **No dependencies beyond p5.js**: no GSAP, dat.GUI, lodash. Only p5.

## Workflow

### 1. Receive the seed

The seed can come from:

- **Direct string**: user or agent passes a sha256 hash, project name, or any string.
- **File path**: user points to `.reversa/soul.md`, the skill computes the `sha256` of the content.
- **Fallback**: if nothing is provided, use `sha256` of the current timestamp (a "moment" seal, not reproducible).

```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;
}
```

The seed is a 64-character hexadecimal string. The skill extracts multiple numbers from it to feed distinct parameters.

### 2. Choose palette

The palette derives from the visual style chosen by the `/reversa-documentation` user, or can be provided directly.

Consult `references/PALETTE_BY_STYLE.md` for the full palette table by style. The 4 base palettes are:

| Style | Palette |
|--------|---------|
| `sober` | Neutral tones: grays, teal blue, light terracotta, off-white |
| `premium` | Dark mode: deep black, gold, wine red, silver, midnight blue |
| `dense` | Saturated: orange, cyan, magenta, lime, indigo |
| `exploratory` | Luminous pastels: aurora pink, glacier cyan, mist lilac, light white |

The choice of which color is "central" and which are "auxiliary" comes from the seed.

### 3. Choose generative pattern

The skill has **5 established patterns**, each with a distinct appearance. The seed determines which pattern to use (first 2 hex digits modulo 5):

| Pattern | Appearance | When it fits |
|---------|-----------|--------------|
| `flow-field` | Perlin flow fields, organic curved strokes | Style `sober`, `exploratory` |
| `particle-orbit` | Particles orbiting a center with trails | Style `premium`, `exploratory` |
| `crystal-lattice` | Symmetric crystalline form, clean geometry | Style `dense`, `sober` |
| `wave-interference` | Moire-type interference patterns, circular waves | Style `premium`, `dense` |
| `noise-strata` | Horizontal noise strata, abstract landscape | Style `sober`, `exploratory` |

Details in `references/GENERATIVE_PATTERNS.md`.

The skill can accept a pattern override via parameter, ignoring the seed derivation.

### 4. Generate the code

Structure of the resulting HTML:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Seal: <!-- 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. Read config (seed, palette, pattern, size)
        // 2. Seed p5.js: randomSeed(seedInt); noiseSeed(seedInt);
        // 3. Execute chosen pattern
        // 4. Save canvas as reference
    </script>
</body>
</html>
```

**Fundamental rules**:

1. **Standalone HTML**: single file, p5.js via CDN, nothing external.
2. **p5.js 1.9.0+**: use `https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js`.
3. **Always seeded**: `randomSeed(seedInt)` and `noiseSeed(seedInt)` in the first setup, before any call to `random()` or `noise()`.
4. **Hex hash to int conversion**: take the first 16 hex chars, convert via `parseInt(hex.slice(0, 16), 16)`.
5. **Square canvas**: default size 800x800, but parameterizable.
6. **noLoop()**: by default the seal is static. If animation is requested, use `frameRate(30)` and a low-cost algorithm.
7. **No text on canvas**: project name stays in `<div class="label">` outside the canvas.

### 5. Size variants

The skill accepts a `size` parameter to generate a large seal (hero, 800x800), medium (slide cover, 400x400), or mini (header, 64x64 or 128x128).

In smaller seals (<200px), apply automatic simplifications:
- Reduce particle count by 80%.
- Increase stroke thickness proportionally.
- Disable animation.

### 6. Save and deliver

Output is standalone HTML. The canvas can be exported as PNG via button (optional) or as SVG for use in headers (recommended for mini-seals: SVG scales perfectly).

```javascript
function exportSVG() {
    // Patterns compatible with SVG (crystal-lattice, wave-interference) can be regenerated as real SVG.
    // Dense raster patterns (flow-field) export as PNG embedded in <img>.
}
```

For use in other mini-site pages (mini-seal in header), generate once as SVG, embed inline in the viewer template HTML.

## Quality guidelines

- **Recognizability**: the seal must have a strong central form; someone who has seen it once should recognize the project by its seal.
- **Chromatic balance**: never use all palette colors in the same seal; typically 1 dominant color (60%), 1 secondary (30%), 1 accent (10%).
- **Do not attract more attention than the content**: the seal is identity, not focus. In a large hero, it is fine to be the protagonist; in a mini-seal in the header, it must yield space to the project name.
- **Accessibility**: minimum contrast between background and primary elements. Seals with dark backgrounds have light elements and vice versa.
- **Language**: comments in English, without em-dashes.

## Code guidelines

- **Named constants at the top**: size, palette, pattern parameters visible at the start.
- **Single generation function**: each pattern is a function `drawFlowField()`, `drawCrystalLattice()`, etc., isolated and testable.
- **No global side effects**: everything scoped inside p5's `setup()` and `draw()`.

## Error handling

Consult `references/ERRORS.md` for scenarios (p5.js unavailable, canvas not supported, invalid seed, extreme size).