Conversione references in skill condivisa agency-shared-references

- Creata nuova skill agency-shared-references con 24 references centralizzate - Spostate tutte le references da cartelle sparse (references/, agency-web-developer/, agency-archivist/) in un'unica posizione - Aggiornati tutti i symlink delle 14 skills per puntare a ../agency-shared-references/references - Aggiornati tutti i riferimenti nei SKILL.md (percorsi coerenti) - README.md aggiornato con nuova struttura e istruzioni generiche - INSTALL.sh semplificato con istruzioni platform-agnostic - Eliminata cartella references/ dal root (ora centralizzata) - Struttura più pulita e mantenibile, facile da installare su qualsiasi piattaforma
2026-03-11 00:11:03 +01:00 · 2026-03-11 00:11:03 +01:00 · b289d87033
commit b289d87033
parent c496db151c
55 changed files with 288 additions and 142 deletions
--- a/agency-shared-references/SKILL.md
+++ b/agency-shared-references/SKILL.md
@ -0,0 +1,67 @@
+---
+name: agency-shared-references
+description: "References condivise per la suite agency-skills. Contiene pattern, framework, template e linee guida trasversali usate da multiple skills: design patterns, copy frameworks, research playbook, quality bar, publishing gates, resource types, e altri. Usare quando: (1) serve consultare pattern UX/UI, (2) applicare framework copywriting, (3) seguire standard qualità, (4) citare fonti correttamente, (5) gestire risorse catalogate."
+---
+
+# Agency Shared References
+
+References condivise per tutte le skills della suite agency-skills.
+
+## Quando Usare
+
+Questa skill viene caricata automaticamente quando le altre skills della suite necessitano di:
+
+- **Pattern UX/UI:** design_patterns, hero_sections, layout_systems, navigation_patterns, conversion_patterns, trust_signal_patterns
+- **Framework Copy:** copy_frameworks, brand_voice, content_formats, case_study_structures
+- **Research:** research_playbook, research_citation_rules, strategy_playbook
+- **Quality & Publishing:** quality_bar, publishing_gates, qa_visual, weekly_report_template
+- **Risorse:** resource_types (tipologie asset e use case)
+- **YouTube:** youtube_script_framework
+- **Personas:** audience_personas
+- **Platform:** platform_patterns
+
+## Struttura
+
+```
+agency-shared-references/
+└── references/
+    ├── design_patterns.md
+    ├── hero_sections.md
+    ├── layout_systems.md
+    ├── navigation_patterns.md
+    ├── conversion_patterns.md
+    ├── trust_signal_patterns.md
+    ├── case_study_structures.md
+    ├── copy_frameworks.md
+    ├── content_formats.md
+    ├── brand_voice.md
+    ├── audience_personas.md
+    ├── platform_patterns.md
+    ├── quality_bar.md
+    ├── publishing_gates.md
+    ├── research_citation_rules.md
+    ├── research_playbook.md
+    ├── strategy_playbook.md
+    ├── youtube_script_framework.md
+    ├── qa_visual.md
+    ├── weekly_report_template.md
+    └── resource_types.md
+```
+
+## Uso dalle Skills
+
+Ogni skill della suite punta a queste references tramite symlink:
+
+```bash
+ln -s ../agency-shared-references/references ./references
+```
+
+## Note
+
+- **Non modificare** queste references senza approvazione dell'orchestrator
+- **Mantenere coerenti** i riferimenti incrociati tra documenti
+- **Aggiornare** quando si scoprono pattern migliori o si standardizzano nuovi workflow
+
+---
+
+_Agency Shared References v1.0_
--- a/agency-shared-references/references/audience_personas.md
+++ b/agency-shared-references/references/audience_personas.md
@ -0,0 +1,35 @@
+# Audience Personas
+
+_Framework: agency_v3_1 | Estratto: 2026-03-09_
+_Usato da: agency-strategy, agency-research_
+
+## Sommario
+
+Template per definire ICP e personas.
+
+---
+
+## Persona Template
+
+| Campo | Descrizione |
+|-------|-----------|
+| **Nome** | Nome fittizio della persona |
+| **Ruolo/Contesto** | Lavoro, settore, situazione |
+| **Obiettivi** | Cosa vuole raggiungere |
+| **Pain Points** | Problemi, frustrazioni |
+| **Trigger di Acquisto** | Cosa li spinge a cercare soluzioni |
+| **Obiezioni** | Dubbi, barriere all'acquisto |
+| **Canali** | Dove si informano (social, search, etc.) |
+| **Linguaggio** | Parole che usano (verbatim) |
+
+---
+
+## Note
+
+- Compilare 2-4 personas per cliente
+- Usare linguaggio reale (da interviste, recensioni, social)
+- Aggiornare dopo research competitor
+
+---
+
+_Reference generato da framework-translator_
--- a/agency-shared-references/references/brand_voice.md
+++ b/agency-shared-references/references/brand_voice.md
@ -0,0 +1,49 @@
+# Brand Voice
+
+_Framework: agency_v3_1 | Estratto: 2026-03-09_
+_Usato da: agency-strategy, agency-social, agency-youtube_
+
+## Sommario
+
+Linee guida tono di voce per web e social.
+
+---
+
+## Attributi (scegline 3-5)
+
+- Professionale ma umano
+- Diretto
+- Ottimista realistico
+- Tecnico solo quando serve
+- Ironico (leggero)
+
+---
+
+## Dos & Don'ts
+
+### Do
+- Frasi brevi, verbi attivi
+- Spiegazioni con esempi
+- CTA chiare
+
+### Don't
+- Superlativi vuoti ("il migliore")
+- Fuffa motivazionale
+- Troppo slang se non coerente
+
+---
+
+## Micro-linee Guida
+
+**Emoji:**
+- (Sì/No) + regole specifiche
+
+**Uso del "tu" vs "voi":**
+- Definire preferenza
+
+**Punteggiatura:**
+- Es. niente !!!
+
+---
+
+_Reference generato da framework-translator_
--- a/agency-shared-references/references/case_study_structures.md
+++ b/agency-shared-references/references/case_study_structures.md
@ -0,0 +1,57 @@
+# Case Study Structures
+
+_Framework: agency_v3_1 | Estratto: 2026-03-09_
+_Usato da: agency-strategy, agency-ux-copy_
+
+## Sommario
+
+Template per case study che dimostrano competenza e riducono rischio percepito.
+
+---
+
+## Case Study Skeleton (Consigliato)
+
+### 1) Snapshot
+- Cliente / settore
+- Obiettivo
+- Servizi
+- Risultato chiave (1-3 metriche)
+
+### 2) Problema
+- Contesto
+- Vincoli
+- Perché era difficile
+
+### 3) Approccio
+- Strategia
+- Decisioni chiave (3-5)
+
+### 4) Soluzione
+- Cosa è stato creato
+- Highlights
+
+### 5) Risultati
+- Metriche (se disponibili)
+- Output qualitativi (es. "riduzione frizione")
+
+### 6) Learnings
+- Cosa rifaresti
+- Cosa evitare
+
+### 7) CTA
+- "Vuoi un progetto simile?"
+
+---
+
+## Se Non Hai Metriche
+
+**Usa:**
+- Outcomes qualitativi
+- Deliverable concreti
+- Quote cliente
+
+**Indica:** "Metriche non disponibili" (trasparenza).
+
+---
+
+_Reference generato da framework-translator_
--- a/agency-shared-references/references/content_formats.md
+++ b/agency-shared-references/references/content_formats.md
@ -0,0 +1,75 @@
+# Content Formats
+
+_Framework: agency_v3_1 | Estratto: 2026-03-09_
+_Usato da: agency-social, agency-youtube_
+
+## Sommario
+
+Formati content per social e YouTube, organizzati per rubriche.
+
+---
+
+## Content Pillars → Formats
+
+Ogni pillar dovrebbe produrre 3-5 format ricorrenti (rubriche).
+
+---
+
+## Social Formats (Agency)
+
+### 1) Breakdown (analisi di un sito/campagna)
+- Hook: "3 cose che funzionano / non funzionano"
+- Bullets
+- Takeaway
+
+### 2) Mini-case (prima/dopo)
+- Contesto
+- Intervento
+- Risultato (anche qualitativo)
+
+### 3) Opinion / POV
+- Tesi chiara
+- 2-3 argomenti
+- CTA: commenta / DM
+
+### 4) Process Snippet
+- Come lavorate
+- Step e strumenti
+
+### 5) Toolkit / Checklist
+- Template
+- Lista rapida
+
+**Regola:** 1 CTA semplice per post.
+
+---
+
+## YouTube Formats
+
+### A) Tutorial (How-to)
+- Promise in hook
+- Step-by-step
+- Recap + CTA
+
+### B) Teardown (competitor/site review)
+- Framework
+- Score
+- Recommendations
+
+### C) Case Study Narrative
+- Problema
+- Viaggio
+- Risultato
+- Lezioni
+
+---
+
+## YouTube Retention Tips
+
+- Hook <10s
+- Pattern interrupts ogni 20-40s (grafica, esempio, cambio ritmo)
+- Chapters chiari
+
+---
+
+_Reference generato da framework-translator_
--- a/agency-shared-references/references/conversion_patterns.md
+++ b/agency-shared-references/references/conversion_patterns.md
@ -0,0 +1,73 @@
+# Conversion Patterns
+
+_Framework: agency_v3_1 | Estratto: 2026-03-09_
+_Usato da: agency-ux-copy, agency-strategy_
+
+## Sommario
+
+CTA, forms e friction reduction per conversioni.
+
+---
+
+## CTA Hierarchy
+
+- 1 CTA primaria per pagina
+- 1 CTA secondaria (link-style)
+- Ripetere CTA primaria 2-3 volte (hero, mid, footer)
+
+---
+
+## Contact Section Patterns
+
+### A) Simple Form
+- Nome, email, messaggio (max 3-4 campi)
+
+### B) Calendly / Booking
+- Utile per agency; includere alternative (email) per chi non vuole booking
+
+### C) Project Brief Form
+- Solo se necessario; meglio a step
+
+**Regole:**
+- Meno campi = più conversione (di solito)
+- Indicare tempi di risposta (es. 24-48h)
+- Privacy microcopy vicino al submit
+
+---
+
+## Lead Magnet (Optional)
+
+**Quando usarlo:**
+- Se vuoi "consideration" lunga
+
+**Esempi:**
+- Checklist
+- Mini guida
+- Template
+
+---
+
+## Friction Reducers (Microcopy)
+
+- "Nessuno spam. Rispondiamo entro 48h."
+- "Puoi anche scriverci a..."
+- "Budget indicativo? Va bene anche una range."
+
+---
+
+## Conversion Blocks
+
+- "Process" (3-5 step)
+- "What you get" (deliverables)
+- "FAQ" (obiezioni)
+
+---
+
+## Anti-pattern
+
+- CTA vaghe ("Scopri di più" ovunque)
+- Form lunghissimi senza motivazione
+
+---
+
+_Reference generato da framework-translator_
--- a/agency-shared-references/references/copy_frameworks.md
+++ b/agency-shared-references/references/copy_frameworks.md
@ -0,0 +1,71 @@
+# Copy Frameworks
+
+_Framework: agency_v3_1 | Estratto: 2026-03-09_
+_Usato da: agency-strategy, agency-ux-copy_
+
+## Sommario
+
+Framework copywriting clarity-first per web e social.
+
+---
+
+## Regole Generali
+
+- Parole semplici > gergo
+- Frasi corte quando possibile
+- Evitare claim assoluti non verificabili
+- Scrivere per "scan" (titoli, bullets, bold con parsimonia)
+
+---
+
+## PAS (Problem-Agitate-Solve)
+
+**Struttura:**
+- **Problem:** descrivi il problema del cliente
+- **Agitate:** conseguenze se non risolto
+- **Solve:** come lo risolvi
+
+**Ottimo per:**
+- Hero sub-copy
+- Section intro
+
+---
+
+## AIDA (Attention-Interest-Desire-Action)
+
+**Ottimo per:**
+- Landing page
+- Sales section
+
+---
+
+## Before-After-Bridge
+
+**Struttura:**
+- **Before:** situazione attuale
+- **After:** situazione desiderata
+- **Bridge:** come ci arrivi (process)
+
+---
+
+## Microcopy (Forms/Buttons)
+
+**Button:**
+- Usare verbi chiari ("Prenota call", "Richiedi info")
+
+**Error:**
+- Spiegare cosa fare
+
+**Privacy:**
+- Rassicurare
+
+---
+
+## Tone Guardrails
+
+- Preferire assertività tranquilla (non hype)
+- Evitare frasi "AI-ish" (troppo generiche)
+
+---
+
+_Reference generato da framework-translator_
--- a/agency-shared-references/references/css_layout.md
+++ b/agency-shared-references/references/css_layout.md
@ -0,0 +1,647 @@
+# CSS Layout — Bootstrap e Custom
+
+Guida per creare layout responsive con Bootstrap o CSS custom.
+
+---
+
+## Decisione: Bootstrap vs Custom
+
+### Usa Bootstrap Quando:
+
+✅ Design standard (grid, cards, buttons)
+✅ Progetto veloce / MVP
+✅ Cliente non richiede customizzazione estrema
+✅ Team piccolo, nessun designer dedicato
+
+### Usa Custom CSS Quando:
+
+✅ Design altamente personalizzato
+✅ Brand guidelines specifiche
+✅ Layout non-standard / creativi
+✅ Performance critica (no CSS unused)
+
+---
+
+## Bootstrap Setup
+
+### CDN Setup
+
+```html
+<head>
+  <!-- Bootstrap CSS -->
+  <link 
+    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" 
+    rel="stylesheet"
+  >
+  
+  <!-- Custom CSS (override) -->
+  <link rel="stylesheet" href="css/custom.css">
+</head>
+
+<body>
+  <!-- Bootstrap JS (opzionale, solo se serve JS components) -->
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+```
+
+### Custom CSS Override
+
+```css
+/* css/custom.css */
+
+:root {
+  /* Override Bootstrap variables */
+  --bs-primary: #005fcc;
+  --bs-secondary: #6c757d;
+  --bs-font-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
+  --bs-body-font-size: 1rem;
+  --bs-body-line-height: 1.6;
+}
+
+/* Custom styles */
+.hero {
+  padding: 120px 0;
+  background: linear-gradient(135deg, #005fcc 0%, #003d99 100%);
+  color: white;
+}
+
+.btn-primary {
+  padding: 12px 32px;
+  font-weight: 600;
+  border-radius: 4px;
+}
+```
+
+---
+
+## Responsive Design
+
+### Breakpoints
+
+```css
+/* Mobile-first approach */
+
+/* Mobile: default (< 768px) */
+.container {
+  padding: 0 16px;
+}
+
+/* Tablet (≥ 768px) */
+@media (min-width: 768px) {
+  .container {
+    padding: 0 24px;
+  }
+  
+  .hero {
+    padding: 160px 0;
+  }
+}
+
+/* Desktop (≥ 1024px) */
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 32px;
+  }
+}
+
+/* Large Desktop (≥ 1440px) */
+@media (min-width: 1440px) {
+  .container {
+    max-width: 1400px;
+  }
+}
+```
+
+### Bootstrap Grid
+
+```html
+<!-- Container -->
+<div class="container">
+  <!-- Row -->
+  <div class="row">
+    <!-- Mobile: 1 colonna, Tablet: 2 colonne, Desktop: 3 colonne -->
+    <div class="col-12 col-md-6 col-lg-4">
+      <!-- Content -->
+    </div>
+    <div class="col-12 col-md-6 col-lg-4">
+      <!-- Content -->
+    </div>
+    <div class="col-12 col-md-6 col-lg-4">
+      <!-- Content -->
+    </div>
+  </div>
+</div>
+```
+
+---
+
+## Typography
+
+### Design Tokens
+
+```css
+:root {
+  /* Font Families */
+  --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
+  --font-secondary: 'Georgia', serif;
+  
+  /* Font Sizes (modular scale) */
+  --text-xs: 0.75rem;    /* 12px */
+  --text-sm: 0.875rem;   /* 14px */
+  --text-base: 1rem;     /* 16px */
+  --text-lg: 1.125rem;   /* 18px */
+  --text-xl: 1.25rem;    /* 20px */
+  --text-2xl: 1.5rem;    /* 24px */
+  --text-3xl: 1.875rem;  /* 30px */
+  --text-4xl: 2.25rem;   /* 36px */
+  --text-5xl: 3rem;      /* 48px */
+  
+  /* Font Weights */
+  --font-normal: 400;
+  --font-medium: 500;
+  --font-semibold: 600;
+  --font-bold: 700;
+  
+  /* Line Heights */
+  --leading-tight: 1.25;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.75;
+  
+  /* Letter Spacing */
+  --tracking-tight: -0.025em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.025em;
+}
+
+/* Base Typography */
+body {
+  font-family: var(--font-primary);
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  color: #1a1a1a;
+}
+
+/* Headings */
+h1 {
+  font-size: var(--text-5xl);
+  font-weight: var(--font-bold);
+  line-height: var(--leading-tight);
+  letter-spacing: var(--tracking-tight);
+}
+
+h2 {
+  font-size: var(--text-4xl);
+  font-weight: var(--font-bold);
+  line-height: var(--leading-tight);
+}
+
+h3 {
+  font-size: var(--text-3xl);
+  font-weight: var(--font-semibold);
+  line-height: var(--leading-tight);
+}
+
+/* Responsive typography */
+@media (max-width: 767px) {
+  h1 { font-size: var(--text-4xl); }
+  h2 { font-size: var(--text-3xl); }
+  h3 { font-size: var(--text-2xl); }
+}
+```
+
+---
+
+## Spacing System
+
+### Scala Modulare
+
+```css
+:root {
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+  --space-20: 80px;
+  --space-24: 96px;
+}
+
+/* Section padding */
+.section-padding {
+  padding: var(--space-16) 0;
+}
+
+@media (min-width: 768px) {
+  .section-padding {
+    padding: var(--space-24) 0;
+  }
+}
+
+/* Component spacing */
+.card {
+  padding: var(--space-6);
+}
+
+.btn {
+  padding: var(--space-3) var(--space-6);
+}
+```
+
+---
+
+## Color System
+
+### Palette
+
+```css
+:root {
+  /* Primary Brand Colors */
+  --color-primary: #005fcc;
+  --color-primary-dark: #003d99;
+  --color-primary-light: #3385ff;
+  
+  /* Secondary Colors */
+  --color-secondary: #6c757d;
+  --color-secondary-dark: #5a6268;
+  --color-secondary-light: #868e96;
+  
+  /* Neutrals */
+  --color-white: #ffffff;
+  --color-gray-50: #f9fafb;
+  --color-gray-100: #f3f4f6;
+  --color-gray-200: #e5e7eb;
+  --color-gray-300: #d1d5db;
+  --color-gray-400: #9ca3af;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #4b5563;
+  --color-gray-700: #374151;
+  --color-gray-800: #1f2937;
+  --color-gray-900: #111827;
+  --color-black: #000000;
+  
+  /* Semantic Colors */
+  --color-success: #10b981;
+  --color-warning: #f59e0b;
+  --color-error: #ef4444;
+  --color-info: #3b82f6;
+  
+  /* Text Colors */
+  --text-primary: var(--color-gray-900);
+  --text-secondary: var(--color-gray-600);
+  --text-muted: var(--color-gray-500);
+  --text-inverse: var(--color-white);
+  
+  /* Background Colors */
+  --bg-primary: var(--color-white);
+  --bg-secondary: var(--color-gray-50);
+  --bg-tertiary: var(--color-gray-100);
+}
+```
+
+### Usage
+
+```css
+/* Text */
+.text-primary { color: var(--text-primary); }
+.text-secondary { color: var(--text-secondary); }
+.text-muted { color: var(--text-muted); }
+.text-inverse { color: var(--text-inverse); }
+
+/* Backgrounds */
+.bg-primary { background-color: var(--bg-primary); }
+.bg-secondary { background-color: var(--bg-secondary); }
+.bg-brand { background-color: var(--color-primary); }
+
+/* Buttons */
+.btn-primary {
+  background-color: var(--color-primary);
+  color: var(--color-white);
+}
+
+.btn-primary:hover {
+  background-color: var(--color-primary-dark);
+}
+
+.btn-secondary {
+  background-color: transparent;
+  color: var(--color-primary);
+  border: 2px solid var(--color-primary);
+}
+```
+
+---
+
+## Component Styles
+
+### Buttons
+
+```css
+.btn {
+  display: inline-block;
+  padding: 12px 32px;
+  font-size: var(--text-base);
+  font-weight: var(--font-semibold);
+  text-decoration: none;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.btn-primary {
+  background-color: var(--color-primary);
+  color: var(--color-white);
+}
+
+.btn-primary:hover {
+  background-color: var(--color-primary-dark);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 95, 204, 0.3);
+}
+
+.btn-secondary {
+  background-color: transparent;
+  color: var(--color-primary);
+  border: 2px solid var(--color-primary);
+}
+
+.btn-secondary:hover {
+  background-color: var(--color-primary);
+  color: var(--color-white);
+}
+
+/* Responsive buttons */
+@media (max-width: 767px) {
+  .btn {
+    width: 100%;
+    text-align: center;
+  }
+}
+```
+
+### Cards
+
+```css
+.card {
+  background: var(--color-white);
+  border-radius: 8px;
+  padding: var(--space-6);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+}
+
+.card-image {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  border-radius: 4px;
+  margin-bottom: var(--space-4);
+}
+
+.card-title {
+  font-size: var(--text-xl);
+  font-weight: var(--font-semibold);
+  margin-bottom: var(--space-2);
+}
+
+.card-description {
+  color: var(--text-secondary);
+  margin-bottom: var(--space-4);
+}
+```
+
+### Forms
+
+```css
+.form-group {
+  margin-bottom: var(--space-4);
+}
+
+.form-label {
+  display: block;
+  font-weight: var(--font-medium);
+  margin-bottom: var(--space-2);
+  color: var(--text-primary);
+}
+
+.form-control {
+  width: 100%;
+  padding: 12px 16px;
+  font-size: var(--text-base);
+  border: 1px solid var(--color-gray-300);
+  border-radius: 4px;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.form-control:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.1);
+}
+
+.form-control::placeholder {
+  color: var(--text-muted);
+}
+
+.form-error {
+  color: var(--color-error);
+  font-size: var(--text-sm);
+  margin-top: var(--space-1);
+}
+```
+
+---
+
+## Layout Patterns
+
+### Hero Section
+
+```css
+.hero {
+  position: relative;
+  padding: 120px 0;
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
+  color: var(--color-white);
+  overflow: hidden;
+}
+
+.hero-content {
+  max-width: 800px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.hero h1 {
+  font-size: var(--text-5xl);
+  margin-bottom: var(--space-4);
+}
+
+.hero-sub {
+  font-size: var(--text-xl);
+  opacity: 0.9;
+  margin-bottom: var(--space-8);
+}
+
+.hero-cta {
+  display: flex;
+  gap: var(--space-4);
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+/* Responsive hero */
+@media (max-width: 767px) {
+  .hero {
+    padding: 80px 0;
+  }
+  
+  .hero h1 {
+    font-size: var(--text-4xl);
+  }
+  
+  .hero-sub {
+    font-size: var(--text-lg);
+  }
+}
+```
+
+### Grid Layout
+
+```css
+.grid {
+  display: grid;
+  gap: var(--space-6);
+}
+
+.grid-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.grid-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.grid-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+/* Responsive grid */
+@media (max-width: 1023px) {
+  .grid-4 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 767px) {
+  .grid-2,
+  .grid-3,
+  .grid-4 {
+    grid-template-columns: 1fr;
+  }
+}
+```
+
+### Split Layout
+
+```css
+.split-layout {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-12);
+  align-items: center;
+}
+
+.split-image {
+  width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+
+/* Responsive split */
+@media (max-width: 1023px) {
+  .split-layout {
+    grid-template-columns: 1fr;
+    gap: var(--space-8);
+  }
+  
+  .split-image {
+    order: -1; /* Image first on mobile */
+  }
+}
+```
+
+---
+
+## Utility Classes
+
+```css
+/* Display */
+.d-none { display: none; }
+.d-block { display: block; }
+.d-flex { display: flex; }
+.d-grid { display: grid; }
+.d-inline-block { display: inline-block; }
+
+/* Flexbox */
+.flex-row { flex-direction: row; }
+.flex-column { flex-direction: column; }
+.justify-start { justify-content: flex-start; }
+.justify-center { justify-content: center; }
+.justify-end { justify-content: flex-end; }
+.justify-between { justify-content: space-between; }
+.align-start { align-items: flex-start; }
+.align-center { align-items: center; }
+.align-end { align-items: flex-end; }
+.flex-wrap { flex-wrap: wrap; }
+.gap-2 { gap: var(--space-2); }
+.gap-4 { gap: var(--space-4); }
+.gap-6 { gap: var(--space-6); }
+.gap-8 { gap: var(--space-8); }
+
+/* Text Alignment */
+.text-left { text-align: left; }
+.text-center { text-align: center; }
+.text-right { text-align: right; }
+
+/* Spacing */
+.mt-4 { margin-top: var(--space-4); }
+.mb-4 { margin-bottom: var(--space-4); }
+.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
+.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
+
+/* Visibility */
+.visible { visibility: visible; }
+.invisible { visibility: hidden; }
+```
+
+---
+
+## Checklist Layout
+
+- [ ] Mobile-first approach
+- [ ] Breakpoints definiti (mobile, tablet, desktop)
+- [ ] Typography scale coerente
+- [ ] Spacing system modulare
+- [ ] Color palette definita
+- [ ] Buttons stilizzati (hover states)
+- [ ] Cards con shadow e hover effect
+- [ ] Forms accessibili e responsive
+- [ ] Grid system funzionante
+- [ ] Utility classes per layout veloci
+- [ ] Test su mobile/tablet/desktop
+
+---
+
+_References per agency-web-developer skill_
--- a/agency-shared-references/references/design_patterns.md
+++ b/agency-shared-references/references/design_patterns.md
@ -0,0 +1,110 @@
+# Design Patterns
+
+_Framework: agency_v3_1 | Estratto: 2026-03-09_
+_Usato da: agency-creative-director, agency-design-system, agency-ux-copy_
+
+## Sommario
+
+Pattern UI riusabili per siti agency/services. Strutture, non stile.
+
+---
+
+## Card Grid (Services / Features)
+
+**Quando usarlo:**
+- Overview servizi
+- Differentiatori
+- Step del processo
+
+**Regole:**
+- Max 6 card desktop, 3-4 mobile
+- Titolo breve + payoff 1 riga + micro-CTA
+- Icone solo se aggiungono semantica (non decorative)
+
+**Varianti:**
+- Icon + title + 2 bullets
+- Number + title + paragraph (per process)
+- Split card (testo + mini proof)
+
+---
+
+## Split Layout (Text + Visual)
+
+**Quando usarlo:**
+- Spiegare un concetto o metodo
+- Mostrare case study teaser
+
+**Regole:**
+- Testo a sinistra per lingue LTR (scansione naturale)
+- 1 solo focus visual (non collage)
+- Includere 1 proof nello stesso blocco (numero, logo, quote)
+
+---
+
+## Section Header (Headline + Support)
+
+**Pattern:**
+- Overline (categoria)
+- Headline (promessa)
+- Supporting copy (beneficio concreto)
+- Optional: inline CTA
+
+**Regole:**
+- Headline: 6-12 parole
+- Supporting: 1-2 frasi, senza gergo
+
+---
+
+## Logo Wall (Credibility)
+
+**Quando usarlo:**
+- Subito dopo hero o dopo services
+
+**Regole:**
+- Max 12 loghi visibili (se più, carousel o "view all")
+- Testo di contesto (es. "Trusted by" o "We worked with")
+- Evitare loghi non autorizzati
+
+---
+
+## Testimonial Block
+
+**Varianti:**
+- Quote singola "hero testimonial"
+- Grid di 3 testimonial
+- Testimonial + risultato (numero)
+
+**Regole:**
+- Migliore se contiene un risultato specifico
+- Includere nome/ruolo/azienda quando possibile
+- Se anonimo: spiegare perché (settore sensibile)
+
+---
+
+## FAQ (Objections)
+
+**Quando usarlo:**
+- Prima della CTA finale
+- Su services e contact
+
+**Regole:**
+- 5-8 domande
+- Domande reali (prezzo, tempi, processo, revisioni)
+- Risposte brevi e pratiche
+
+---
+
+## Footer (Actionable)
+
+**Include:**
+- CTA compatta
+- Contatti chiari
+- Link legali
+- Social (se utili)
+
+**Regola:**
+- Footer deve "chiudere" il funnel, non solo link.
+
+---
+
+_Reference generato da framework-translator_
--- a/agency-shared-references/references/hero_sections.md
+++ b/agency-shared-references/references/hero_sections.md
@ -0,0 +1,84 @@
+# Hero Sections
+
+_Framework: agency_v3_1 | Estratto: 2026-03-09_
+_Usato da: agency-creative-director, agency-ux-copy_
+
+## Sommario
+
+Pattern e formule per hero section efficaci. Deve rispondere in 5 secondi.
+
+---
+
+## Hero Checklist (5 secondi)
+
+L'hero deve rispondere a:
+1. Cosa fai
+2. Per chi
+3. Che risultato dai
+4. Perché fidarsi
+5. Qual è la prossima azione
+
+---
+
+## Hero Formula (Services / Agency)
+
+**Headline:** Outcome + Audience
+**Sub:** Come lo fai (meccanismo) + proof
+**CTA primaria:** "Prenota call" / "Richiedi preventivo" / "Vedi lavori"
+**CTA secondaria:** "Guarda casi studio" / "Scarica guida"
+
+**Esempi (struttura, non testo finale):**
+- "Brand e siti che convertono per [audience]"
+- "Strategia, design e contenuti per crescere con coerenza"
+
+---
+
+## Hero Layouts
+
+### A) Split (text + visual)
+- Consigliato per studi: pulito, conversion-friendly
+
+### B) Centered minimal
+- Consigliato se il messaggio è fortissimo e semplice
+
+### C) Proof-first
+- Headline + 3 proof chip (numeri/risultati) + CTA
+
+---
+
+## Proof Chips (sotto CTA)
+
+Esempi:
+- "+120 progetti"
+- "Da 7 anni"
+- "Tempo medio: 4-6 settimane"
+- "Specializzati in [niche]"
+
+**Regola:** Meglio 1-3 chip concreti che 6 generici.
+
+---
+
+## Hero Visuals
+
+**Scelte consigliate:**
+- Fotografia editoriale (autentica)
+- Mockup selettivo (1-2, non griglia infinita)
+- Abstract/3D coerente (non stock casuale)
+
+**Anti-pattern:**
+- "Team smiling in office" stock
+- Collage confusi
+- Troppo testo dentro l'immagine
+
+---
+
+## Above-the-Fold Checklist
+
+- [ ] Value prop chiara
+- [ ] CTA visibile
+- [ ] Proof presente
+- [ ] Nessun rumore (nav troppo densa, troppi link)
+
+---
+
+_Reference generato da framework-translator_
--- a/agency-shared-references/references/html_semantics.md
+++ b/agency-shared-references/references/html_semantics.md
@ -0,0 +1,418 @@
+# HTML Semantics — Best Practices
+
+Guida per costruire HTML semantico, accessibile e SEO-friendly.
+
+---
+
+## Document Structure
+
+### Base Template
+
+```html
+<!DOCTYPE html>
+<html lang="it">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="{descrizione pagina}">
+  <title>{Titolo pagina} | {Brand}</title>
+  
+  <!-- CSS -->
+  <link rel="stylesheet" href="css/main.css">
+  
+  <!-- Favicon -->
+  <link rel="icon" href="assets/img/favicon.ico" type="image/x-icon">
+</head>
+<body>
+  <header>{Navigation}</header>
+  <main>{Contenuto principale}</main>
+  <footer>{Footer}</footer>
+  
+  <!-- JS -->
+  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="js/main.js"></script>
+</body>
+</html>
+```
+
+---
+
+## Semantic Elements
+
+### Header
+
+```html
+<header>
+  <nav aria-label="Main navigation">
+    <a href="/" class="logo">
+      <img src="assets/img/logo.svg" alt="{Brand Name}">
+    </a>
+    <ul class="nav-menu">
+      <li><a href="/">Home</a></li>
+      <li><a href="/pages/services.html">Servizi</a></li>
+      <li><a href="/pages/about.html">Chi Siamo</a></li>
+      <li><a href="/pages/contact.html">Contatti</a></li>
+    </ul>
+    <button class="mobile-menu-toggle" aria-label="Toggle menu">
+      <span></span>
+      <span></span>
+      <span></span>
+    </button>
+  </nav>
+</header>
+```
+
+### Main Content
+
+```html
+<main>
+  <!-- Hero Section -->
+  <section class="hero" aria-labelledby="hero-title">
+    <h1 id="hero-title">Headline principale</h1>
+    <p class="hero-sub">Subcopy di supporto</p>
+    <a href="#cta" class="btn btn-primary">Call to Action</a>
+  </section>
+  
+  <!-- Services Section -->
+  <section class="services" aria-labelledby="services-title">
+    <h2 id="services-title">I Nostri Servizi</h2>
+    <div class="services-grid">
+      <article class="service-card">
+        <h3>Servizio 1</h3>
+        <p>Descrizione servizio</p>
+        <a href="#">Scopri di più</a>
+      </article>
+      <!-- Altre card -->
+    </div>
+  </section>
+  
+  <!-- Testimonial Section -->
+  <section class="testimonials" aria-labelledby="testimonials-title">
+    <h2 id="testimonials-title">Dicono di Noi</h2>
+    <article class="testimonial">
+      <blockquote>
+        <p>"Testimonial text"</p>
+      </blockquote>
+      <cite>— Nome Cliente, Azienda</cite>
+    </article>
+  </section>
+  
+  <!-- FAQ Section -->
+  <section class="faq" aria-labelledby="faq-title">
+    <h2 id="faq-title">Domande Frequenti</h2>
+    <div class="faq-list">
+      <article class="faq-item">
+        <h3>
+          <button class="faq-question" aria-expanded="false">
+            Domanda 1
+          </button>
+        </h3>
+        <div class="faq-answer">
+          <p>Risposta alla domanda</p>
+        </div>
+      </article>
+    </div>
+  </section>
+  
+  <!-- CTA Section -->
+  <section class="cta" aria-labelledby="cta-title">
+    <h2 id="cta-title">Pronto a Iniziare?</h2>
+    <a href="/pages/contact.html" class="btn btn-primary" id="cta">Contattaci</a>
+  </section>
+</main>
+```
+
+### Footer
+
+```html
+<footer>
+  <div class="footer-content">
+    <div class="footer-brand">
+      <img src="assets/img/logo.svg" alt="{Brand Name}">
+      <p>Descrizione breve del brand</p>
+    </div>
+    <nav aria-label="Footer navigation">
+      <ul>
+        <li><a href="/">Home</a></li>
+        <li><a href="/pages/services.html">Servizi</a></li>
+        <li><a href="/pages/about.html">Chi Siamo</a></li>
+        <li><a href="/pages/contact.html">Contatti</a></li>
+      </ul>
+    </nav>
+    <div class="footer-contact">
+      <p>Email: info@example.com</p>
+      <p>Tel: +39 123 456 7890</p>
+    </div>
+    <div class="footer-social">
+      <a href="#" aria-label="Facebook">FB</a>
+      <a href="#" aria-label="Instagram">IG</a>
+      <a href="#" aria-label="LinkedIn">LI</a>
+    </div>
+  </div>
+  <div class="footer-bottom">
+    <p>&copy; 2024 {Brand Name}. Tutti i diritti riservati.</p>
+    <nav aria-label="Legal navigation">
+      <a href="/pages/privacy.html">Privacy Policy</a>
+      <a href="/pages/cookie.html">Cookie Policy</a>
+    </nav>
+  </div>
+</footer>
+```
+
+---
+
+## Heading Hierarchy
+
+### Regole
+
+1. **Un solo H1 per pagina** (di solito nella hero)
+2. **Mai saltare livelli** (H2 → H3 → H4, non H2 → H4)
+3. **Heading descrittivi** (non "Section 1", ma "I Nostri Servizi")
+4. **Keyword rilevanti** (SEO-friendly ma naturale)
+
+### Esempio Corretto
+
+```html
+<h1>Consulenza Marketing Digitale</h1>
+
+<section>
+  <h2>I Nostri Servizi</h2>
+  
+  <article>
+    <h3>SEO Optimization</h3>
+    <p>...</p>
+  </article>
+  
+  <article>
+    <h3>Social Media Management</h3>
+    <p>...</p>
+  </article>
+</section>
+
+<section>
+  <h2>Perché Sceglierci</h2>
+  <h3>Esperienza Decennale</h3>
+  <h3>Team Certificato</h3>
+</section>
+```
+
+---
+
+## Accessibility
+
+### ARIA Labels
+
+```html
+<!-- Navigation -->
+<nav aria-label="Main navigation">...</nav>
+<nav aria-label="Footer navigation">...</nav>
+
+<!-- Sections -->
+<section aria-labelledby="services-title">
+  <h2 id="services-title">Servizi</h2>
+</section>
+
+<!-- Buttons -->
+<button aria-label="Close menu" class="close-btn">×</button>
+<button aria-label="Toggle FAQ" aria-expanded="false" class="faq-question">
+  Domanda
+</button>
+
+<!-- Forms -->
+<label for="email">Email</label>
+<input type="email" id="email" name="email" required aria-required="true">
+
+<!-- Images -->
+<img src="team-photo.jpg" alt="Team di 5 persone in ufficio">
+<img src="decorative-pattern.svg" alt="" role="presentation">
+```
+
+### Focus States
+
+```css
+/* Assicurati che tutti gli elementi focusabili abbiano visible focus */
+a:focus,
+button:focus,
+input:focus,
+select:focus,
+textarea:focus {
+  outline: 2px solid #005fcc;
+  outline-offset: 2px;
+}
+
+/* Skip link per keyboard navigation */
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  background: #005fcc;
+  color: white;
+  padding: 8px;
+  z-index: 100;
+}
+
+.skip-link:focus {
+  top: 0;
+}
+```
+
+```html
+<body>
+  <a href="#main-content" class="skip-link">Vai al contenuto principale</a>
+  <header>...</header>
+  <main id="main-content">...</main>
+</body>
+```
+
+---
+
+## Images
+
+### Best Practices
+
+```html
+<!-- Immagine con descrizione -->
+<img src="team.jpg" alt="Team di 5 persone sorridenti in ufficio moderno">
+
+<!-- Immagine decorativa (no alt text) -->
+<img src="pattern.svg" alt="" role="presentation">
+
+<!-- Immagine responsive -->
+<img 
+  src="hero-mobile.jpg" 
+  srcset="hero-mobile.jpg 480w, hero-tablet.jpg 768w, hero-desktop.jpg 1200w"
+  sizes="(max-width: 480px) 100vw, (max-width: 768px) 100vw, 100vw"
+  alt="Hero image"
+>
+
+<!-- Lazy loading -->
+<img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="Descrizione">
+```
+
+---
+
+## Forms
+
+### Contact Form
+
+```html
+<form action="https://formspree.io/f/{id}" method="POST" class="contact-form">
+  <div class="form-group">
+    <label for="name">Nome Completo</label>
+    <input 
+      type="text" 
+      id="name" 
+      name="name" 
+      required 
+      aria-required="true"
+      autocomplete="name"
+    >
+  </div>
+  
+  <div class="form-group">
+    <label for="email">Email</label>
+    <input 
+      type="email" 
+      id="email" 
+      name="email" 
+      required 
+      aria-required="true"
+      autocomplete="email"
+    >
+  </div>
+  
+  <div class="form-group">
+    <label for="message">Messaggio</label>
+    <textarea 
+      id="message" 
+      name="message" 
+      rows="5" 
+      required 
+      aria-required="true"
+    ></textarea>
+  </div>
+  
+  <button type="submit" class="btn btn-primary">Invia Messaggio</button>
+  
+  <p class="form-note">
+    <small>Inviando questo form accetti la nostra 
+    <a href="/pages/privacy.html">privacy policy</a>.</small>
+  </p>
+</form>
+```
+
+---
+
+## SEO On-Page
+
+### Meta Tags
+
+```html
+<head>
+  <!-- Required -->
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{Keyword Primaria} | {Brand Name}</title>
+  <meta name="description" content="{150-160 caratteri con keyword}">
+  
+  <!-- Open Graph (social sharing) -->
+  <meta property="og:title" content="{Titolo pagina}">
+  <meta property="og:description" content="{Descrizione}">
+  <meta property="og:image" content="https://example.com/assets/img/og-image.jpg">
+  <meta property="og:url" content="https://example.com/pagina.html">
+  <meta property="og:type" content="website">
+  
+  <!-- Twitter Card -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="{Titolo}">
+  <meta name="twitter:description" content="{Descrizione}">
+  <meta name="twitter:image" content="https://example.com/assets/img/twitter-image.jpg">
+  
+  <!-- Canonical URL -->
+  <link rel="canonical" href="https://example.com/pagina.html">
+</head>
+```
+
+### Structured Data (JSON-LD)
+
+```html
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "LocalBusiness",
+  "name": "{Brand Name}",
+  "image": "https://example.com/assets/img/logo.png",
+  "description": "{Descrizione business}",
+  "address": {
+    "@type": "PostalAddress",
+    "streetAddress": "Via Roma 123",
+    "addressLocality": "Milano",
+    "postalCode": "20100",
+    "addressCountry": "IT"
+  },
+  "telephone": "+391234567890",
+  "url": "https://example.com"
+}
+</script>
+```
+
+---
+
+## Checklist Semantica
+
+- [ ] Un solo H1 per pagina
+- [ ] Heading hierarchy corretta (no salti)
+- [ ] Tag semantici usati (`<header>`, `<main>`, `<footer>`, `<section>`, `<article>`, `<nav>`)
+- [ ] ARIA labels dove necessario
+- [ ] Alt text su tutte le immagini (o vuoto per decorative)
+- [ ] Form label associati correttamente
+- [ ] Focus states visibili
+- [ ] Skip link per keyboard navigation
+- [ ] Meta title + description unici per pagina
+- [ ] Canonical URL impostata
+- [ ] Open Graph tags per social sharing
+
+---
+
+_References per agency-web-developer skill_
--- a/agency-shared-references/references/js_interactivity.md
+++ b/agency-shared-references/references/js_interactivity.md
@ -0,0 +1,730 @@
+# JavaScript Interactivity — jQuery + GSAP
+
+Guida per aggiungere interattività e animazioni fluide ai siti web.
+
+---
+
+## Setup Librerie
+
+### CDN Links
+
+```html
+<head>
+  <!-- jQuery -->
+  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
+  
+  <!-- GSAP -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  
+  <!-- GSAP ScrollTrigger (opzionale, per scroll animations) -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
+</head>
+
+<body>
+  <!-- Main JS -->
+  <script src="js/main.js"></script>
+</body>
+```
+
+---
+
+## jQuery Patterns
+
+### Document Ready
+
+```javascript
+$(document).ready(function() {
+  // Tutto il codice va qui dentro
+  // o usa la shorthand:
+});
+
+// Shorthand (equivalente)
+$(function() {
+  // Codice qui
+});
+```
+
+### Mobile Menu Toggle
+
+```javascript
+$(function() {
+  const $menuToggle = $('.mobile-menu-toggle');
+  const $navMenu = $('.nav-menu');
+  const $body = $('body');
+  
+  $menuToggle.on('click', function() {
+    $navMenu.toggleClass('is-open');
+    $menuToggle.toggleClass('is-active');
+    $body.toggleClass('menu-open');
+    
+    // Update ARIA
+    const expanded = $menuToggle.attr('aria-expanded') === 'true';
+    $menuToggle.attr('aria-expanded', !expanded);
+  });
+  
+  // Close menu on link click (mobile)
+  $navMenu.find('a').on('click', function() {
+    if ($(window).width() < 768) {
+      $navMenu.removeClass('is-open');
+      $menuToggle.removeClass('is-active');
+      $body.removeClass('menu-open');
+      $menuToggle.attr('aria-expanded', 'false');
+    }
+  });
+  
+  // Close menu on outside click
+  $(document).on('click', function(e) {
+    if (!$(e.target).closest('.nav-menu, .mobile-menu-toggle').length) {
+      $navMenu.removeClass('is-open');
+      $menuToggle.removeClass('is-active');
+      $body.removeClass('menu-open');
+      $menuToggle.attr('aria-expanded', 'false');
+    }
+  });
+});
+```
+
+### Smooth Scroll
+
+```javascript
+$(function() {
+  $('a[href^="#"]').on('click', function(e) {
+    const targetId = this.getAttribute('href');
+    
+    // Ignora link vuoti o non-anchor
+    if (targetId === '#' || !targetId.startsWith('#')) return;
+    
+    const $target = $(targetId);
+    
+    if ($target.length) {
+      e.preventDefault();
+      
+      const offsetTop = $target.offset().top;
+      const headerHeight = $('header').outerHeight() || 0;
+      const scrollPosition = offsetTop - headerHeight - 20;
+      
+      $('html, body').stop().animate({
+        scrollTop: scrollPosition
+      }, 800, 'easeInOutQuad');
+      
+      // Update URL without jumping
+      history.pushState(null, null, targetId);
+    }
+  });
+});
+
+// Easing function (se non usi jQuery easing plugin)
+$.easing.easeInOutQuad = function(x, t, b, c, d) {
+  t /= d / 2;
+  if (t < 1) return c / 2 * t * t + b;
+  t--;
+  return -c / 2 * (t * (t - 2) - 1) + b;
+};
+```
+
+### FAQ Accordion
+
+```javascript
+$(function() {
+  const $faqQuestions = $('.faq-question');
+  
+  $faqQuestions.on('click', function() {
+    const $question = $(this);
+    const $answer = $question.next('.faq-answer');
+    const $item = $question.closest('.faq-item');
+    const isActive = $question.hasClass('is-active');
+    
+    // Close all other items (accordion style)
+    $faqQuestions.not(this).removeClass('is-active');
+    $('.faq-answer').not($answer).slideUp(300);
+    $('.faq-item').not($item).removeClass('is-active');
+    
+    // Toggle current item
+    $question.toggleClass('is-active');
+    $answer.slideToggle(300);
+    $item.toggleClass('is-active');
+    
+    // Update ARIA
+    const expanded = $question.attr('aria-expanded') === 'true';
+    $question.attr('aria-expanded', !expanded);
+  });
+  
+  // Keyboard accessibility
+  $faqQuestions.on('keydown', function(e) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      $(this).click();
+    }
+  });
+});
+```
+
+### Form Validation
+
+```javascript
+$(function() {
+  const $form = $('.contact-form');
+  const $submitBtn = $form.find('button[type="submit"]');
+  
+  $form.on('submit', function(e) {
+    let isValid = true;
+    
+    // Validate required fields
+    $form.find('[required]').each(function() {
+      const $field = $(this);
+      const value = $field.val().trim();
+      const $error = $field.siblings('.form-error');
+      
+      if (!value) {
+        isValid = false;
+        $field.addClass('is-invalid');
+        if ($error.length) {
+          $error.text('Questo campo è obbligatorio').show();
+        } else {
+          $field.after('<span class="form-error">Questo campo è obbligatorio</span>');
+        }
+      } else {
+        $field.removeClass('is-invalid');
+        $error.hide();
+        
+        // Email validation
+        if ($field.attr('type') === 'email') {
+          const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+          if (!emailRegex.test(value)) {
+            isValid = false;
+            $field.addClass('is-invalid');
+            if ($error.length) {
+              $error.text('Inserisci un\'email valida').show();
+            } else {
+              $field.after('<span class="form-error">Inserisci un\'email valida</span>');
+            }
+          }
+        }
+      }
+    });
+    
+    if (!isValid) {
+      e.preventDefault();
+      // Scroll to first error
+      const $firstError = $form.find('.is-invalid').first();
+      if ($firstError.length) {
+        $('html, body').animate({
+          scrollTop: $firstError.offset().top - 100
+        }, 500);
+      }
+    }
+  });
+  
+  // Clear error on input
+  $form.find('input, textarea').on('input', function() {
+    $(this).removeClass('is-invalid');
+    $(this).siblings('.form-error').hide();
+  });
+  
+  // Form submission success (AJAX example with Formspree)
+  $form.on('submit', function(e) {
+    e.preventDefault();
+    
+    $submitBtn.prop('disabled', true).text('Invio in corso...');
+    
+    $.ajax({
+      url: $form.attr('action'),
+      method: 'POST',
+      data: $form.serialize(),
+      headers: { 'Accept': 'application/json' }
+    })
+    .done(function(response) {
+      $form.trigger('reset');
+      $submitBtn.text('Messaggio Inviato!');
+      
+      // Show success message
+      $form.after('<div class="form-success">Grazie! Ti contatteremo presto.</div>');
+      
+      setTimeout(function() {
+        $submitBtn.prop('disabled', false).text('Invia Messaggio');
+        $('.form-success').fadeOut();
+      }, 3000);
+    })
+    .fail(function() {
+      $submitBtn.prop('disabled', false).text('Riprova');
+      $form.after('<div class="form-error">Errore nell\'invio. Riprova più tardi.</div>');
+    });
+  });
+});
+```
+
+### Back to Top Button
+
+```javascript
+$(function() {
+  const $backToTop = $('.back-to-top');
+  
+  // Show/hide on scroll
+  $(window).on('scroll', function() {
+    if ($(window).scrollTop() > 300) {
+      $backToTop.addClass('is-visible');
+    } else {
+      $backToTop.removeClass('is-visible');
+    }
+  });
+  
+  // Smooth scroll to top
+  $backToTop.on('click', function(e) {
+    e.preventDefault();
+    $('html, body').animate({
+      scrollTop: 0
+    }, 800);
+  });
+});
+```
+
+```html
+<!-- HTML for back to top -->
+<a href="#top" class="back-to-top" aria-label="Torna su">
+  <svg><!-- icon --></svg>
+</a>
+```
+
+```css
+.back-to-top {
+  position: fixed;
+  bottom: 32px;
+  right: 32px;
+  width: 48px;
+  height: 48px;
+  background: var(--color-primary);
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.3s ease;
+  z-index: 100;
+}
+
+.back-to-top.is-visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+.back-to-top:hover {
+  background: var(--color-primary-dark);
+  transform: translateY(-4px);
+}
+```
+
+### Image Lazy Loading
+
+```javascript
+$(function() {
+  const $lazyImages = $('img[loading="lazy"]');
+  
+  // Native lazy loading support check
+  if ('loading' in HTMLImageElement.prototype) {
+    // Browser supports native lazy loading
+    $lazyImages.each(function() {
+      const src = $(this).data('src');
+      if (src) {
+        $(this).attr('src', src);
+      }
+    });
+  } else {
+    // Fallback for browsers without support
+    const imageObserver = new IntersectionObserver(function(entries, observer) {
+      entries.forEach(function(entry) {
+        if (entry.isIntersecting) {
+          const $img = $(entry.target);
+          const src = $img.data('src');
+          if (src) {
+            $img.attr('src', src);
+            $img.on('load', function() {
+              $img.addClass('is-loaded');
+            });
+          }
+          observer.unobserve(entry.target);
+        }
+      });
+    });
+    
+    $lazyImages.each(function() {
+      imageObserver.observe(this);
+    });
+  }
+});
+```
+
+---
+
+## GSAP Animations
+
+### Basic Animations
+
+```javascript
+$(function() {
+  // Fade in element
+  gsap.from('.hero h1', {
+    duration: 1,
+    opacity: 0,
+    y: 30,
+    ease: 'power3.out'
+  });
+  
+  // Stagger animation
+  gsap.from('.service-card', {
+    duration: 0.8,
+    opacity: 0,
+    y: 40,
+    stagger: 0.15,
+    ease: 'power3.out',
+    delay: 0.3
+  });
+  
+  // Multiple properties
+  gsap.from('.hero .btn', {
+    duration: 1,
+    opacity: 0,
+    y: 20,
+    scale: 0.95,
+    delay: 0.5,
+    ease: 'back.out(1.7)'
+  });
+});
+```
+
+### Timeline
+
+```javascript
+$(function() {
+  const tl = gsap.timeline({ defaults: { ease: 'power3.out' } });
+  
+  tl.from('.hero h1', {
+    duration: 1,
+    opacity: 0,
+    y: 50
+  })
+  .from('.hero-sub', {
+    duration: 0.8,
+    opacity: 0,
+    y: 30
+  }, '-=0.5')
+  .from('.hero .btn', {
+    duration: 0.6,
+    opacity: 0,
+    y: 20
+  }, '-=0.4')
+  .from('.logo-wall', {
+    duration: 1,
+    opacity: 0
+  }, '-=0.3');
+});
+```
+
+### ScrollTrigger Animations
+
+```javascript
+// Register ScrollTrigger
+gsap.registerPlugin(ScrollTrigger);
+
+$(function() {
+  // Fade in on scroll
+  gsap.utils.toArray('.fade-on-scroll').forEach(function(elem) {
+    gsap.to(elem, {
+      scrollTrigger: {
+        trigger: elem,
+        start: 'top 85%',
+        toggleActions: 'play none none none'
+      },
+      opacity: 1,
+      y: 0,
+      duration: 1,
+      ease: 'power3.out'
+    });
+  });
+  
+  // Slide in from left
+  gsap.utils.toArray('.slide-in-left').forEach(function(elem) {
+    gsap.from(elem, {
+      scrollTrigger: {
+        trigger: elem,
+        start: 'top 80%',
+        toggleActions: 'play none none none'
+      },
+      opacity: 0,
+      x: -50,
+      duration: 1,
+      ease: 'power3.out'
+    });
+  });
+  
+  // Slide in from right
+  gsap.utils.toArray('.slide-in-right').forEach(function(elem) {
+    gsap.from(elem, {
+      scrollTrigger: {
+        trigger: elem,
+        start: 'top 80%',
+        toggleActions: 'play none none none'
+      },
+      opacity: 0,
+      x: 50,
+      duration: 1,
+      ease: 'power3.out'
+    });
+  });
+  
+  // Scale up
+  gsap.utils.toArray('.scale-up').forEach(function(elem) {
+    gsap.from(elem, {
+      scrollTrigger: {
+        trigger: elem,
+        start: 'top 85%',
+        toggleActions: 'play none none none'
+      },
+      opacity: 0,
+      scale: 0.8,
+      duration: 1,
+      ease: 'back.out(1.7)'
+    });
+  });
+  
+  // Parallax effect
+  gsap.to('.parallax-bg', {
+    scrollTrigger: {
+      trigger: '.hero',
+      start: 'top top',
+      end: 'bottom top',
+      scrub: true
+    },
+    y: 100,
+    ease: 'none'
+  });
+  
+  // Pin section (sticky)
+  gsap.to('.sticky-section', {
+    scrollTrigger: {
+      trigger: '.sticky-section',
+      start: 'top top',
+      end: '+=100%',
+      pin: true,
+      scrub: true
+    }
+  });
+});
+```
+
+### Hover Animations
+
+```javascript
+$(function() {
+  // Card hover with GSAP
+  const $cards = $('.service-card');
+  
+  $cards.each(function() {
+    const $card = $(this);
+    
+    $card.on('mouseenter', function() {
+      gsap.to($card, {
+        duration: 0.3,
+        y: -8,
+        boxShadow: '0 12px 32px rgba(0, 0, 0, 0.15)',
+        ease: 'power2.out'
+      });
+    });
+    
+    $card.on('mouseleave', function() {
+      gsap.to($card, {
+        duration: 0.3,
+        y: 0,
+        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
+        ease: 'power2.out'
+      });
+    });
+  });
+  
+  // Button hover
+  const $buttons = $('.btn');
+  
+  $buttons.each(function() {
+    const $btn = $(this);
+    
+    $btn.on('mouseenter', function() {
+      gsap.to($btn, {
+        duration: 0.2,
+        scale: 1.05,
+        ease: 'power2.out'
+      });
+    });
+    
+    $btn.on('mouseleave', function() {
+      gsap.to($btn, {
+        duration: 0.2,
+        scale: 1,
+        ease: 'power2.out'
+      });
+    });
+  });
+});
+```
+
+### Complex Animation Sequence
+
+```javascript
+$(function() {
+  const tl = gsap.timeline({
+    scrollTrigger: {
+      trigger: '.feature-section',
+      start: 'top 70%',
+      toggleActions: 'play none none none'
+    }
+  });
+  
+  tl.from('.feature-section h2', {
+    duration: 0.8,
+    opacity: 0,
+    y: 30,
+    ease: 'power3.out'
+  })
+  .from('.feature-section p', {
+    duration: 0.6,
+    opacity: 0,
+    y: 20
+  }, '-=0.4')
+  .from('.feature-grid .feature-card', {
+    duration: 0.6,
+    opacity: 0,
+    y: 40,
+    stagger: 0.1,
+    ease: 'back.out(1.7)'
+  }, '-=0.3')
+  .from('.feature-section .btn', {
+    duration: 0.5,
+    opacity: 0,
+    scale: 0.9
+  }, '-=0.3');
+});
+```
+
+---
+
+## Performance Best Practices
+
+### Reduce Motion
+
+```javascript
+// Check for reduced motion preference
+const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+if (prefersReducedMotion) {
+  // Disable GSAP animations
+  gsap.globalTimeline.timeScale(0);
+  
+  // Or set duration to 0
+  gsap.defaults({ duration: 0 });
+}
+```
+
+### Debounce Scroll Events
+
+```javascript
+// Debounce function
+function debounce(func, wait) {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+}
+
+// Usage
+$(window).on('scroll', debounce(function() {
+  // Scroll logic here
+}, 100));
+```
+
+### Use CSS for Simple Animations
+
+```css
+/* Prefer CSS transitions for simple hover effects */
+.btn {
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.btn:hover {
+  transform: translateY(-2px);
+}
+
+/* Use GSAP only for complex animations */
+```
+
+---
+
+## Accessibility
+
+### Respect User Preferences
+
+```javascript
+// Check reduced motion
+const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+if (!prefersReducedMotion) {
+  // Initialize animations
+  initAnimations();
+}
+
+function initAnimations() {
+  // GSAP animations here
+}
+```
+
+### Focus Management
+
+```javascript
+// Trap focus in mobile menu
+function trapFocus($element) {
+  const $focusable = $element.find('a, button, input, textarea, select, [tabindex]:not([tabindex="-1"])');
+  const $first = $focusable.first();
+  const $last = $focusable.last();
+  
+  $element.on('keydown', function(e) {
+    if (e.key === 'Tab') {
+      if (e.shiftKey) {
+        if (document.activeElement === $first[0]) {
+          e.preventDefault();
+          $last.focus();
+        }
+      } else {
+        if (document.activeElement === $last[0]) {
+          e.preventDefault();
+          $first.focus();
+        }
+      }
+    }
+  });
+}
+```
+
+---
+
+## Checklist Interattività
+
+- [ ] Mobile menu toggle funzionante
+- [ ] Smooth scroll per anchor links
+- [ ] FAQ accordion accessibile
+- [ ] Form validation con feedback
+- [ ] Back to top button (se pagine lunghe)
+- [ ] Lazy loading immagini
+- [ ] GSAP animations (hero, scroll)
+- [ ] Hover effects su cards/buttons
+- [ ] Respect reduced motion preference
+- [ ] Keyboard navigation testata
+- [ ] No console errors
+- [ ] Performance ottimizzata (debounce, CSS where possible)
+
+---
+
+_References per agency-web-developer skill_
--- a/agency-shared-references/references/layout_systems.md
+++ b/agency-shared-references/references/layout_systems.md
@ -0,0 +1,68 @@
+# Layout Systems
+
+_Framework: agency_v3_1 | Estratto: 2026-03-09_
+_Usato da: agency-design-system, agency-creative-director_
+
+## Sommario
+
+Grid, spacing, density per coerenza e ritmo verticale.
+
+---
+
+## Grid (Web)
+
+**Desktop:** 12 colonne (o 2/3/4 macro colonne)
+**Tablet:** 8 colonne
+**Mobile:** 4 colonne (stack verticale)
+
+**Regola pratica:**
+- Usa una "content column" leggibile (non full-width testo)
+
+---
+
+## Container Widths
+
+**Linee guida:**
+- Max content width: 1100-1200px
+- Reading width per paragrafi: 60-80 caratteri
+
+---
+
+## Spacing System
+
+**Scala modulare preferita:** 4/8/16/24/32/48/64
+
+**Sezioni:**
+- Padding top/bottom minimo: 64-96px desktop, 40-64px mobile
+- Separare sezioni con whitespace, non linee ovunque
+
+---
+
+## Density Modes
+
+| Mode | Descrizione | Uso |
+|------|-----------|-----|
+| Airy | Più spazio, premium feel | Brand luxury, high-end |
+| Balanced | Equilibrio | Maggior parte dei casi |
+| Dense | Compatto | Pagine data-heavy |
+
+**Regola:** Scegli 1 density mode dominante e mantienilo.
+
+---
+
+## Vertical Rhythm
+
+- Headline → supporting → content → CTA: sempre con spacing prevedibile
+- Evitare "salti" casuali
+
+---
+
+## Responsive Heuristics
+
+- Non "ridurre" tutto: spesso serve "stackare" e cambiare ordine
+- CTA sempre tappabile e visibile
+- Immagini: evitare crop che elimina il soggetto
+
+---
+
+_Reference generato da framework-translator_
--- a/agency-shared-references/references/navigation_patterns.md
+++ b/agency-shared-references/references/navigation_patterns.md
@ -0,0 +1,60 @@
+# Navigation Patterns
+
+_Framework: agency_v3_1 | Estratto: 2026-03-09_
+_Usato da: agency-ux-copy, agency-design-system_
+
+## Sommario
+
+Pattern di navigazione e information architecture per siti agency/services.
+
+---
+
+## Primary Navigation (Agency/Services)
+
+**Consigliato:**
+- Services
+- Work / Case studies
+- About
+- Resources (optional)
+- Contact
+
+**Regole:**
+- Max 5 voci primarie
+- 1 CTA button in nav (es. "Prenota call")
+- Evitare mega-menu se non necessario
+
+---
+
+## Services IA
+
+**Opzione A) Service overview + pagine dettagli**
+- Usa se l'offerta è complessa
+
+**Opzione B) Packages + outcomes**
+- Usa se l'offerta è productizzata
+
+---
+
+## Work / Case Studies IA
+
+- Index con filtri leggeri (industry/service)
+- Scheda case: problema → approccio → soluzione → risultato
+
+---
+
+## Mobile Nav
+
+- Menu semplice, max 1 livello
+- CTA sempre visibile (sticky o nel menu in alto)
+
+---
+
+## Anti-pattern
+
+- 9 voci in nav
+- Dropdown profondi
+- CTA nascosta
+
+---
+
+_Reference generato da framework-translator_
--- a/agency-shared-references/references/platform_patterns.md
+++ b/agency-shared-references/references/platform_patterns.md
@ -0,0 +1,47 @@
+# Platform Patterns
+
+_Framework: agency_v3_1 | Estratto: 2026-03-09_
+_Usato da: agency-social, agency-visual-generator_
+
+## Sommario
+
+Pattern specifici per piattaforma social.
+
+---
+
+## LinkedIn
+
+- Hook + valore + proof
+- Tone: professionale, concreto
+- CTA: "dimmi nei commenti" / "DM"
+
+---
+
+## Instagram
+
+**Carousel:**
+- 1 idea + step + recap
+
+**Reel:**
+- Hook → 3 punti → CTA "salva"
+
+---
+
+## X / Twitter
+
+**Thread:**
+- Promessa → punti numerati → chiusura
+
+**Single Tweet:**
+- Insight + esempio
+
+---
+
+## TikTok
+
+- Hook visivo + testo
+- Ritmo alto, tagli rapidi
+
+---
+
+_Reference generato da framework-translator_
--- a/agency-shared-references/references/publishing_gates.md
+++ b/agency-shared-references/references/publishing_gates.md
@ -0,0 +1,40 @@
+# Publishing Gates
+
+_Framework: agency_v3_1 | Estratto: 2026-03-09_
+_Usato da: agency-orchestrator, agency-publisher_
+
+## Sommario
+
+Gate di approvazione pre-publish per website, social, YouTube.
+
+---
+
+## Regole di Publish
+
+Publishing allowed only when:
+
+1. **PUBLISH_APPROVED.md** contiene `YES`
+2. **Content file** contiene `APPROVED: YES` nel frontmatter
+3. **Logs** sono aggiornati dopo publishing
+
+---
+
+## Flusso
+
+```
+Draft → Review → Approved → Published
+```
+
+- Mai publish senza `APPROVED: YES`
+- Aggiornare publish log dopo ogni publish
+
+---
+
+## Eccezioni
+
+- Nessuna eccezione: gate è obbligatorio
+- In caso di urgenza: approvazione esplicita richiesta
+
+---
+
+_Reference generato da framework-translator_
--- a/agency-shared-references/references/qa_visual.md
+++ b/agency-shared-references/references/qa_visual.md
@ -0,0 +1,51 @@
+# QA Visual Checklist
+
+_Framework: agency_v3_1 | Estratto: 2026-03-09_
+_Usato da: agency-visual-generator, agency-publisher_
+
+## Sommario
+
+Checklist per review asset visuali generati (card, carousel, thumbnail).
+
+---
+
+## Readability
+
+- [ ] Text readable at mobile size (simulate 320px wide)
+- [ ] Strong contrast between text and background
+- [ ] Headline <= 8 words (unless carousel)
+
+---
+
+## Brand
+
+- [ ] Colors match the client style guide
+- [ ] Fonts match the client style guide (or fallback defined)
+- [ ] No off-brand icons/illustrations
+
+---
+
+## Message
+
+- [ ] One clear idea per image
+- [ ] Visual supports the hook/CTA, not competing with it
+- [ ] No misleading visuals
+
+---
+
+## Technical
+
+- [ ] Correct aspect ratio for platform
+- [ ] No obvious artifacts / broken text
+- [ ] Safe margins for UI overlays
+
+---
+
+## Output
+
+- **If pass:** mark asset as `approved`
+- **If fail:** write fixes in `clients/{client}/backlog/tasks.md`
+
+---
+
+_Reference generato da framework-translator_
--- a/agency-shared-references/references/quality_bar.md
+++ b/agency-shared-references/references/quality_bar.md
@ -0,0 +1,41 @@
+# Quality Bar
+
+_Framework: agency_v3_1 | Estratto: 2026-03-09_
+_Usato da: agency-orchestrator, tutte le skills_
+
+## Sommario
+
+Standard minimo accettabile per deliverable V1.
+
+---
+
+## V1 Principles
+
+- **Completa > Perfetta**
+- **Tracciabile** (decision log + sources log)
+- **Ripetibile** (template + checklist)
+
+---
+
+## Pass/Fail Checklist (Generale)
+
+### Pass se:
+- Output in path corretto
+- Frontmatter presente e valido
+- Fonti loggate quando richiesto
+- QA checklist compilata
+
+### Fail se:
+- Output mancante o in path sbagliato
+- Citazioni senza sources log
+- Tentativo di publish senza `approved`
+
+---
+
+## Applicazione
+
+Ogni skill deve verificare questi criteri prima di considerare un task completo.
+
+---
+
+_Reference generato da framework-translator_
--- a/agency-shared-references/references/research_citation_rules.md
+++ b/agency-shared-references/references/research_citation_rules.md
@ -0,0 +1,46 @@
+# Research Citation Rules
+
+_Framework: agency_v3_1 | Estratto: 2026-03-09_
+_Usato da: agency-research_
+
+## Sommario
+
+Regole per citazione e logging fonti esterne.
+
+---
+
+## Obbligo
+
+Tutte le fonti esterne devono essere loggate e referenziate.
+
+---
+
+## Web Research
+
+Consentita **solo** su domini in whitelist:
+- Vedi `web_whitelist.yaml`
+- Vedi `web_sourcing_standard.md`
+
+---
+
+## Formato
+
+- Usa ID `SRC-###`
+- Per client: `clients/{client}/research/sources.md`
+- Per libreria OS: `core/knowledge/sources/SRC-###.md`
+
+---
+
+## Contenuto Minimo
+
+Ogni source log deve includere:
+- Data accesso
+- Titolo
+- Publisher/autore
+- URL
+- Affidabilità + motivazione
+- Note / estratti brevi
+
+---
+
+_Reference generato da framework-translator_
--- a/agency-shared-references/references/research_playbook.md
+++ b/agency-shared-references/references/research_playbook.md
@ -0,0 +1,50 @@
+# Research Playbook
+
+_Framework: agency_v3_1 | Estratto: 2026-03-09_
+_Usato da: agency-research_
+
+## Sommario
+
+Metodo per research competitor e reference.
+
+---
+
+## Competitor Research
+
+**Analizzare almeno 3 competitor.**
+
+**Studiare:**
+- Positioning
+- Messaging
+- Offer structure
+- Conversion mechanics
+- Trust signals
+- UX structure
+- Visual language
+
+**Deliver insights:**
+- Copy (cosa copiare)
+- Avoid (cosa evitare)
+- Opportunity (opportunità)
+
+---
+
+## Reference Research
+
+**Look outside the industry for inspiration.**
+
+**Raccogliere esempi di:**
+- Hero sections
+- Layout structures
+- Navigation patterns
+- Case study formats
+- Animation and motion
+
+**Per ogni reference document:**
+- Why it works
+- What to borrow
+- Possible risks
+
+---
+
+_Reference generato da framework-translator_
--- a/agency-shared-references/references/resource_types.md
+++ b/agency-shared-references/references/resource_types.md
@ -0,0 +1,212 @@
+# Resource Types — Tipologie Risorse e Use Case
+
+Questo documento classifica le tipologie di risorse gestite da agency-archivist e i relativi use case per le skill della suite.
+
+---
+
+## 📷 Immagini
+
+### Logo e Brand Assets
+
+| Tipo | Formato Consigliato | Risoluzione Minima | Use Case |
+|------|---------------------|-------------------|----------|
+| **Logo primario** | PNG (trasparente), SVG | 512x512px | Header sito, social profile, firma email |
+| **Logo secondario** | PNG, SVG | 512x512px | Footer, varianti su sfondi scuri |
+| **Icona/favicon** | PNG, ICO | 32x32px, 64x64px | Browser tab, app icon |
+| **Brand mark** | SVG, PNG | 256x256px | Social avatar, watermark |
+
+**Skill che usano:** agency-design-system, agency-web-developer, agency-social, agency-publisher
+
+---
+
+### Foto Prodotto
+
+| Tipo | Formato Consigliato | Risoluzione Minima | Use Case |
+|------|---------------------|-------------------|----------|
+| **Hero shot** | JPG, PNG | 3000x2000px | Homepage, e-commerce, ads |
+| **Dettaglio** | JPG | 2000x2000px | Schede prodotto, zoom |
+| **Lifestyle** | JPG | 2500x1500px | Social post, cataloghi |
+| **Packshot** | PNG (sfondo bianco) | 1500x1500px | E-commerce, marketplace |
+
+**Skill che usano:** agency-visual-generator, agency-web-developer, agency-social, agency-seo
+
+---
+
+### Foto Team e Ufficio
+
+| Tipo | Formato Consigliato | Risoluzione Minima | Use Case |
+|------|---------------------|-------------------|----------|
+| **Team photo** | JPG | 4000x3000px | About page, LinkedIn, stampa |
+| **Ritratti individuali** | JPG | 2000x2500px | Team page, speaker bio |
+| **Ufficio/ambienti** | JPG | 3000x2000px | Sito web, social, recruitment |
+| **Dietro le quinte** | JPG | 2000x2000px | Social stories, cultura aziendale |
+
+**Skill che usano:** agency-web-developer, agency-social, agency-creative-director
+
+---
+
+### Immagini Stock e Sfondi
+
+| Tipo | Formato Consigliato | Risoluzione Minima | Use Case |
+|------|---------------------|-------------------|----------|
+| **Sfondi sito** | JPG, WebP | 1920x1080px | Hero sections, background |
+| **Texture** | JPG, PNG | 2000x2000px | Design elements, overlay |
+| **Icone** | SVG, PNG | 64x64px, 128x128px | UI elements, infografiche |
+| **Illustrazioni** | SVG, PNG | 1500x1500px | Blog, presentazioni, social |
+
+**Skill che usano:** agency-design-system, agency-web-developer, agency-visual-generator
+
+---
+
+## 🎬 Video
+
+### Video Promozionali
+
+| Tipo | Formato | Durata | Risoluzione | Use Case |
+|------|---------|--------|-------------|----------|
+| **Promo 30s** | MP4 (H.264) | 0:30 | 1920x1080 | Social ads, homepage |
+| **Promo 60s** | MP4 (H.264) | 1:00 | 1920x1080 | YouTube, landing page |
+| **Brand video** | MP4, MOV | 2:00-5:00 | 4K (3840x2160) | Evento, presentazione |
+
+**Skill che usano:** agency-visual-generator, agency-youtube, agency-social, agency-web-developer
+
+---
+
+### Tutorial e Demo
+
+| Tipo | Formato | Durata | Risoluzione | Use Case |
+|------|---------|--------|-------------|----------|
+| **How-to** | MP4 | 2:00-10:00 | 1920x1080 | Supporto clienti, onboarding |
+| **Demo prodotto** | MP4 | 3:00-5:00 | 1920x1080 | Sito web, sales deck |
+| **Webinar** | MP4, MKV | 30:00-60:00 | 1920x1080 | YouTube, lead generation |
+
+**Skill che usano:** agency-youtube, agency-web-developer, agency-content
+
+---
+
+### Raw Footage
+
+| Tipo | Formato | Durata | Risoluzione | Use Case |
+|------|---------|--------|-------------|----------|
+| **B-roll** | MP4, MOV | Variabile | 4K/1080p | Editing video, montaggio |
+| **Interviste** | MP4, MOV | 10:00-30:00 | 1080p | Video testimonianze |
+
+**Skill che usano:** agency-visual-generator, agency-youtube
+
+---
+
+## 📄 Documenti
+
+### Brand Guidelines
+
+| Tipo | Formato | Use Case |
+|------|---------|----------|
+| **Brand book** | PDF | Linee guida complete (logo, colori, font, tono) |
+| **Logo guidelines** | PDF | Uso corretto logo, varianti, spaziature |
+| **Color palette** | PDF, PNG | Codici colori (HEX, RGB, CMYK, Pantone) |
+| **Typography guide** | PDF | Font primari, secondari, gerarchie |
+
+**Skill che usano:** agency-design-system, agency-creative-director, agency-web-developer
+
+---
+
+### Documenti Prodotto
+
+| Tipo | Formato | Use Case |
+|------|---------|----------|
+| **Schede prodotto** | PDF, DOCX | Specifiche tecniche, feature |
+| **Datasheet** | PDF | Dati tecnici, prestazioni |
+| **Listini prezzi** | PDF, XLSX | Pricing, pacchetti, offerte |
+| **Cataloghi** | PDF | Gamma prodotti completa |
+
+**Skill che usano:** agency-web-developer, agency-seo, agency-social
+
+---
+
+### Documenti Legali e Compliance
+
+| Tipo | Formato | Use Case |
+|------|---------|----------|
+| **Privacy policy** | PDF, DOCX | Sito web, compliance GDPR |
+| **Termini e condizioni** | PDF, DOCX | E-commerce, servizi |
+| **Cookie policy** | PDF, DOCX | Sito web, banner cookie |
+
+**Skill che usano:** agency-web-developer, agency-publisher
+
+---
+
+## 🏷️ Tagging System
+
+### Tag per Categoria
+
+```
+#logo #brand #prodotto #team #ufficio #stock #sfondo #texture
+#promo #video #tutorial #demo #webinar #interview
+#guidelines #brandbook #datasheet #listino #catalogo
+#privacy #termini #legal #compliance
+```
+
+### Tag per Tipo File
+
+```
+#png #jpg #svg #webp #gif #mp4 #mov #pdf #docx #xlsx
+#trasparente #vettoriale #highres #fullhd #4k
+#orizzontale #verticale #quadrato
+```
+
+### Tag per Use Case
+
+```
+#header #footer #social #ads #ecommerce #landing
+#about #blog #presentazione #stampa #email
+#homepage #product-page #checkout #thank-you
+```
+
+### Tag per Qualità
+
+```
+#print-ready #web-optimized #thumbnail #preview
+#raw #edited #final #draft
+```
+
+---
+
+## 📋 Checklist Upload Risorse
+
+### Prima di Caricare
+
+- [ ] **Risoluzione adeguata** per use case target
+- [ ] **Formato corretto** (PNG trasparente per logo, JPG per foto)
+- [ ] **Nomi file descrittivi** (no `IMG_1234.jpg`, usa `logo_primary.png`)
+- [ ] **Dimensioni contenute** (max 10MB per immagine, 500MB per archivio)
+- [ ] **Diritti di utilizzo** confermati (no copyright issues)
+
+### Dopo Estrazione
+
+- [ ] **Verifica catalogo** (`catalog.md` generato correttamente)
+- [ ] **Controlla categorizzazione** (file nelle cartelle giuste)
+- [ ] **Aggiungi tag mancanti** (se necessario, edita `.metadata.json`)
+- [ ] **Condividi con team** (comunica risorse disponibili)
+
+---
+
+## 🔍 Ricerca Risorse per Skill
+
+### agency-visual-generator
+Cerca: `#prodotto`, `#logo`, `#sfondo`, `#highres`
+
+### agency-design-system
+Cerca: `#logo`, `#brand`, `#guidelines`, `#colori`, `#font`
+
+### agency-web-developer
+Cerca: `#logo`, `#prodotto`, `#team`, `#hero`, `#fullhd`
+
+### agency-social
+Cerca: `#prodotto`, `#team`, `#orizzontale`, `#quadrato`, `#social`
+
+### agency-youtube
+Cerca: `#video`, `#promo`, `#tutorial`, `#thumbnail`, `#1920x1080`
+
+---
+
+_Agency Skills Suite v1.0_
--- a/agency-shared-references/references/strategy_playbook.md
+++ b/agency-shared-references/references/strategy_playbook.md
@ -0,0 +1,74 @@
+# Strategy Playbook
+
+_Framework: agency_v3_1 | Estratto: 2026-03-09_
+_Usato da: agency-strategy_
+
+## Sommario
+
+Framework per positioning, messaging e direzione strategica.
+
+---
+
+## Positioning
+
+**Definire:**
+- Audience
+- Problem
+- Desired outcome
+- Unique value
+- Proof
+
+**Formula:**
+> "For [audience] who want [outcome], we provide [solution] unlike [alternative] because [proof]."
+
+---
+
+## Messaging
+
+### Message House
+
+**Core message:**
+- Primary promise of the brand
+
+**Supporting messages:**
+- 3-5 key arguments supporting the promise
+
+**Proof points:**
+- Evidence such as results, numbers, testimonials
+
+**CTA:**
+- Desired action (contact, signup, purchase)
+
+---
+
+## Offer Architecture
+
+Organizza offerte in:
+
+| Tipo | Descrizione |
+|------|-----------|
+| **Entry offer** | Punto di ingresso, basso impegno |
+| **Core offer** | Offerta principale |
+| **Premium offer** | High-ticket, completo |
+
+**Ogni offerta include:**
+- Outcome
+- Process
+- Proof
+- CTA
+
+---
+
+## Content Pillars
+
+Definire 4-6 topic che il brand comunica consistentemente.
+
+**Esempio:**
+- Education
+- Insights
+- Case studies
+- Behind the scenes
+
+---
+
+_Reference generato da framework-translator_
--- a/agency-shared-references/references/trust_signal_patterns.md
+++ b/agency-shared-references/references/trust_signal_patterns.md
@ -0,0 +1,60 @@
+# Trust Signal Patterns
+
+_Framework: agency_v3_1 | Estratto: 2026-03-09_
+_Usato da: agency-ux-copy, agency-strategy_
+
+## Sommario
+
+Pattern per costruire fiducia con prova, chiarezza e coerenza.
+
+---
+
+## Tipi di Trust Signals
+
+### 1) Social Proof
+- Loghi clienti
+- Testimonial
+- Recensioni
+
+### 2) Proof of Work
+- Case studies
+- Portfolio
+- Process artifacts (wireframe, strategy doc)
+
+### 3) Authority
+- Awards
+- Talk / podcast
+- Partnerships
+- Certifications
+
+### 4) Transparency
+- Process
+- Timeline
+- Pricing posture (anche "starting from")
+- What's included / excluded
+
+---
+
+## Placement
+
+- Vicino a CTA (subito sopra o sotto)
+- Dopo services overview
+- Nelle pagine service
+
+---
+
+## Trust Copy Patterns
+
+- "Abbiamo aiutato [audience] a ottenere [outcome] con [approach]."
+- "Approccio: [3 step] — Risultati: [metric]."
+
+---
+
+## Anti-pattern
+
+- Claim generici senza prova ("best agency", "top quality")
+- Numeri senza contesto
+
+---
+
+_Reference generato da framework-translator_
--- a/agency-shared-references/references/weekly_report_template.md
+++ b/agency-shared-references/references/weekly_report_template.md
@ -0,0 +1,52 @@
+# Weekly Report Template
+
+_Framework: agency_v3_1 | Estratto: 2026-03-09_
+_Usato da: agency-analytics_
+
+## Sommario
+
+Template per report settimanali KPI.
+
+---
+
+## Template
+
+```markdown
+# Weekly Report - Week {WW}
+
+## KPI Snapshot
+
+{Inserire metriche chiave}
+
+## Highlights
+
+{Cosa ha funzionato}
+
+## Lowlights
+
+{Cosa non ha funzionato}
+
+## Top Content
+
+{Contenuti migliori}
+
+## Actions Next Week (max 5)
+
+1. {Action 1}
+2. {Action 2}
+3. {Action 3}
+4. {Action 4}
+5. {Action 5}
+```
+
+---
+
+## Regole
+
+- Max 5 actions per settimana
+- KPI snapshot deve essere conciso
+- Focus su insight concreti, non narrative lunghe
+
+---
+
+_Reference generato da framework-translator_
--- a/agency-shared-references/references/youtube_script_framework.md
+++ b/agency-shared-references/references/youtube_script_framework.md
@ -0,0 +1,32 @@
+# YouTube Script Framework
+
+_Framework: agency_v3_1 | Estratto: 2026-03-09_
+_Usato da: agency-youtube_
+
+## Sommario
+
+Pattern per script YouTube retention-first.
+
+---
+
+## Struttura Script
+
+| Tempo | Sezione | Descrizione |
+|-------|---------|-------------|
+| 0-10s | Hook | Promise + curiosity |
+| 10-25s | Credibility | Why you should listen |
+| 25-60s | Problem | Define the problem (relatable) |
+| Main | 3-5 Chapters | Con open loops |
+| End | Summary + CTA | Recap e call to action |
+
+---
+
+## Regole
+
+- Open a loop ogni 60-90s
+- Usare esempi, non teoria
+- Hook deve essere <10s
+
+---
+
+_Reference generato da framework-translator_