feat(placeholder): add placeholder mode for asset-missing workflows

- agency-archivist: frontmatter updated + 3-option pattern + placeholder section - agency-visual-generator: 3-option pattern (block/placeholder/skip) - agency-web-developer: placeholder inline SVG/CSS option - agency-design-system: placeholder tokens option All consuming skills now offer: 1. Block and request assets (traditional) 2. Placeholder mode for continuous workflow ⚡ 3. Skip asset if optional Pattern allows prototyping without real assets.
2026-03-11 10:42:47 +01:00 · 2026-03-11 10:42:47 +01:00 · 91d70558ac
commit 91d70558ac
parent 092bae7608
4 changed files with 139 additions and 49 deletions
--- a/agency-archivist/SKILL.md
+++ b/agency-archivist/SKILL.md
@ -1,8 +1,9 @@
 ---
 name: agency-archivist
-description: "Gestire archivi di risorse (immagini, video, documenti) per progetti agency. Usare quando: (1) cliente invia zip/URL di asset, (2) estrarre e organizzare risorse in {project}/assets/, (3) catalogare risorse con descrizioni e tag, (4) cercare risorse per altre skill, (5) richiedere risorse mancanti in modo proattivo."
+description: "Gestire archivi di risorse (immagini, video, documenti) per progetti agency. Usare quando: (1) cliente invia zip/URL di asset, (2) estrarre e organizzare risorse in {project}/assets/, (3) catalogare risorse con descrizioni e tag, (4) cercare risorse per altre skill, (5) richiedere risorse mancanti con 3 opzioni: blocco/upload, placeholder mode per continuità workflow, o skip asset. Supporta pattern placeholder per lavorare senza asset reali."
 ---

+
 # Agency Archivist — Gestione Risorse e Asset

 Gestisce upload, estrazione, catalogazione e ricerca di risorse multimediali per i progetti della suite.
@ -224,11 +225,25 @@ _Generato: {data} | Totale: {N} risorse_

 1. Leggi `{project}/assets/catalog.md`
 2. Cerca risorse per tag/tipo/descrizione
-3. Se trovi: Usa path completo
-4. Se NON trovi: "🔒 Bloccato: servono [descrizione risorse]"
+3. Se trovi: Usa path completo ✅
+4. Se NON trovi: **Scegli una delle 3 opzioni:**
+
+   **OPZIONE A — Blocco Task (strict):**
+   - "🔒 Bloccato: servono [descrizione risorse]"
   - Tagga: @agency-archivist
-   - Descrivi: Cosa manca (es. "foto prodotto su sfondo bianco")
-   - Specifica: Requisiti tecnici (es. "minimo 1000x1000px, JPG")
+   - Descrivi: Cosa manca
+   - Attendi upload prima di procedere
+
+   **OPZIONE B — Placeholder Mode (consigliata per prototipi):**
+   - Continua con asset placeholder/generici
+   - Documenta in output: "⚠️ Usati placeholder per [asset] — aggiorna con asset reali"
+   - Crea sezione "Assets Placeholder" nel deliverable
+   - Non bloccare il workflow
+
+   **OPZIONE C — Skip Asset (se opzionale):**
+   - Procedi senza quella risorsa specifica
+   - Adatta il design/contenuto di conseguenza
+   - Documenta: "⏭️ Asset [nome] omesso — spazio riservato"
 ```

 ### **Comportamento Proattivo di Archivist**
@ -237,27 +252,78 @@ _Generato: {data} | Totale: {N} risorse_

 1. **Analizza richiesta:** Cosa serve esattamente?
 2. **Verifica catalogo:** Conferma che manca davvero
-3. **Risposta strutturata:**
+3. **Risposta strutturata con 3 opzioni:**
   ```
-   ⚠️ **Risorse Mancanti**
+   ⚠️ **Risorse Mancanti per [task]**

-   Per eseguire [task], servono:
+   Per completare questo task servono:
   - [ ] Foto prodotto (sfondo bianco, minimo 1000x1000px)
   - [ ] Logo aziendale (PNG trasparente)
   - [ ] Brand colors (codici esadecimali)

-   **Vuoi caricare queste risorse ora?**
+   **Come vuoi procedere?**

-   Opzioni:
-   1. Allega zip/URL con gli asset
-   2. Descrivi cosa hai a disposizione
-   3. Salta per ora (usa placeholder)
+   1️⃣ **Upload asset** — Allega zip/URL con le risorse reali
+   2️⃣ **Descrivi cosa hai** — Fornisci dettagli per orientare la ricerca
+   3️⃣ **Continua con placeholder** ⚡ — Procedi con asset generici/placeholder
+      (consigliato per prototipi, wireframe, o quando l'asset non è critico)
   ```
 4. **Dopo upload:** Esegui re-scan e aggiorna catalogo
 5. **Sblocca skill:** Notifica: "✅ Risorse pronte, puoi procedere"

 ---

+## Pattern Placeholder per Asset Mancanti
+
+Quando si sceglie l'**Opzione 3 — Continua con placeholder**, seguire questo pattern standardizzato:
+
+### 1. Identificazione Placeholder
+
+Per ogni asset mancante, crea un placeholder con:
+- **Tipo:** `placeholder`
+- **Nome:** `placeholder_[tipo]_[descrizione_breve].[ext]`
+- **Dimensioni:** Specificare dimensioni target (es. "1200x800px")
+- **Note:** Cosa dovrebbe rappresentare
+
+### 2. Documentazione nel Deliverable
+
+Includi sempre una sezione **"Assets Placeholder"** nel deliverable:
+
+```markdown
+## ⚠️ Assets Placeholder
+
+I seguenti elementi sono stati realizzati con asset generici/placeholder:
+
+| Posizione | Asset Mancante | Tipo Richiesto | Note |
+|-----------|----------------|----------------|------|
+| Hero section | `placeholder_hero_product.jpg` | Foto prodotto 1920x1080 | Sfondo hero, prodotto su bianco |
+| Logo header | `placeholder_logo.png` | Logo PNG trasparente 512x512 | Logo aziendale |
+| Team section | `placeholder_team_01.jpg` | Foto team 800x600 | 3 placeholder per 3 membri |
+
+**Per completare:** Sostituire i placeholder con asset reali mantenendo le stesse dimensioni e nomi file.
+```
+
+### 3. Comportamento delle Skill Consumatrici
+
+Le skill che usano asset (es. agency-visual-generator, agency-web-developer) devono:
+
+1. **Controllare catalogo:** Verificare se asset esiste o è placeholder
+2. **Se placeholder:**
+   - Procedere con il placeholder (non bloccare)
+   - Aggiungere nota nel deliverable
+   - Mantenere struttura/layout come se fosse reale
+3. **Se asset reale:** Usare normalmente
+4. **Documentare sempre:** Lista asset usati (reali o placeholder) nel deliverable
+
+### 4. Vantaggi del Pattern Placeholder
+
+- **Prototipi veloci:** Non bloccare workflow per asset mancanti
+- **Chiarezza:** Cliente vede esattamente cosa manca
+- **Iterazione:** Facile sostituire placeholder con asset reali
+- **Testing:** Verificare layout/design prima di avere asset finali
+
+---
+
 ## Script

 ### `scripts/extract_archive.js`
--- a/agency-design-system/SKILL.md
+++ b/agency-design-system/SKILL.md
@ -42,17 +42,26 @@ Traduce la direzione creativa in un design system coerente e riutilizzabile.
     - Colori: `#brand`, `#guidelines` → PDF con palette
     - Font: `#brand`, `#guidelines` → Specifiche typography
   
-2. **Se risorse mancanti:**
-   - **FERMATI** e segnala: "🔒 Bloccato: servono brand assets"
-   - Tagga: @agency-archivist
-   - Specifica:
-     ```
-     Per creare design system, servono:
-     - [ ] Logo aziendale (PNG/SVG)
-     - [ ] Brand colors (codici HEX o documento guidelines)
-     - [ ] Font (nomi o file font)
-     ```
-   - **Attendi** che archivist carichi e sblocchi
+2. **Se risorse mancanti:** **Proporre 3 opzioni**
+
+   **OPZIONE A — Blocca e richiedi asset:**
+   - "🔒 Bloccato: servono brand assets"
+   - Tagga: @agency-archivist con elenco specifico
+   - **Attendi** upload prima di procedere
+
+   **OPZIONE B — Placeholder Mode (consigliata):** ⚡
+   - Procedi con **placeholder tokens**:
+     - Logo: placeholder box grigio con testo "[LOGO]"
+     - Colori: palette neutra placeholder (#CCC, #666, #333, #FFF)
+     - Font: font-stack di sistema (Arial/Helvetica, Georgia/Times)
+   - Genera design system completo con **sezione "Placeholder Assets"**
+   - Documenta: sostituzioni da fare quando asset reali saranno disponibili
+   - **Non bloccare** — sviluppo può iniziare subito
+
+   **OPZIONE C — Design system testuale/minimal:**
+   - Crea design tokens senza riferimenti visivi specifici
+   - Focus su spacing, tipografia scale, layout principles
+   - Documenta: "⏭️ Brand assets da integrare — design system strutturale pronto"

 3. **Typography:**
   - Font family (primary, secondary)
--- a/agency-visual-generator/SKILL.md
+++ b/agency-visual-generator/SKILL.md
@ -64,16 +64,23 @@ Genera asset visuali platform-ready basati su content approvato e style guide.
     - Immagini team: `#team`, `#people`
     - Sfondi: `#stock`, `#background`
   
-2. **Se risorse mancanti:**
-   - **FERMATI** e segnala: "🔒 Bloccato: servono [descrizione]"
-   - Tagga: @agency-archivist
-   - Specifica requisiti:
-     ```
-     Per generare [tipo asset], servono:
-     - [ ] Logo aziendale (PNG trasparente, minimo 512x512px)
-     - [ ] Foto prodotto (sfondo bianco, minimo 1000x1000px)
-     ```
-   - **Attendi** che archivist carichi e sblocchi
+2. **Se risorse mancanti:** **Proporre 3 opzioni**
+
+   **OPZIONE A — Blocca e richiedi asset:**
+   - "🔒 Bloccato: servono [descrizione]"
+   - Tagga: @agency-archivist con requisiti specifici
+   - **Attendi** upload prima di procedere
+   
+   **OPZIONE B — Placeholder Mode (consigliata):** ⚡
+   - Procedi con **placeholder generici** (color-block, pattern geometrici, testo "[LOGO]", "[FOTO]")
+   - Genera asset finale ma **documenta in sezione "Assets Placeholder"**
+   - Esempio placeholder: `placeholder_logo_512x512.png` (box grigio con testo "LOGO")
+   - **Non bloccare il workflow** — cliente può sostituire dopo
+   
+   **OPZIONE C — Genera senza asset mancanti:**
+   - Procedi **omettendo** la risorsa mancante (es. thumbnail senza logo)
+   - Adatta design di conseguenza
+   - Documenta: "⏭️ Asset [nome] omesso — design adattato"

 3. **Carica style guide:**
   - Cerca `{project}/design/style_guide.md` o `{project}/assets/brand/style_guide.md`
--- a/agency-web-developer/SKILL.md
+++ b/agency-web-developer/SKILL.md
@ -45,18 +45,26 @@ Trasforma copy e design system in siti web funzionanti con HTML semantico, CSS e
     - Immagini pagine: `#team`, `#ufficio`, `#prodotto` → Per pagine interne
     - Favicon: `#icon`, `#favicon` → Per `<head>`
   
-2. **Se risorse mancanti:**
-   - **FERMATI** e segnala: "🔒 Bloccato: servono immagini per il sito"
-   - Tagga: @agency-archivist
-   - Specifica:
-     ```
-     Per sviluppare il sito, servono:
-     - [ ] Logo (PNG/SVG, per header)
-     - [ ] Immagine hero (1920x1080, per homepage)
-     - [ ] Foto team/prodotto (per pagine interne)
-     - [ ] Favicon (32x32 o 64x64)
-     ```
-   - **Attendi** che archivist carichi e sblocchi
+2. **Se risorse mancanti:** **Proporre 3 opzioni**
+
+   **OPZIONE A — Blocca e richiedi asset:**
+   - "🔒 Bloccato: servono immagini per il sito"
+   - Tagga: @agency-archivist con elenco specifico
+   - **Attendi** upload prima di procedere
+   
+   **OPZIONE B — Placeholder Mode (consigliata):** ⚡
+   - Procedi con **placeholder inline** (SVG color-block o gradient)
+   - Esempi placeholder:
+     - Logo: `<div class="placeholder-logo">[LOGO]</div>` (stilizzato CSS)
+     - Hero: `<div class="placeholder-hero">[HERO IMAGE 1920x1080]</div>`
+     - Team: `<div class="placeholder-avatar"></div>` con iniziali
+   - Genera sito completo ma **documenta in README.md sezione "Assets Placeholder"**
+   - **Non bloccare** — cliente sostituisce asset reali dopo
+   
+   **OPZIONE C — Genera senza asset visivi:**
+   - Procedi con **design testuale/minimal** (no immagini, solo tipografia)
+   - Adatta layout: hero text-only, griglie senza foto
+   - Documenta: "⏭️ Design minimal — immagini da aggiungere in fase 2"

 3. **Crea cartella `{project}/website/`**