feat: add layout archetype and typography skills

.agents/skills/layout-archetype-matrix/SKILL.md

@@ -0,0 +1,11 @@
+---
+name: layout-archetype-matrix
+description: Bento-grid layout rules (Non-Linear Layouts, Content-Mix Rule, Visual Anchor).
+---
+
+# Layout Archetype Matrix Guidelines
+
+*   **Typ A: Das "Asymmetrische Bento"** (Strikte mathematische Ordnung, ungleiche Kachelgrößen, ideal für daten- und featurelastige Dienstleister).
+*   **Typ B: Das "Split-Screen & Monolith"-Layout** (Vertikal zweigeteilter Viewport: Eine Bildschirmhälfte bleibt fixiert kleben [z.B. Hero-Statement], während die andere Hälfte hochauflösenden, einspaltigen Content scrollt. Ideal für Premium-Handwerk).
+*   **Typ C: Das "Magazin-Raster"** (Große, fette Typografie bricht aus dem Raster aus, Text überlappt Bilder dezent, starker Einsatz von Whitespace, unkonventionelle Spalten-Pfade. Perfekt für moderne Architekten/Planer).
+*   **Typ D: Das "Zentralisierte Fokus-Layout"** (Ein dominierendes, interaktives Kernelement in der Bildschirmmitte [z.B. ein konfigurierbarer 3D-Rechner oder Live-Preiskalkulator], um das herum sich die Navigations- und Vertrauens-Elemente radial oder minimalistisch anordnen).

.agents/skills/micro-layout-breakers/SKILL.md

@@ -0,0 +1,10 @@
+---
+name: micro-layout-breakers
+description: Verhindert visuelle Ermüdung (Scroll-Fatigue) durch das gezielte Einstreuen von Rhythmusbrechern innerhalb einer einzelnen Seite.
+---
+
+# Micro Layout Breakers Guidelines
+
+*   **Der Text-Slam:** Nach einer bildreichen Sektion folgt eine reine, riesige Text-Sektion (z.B. ein dreizeiliges Kundenversprechen in 4xl-Schriftgröße), die 100% der Bildschirmbreite einnimmt und maximalen Kontrast erzeugt.
+*   **Das "Infinite Ribbon":** Einbindung von unendlichen, leicht schräg gestellten Text-Ticker-Bändern (CSS-Marquees), die flüssig durch das Layout laufen und starre Sektionsgrenzen physisch durchbrechen.
+*   **Element-Überlappung (Negative Margins):** Bilder oder Bento-Cards ragen aus ihrer eigentlichen Sektion heraus und rücken bis zu 50px in die obere oder untere Sektion vor (`-mt-12`), um starre Trennlinien zu eliminieren.

.agents/skills/viewport-axis-shifting/SKILL.md

@@ -0,0 +1,9 @@
+---
+name: viewport-axis-shifting
+description: Steuert den Wechsel der Bewegungssymmetrie auf der Seite, um dem Nutzer ein interaktives Raumgefühl zu vermitteln.
+---
+
+# Viewport Axis Shifting Guidelines
+
+*   **Horizontal-Scroll-Inseln:** Integration von Sektionen (z.B. der Vorlagen-Katalog oder eine Projekt-Timeline), bei denen das vertikale Scrollen des Nutzers nahtlos in eine horizontale Schiebe-Bewegung übersetzt wird (via Tailwind `overflow-x-scroll scroll-smooth snap-x`).
+*   **Akkordeon-Stapel (Z-Achse):** Statt Listen untereinander anzuzeigen, stapeln sich Elemente wie ein Kartendeck übereinander. Beim Scrollen schiebt sich die nächste Karte über die vorherige (CSS `sticky top-28`).

.agents/skills/white-space-asymmetry/SKILL.md

@@ -0,0 +1,9 @@
+---
+name: white-space-asymmetry
+description: Nutzt gezielte, ungleiche Freiräume, um Exklusivität zu erzeugen und das Auge des Nutzers millimetergenau zu steuern.
+---
+
+# White Space Asymmetry Guidelines
+
+*   **Die 60-40-Regel:** Vermeidung von perfekten 50/50-Aufteilungen bei Text und Bild. Einbindung von asymmetrischen Spaltenlayouts (z.B. `grid-cols-5` mit einer `col-span-3` für Content und `col-span-2` für puren Leerraum).
+*   **"Atem-Pausen":** Mut zum bewussten "Leerraum-Monolithen". Das bedeutet: Sektionen, die absichtlich nur ein einziges, kleines UI-Element (z.B. ein glänzendes Gütesiegel) inmitten von viel dunklem Freiraum (`py-32` or `py-48`) inszenieren.