From 31007040e5cdd68c636bab6a755691fd21e07e59 Mon Sep 17 00:00:00 2001 From: DanielS Date: Sat, 18 Jul 2026 23:58:35 +0200 Subject: [PATCH] docs: add waas-guide strategy skill --- .agents/skills/waas-guide/SKILL.md | 182 +++++++++++++++++++++++++++++ 1 file changed, 182 insertions(+) create mode 100644 .agents/skills/waas-guide/SKILL.md diff --git a/.agents/skills/waas-guide/SKILL.md b/.agents/skills/waas-guide/SKILL.md new file mode 100644 index 0000000..2fc8d41 --- /dev/null +++ b/.agents/skills/waas-guide/SKILL.md @@ -0,0 +1,182 @@ +--- +name: waas-guide +description: Leitfaden fuer High-End-Webdesign (Bento-Grid), Conversion-Optimierung, DSGVO-Haertung und WaaS-B2B-Vertrieb. +--- + +# N&D IT Solutions: WaaS-Erweiterungsstrategie + +## SÄULE 1: Branchenspezifische Design-Strategien & Bento-Layouts + +### 1. Lokales Premium-Handwerk (Innenausbau, Solarteure) +* **Farbpsychologie:** + * Hintergrund: `#0B0F19` (Corporate Dark Mode) + * Sekundärfarbe: Warmbronze (`hsl(35, 35%, 45%)` / `#9C7A4E`) + * Akzentfarbe: Kupfer-Glow (`hsl(20, 70%, 55%)` / `#DE6B32`) + * Wirkung: Vermittelt Hitze, Energie, präzise Handwerksqualität und Wertigkeit. +* **Branchenspezifische Eye-Catcher:** + * *Tactile Craftsman UI:* Subtiles SVG-Rauschen über radialen Verläufen simuliert physikalische Oberflächen (z. B. geschliffenes Holz/Metall). + * *Kanten-Effekt:* Lichtkanten via `border-[0.5px] border-amber-900/30` und diffuse Schatten (`box-shadow: 0 0 25px -5px rgba(222, 107, 50, 0.15)`). +* **Bento-Layout-Struktur (3-Säulen-Grid):** + * *Säule 1:* Box 1 (Hero-Statement, col-span-2) | Box 2 (Vorher-Nachher Slider, col-span-1) + * *Säule 2:* Box 3 (Material-Galerie, col-span-1) | Box 4 (Rhythmusbrecher: Übergroßes, asymmetrisches Textzitat "Maßarbeit statt Masse." mit 20% Opacity Kupfer-Glow im Hintergrund, col-span-2) + * *Säule 3:* Box 5 (Festpreis-Garantie, col-span-1) | Box 6 (Kontakt-Schnittstelle, col-span-2) + +### 2. Medizinische Praxen & Kanzleien (Rechtsanwälte, High-End-Zahnärzte) +* **Farbpsychologie:** + * Hintergrund: `#0B0F19` + * Sekundärfarbe: Tiefes Smaragdgrün (`hsl(160, 40%, 25%)` / `#265C45`) + * Akzentfarbe: Arktis-Blau (`hsl(199, 95%, 74%)` / `#7DD3FC`) + * Wirkung: Signalisiert beruhigende Professionalität, Hygiene, absolute Diskretion und Vertrauen. +* **Branchenspezifische Eye-Catcher:** + * *Liquid Glass:* Extreme Transparenz (`backdrop-blur-xl bg-slate-900/60`). + * *Kanten-Reflexion:* Dünner, linearer Randverlauf (`border-[0.5px] border-white/10`) ohne Textur für sterile Ästhetik. +* **Bento-Layout-Struktur (3-Säulen-Grid):** + * *Säule 1:* Box 1 (H1 Expertise-Statement, col-span-2) | Box 2 (Direktbuchungs-Terminkalender, col-span-1) + * *Säule 2:* Box 3 (Rhythmusbrecher: Kreisförmige Foto-Maske des Inhabers bricht eckiges Grid, col-span-1) | Box 4 (Fachgebiete & Kernkompetenzen, col-span-2) + * *Säule 3:* Box 5 (Datenschutz-Zertifikat, col-span-1) | Box 6 (FAQ-Akkordeon, col-span-2) + +### 3. Lokale Premium-Dienstleister (Boutique-Fitness, Agenturen) +* **Farbpsychologie:** + * Hintergrund: `#0B0F19` + * Sekundärfarbe: Muted Violett (`hsl(270, 30%, 35%)` / `#533C6F`) + * Akzentfarbe: Neon-Cyan-Glow (`hsl(180, 100%, 50%)` / `#00FFFF`) + * Wirkung: Vermittelt Exklusivität, hohe Dynamik, Luxus und Modernität. +* **Branchenspezifische Eye-Catcher:** + * *Aurora Glow:* Animierte, extrem weiche Glow-Verläufe im Hintergrund (`animate-pulse-slow` mit max. 10% Deckkraft). + * *Hover-Glow:* Kanten leuchten interaktiv bei Mausbewegung (CSS-Radialgradient-Border). +* **Bento-Layout-Struktur (3-Säulen-Grid):** + * *Säule 1:* Box 1 (Visual Hero, col-span-2) | Box 2 (Mitgliedschafts-Modell, col-span-1) + * *Säule 2:* Box 3 (Kundenvorteile, col-span-1) | Box 4 (Rhythmusbrecher: Dynamisch blinkende Live-Auslastungs-Anzeige, col-span-2) + * *Säule 3:* Box 5 (Social Proof / Testimonials, col-span-2) | Box 6 (Kontakt, col-span-1) + +--- + +## SÄULE 2: UI/UX & Verkaufspsychologie (Conversion-Driven UX) + +### 1. Wizard-Optimierung (Absprungrate reduzieren bei Schritt 3) +* **Sorgenfrei-Versprechen (Mikro-Copy):** Direkt über dem E-Mail-/Telefon-Eingabefeld Platzierung von: *"Kein Spam. Kein Telefonterror. Nur Ihr fertiges Design-Konzept innerhalb von 24 Stunden."* +* **Fortschrittserhalt:** Visuelle Anzeige, dass die Daten aus Schritt 1 & 2 bereits lokal gesichert sind und das Konzept reserviert ist. +* **Alternative Interaktionswege:** Biete dem Nutzer neben dem Formular einen direkten WhatsApp-Short-Link an, der den Wizard-Fortschritt verschlüsselt als Text vorausfüllt. + +### 2. Bento-Interaction-States (Barrierefrei & CLS-frei) +* Keine Änderungen an Layout-Größen (`width`, `height`, `padding`, `border-width`), da diese Layout-Shifts (CLS) triggern. +* Ausschließliche Nutzung von Hardware-beschleunigten CSS-Eigenschaften (`transform`, `opacity`, `box-shadow`, `border-color`). +* Tastatur-Navigation: `:focus-visible` repliziert die Hover-Glow-Stile exakt. + +```css +.bento-card { + transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease, border-color 0.3s ease; + outline: none; +} +.bento-card:hover, .bento-card:focus-visible { + transform: translateY(-4px) scale(1.01); + border-color: rgba(56, 189, 248, 0.4); + box-shadow: 0 10px 30px -10px rgba(56, 189, 248, 0.2); +} +``` + +### 3. White-Space-Asymmetry (Preise im Fokus) +* **Freiraum-Kontrast:** Die WaaS-Preise erhalten die 2,5-fache vertikale Polsterung (`py-28`) im Vergleich zu restlichen Inhaltsabschnitten (`py-12`). +* **Asymmetrische Anordnung:** Platzierung der Preiskarten auf der linken Seite des Grids (2/3-Breite), während rechts freie, ununterbrochene Leere herrscht, die lediglich durch einen minimalen Arktis-Blau-Glow (z-0, 5% Opacity) akzentuiert wird. Dies lenkt den Blickpfad unweigerlich auf das Pricing. + +--- + +## SÄULE 3: Datenschutz & Performance (Security-Hardening-Privacy) + +### 1. DSGVO-Marketing-Textierung für KMUs +```html +
+
+ 100% Abmahnsicher +

Keine Abmahnfallen. Keine US-Server. Maximaler Datenschutz.

+
+
+

+ Herkömmliche Baukasten-Websites laden Schriftarten, Icons und Analysedienste unbemerkt von US-Servern (Google, Adobe etc.). Das ist illegal nach DSGVO und führt zu teuren Abmahnungen. +

+
+
+

+ Unsere statische Astro-Architektur liefert alles lokal aus Ihrem eigenen Webspace aus. Keine unbemerkt geladenen Fremddienste, keine zustimmungspflichtigen Tracking-Cookies, kein Ärger. Nur reine Performance und absolute Rechtssicherheit. +

+
+
+
+
+``` + +### 2. Code-Härtung (Standard-Security-Header) +* **Content Security Policy (CSP):** + ```http + Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'self'; frame-ancestors 'none'; upgrade-insecure-requests; + ``` +* **Sicherheitsrelevante HTTP-Response-Header:** + * `X-Frame-Options: DENY` (Verhindert Clickjacking-Angriffe) + * `X-Content-Type-Options: nosniff` (Verhindert MIME-Sniffing) + * `Referrer-Policy: strict-origin-when-cross-origin` + * `Permissions-Policy: geolocation=(), camera=(), microphone=()` + +--- + +## SÄULE 4: B2B-Vertrieb & WaaS-Skalierung + +### 1. WaaS-Einwandvorwegnahme (Argumentationskette) +* **Die Leasing-Analogie:** *"Sie kaufen für Ihren Betrieb keinen Firmenwagen bar für 60.000 €, der nach vier Jahren veraltet ist. Sie leasen ihn inklusive Full-Service. WaaS ist das Leasing-Modell für Ihre Website."* +* **Finanzielle Optimierung:** *Einmalkauf (3.000 €) blockiert Ihre Liquidität und muss über Jahre abgeschrieben werden. WaaS (99 €/Monat) ist sofort zu 100% als Betriebsausgabe steuerlich absetzbar. Hosting und Wartung sind bereits integriert (Ersparnis: ~70 €/Monat).* +* **Die Veraltungs-Garantie:** *Websites altern rasant. Bei unserem WaaS-Modell erhalten Sie nach 24 Monaten Laufzeit einen vollständigen visuellen und technischen Relaunch Ihrer Seite – komplett kostenfrei.* + +### 2. KI-Automatisierungs-Schnittstelle (JSON Payload für MDX-Erstellung) +Das nachfolgende JSON-Format wird vom Onboarding-Wizard generiert und per Webhook an die KI-Pipeline gesendet, um die Astro MDX Content Collections automatisch zu strukturieren: + +```json +{ + "client_metadata": { + "agency_id": "nd-it-solutions", + "timestamp": "2026-07-18T23:31:00Z", + "domain": "innenausbau-schmidt.de" + }, + "branding": { + "industry": "craftsman", + "company_name": "Schreinerei Schmidt", + "branding_style": "minimal-dark", + "primary_color": "hsl(35, 35%, 45%)", + "secondary_color": "hsl(20, 70%, 55%)" + }, + "structure": { + "sections": ["hero", "bento-portfolio", "roi-calculator", "gdpr-trust", "contact-form"], + "features": { + "before_after_slider": true, + "online_calendar": false, + "custom_calculator": "roi" + } + }, + "content_data": { + "usps": [ + "30 Jahre Meisterbetrieb", + "Festpreisgarantie vor Baubeginn", + "Staubfreie Montage" + ], + "services": [ + { + "title": "Edler Innenausbau", + "description": "Individuelle Raumkonzepte für Küche und Wohnbereich." + }, + { + "title": "Möbel nach Maß", + "description": "Unikate aus Meisterhand, perfekt angepasst." + } + ], + "testimonials": [ + { + "author": "M. Weber", + "quote": "Beste Entscheidung! Der Umbau war absolut staubfrei." + } + ] + }, + "contact": { + "phone": "+49 123 456789", + "email": "info@innenausbau-schmidt.de", + "address": "Hauptstraße 42, 80331 München" + } +} +```