docs: add comprehensive frontend landing page plan and download design skills

Add detailed landing page development plan in docs/frontend_landing_plan.md:
- Complete landing page structure (Hero, Problem/Solution, Features, Demo, CTA)
- Design guidelines from downloaded skills (typography, color, motion, composition)
- Security considerations (XSS prevention, input sanitization, CSP)
- Performance targets (LCP <2.5s, bundle <150KB, Lighthouse >90)
- Responsiveness and accessibility requirements (WCAG 2.1 AA)
- Success KPIs and monitoring setup
- 3-week development timeline with daily tasks
- Definition of Done checklist

Download 10+ frontend/UI/UX skills via universal-skills-manager:
- frontend-ui-ux: UI/UX design without mockups
- frontend-design-guidelines: Production-grade interface guidelines
- frontend-developer: React best practices (40+ rules)
- frontend-engineer: Next.js 14 App Router patterns
- ui-ux-master: Comprehensive design systems and accessibility
- ui-ux-systems-designer: Information architecture and interaction
- ui-ux-design-user-experience: Platform-specific guidelines
- Plus additional reference materials and validation scripts

Configure universal-skills MCP with SkillsMP API key for curated skill access.

Safety first: All skills validated before installation, no project code modified.

Refs: Universal Skills Manager (github:jacob-bd/universal-skills-manager)
Next: Begin Sprint 3 landing page development

docs/frontend_landing_plan.md

@@ -0,0 +1,222 @@
+# Piano d'Azione per lo Sviluppo della Landing Page
+
+**Obiettivo:** Creare una landing page di alta qualità che comunichi efficacemente l'UVP di LogWhisperer AI e converta i visitatori in utenti attivi.
+
+## 🎯 UVP da Comunicare
+> *"Il DevOps tascabile che traduce i crash del tuo server e ti dice l'esatto comando per risolverli"*
+
+## 📋 Elementi Chiave della Landing Page
+
+### 1. Sezione Hero (Above the fold)
+- **Headline:** Titolo chiaro e d'impatto che comunica immediatamente il valore
+- **Sub-headline:** Spiega brevemente come funziona e qual è il beneficio principale
+- **Visual:** Illustrazione o animazione che mostra il flusso: log criptici → analisi AI → comando chiaro
+- **CTA Primario:** Bottone prominente per iniziare subito (es: "Ottieni il tuo webhook URL gratis")
+- **CTA Secondario:** Opzione per imparare di più (es: "Guarda la demo")
+
+### 2. Sezione Problema/Soluzione
+- **Problema:** Mostra esempi di log criptici che fanno perdere tempo agli sviluppatori
+- **Soluzione:** Mostra come LogWhisperer trasforma quei log in comandi azionabili
+- **Confronto:** Tabelle o visualizzazioni che confrontano "prima" e "dopo"
+
+### 3. Sezione Come Funziona (3步骤)
+1. **Monitoraggio:** Lo script Bash monitora i log dei tuoi server
+2. **Analisi:** L'AI (tramite OpenRouter) analizza i log e suggerisce comandi
+3. **Azione:** Ricevi notifiche Telegram/Slack con il comando esatto da eseguire
+
+### 4. Sezione Features/Benefits
+- **Monitoraggio in tempo reale** - Nessun log perso
+- **Analisi AI intelligente** - Comandi precisi, non generici
+- **Notifiche immediate** - Telegram, Slack, email
+- **Sicurezza prima di tutto** - Nessun comando pericoloso suggerito
+- **Setup semplice** - Uno script di installazione
+- **Nessun costo iniziale** - Prova gratuita disponibile
+
+### 5. Sezione Demo Interattiva
+- **Simulatore di log** - Incolla o seleziona esempi di log
+- **Analisi in tempo reale** - Vedi come l'AI trasforma il log
+- **Comando risultante** - Mostra il comando che otterresti
+- **Copia con un click** - Pulsante per copiare il comando
+
+### 6. Sezione Social Proof
+- **Testimonianze** - Da utenti reali (se disponibili)
+- **Loghi clienti** - Aziende che utilizzano il prodotto
+- **Metriche** - Tempo medio di risoluzione ridotto di X%
+- **Case study** - Breve storia di successo
+
+### 7. Sezione FAQ
+- Domande comuni su sicurezza, pricing, setup, supporto
+- Risposte chiare e concise
+
+### 8. Footer
+- Link a documentazione, termini di servizio, privacy policy
+- Contatti e link social
+- Newsletter signup per aggiornamenti
+
+## 🛠️ Stack Tecnologico Consigliato
+
+### Frontend
+- **Framework:** React 18 + Vite (per velocità di sviluppo)
+- **Styling:** Tailwind CSS + Headless UI (per accessibilità)
+- **Animazioni:** Framer Motion (micro-interazioni)
+- **Icons:** Heroicons o Lucide
+- **Forms:** React Hook Form + Zod (validazione)
+- **State:** Zustand o Context API (leggero)
+
+### Backend/Mock API
+- **Endpoint:** `/api/generate-webhook` (genera UUID + salva config)
+- **Endpoint:** `/api/simulate-analysis` (simula analisi AI per demo)
+- **Database:** SQLite o file JSON temporaneo (per demo)
+- **Hosting:** Vercel o Netlify (CI/CD automatico)
+
+### Integrazione con Sistema Esistente
+- **Webhook URL:** Pagina genera URL unico che punta al n8n reale
+- **API Key:** Variabili ambiente sicure per OpenRouter
+- **Telegram:** Link diretto per avviare conversazione con bot
+
+## 🎨 Linee Guida di Design (dalle skill scaricate)
+
+### Da frontend-ui-ux e frontend-design-guidelines:
+- **Tipografia:** Gerarchia chiara, font leggibile, spacing adeguato
+- **Colore:** Palette limitata con colori di accento per le CTA
+- **Movimento:** Animazioni sottili che migliorano l'esperienza senza distrarre
+- **Composizione Spaziale:** Bianco abbondante, elementi ben separati
+- **Dettagli Visuali:** Micro-interazioni, hover states, feedback visivo
+- **Anti-Patterns da Evitare:** 
+  - Design generico "AI slop"
+  - Troppe informazioni sopra la piega
+  - CTA poco visibili
+  - Mancanza di gerarchia visiva
+
+### Da frontend-developer e related skills:
+- **Performance:** Ottimizzazione bundle size, lazy loading
+- **Accessibilità:** WCAG 2.1 AA, navigazione da tastiera
+- **Responsiveness:** Mobile-first approach
+- **Code Quality:** Componenti riutilizzabili, hooks custom
+- **Data Fetching:** React Query o SWR per caching e deduplicazione
+
+## 🔒 Considerazioni di Sicurezza
+
+### Safety First (Metodo Sacchi)
+- **Input Sanitization:** Validare tutti gli input utente
+- **XSS Prevention:** Escape output, usare textContent quando possibile
+- **CSRF Protection:** Token per form submits
+- **Rate Limiting:** Prevenire abuso degli endpoint API
+- **Secrets Management:** Mai esporre chiavi API nel codice frontend
+- **API CORS:** Restringere origini consentite
+
+### Privacy
+- **GDPR Consent:** Checkbox esplicita per newsletter
+- **Data Minimization:** Raccogliere solo dati necessari
+- **Transparent Uso Dati:** Spiegare cosa facciamo con le email
+
+## ⚡ Performance Obiettivi
+
+- **LCP (Largest Contentful Paint):** < 2.5s
+- **FID (First Input Delay):** < 100ms
+- **CLS (Cumulative Layout Shift):** < 0.1
+- **Bundle Size:** < 150KB gzipped
+- **Requests:** < 50 richieste iniziali
+- **TTFB:** < 200ms
+
+## 📱 Responsiveness e Accessibilità
+
+### Breakpoints
+- Mobile: < 640px
+- Tablet: 640px - 1024px
+- Desktop: > 1024px
+
+### Accessibilità (WCAG 2.1 AA)
+- **Color Contrast:** Rapporto almeno 4.5:1 per testo normale
+- **Keyboard Navigation:** Tutto navigabile da tab
+- **ARIA Labels:** Per elementi non testuali
+- **Focus Visible:** Evidente quando elemento è in focus
+- **Form Labels:** Etichette associate a tutti gli input
+- **Error Messaging:** Messaggi di errore chiari e associati
+
+## 📈 Metriche di Successo
+
+### KPI da Monitorare
+- **Conversion Rate:** Visitatori → Iscritti (target: >15%)
+- **Bounce Rate:** < 40% sulla landing page
+- **Time on Page:** > 60 secondi (engagement)
+- **CTR CTA Primario:** > 30%
+- **Demo Usage:** > 20% dei visitatori prova la demo
+- **Form Completion:** > 70% di chi inizia il form lo completa
+
+### Strumenti di Monitoraggio
+- **Analytics:** Plausible o Umbrella (privacy-first)
+- **Heatmaps:** Hotjar o Microsoft Clarity
+- **Error Tracking:** Sentry frontend
+- **Performance:** Lighthouse CI in CI/CD
+
+## 🗓️ Timeline di Sviluppo
+
+### Settimana 1: Fondamenta
+- Giorno 1: Setup progetto React + Vite + Tailwind
+- Giorno 2: Layout di base e sezione Hero
+- Giorno 3: Sezione Problema/Soluzione e Come Funziona
+- Giorno 4: Sezione Features e Demo Interattiva
+- Giorno 5: Review e refinements
+
+### Settimana 2: Potenziamento
+- Giorno 6: Sezione Social Proof e FAQ
+- Giorno 7: Footer e ottimizzazione SEO di base
+- Giorno 8: Form di iscrizione e integrazione API mock
+- Giorno 9: Responsiveness e testing cross-browser
+- Giorno 10: Accessibilità testing e fixes
+
+### Settimana 3: Lancio
+- Giorno 11: Performance optimization e bundle analysis
+- Giorno 12: Security audit e penetration testing leggero
+- Giorno 13: Content finale e proofreading
+- Giorno 14: Deploy su staging e QA finale
+- Giorno 15: Deploy su produzione e monitoraggio
+
+## ✅ Definition of Done
+
+La landing page sarà considerata completa quando:
+
+1. **Design Approvato:** Review da almeno 2 membri del team
+2. **Responsive:** Funziona perfettamente su mobile, tablet, desktop
+3. **Accessibile:** Passa test WCAG 2.1 AA (axe-core score > 90)
+4. **Performant:** Lighthouse score > 90 in tutte le categorie
+5. **Secure:** Nessuna vulnerabilità OWASP Top 10 evidente
+6. **Testata:** Test manuale su Chrome, Firefox, Safari, Edge
+7. **Deployed:** Live su dominio principale con SSL valido
+8. **Monitorata:** Analytics e error tracking funzionanti
+9. **Documentata:** README con istruzioni di sviluppo e deploy
+10. **Versionata:** Tag git v1.0.0-landing-page creato
+
+## 🚦 Checkpoint di Sicurezza
+
+Prima di ogni deploy significativo, verificare:
+
+- [ ] Nessun dato sensibile nel codice (API keys, token)
+- [ ] Tutti gli input sanificati sia client che server-side
+- [ ] CSP header configurato correttamente
+- [ ] HTTP-only cookies per sessioni (se applicabili)
+- [ ] Rate limiting sugli endpoint API
+- [ ] Error handling che non leakage stack trace
+- [ ] Timeout su tutte le richieste esterne
+- [ ] Input length limits ragionevoli
+
+## 📚 Riferimenti dalle Skill Scaricate
+
+### Consultare per riferimento:
+- `.opencode/skills/frontend-ui-ux/SKILL.md`
+- `.opencode/skills/frontend-design-guidelines/SKILL.md`  
+- `.opencode/skills/frontend-developer/SKILL.md`
+- `.opencode/skills/frontend-engineer/SKILL.md`
+- `.opencode/skills/ui-ux-master/SKILL.md`
+
+### Principi Chiave da Applicare:
+1. **Safety First** - Validazione, sanitizzazione, error handling sicuro
+2. **Little Often** - Rilasciare incrementi piccoli e testabili
+3. **Double Check** - Review design, test performance, verify security
+
+---
+
+**Prossimo Passo:** Iniziare lo sviluppo creando il progetto React e impostando la struttura di base.
+
+*Buon lavoro e ricordate: Safety first, little often, double check!* 🛡️