wizz-method 1.4.1 → 1.5.0

package/src/skills-lib/algorithmic-art/references/p5js-implementation.md

@@ -0,0 +1,121 @@
+# Step 2 — p5.js implementation
+
+Load this file when implementing the philosophy in code. Covers: the mandatory STEP 0 (read templates/viewer.html before writing any HTML), seeded randomness pattern, parameter structure guidance, how to derive the core algorithm from the philosophy (organic emergence / mathematical beauty / controlled chaos), canvas setup, craftsmanship requirements, and the two-part output format (philosophy + HTML artifact).
+
+## P5.JS IMPLEMENTATION
+
+With the philosophy AND conceptual framework established, express it through code. Pause to gather thoughts before proceeding. Use only the algorithmic philosophy created and the instructions below.
+
+### ⚠️ STEP 0: READ THE TEMPLATE FIRST ⚠️
+
+**CRITICAL: BEFORE writing any HTML:**
+
+1. **Read** `templates/viewer.html` using the Read tool
+2. **Study** the exact structure, styling, and Anthropic branding
+3. **Use that file as the LITERAL STARTING POINT** - not just inspiration
+4. **Keep all FIXED sections exactly as shown** (header, sidebar structure, Anthropic colors/fonts, seed controls, action buttons)
+5. **Replace only the VARIABLE sections** marked in the file's comments (algorithm, parameters, UI controls for parameters)
+
+**Avoid:**
+- ❌ Creating HTML from scratch
+- ❌ Inventing custom styling or color schemes
+- ❌ Using system fonts or dark themes
+- ❌ Changing the sidebar structure
+
+**Follow these practices:**
+- ✅ Copy the template's exact HTML structure
+- ✅ Keep Anthropic branding (Poppins/Lora fonts, light colors, gradient backdrop)
+- ✅ Maintain the sidebar layout (Seed → Parameters → Colors? → Actions)
+- ✅ Replace only the p5.js algorithm and parameter controls
+
+The template is the foundation. Build on it, don't rebuild it.
+
+---
+
+To create gallery-quality computational art that lives and breathes, use the algorithmic philosophy as the foundation.
+
+### TECHNICAL REQUIREMENTS
+
+**Seeded Randomness (Art Blocks Pattern)**:
+```javascript
+// ALWAYS use a seed for reproducibility
+let seed = 12345; // or hash from user input
+randomSeed(seed);
+noiseSeed(seed);
+```
+
+**Parameter Structure - FOLLOW THE PHILOSOPHY**:
+
+To establish parameters that emerge naturally from the algorithmic philosophy, consider: "What qualities of this system can be adjusted?"
+
+```javascript
+let params = {
+  seed: 12345,  // Always include seed for reproducibility
+  // colors
+  // Add parameters that control YOUR algorithm:
+  // - Quantities (how many?)
+  // - Scales (how big? how fast?)
+  // - Probabilities (how likely?)
+  // - Ratios (what proportions?)
+  // - Angles (what direction?)
+  // - Thresholds (when does behavior change?)
+};
+```
+
+**To design effective parameters, focus on the properties the system needs to be tunable rather than thinking in terms of "pattern types".**
+
+**Core Algorithm - EXPRESS THE PHILOSOPHY**:
+
+**CRITICAL**: The algorithmic philosophy should dictate what to build.
+
+To express the philosophy through code, avoid thinking "which pattern should I use?" and instead think "how to express this philosophy through code?"
+
+If the philosophy is about **organic emergence**, consider using:
+- Elements that accumulate or grow over time
+- Random processes constrained by natural rules
+- Feedback loops and interactions
+
+If the philosophy is about **mathematical beauty**, consider using:
+- Geometric relationships and ratios
+- Trigonometric functions and harmonics
+- Precise calculations creating unexpected patterns
+
+If the philosophy is about **controlled chaos**, consider using:
+- Random variation within strict boundaries
+- Bifurcation and phase transitions
+- Order emerging from disorder
+
+**The algorithm flows from the philosophy, not from a menu of options.**
+
+To guide the implementation, let the conceptual essence inform creative and original choices. Build something that expresses the vision for this particular request.
+
+**Canvas Setup**: Standard p5.js structure:
+```javascript
+function setup() {
+  createCanvas(1200, 1200);
+  // Initialize your system
+}
+
+function draw() {
+  // Your generative algorithm
+  // Can be static (noLoop) or animated
+}
+```
+
+### CRAFTSMANSHIP REQUIREMENTS
+
+**CRITICAL**: To achieve mastery, create algorithms that feel like they emerged through countless iterations by a master generative artist. Tune every parameter carefully. Ensure every pattern emerges with purpose. This is NOT random noise - this is CONTROLLED CHAOS refined through deep expertise.
+
+- **Balance**: Complexity without visual noise, order without rigidity
+- **Color Harmony**: Thoughtful palettes, not random RGB values
+- **Composition**: Even in randomness, maintain visual hierarchy and flow
+- **Performance**: Smooth execution, optimized for real-time if animated
+- **Reproducibility**: Same seed ALWAYS produces identical output
+
+### OUTPUT FORMAT
+
+Output:
+1. **Algorithmic Philosophy** - As markdown or text explaining the generative aesthetic
+2. **Single HTML Artifact** - Self-contained interactive generative art built from `templates/viewer.html` (see STEP 0 and next section)
+
+The HTML artifact contains everything: p5.js (from CDN), the algorithm, parameter controls, and UI - all in one file that works immediately in claude.ai artifacts or any browser. Start from the template file, not from scratch.

package/src/skills-lib/algorithmic-art/references/philosophy-creation.md

@@ -0,0 +1,88 @@
+# Step 1 — Algorithmic philosophy creation
+
+Load this file to write the algorithmic philosophy (.md) — the manifesto for the generative art movement that the p5.js code will later express. Covers: how to name and articulate the philosophy (4-6 paragraphs), the critical craftsmanship-emphasis guidelines, five worked philosophy examples, the essential principles checklist, and how to deduce the subtle conceptual seed embedded invisibly into the algorithm's parameters.
+
+## ALGORITHMIC PHILOSOPHY CREATION
+
+To begin, create an ALGORITHMIC PHILOSOPHY (not static images or templates) that will be interpreted through:
+- Computational processes, emergent behavior, mathematical beauty
+- Seeded randomness, noise fields, organic systems
+- Particles, flows, fields, forces
+- Parametric variation and controlled chaos
+
+### THE CRITICAL UNDERSTANDING
+- What is received: Some subtle input or instructions by the user to take into account, but use as a foundation; it should not constrain creative freedom.
+- What is created: An algorithmic philosophy/generative aesthetic movement.
+- What happens next: The same version receives the philosophy and EXPRESSES IT IN CODE - creating p5.js sketches that are 90% algorithmic generation, 10% essential parameters.
+
+Consider this approach:
+- Write a manifesto for a generative art movement
+- The next phase involves writing the algorithm that brings it to life
+
+The philosophy must emphasize: Algorithmic expression. Emergent behavior. Computational beauty. Seeded variation.
+
+### HOW TO GENERATE AN ALGORITHMIC PHILOSOPHY
+
+**Name the movement** (1-2 words): "Organic Turbulence" / "Quantum Harmonics" / "Emergent Stillness"
+
+**Articulate the philosophy** (4-6 paragraphs - concise but complete):
+
+To capture the ALGORITHMIC essence, express how this philosophy manifests through:
+- Computational processes and mathematical relationships?
+- Noise functions and randomness patterns?
+- Particle behaviors and field dynamics?
+- Temporal evolution and system states?
+- Parametric variation and emergent complexity?
+
+**CRITICAL GUIDELINES:**
+- **Avoid redundancy**: Each algorithmic aspect should be mentioned once. Avoid repeating concepts about noise theory, particle dynamics, or mathematical principles unless adding new depth.
+- **Emphasize craftsmanship REPEATEDLY**: The philosophy MUST stress multiple times that the final algorithm should appear as though it took countless hours to develop, was refined with care, and comes from someone at the absolute top of their field. This framing is essential - repeat phrases like "meticulously crafted algorithm," "the product of deep computational expertise," "painstaking optimization," "master-level implementation."
+- **Leave creative space**: Be specific about the algorithmic direction, but concise enough that the next Claude has room to make interpretive implementation choices at an extremely high level of craftsmanship.
+
+The philosophy must guide the next version to express ideas ALGORITHMICALLY, not through static images. Beauty lives in the process, not the final frame.
+
+### PHILOSOPHY EXAMPLES
+
+**"Organic Turbulence"**
+Philosophy: Chaos constrained by natural law, order emerging from disorder.
+Algorithmic expression: Flow fields driven by layered Perlin noise. Thousands of particles following vector forces, their trails accumulating into organic density maps. Multiple noise octaves create turbulent regions and calm zones. Color emerges from velocity and density - fast particles burn bright, slow ones fade to shadow. The algorithm runs until equilibrium - a meticulously tuned balance where every parameter was refined through countless iterations by a master of computational aesthetics.
+
+**"Quantum Harmonics"**
+Philosophy: Discrete entities exhibiting wave-like interference patterns.
+Algorithmic expression: Particles initialized on a grid, each carrying a phase value that evolves through sine waves. When particles are near, their phases interfere - constructive interference creates bright nodes, destructive creates voids. Simple harmonic motion generates complex emergent mandalas. The result of painstaking frequency calibration where every ratio was carefully chosen to produce resonant beauty.
+
+**"Recursive Whispers"**
+Philosophy: Self-similarity across scales, infinite depth in finite space.
+Algorithmic expression: Branching structures that subdivide recursively. Each branch slightly randomized but constrained by golden ratios. L-systems or recursive subdivision generate tree-like forms that feel both mathematical and organic. Subtle noise perturbations break perfect symmetry. Line weights diminish with each recursion level. Every branching angle the product of deep mathematical exploration.
+
+**"Field Dynamics"**
+Philosophy: Invisible forces made visible through their effects on matter.
+Algorithmic expression: Vector fields constructed from mathematical functions or noise. Particles born at edges, flowing along field lines, dying when they reach equilibrium or boundaries. Multiple fields can attract, repel, or rotate particles. The visualization shows only the traces - ghost-like evidence of invisible forces. A computational dance meticulously choreographed through force balance.
+
+**"Stochastic Crystallization"**
+Philosophy: Random processes crystallizing into ordered structures.
+Algorithmic expression: Randomized circle packing or Voronoi tessellation. Start with random points, let them evolve through relaxation algorithms. Cells push apart until equilibrium. Color based on cell size, neighbor count, or distance from center. The organic tiling that emerges feels both random and inevitable. Every seed produces unique crystalline beauty - the mark of a master-level generative algorithm.
+
+*These are condensed examples. The actual algorithmic philosophy should be 4-6 substantial paragraphs.*
+
+### ESSENTIAL PRINCIPLES
+- **ALGORITHMIC PHILOSOPHY**: Creating a computational worldview to be expressed through code
+- **PROCESS OVER PRODUCT**: Always emphasize that beauty emerges from the algorithm's execution - each run is unique
+- **PARAMETRIC EXPRESSION**: Ideas communicate through mathematical relationships, forces, behaviors - not static composition
+- **ARTISTIC FREEDOM**: The next Claude interprets the philosophy algorithmically - provide creative implementation room
+- **PURE GENERATIVE ART**: This is about making LIVING ALGORITHMS, not static images with randomness
+- **EXPERT CRAFTSMANSHIP**: Repeatedly emphasize the final algorithm must feel meticulously crafted, refined through countless iterations, the product of deep expertise by someone at the absolute top of their field in computational aesthetics
+
+**The algorithmic philosophy should be 4-6 paragraphs long.** Fill it with poetic computational philosophy that brings together the intended vision. Avoid repeating the same points. Output this algorithmic philosophy as a .md file.
+
+---
+
+## DEDUCING THE CONCEPTUAL SEED
+
+**CRITICAL STEP**: Before implementing the algorithm, identify the subtle conceptual thread from the original request.
+
+**THE ESSENTIAL PRINCIPLE**:
+The concept is a **subtle, niche reference embedded within the algorithm itself** - not always literal, always sophisticated. Someone familiar with the subject should feel it intuitively, while others simply experience a masterful generative composition. The algorithmic philosophy provides the computational language. The deduced concept provides the soul - the quiet conceptual DNA woven invisibly into parameters, behaviors, and emergence patterns.
+
+This is **VERY IMPORTANT**: The reference must be so refined that it enhances the work's depth without announcing itself. Think like a jazz musician quoting another song through algorithmic harmony - only those who know will catch it, but everyone appreciates the generative beauty.
+

package/src/skills-lib/canvas-design/SKILL.md

@@ -50,29 +50,7 @@ To capture the VISUAL essence, express how the philosophy manifests through:
 
 The philosophy must guide the next version to express ideas VISUALLY, not through text. Information lives in design, not paragraphs.
 
-### PHILOSOPHY EXAMPLES
-
-**"Concrete Poetry"**
-Philosophy: Communication through monumental form and bold geometry.
-Visual expression: Massive color blocks, sculptural typography (huge single words, tiny labels), Brutalist spatial divisions, Polish poster energy meets Le Corbusier. Ideas expressed through visual weight and spatial tension, not explanation. Text as rare, powerful gesture - never paragraphs, only essential words integrated into the visual architecture. Every element placed with the precision of a master craftsman.
-
-**"Chromatic Language"**
-Philosophy: Color as the primary information system.
-Visual expression: Geometric precision where color zones create meaning. Typography minimal - small sans-serif labels letting chromatic fields communicate. Think Josef Albers' interaction meets data visualization. Information encoded spatially and chromatically. Words only to anchor what color already shows. The result of painstaking chromatic calibration.
-
-**"Analog Meditation"**
-Philosophy: Quiet visual contemplation through texture and breathing room.
-Visual expression: Paper grain, ink bleeds, vast negative space. Photography and illustration dominate. Typography whispered (small, restrained, serving the visual). Japanese photobook aesthetic. Images breathe across pages. Text appears sparingly - short phrases, never explanatory blocks. Each composition balanced with the care of a meditation practice.
-
-**"Organic Systems"**
-Philosophy: Natural clustering and modular growth patterns.
-Visual expression: Rounded forms, organic arrangements, color from nature through architecture. Information shown through visual diagrams, spatial relationships, iconography. Text only for key labels floating in space. The composition tells the story through expert spatial orchestration.
-
-**"Geometric Silence"**
-Philosophy: Pure order and restraint.
-Visual expression: Grid-based precision, bold photography or stark graphics, dramatic negative space. Typography precise but minimal - small essential text, large quiet zones. Swiss formalism meets Brutalist material honesty. Structure communicates, not words. Every alignment the work of countless refinements.
-
-*These are condensed examples. The actual design philosophy should be 4-6 substantial paragraphs.*
+For 5 worked examples of the tone/length expected ("Concrete Poetry," "Chromatic Language," etc.), load `references/philosophy-examples.md`.
 
 ### ESSENTIAL PRINCIPLES
 - **VISUAL PHILOSOPHY**: Create an aesthetic worldview to be expressed through design
@@ -99,21 +77,9 @@ This is **VERY IMPORTANT**: The reference must be refined so it enhances the wor
 
 ## CANVAS CREATION
 
-With both the philosophy and the conceptual framework established, express it on a canvas. Take a moment to gather thoughts and clear the mind. Use the design philosophy created and the instructions below to craft a masterpiece, embodying all aspects of the philosophy with expert craftsmanship.
-
-**IMPORTANT**: For any type of content, even if the user requests something for a movie/game/book, the approach should still be sophisticated. Never lose sight of the idea that this should be art, not something that's cartoony or amateur.
+With both the philosophy and the conceptual framework established, the next step is to express it on a canvas as a single, downloadable .pdf or .png (museum/magazine quality, minimal text as visual accent, human-crafted feel — never AI-generated-looking).
 
-To create museum or magazine quality work, use the design philosophy as the foundation. Create one single page, highly visual, design-forward PDF or PNG output (unless asked for more pages). Generally use repeating patterns and perfect shapes. Treat the abstract philosophical design as if it were a scientific bible, borrowing the visual language of systematic observation—dense accumulation of marks, repeated elements, or layered patterns that build meaning through patient repetition and reward sustained viewing. Add sparse, clinical typography and systematic reference markers that suggest this could be a diagram from an imaginary discipline, treating the invisible subject with the same reverence typically reserved for documenting observable phenomena. Anchor the piece with simple phrase(s) or details positioned subtly, using a limited color palette that feels intentional and cohesive. Embrace the paradox of using analytical visual language to express ideas about human experience: the result should feel like an artifact that proves something ephemeral can be studied, mapped, and understood through careful attention. This is true art. 
-
-**Text as a contextual element**: Text is always minimal and visual-first, but let context guide whether that means whisper-quiet labels or bold typographic gestures. A punk venue poster might have larger, more aggressive type than a minimalist ceramics studio identity. Most of the time, font should be thin. All use of fonts must be design-forward and prioritize visual communication. Regardless of text scale, nothing falls off the page and nothing overlaps. Every element must be contained within the canvas boundaries with proper margins. Check carefully that all text, graphics, and visual elements have breathing room and clear separation. This is non-negotiable for professional execution. **IMPORTANT: Use different fonts if writing text. Search the `./canvas-fonts` directory. Regardless of approach, sophistication is non-negotiable.**
-
-Download and use whatever fonts are needed to make this a reality. Get creative by making the typography actually part of the art itself -- if the art is abstract, bring the font onto the canvas, not typeset digitally.
-
-To push boundaries, follow design instinct/intuition while using the philosophy as a guiding principle. Embrace ultimate design freedom and choice. Push aesthetics and design to the frontier. 
-
-**CRITICAL**: To achieve human-crafted quality (not AI-generated), create work that looks like it took countless hours. Make it appear as though someone at the absolute top of their field labored over every detail with painstaking care. Ensure the composition, spacing, color choices, typography - everything screams expert-level craftsmanship. Double-check that nothing overlaps, formatting is flawless, every detail perfect. Create something that could be shown to people to prove expertise and rank as undeniably impressive.
-
-Output the final result as a single, downloadable .pdf or .png file, alongside the design philosophy used as a .md file.
+**Before generating the file**, load `references/canvas-execution.md` in full — it has the mandatory execution instructions (composition standards, the text-as-contextual-element rule, and the `./canvas-fonts` asset-fetching procedure) and must not be skipped.
 
 ---
 
@@ -127,4 +93,9 @@ Take a second pass. Go back to the code and refine/polish further to make this a
 
 ## MULTI-PAGE OPTION
 
-To create additional pages when requested, create more creative pages along the same lines as the design philosophy but distinctly different as well. Bundle those pages in the same .pdf or many .pngs. Treat the first page as just a single page in a whole coffee table book waiting to be filled. Make the next pages unique twists and memories of the original. Have them almost tell a story in a very tasteful way. Exercise full creative freedom.
+To create additional pages when requested, create more creative pages along the same lines as the design philosophy but distinctly different as well. Bundle those pages in the same .pdf or many .pngs. Treat the first page as just a single page in a whole coffee table book waiting to be filled. Make the next pages unique twists and memories of the original. Have them almost tell a story in a very tasteful way. Exercise full creative freedom.
+
+## References (load on demand)
+
+- `references/philosophy-examples.md` — 5 worked design-philosophy examples for calibration while writing Step 1's .md file.
+- `references/canvas-execution.md` — the full mandatory execution instructions for Step 3 (Canvas Creation), including the `./canvas-fonts` lazy-asset fetch procedure. Load this before generating the .pdf/.png, every time.

package/src/skills-lib/canvas-design/references/canvas-execution.md

@@ -0,0 +1,21 @@
+# Canvas Creation — Full Execution Instructions
+
+Load this file when actually producing the .pdf/.png (Step 3, after the design philosophy .md exists and the subtle reference is deduced). This is the detailed execution instruction — read it in full before generating the canvas, do not skip it.
+
+With both the philosophy and the conceptual framework established, express it on a canvas. Take a moment to gather thoughts and clear the mind. Use the design philosophy created and the instructions below to craft a masterpiece, embodying all aspects of the philosophy with expert craftsmanship.
+
+**IMPORTANT**: For any type of content, even if the user requests something for a movie/game/book, the approach should still be sophisticated. Never lose sight of the idea that this should be art, not something that's cartoony or amateur.
+
+To create museum or magazine quality work, use the design philosophy as the foundation. Create one single page, highly visual, design-forward PDF or PNG output (unless asked for more pages). Generally use repeating patterns and perfect shapes. Treat the abstract philosophical design as if it were a scientific bible, borrowing the visual language of systematic observation—dense accumulation of marks, repeated elements, or layered patterns that build meaning through patient repetition and reward sustained viewing. Add sparse, clinical typography and systematic reference markers that suggest this could be a diagram from an imaginary discipline, treating the invisible subject with the same reverence typically reserved for documenting observable phenomena. Anchor the piece with simple phrase(s) or details positioned subtly, using a limited color palette that feels intentional and cohesive. Embrace the paradox of using analytical visual language to express ideas about human experience: the result should feel like an artifact that proves something ephemeral can be studied, mapped, and understood through careful attention. This is true art.
+
+**Text as a contextual element**: Text is always minimal and visual-first, but let context guide whether that means whisper-quiet labels or bold typographic gestures. A punk venue poster might have larger, more aggressive type than a minimalist ceramics studio identity. Most of the time, font should be thin. All use of fonts must be design-forward and prioritize visual communication. Regardless of text scale, nothing falls off the page and nothing overlaps. Every element must be contained within the canvas boundaries with proper margins. Check carefully that all text, graphics, and visual elements have breathing room and clear separation. This is non-negotiable for professional execution. **IMPORTANT: Use different fonts if writing text. Search the `./canvas-fonts` directory. Regardless of approach, sophistication is non-negotiable.**
+
+**`./canvas-fonts` is a lazy asset** (2026-07 audit Tarefa 2.8): the ~54 `.ttf` files are not shipped in the npm package, only in the git repo and in on-demand downloads. If the directory is empty or missing when you go to search it, run `npx --yes wizz-method fetch-assets --bundle canvas-fonts --dest ./canvas-fonts` (path relative to this skill's own root) before picking a font. If that fails (offline / npx unavailable), download `https://github.com/wizzcomms/wizz-method/releases/download/assets-v1/canvas-fonts.tar.gz` manually and extract it into `./canvas-fonts` (tell the user clearly what happened instead of silently falling back to a system font, since font variety is part of what makes the output non-generic).
+
+Download and use whatever fonts are needed to make this a reality. Get creative by making the typography actually part of the art itself -- if the art is abstract, bring the font onto the canvas, not typeset digitally.
+
+To push boundaries, follow design instinct/intuition while using the philosophy as a guiding principle. Embrace ultimate design freedom and choice. Push aesthetics and design to the frontier.
+
+**CRITICAL**: To achieve human-crafted quality (not AI-generated), create work that looks like it took countless hours. Make it appear as though someone at the absolute top of their field labored over every detail with painstaking care. Ensure the composition, spacing, color choices, typography - everything screams expert-level craftsmanship. Double-check that nothing overlaps, formatting is flawless, every detail perfect. Create something that could be shown to people to prove expertise and rank as undeniably impressive.
+
+Output the final result as a single, downloadable .pdf or .png file, alongside the design philosophy used as a .md file.

package/src/skills-lib/canvas-design/references/philosophy-examples.md

@@ -0,0 +1,25 @@
+# Philosophy Examples
+
+Load this file for calibration while writing the design philosophy .md (Step 1) — these are condensed examples of the tone, length, and visual-first thinking expected. Do not copy them; write an original philosophy for the actual request.
+
+**"Concrete Poetry"**
+Philosophy: Communication through monumental form and bold geometry.
+Visual expression: Massive color blocks, sculptural typography (huge single words, tiny labels), Brutalist spatial divisions, Polish poster energy meets Le Corbusier. Ideas expressed through visual weight and spatial tension, not explanation. Text as rare, powerful gesture - never paragraphs, only essential words integrated into the visual architecture. Every element placed with the precision of a master craftsman.
+
+**"Chromatic Language"**
+Philosophy: Color as the primary information system.
+Visual expression: Geometric precision where color zones create meaning. Typography minimal - small sans-serif labels letting chromatic fields communicate. Think Josef Albers' interaction meets data visualization. Information encoded spatially and chromatically. Words only to anchor what color already shows. The result of painstaking chromatic calibration.
+
+**"Analog Meditation"**
+Philosophy: Quiet visual contemplation through texture and breathing room.
+Visual expression: Paper grain, ink bleeds, vast negative space. Photography and illustration dominate. Typography whispered (small, restrained, serving the visual). Japanese photobook aesthetic. Images breathe across pages. Text appears sparingly - short phrases, never explanatory blocks. Each composition balanced with the care of a meditation practice.
+
+**"Organic Systems"**
+Philosophy: Natural clustering and modular growth patterns.
+Visual expression: Rounded forms, organic arrangements, color from nature through architecture. Information shown through visual diagrams, spatial relationships, iconography. Text only for key labels floating in space. The composition tells the story through expert spatial orchestration.
+
+**"Geometric Silence"**
+Philosophy: Pure order and restraint.
+Visual expression: Grid-based precision, bold photography or stark graphics, dramatic negative space. Typography precise but minimal - small essential text, large quiet zones. Swiss formalism meets Brutalist material honesty. Structure communicates, not words. Every alignment the work of countless refinements.
+
+*These are condensed examples. The actual design philosophy should be 4-6 substantial paragraphs.*

package/src/skills-lib/cerebro/SKILL.md

@@ -23,11 +23,9 @@ Pesquisa:  /prospect
 Sync:      /sync
 ```
 
----
-
 ## REGRA DE OURO — Mínimo de tokens em toda operação
 
-**Nunca leia um arquivo grande inteiro. Sempre grep primeiro, depois Read com offset+limit.**
+**Nunca leia um arquivo grande inteiro. Sempre grep primeiro, depois Read com offset+limit.** Isso vale para TODO comando abaixo, mesmo quando o arquivo de referência específico do comando não repetir a regra.
 
 ```
 # Padrão obrigatório antes de qualquer Read:
@@ -52,8 +50,6 @@ Read offset=(linha-5) limit=15       # → lê só o trecho necessário
 - `CONTEXT.md` — Edit cirúrgico nos campos alterados. Nunca reescrever completo.
 - `_decisions/`, `_learnings/`, `_content/` — Write direto, sem ler arquivo existente.
 
----
-
 ## Vault
 
 Vault padrão conhecido: `~/Documents/projects/Obsidian Vault/`
@@ -68,8 +64,6 @@ Vault padrão conhecido: `~/Documents/projects/Obsidian Vault/`
 grep -m1 "^vault:" "/caminho/CEREBRO.md"
 ```
 
----
-
 ## Estrutura do vault
 
 ```
@@ -77,6 +71,7 @@ grep -m1 "^vault:" "/caminho/CEREBRO.md"
   CEREBRO.md              ← índice central (identidade + projetos ativos — manter < 150 linhas úteis)
   _index/
     sessions.md           ← log histórico de sessões (append-only, nunca lido)
+    cerebro-archive.md    ← excedente do CEREBRO.md movido na compactação do /salvar (grep, nunca Read completo)
   _knowledge/
     about-me.md
     goals.md
@@ -90,278 +85,18 @@ grep -m1 "^vault:" "/caminho/CEREBRO.md"
 
 **Regra de links:** sempre wiki-links `[[arquivo]]` dentro do vault. CONTEXT.md usa Markdown puro.
 
----
-
-## Comandos
-
----
-
-### /salvar
-
-**Objetivo:** fechar sessão, persistir o que aconteceu. Máximo de tokens: ~800 input + edits.
-
-**Passos (executar em ordem, sem desvios):**
-
-**1. Localizar projeto e bloco no CEREBRO.md (1 bash call)**
-```bash
-VAULT=~/Documents/projects/Obsidian\ Vault
-PROJ=construcao   # inferir do diretório atual ou contexto
-grep -n "### \|Última sessão\|Pendente" "$VAULT/CEREBRO.md" | grep -A2 -i "$PROJ"
-wc -l "$VAULT/projetos/$PROJ.md"
-```
-
-**2. Ler apenas o final do arquivo do projeto (1 Read)**
-- `offset = (total_linhas - 80)`, `limit = 80`
-- Isso captura: Hoje atual, Onde parou, O que falta, tabela Sessões
-
-**3. Construir as alterações na memória, depois aplicar (Edits atômicos)**
-
-Em `projetos/[nome].md`, sempre adicionar ACIMA da seção "Onde parou" existente:
-```markdown
-## Hoje ([data] — [sessão])
-- [item 1]
-- [item 2]
-```
-
-Substituir "Onde parou" e "O que falta" com o estado novo.
-
-Adicionar linha na tabela Sessões (append na última linha da tabela).
-
-**4. Atualizar bloco do projeto em CEREBRO.md (1 Edit)**
-- Usar grep do passo 1 para saber as linhas exatas
-- Edit cirúrgico apenas nas linhas "Última sessão" e "Pendente"
-
-**5. Atualizar CONTEXT.md (Edit cirúrgico — só campos alterados)**
-- Nunca reescrever o arquivo inteiro
-- Editar apenas: data no cabeçalho, pendências em "O que falta", commit hash se mudou
-
-**6. Append em `_index/sessions.md` (1 Edit ou Write se não existir)**
-```markdown
-| [data] | [projeto] | [resumo 1 linha] |
-```
-
-**7. Se houve decisão ou aprendizado relevante:** criar arquivo em `_decisions/` ou `_learnings/` (Write direto, sem Read prévio).
-
-**8. Confirmar em 2 linhas** o que foi salvo.
-
----
-
-### /ver
-
-**Objetivo:** mostrar estado atual rápido. Máximo: 1 Read.
-
-**Passos:**
-1. `wc -l "$VAULT/projetos/$PROJ.md"` → total de linhas
-2. Read com `offset=(n-60)`, `limit=60` → pega Onde parou + O que falta + Sessões
-3. Retornar em formato condensado:
-
-```
-## [Projeto] — [data última sessão]
-Stack: [1 linha]
-Onde parou: [bullets]
-O que falta: [checkboxes]
-Última sessão: [1 linha]
-```
-
----
-
-### /dia
+## Comandos (load on demand)
 
-**Objetivo:** briefing de início do dia. Ler apenas o essencial de cada projeto ativo.
-
-**Passos:**
-1. `grep -A4 "### " "$VAULT/CEREBRO.md"` → lista todos os blocos de projeto (nome + última sessão + pendente)
-2. Para cada projeto com status ativo (🟢🟡): tail-read de 30 linhas (`offset=n-30`)
-3. Montar briefing consolidado
-4. Não ler `_knowledge/goals.md` a menos que o usuário peça explicitamente
-
-**Formato de saída:**
-```
-## Briefing — [data]
-
-**[Projeto]** — [emoji status]
-↳ Última sessão: [data] — [resumo]
-↳ Pendente: [items]
-
-**Foco sugerido:** [1-2 linhas]
-```
-
----
-
-### /dump
-
-**Objetivo:** captura rápida. Zero reads.
-
-**Passos:**
-1. Receber o conteúdo (do argumento ou perguntar em 1 mensagem)
-2. Classificar: ideia / aprendizado / decisão / referência / conteúdo
-3. Write direto no arquivo certo — sem ler nada antes
-4. `grep -n "## Conteúdo em aberto\|## Aprendizados" "$VAULT/CEREBRO.md"` → achar linha para Edit de 1 linha
-5. Confirmar em 1 linha
-
----
+Cada comando tem seu procedimento passo-a-passo completo em um arquivo de referência. Carregue só o arquivo do grupo do comando que o usuário disparou:
 
-### /decisao
-
-**Objetivo:** registrar decisão. Zero reads de arquivos existentes.
-
-**Passos:**
-1. Receber descrição + alternativas + projeto (perguntar tudo de uma vez se não passado)
-2. Write direto em `_decisions/YYYY-MM-DD-[slug].md` (template abaixo)
-3. `grep -n "## Decisões recentes" "$VAULT/CEREBRO.md"` → linha
-4. Edit para inserir referência wiki-link logo abaixo dessa linha
-5. Se há projeto: `grep -n "## Decisões" "$VAULT/projetos/$PROJ.md"` → Edit 1 linha
-
-**Template `_decisions/YYYY-MM-DD-[slug].md`:**
-```markdown
-# [Título]
-> Data: [data] | Projeto: [[projetos/nome]] | Status: ativa
-
-## Decisão
-[1-2 linhas]
-
-## Contexto
-[por que foi necessária]
-
-## Alternativas
-- [A] — descartada: [motivo]
-- [B] — descartada: [motivo]
-
-## Raciocínio
-[por que esta]
-
-## Consequências
-[o que muda]
-```
-
----
-
-### /conteudo
-
-**Objetivo:** capturar ideia de conteúdo. Zero reads.
-
-**Passos:**
-1. Receber ideia + plataforma + formato + gancho + CTA (perguntar tudo de uma vez)
-2. Write direto em `_content/YYYY-MM-DD-[slug].md`
-3. `grep -n "## Conteúdo em aberto" "$VAULT/CEREBRO.md"` → Edit 1 linha abaixo
-
-**Template `_content/YYYY-MM-DD-[slug].md`:**
-```markdown
-# [Título]
-> Data: [data] | Plataforma: [plataforma] | Status: ideia
-
-## Ideia
-[1-3 linhas]
-
-## Formato / Gancho / CTA
-- Formato: [tipo]
-- Gancho: [o que torna diferente]
-- CTA: [ação / objetivo]
-
-## Rascunho
-[espaço livre]
-```
-
----
-
-### /prospect
-
-**Objetivo:** pesquisar e registrar prospect.
-
-**Passos:**
-1. Receber nome/empresa + objetivo (tudo de uma vez)
-2. Pesquisar via web search (setor, presença digital, dores, oportunidades)
-3. Write direto em `_prospects/YYYY-MM-DD-[slug].md`
-4. Resumo executivo para o usuário (não precisa estar no arquivo)
-
-**Template `_prospects/YYYY-MM-DD-[slug].md`:**
-```markdown
-# [Nome / Empresa]
-> Data: [data] | Objetivo: [tipo] | Status: pesquisado
-
-## Perfil
-- Setor / Tamanho / Produto / Público-alvo
-
-## Presença digital
-- Site / Redes / Ads ativos
-
-## Oportunidade e ângulo de abordagem
-[o que oferecer e como entrar]
-
-## Próximo passo
-- [ ] [ação]
-```
-
----
-
-### /sync
-
-**Objetivo:** espelhar CONTEXT.md → vault após sessão no Codex.
-
-**Passos:**
-1. Read `CONTEXT.md` no diretório atual (arquivo pequeno — OK ler completo)
-2. `wc -l "$VAULT/projetos/$PROJ.md"` → tail Read das últimas 60 linhas
-3. Identificar diferenças em: estado atual, pendências, decisões
-4. Edit cirúrgico em `projetos/[nome].md` (só seções alteradas)
-5. `grep -n "Última sessão\|Pendente" "$VAULT/CEREBRO.md" | grep -i "$PROJ"` → Edit linha
-6. Append linha em `_index/sessions.md`
-7. Confirmar em 2 linhas
-
----
-
-### /iniciar
-
-**Objetivo:** configurar projeto novo. Só cria arquivos — não lê nada além do CEREBRO.md mínimo.
-
-**Passos:**
-1. Descobrir vault (ver seção Vault)
-2. `grep -c "$PROJ" "$VAULT/CEREBRO.md"` → verificar se projeto já existe (0 = novo)
-3. Se novo: entrevistar em 1 mensagem (organização, info essencial, estilo, modo)
-4. Write `projetos/[nome].md` com template
-5. `grep -n "## Projetos" "$VAULT/CEREBRO.md"` → Edit para inserir entrada
-6. Confirmar
-
-**Template `projetos/[nome].md`:**
-```markdown
-# [Nome] — Estado Atual
-> Atualizado: [data]
-
-## Preferências
-- Organização: [resposta]
-- Info essencial: [resposta]
-- Estilo: [resposta]
-- Modo: [registro / sugestivo]
-
-## Stack
-[breve descrição]
-
-## Onde parou
--
-
-## O que falta
-- [ ]
-
-## Sessões
-| Data | Resumo |
-|------|--------|
-|      |        |
-```
-
-**Template bloco em CEREBRO.md:**
-```markdown
-### [Nome] [emoji]
-- **Stack:** [stack]
-- **Última sessão:** [data] — [resumo]
-- **Pendente:** [pendências]
-- **Estado atual:** [[projetos/nome]]
-```
-
----
+- `references/comandos-sessao.md` — `/iniciar` (configurar projeto novo), `/ver` (estado atual rápido), `/salvar` (fechar sessão) com passos, orçamento de tokens e templates completos.
+- `references/comandos-rotina-e-captura.md` — `/dia` (briefing do dia), `/dump` (captura rápida), `/decisao` (registrar decisão), `/conteudo` (ideia de conteúdo) com passos e templates completos.
+- `references/comandos-pesquisa-e-sync.md` — `/prospect` (pesquisar prospect) e `/sync` (espelhar CONTEXT.md → vault) com passos e templates completos.
 
 ## Regras gerais
 
 - Wiki-links `[[arquivo]]` dentro do vault. Markdown puro no CONTEXT.md.
-- Datas absolutas (ex: "Apr 23 2026") — nunca relativas.
+- Datas absolutas no formato `YYYY-MM-DD`, nunca relativas ("ontem", "semana passada"). Fatos voláteis (versão publicada, estado de release, etc.) levam prefixo `em YYYY-MM-DD:` no texto; na releitura, o agente trata como snapshot daquele momento, não como fato atual.
 - Nunca apagar histórico — só acrescentar.
 - Log histórico de sessões vai em `_index/sessions.md`, não no CEREBRO.md — mantém o CEREBRO.md curto.
 - Resumos: 1 linha por item.