feat: add workspace skills configuration

.agents/skills/astro-expert/SKILL.md

@@ -0,0 +1,38 @@
+---
+name: astro-expert
+description: Guidelines for Astro full-stack development, Bento-grid layouts, corporate dark mode, page speed optimization, and UI/UX design.
+---
+
+# Astro & UI/UX Expert Guidelines
+
+## SECTION 1: GIT & WORKFLOW-SKILLS
+1. **Atomare Commits:** Generiere Code so, dass jede logische Änderung isoliert committet werden kann (z. B. Navbar separat von Hero).
+2. **Semantic Commits:** Nutze für Commit-Vorschläge zwingend die standardisierten Präfixe: `feat:`, `fix:`, `docs:`, `style:`, `refactor:`.
+3. **Imperative Sprache:** Formuliere Commit-Nachrichten immer als prägnanten Befehl (z. B. `feat: add bento grid layout`).
+4. **Clean History & Qualitäts-Check:** Prüfe vor jeder Ausgabe die korrekte Formatierung und stelle sicher, dass keine ungenutzten Imports verbleiben.
+
+## SECTION 2: CORPORATE DARK MODE & UI-REGELN
+5. **Striktes Farbschema:** Basis-Hintergrund: Edles Anthrazit/Schwarz (`#0B0F19`), Haupttext: Reinweiß, Akzente & Highlights: Arktis-Blau (`#38BDF8`). Keine Ausnahmen.
+6. **8pt-Grid-System:** Nutze für Layouts, Paddings und Margins konsequent Tailwind-Abstände in 4er-/8er-Schritten (`p-4`, `p-8`, `gap-4`, `gap-8`, `space-y-4`).
+7. **Visuelle Hierarchie & Scannbarkeit:** Slogans groß und markant, Fließtext in cleanem Weiß/Grau. Halte die Zeilenlänge für optimale Lesbarkeit kurz (`max-w-xl` bis `max-w-2xl`).
+8. **WCAG-Barrierefreiheit:** Garantiere bei allen Text- und Hintergrund-Kombinationen ein Kontrastverhältnis von mindestens 4.5:1 für perfekte Lesbarkeit.
+9. **Mobile-First-Responsive-Design:** Plane Layouts immer zuerst einspaltig für Smartphones (`grid-cols-1`) und skaliere sie am Desktop dynamisch (z. B. `md:grid-cols-3`).
+
+## SECTION 3: ULTRA-MODERN DESIGN PATTERNS & EFFECTS
+10. **Matte Boxen (Glassmorphismus):** Bento-Kacheln erhalten ein leicht helleres Anthrazit mit transluzenten Rändern: `bg-slate-900/50 backdrop-blur border border-white/10`.
+11. **Glow & Aurora Effekte:** Platziere subtile, arktis-blaue Hintergrund-Glows hinter Kacheln oder Texten für Tiefe: `bg-sky-500/10 blur-[120px] absolute`.
+12. **Bento-Grid Asymmetrie:** Erzeuge visuelle Spannung, indem du Kacheln unterschiedliche Breiten gibst (`col-span-1`, `md:col-span-2`), um das Auge des Nutzers zu leiten.
+13. **Text-Slicing & Gradients:** Verleihe wichtigen Schlüsselwörtern in Slogans einen progressiven Verlauf: `bg-clip-text text-transparent bg-gradient-to-r from-sky-400 to-white`.
+14. **Premium Micro-Interactions:** Jedes interaktive Element reagiert elegant via Hover. Kacheln heben sich leicht an und Ränder werden heller: `transition-all duration-300 hover:scale-[1.01] hover:border-sky-500/30`.
+15. **Bento-Inhalte-Mix:** Vermeide Monotonie. Mixe Text-Kacheln mit visuellen Elementen (z. B. einer Mini-PageSpeed-Anzeige, interaktiven Tool-Icons oder animierten Prozess-Schritten).
+
+## SECTION 4: ASTRO & REACT ARCHITEKTUR
+16. **Astro Island Architektur:** Nutze für 100% statischen HTML-Code native Astro-Komponenten. Reines CSS/HTML hat immer Vorrang.
+17. **React-Teilhydration:** Setze React-Komponenten (`client:visible` oder `client:load`) extrem sparsam und nur dort ein, wo echte Nutzer-Interaktion zwingend nötig ist (z. B. Kontaktformular).
+18. **PageSpeed-Garantie:** Halte Skripte minimal, nutzen die native Astro `<Image />` Komponente zur Bildoptimierung und erzeuge Code, der die 95%-Performance-Marke knackt.
+19. **Modulare UI-Vorlagen:** Baue das Projekt strukturiert auf:
+    * `BaseLayout.astro`: Zentrales Template für SEO, OpenGraph-Metatags und CSS-Reset.
+    * `Navbar`: Fixierter Header mit Logo, Navigation und prominentem CTA-Button ("Erstgespräch buchen").
+    * `Hero`: Starker Slogan gekoppelt mit einem visuellen Indikator für extreme Ladegeschwindigkeit.
+    * `BentoGrid`: Die 3 Kern-Säulen (*Webdesign*, *SEO/Sichtbarkeit*, *Hosting/Betrieb*) attraktiv verpackt.
+20. **Strukturierte Formulare:** Designe das Kontaktformular barrierefrei mit sichtbaren Labels, klaren Fokus-Zuständen (`focus:ring-2 focus:ring-sky-500`) und eindeutigen Fehlermeldungen.

.agents/skills/astro-react-architecture/SKILL.md

@@ -0,0 +1,16 @@
+---
+name: astro-react-architecture
+description: Guidelines for Astro Island architecture, light React partial hydration, page speed guarantees (>95%), modular templates, and accessible structured forms.
+---
+
+# Astro & React Architecture Guidelines
+
+16. **Astro Island Architektur:** Nutze für 100% statischen HTML-Code native Astro-Komponenten. Reines CSS/HTML hat immer Vorrang.
+17. **React-Teilhydration:** Setze React-Komponenten (`client:visible` oder `client:load`) extrem sparsam und nur dort ein, wo echte Nutzer-Interaktion zwingend nötig ist (z. B. Kontaktformular).
+18. **PageSpeed-Garantie:** Halte Skripte minimal, nutzen die native Astro `<Image />` Komponente zur Bildoptimierung und erzeuge Code, der die 95%-Performance-Marke knackt.
+19. **Modulare UI-Vorlagen:** Baue das Projekt structured auf:
+    * `BaseLayout.astro`: Zentrales Template für SEO, OpenGraph-Metatags und CSS-Reset.
+    * `Navbar`: Fixierter Header mit Logo, Navigation und prominentem CTA-Button ("Erstgespräch buchen").
+    * `Hero`: Starker Slogan gekoppelt mit einem visuellen Indikator für extreme Ladegeschwindigkeit.
+    * `BentoGrid`: Die 3 Kern-Säulen (*Webdesign*, *SEO/Sichtbarkeit*, *Hosting/Betrieb*) attraktiv verpackt.
+20. **Strukturierte Formulare:** Designe das Kontaktformular barrierefrei mit sichtbaren Labels, klaren Fokus-Zuständen (`focus:ring-2 focus:ring-sky-500`) und eindeutigen Fehlermeldungen.

.agents/skills/bento-content-shuffling/SKILL.md

@@ -0,0 +1,12 @@
+---
+name: bento-content-shuffling
+description: Verhindert visuelle Monotonie durch die gezielte Durchmischung von Inhaltstypen innerhalb des asymmetrischen Grid-Layouts.
+---
+
+# Bento Content Shuffling Guidelines
+
+*   **Der 3-Elemente-Mix:** Ein Raster darf niemals nur aus Text-Bild-Kombinationen bestehen. Es wechselt strikt zwischen:
+    1. Rein visuellen Cards (z.B. ein isoliertes, hochauflösendes UI-Element eines Handwerker-Dashboards).
+    2. Daten-Getriebenen Cards (z.B. ein animierter PageSpeed-Kreis, der live auf 100% hochzählt).
+    3. Story-Cards (z.B. ein großes, prägnantes Zitat eines Malermeisters im fetten Typografie-Stil).
+*   **Größen-Dynamik:** Strikter Wechsel der Card-Dimensionen (1x1, 2x1, 1x2, 2x2) basierend auf der Wichtigkeit des Inhalts, um eine natürliche visuelle Hierarchie zu erzeugen.

.agents/skills/bento-grid-architecture/SKILL.md

@@ -0,0 +1,10 @@
+---
+name: bento-grid-architecture
+description: Bento-grid layout rules (Non-Linear Layouts, Content-Mix Rule, Visual Anchor).
+---
+
+# Bento Grid Architecture Guidelines
+
+*   **Non-Linear Layouts:** Brich monotone Listen auf. Nutze asymmetrische Tailwind-Grids (`grid-cols-1 md:grid-cols-3`) mit unterschiedlichen Box-Breiten (`md:col-span-2` vs. `md:col-span-1`).
+*   **Content-Mix Rule:** Befülle das Bento-Grid dynamisch. Kombiniere reine Text-Kacheln mit visuellen Kacheln (z. B. interaktiven Metriken, Prozess-Schritten oder Tech-Icons).
+*   **Visual Anchor:** Eine Kachel im Grid muss immer als Haupt-Blickfang (Visual Anchor) dominieren (größer, farbintensiver oder animiert).

.agents/skills/bento-interaction-states/SKILL.md

@@ -0,0 +1,10 @@
+---
+name: bento-interaction-states
+description: Steuert dynamische und abwechslungsreiche Hover- und Interaktionszustände innerhalb des Bento-Grids, um den Entdeckerdrang zu wecken.
+---
+
+# Bento Interaction States Guidelines
+
+*   **Asymmetrischer Reveal:** Beim Hovern über eine Bento-Card verschieben sich Bildelemente im Inneren leicht (Parallaxe über CSS `transform: translateY(-5px)`), oder es wird ein versteckter CTA-Pfeil flüssig eingeblendet.
+*   **Spotlight-Glow:** Implementierung eines mausfolgenden JavaScript-freien oder minimalen CSS-Glow-Effekts, bei dem der Rand der Card exakt dort aufleuchtet (Sky-Blue), wo der Mauszeiger sich befindet.
+*   **Status-Indikatoren:** Jedes Template im Katalog erhält "Live-Tags" (z.B. pulsierende grüne Punkte für "Live-Vorschau aktiv" oder kleine animierte Lade-Icons bei Interaktion), die Hochwertigkeit signalisieren.

.agents/skills/corporate-dark-mode/SKILL.md

@@ -0,0 +1,12 @@
+---
+name: corporate-dark-mode
+description: Strict color scheme (#0B0F19 background, white text, #38BDF8 accents), 8pt grid system, high scannability, WCAG contrast (4.5:1), and mobile-first design.
+---
+
+# Corporate Dark Mode & UI Guidelines
+
+5. **Striktes Farbschema:** Basis-Hintergrund: Edles Anthrazit/Schwarz (`#0B0F19`), Haupttext: Reinweiß, Akzente & Highlights: Arktis-Blau (`#38BDF8`). Keine Ausnahmen.
+6. **8pt-Grid-System:** Nutze für Layouts, Paddings und Margins konsequent Tailwind-Abstände in 4er-/8er-Schritten (`p-4`, `p-8`, `gap-4`, `gap-8`, `space-y-4`).
+7. **Visuelle Hierarchie & Scannbarkeit:** Slogans groß und markant, Fließtext in cleanem Weiß/Grau. Halte die Zeilenlänge für optimale Lesbarkeit kurz (`max-w-xl` bis `max-w-2xl`).
+8. **WCAG-Barrierefreiheit:** Garantiere bei allen Text- und Hintergrund-Kombinationen ein Kontrastverhältnis von mindestens 4.5:1 für perfekte Lesbarkeit.
+9. **Mobile-First-Responsive-Design:** Plane Layouts immer zuerst einspaltig für Smartphones (`grid-cols-1`) und skaliere sie am Desktop dynamisch (z. B. `md:grid-cols-3`).

.agents/skills/git-workflow/SKILL.md

@@ -0,0 +1,11 @@
+---
+name: git-workflow
+description: Rules for atomic commits, semantic commit prefixes (feat, fix, docs, style, refactor), imperative language, and clean history checking.
+---
+
+# Git & Workflow Guidelines
+
+1. **Atomare Commits:** Generiere Code so, dass jede logische Änderung isoliert committet werden kann (z. B. Navbar separat von Hero).
+2. **Semantic Commits:** Nutze für Commit-Vorschläge zwingend die standardisierten Präfixe: `feat:`, `fix:`, `docs:`, `style:`, `refactor:`.
+3. **Imperative Sprache:** Formuliere Commit-Nachrichten immer als prägnanten Befehl (z. B. `feat: add bento grid layout`).
+4. **Clean History & Qualitäts-Check:** Prüfe vor jeder Ausgabe die korrekte Formatierung und stelle sicher, dass keine ungenutzten Imports verbleiben.

.agents/skills/glassmorphism-glow-effects/SKILL.md

@@ -0,0 +1,10 @@
+---
+name: glassmorphism-glow-effects
+description: Glassmorphism and glow guidelines (Matte Boxen, Background Aurora Glows, Reactive Micro-Interactions).
+---
+
+# Glassmorphism & Glow Effects Guidelines
+
+*   **Matte Boxen (Glassmorphismus):** Gestalte Kacheln mit transluzenten Ebenen und extrem feinen Rändern: `bg-slate-900/50 backdrop-blur-md border border-white/[0.08]`.
+*   **Background Aurora Glows:** Platziere extrem weiche, farbige Lichtpunkte hinter den Kacheln für visuelle Tiefe: `bg-sky-500/10 blur-[120px] absolute pointer-events-none`.
+*   **Reactive Micro-Interactions:** Jede Kachel muss auf Hover edel reagieren: Leichtes Anheben, Erhöhung der Rand-Helligkeit und Intensivierung des Glows (`transition-all duration-300 hover:scale-[1.01] hover:border-sky-500/30`).

.agents/skills/hybrid-bento-scrolling/SKILL.md

@@ -0,0 +1,9 @@
+---
+name: hybrid-bento-scrolling
+description: Kombiniert klassisches vertikales Scrollen mit horizontalen oder fixierten Elementen innerhalb des Bento-Grids, um die Verweildauer zu maximieren.
+---
+
+# Hybrid Bento Scrolling Guidelines
+
+*   **Sticky-Anchor-Cards:** In einem 3-Spalten-Grid bleibt die linke, große Haupt-Card (z.B. mit dem Titel "Maler-Templates") beim Scrollen fixiert (CSS `sticky top-24`), während die rechten, kleineren Cards mit den Design-Variationen flüssig vorbeiscrollen.
+*   **CSS-Driven Scroll Animations:** Nutzung von nativen CSS `@keyframes` gekoppelt an den Scroll-Fortschritt, um Elemente flüssig einzublenden oder zu transformieren.

.agents/skills/tactile-craftsman-ui/SKILL.md

@@ -0,0 +1,10 @@
+---
+name: tactile-craftsman-ui
+description: Verleiht dem modernen UI subtile, physische Design-Elemente, die Präzision, Handwerk und Wertigkeit vermitteln, ohne die Performance zu belasten.
+---
+
+# Tactile Craftsman UI Guidelines
+
+*   **Subtile Texturen:** Nutzung von extrem leichten, CSS-basierten Noise-Overlays (z.B. opacity-[0.015] im Hintergrund) auf Cards, um eine feine, matte "Material-Haptik" (wie geschliffenes Metall oder feiner Putz) zu erzeugen.
+*   **"Blueprint"-Raster:** Gezielter Einsatz von feinen, unterbrochenen Gitternetzlinien (Subtle Grid Borders, 1px border-slate-800/60) im Hintergrund von Sektionen, die an technische Zeichnungen erinnern.
+*   **Akzent-Indikatoren:** Nutzung von kleinen, geometrischen UI-Details wie simulierten Fadenkreuzen, Ecken-Markierungen (Border Corners) oder dezenten Tech-Badges in den Ecken von Bento-Cards, um "Präzisionsarbeit" visuell zu spiegeln.

.agents/skills/ui-element-best-practices/SKILL.md

@@ -0,0 +1,11 @@
+---
+name: ui-element-best-practices
+description: UI element guidelines (Smart Navbar, Accessible Inputs, SEO Accordions, Utility Badges).
+---
+
+# UI Element Best Practices Guidelines
+
+*   **Smart Navbar:** Muss fixiert (`sticky top-0`) oder intelligent einblendbar sein. Der primäre CTA-Button platziert sich unübersehbar ganz rechts.
+*   **Accessible Inputs:** Verwende in Formularen niemals verschwindende Platzhalter als Ersatz für Labels. Nutze feste Labels und markante Focus-Zustände (`focus:ring-2 focus:ring-sky-500`).
+*   **SEO Accordions:** Nutze strukturierte Akkordeons (z. B. für FAQs) im Footer-Bereich, um die Seite visuell sauber zu halten, aber maximalen Text für das Google-Ranking bereitzustellen.
+*   **Utility Badges:** Setze kleine, pillenförmige Indikatoren (`px-3 py-1 rounded-full text-xs`) über Headlines ein, um den Blick des Nutzers vorzufiltern.

.agents/skills/ultra-modern-design/SKILL.md

@@ -0,0 +1,13 @@
+---
+name: ultra-modern-design
+description: Matte boxen (glassmorphism), glow & aurora effects, bento-grid asymmetry, text-slicing gradients, premium micro-interactions, and diverse bento content mix.
+---
+
+# Ultra-Modern Design Patterns & Effects Guidelines
+
+10. **Matte Boxen (Glassmorphismus):** Bento-Kacheln erhalten ein leicht helleres Anthrazit mit transluzenten Rändern: `bg-slate-900/50 backdrop-blur border border-white/10`.
+11. **Glow & Aurora Effekte:** Platziere subtile, arktis-blaue Hintergrund-Glows hinter Kacheln oder Texten für Tiefe: `bg-sky-500/10 blur-[120px] absolute`.
+12. **Bento-Grid Asymmetrie:** Erzeuge visuelle Spannung, indem du Kacheln unterschiedliche Breiten gibst (`col-span-1`, `md:col-span-2`), um das Auge des Nutzers zu leiten.
+13. **Text-Slicing & Gradients:** Verleihe wichtigen Schlüsselwörtern in Slogans einen progressiven Verlauf: `bg-clip-text text-transparent bg-gradient-to-r from-sky-400 to-white`.
+14. **Premium Micro-Interactions:** Jedes interaktive Element reagiert elegant via Hover. Kacheln heben sich leicht an und Ränder werden heller: `transition-all duration-300 hover:scale-[1.01] hover:border-sky-500/30`.
+15. **Bento-Inhalte-Mix:** Vermeide Monotonie. Mixe Text-Kacheln mit visuellen Elementen (z. B. einer Mini-PageSpeed-Anzeige, interaktiven Tool-Icons oder animierten Prozess-Schritten).

.agents/skills/webdesign-foundations/SKILL.md

@@ -0,0 +1,11 @@
+---
+name: webdesign-foundations
+description: Strategische Design-Grundregeln (3-Second-Rule, Visual Hierarchy, Whitespace Mastery, Thumb-Zone & Mobile-First).
+---
+
+# Webdesign Foundations Guidelines
+
+*   **3-Second-Rule:** Jedes Einstiegs-Layout (Hero) muss sofort Klarheit über Angebot, Nutzen und den nächsten Schritt (CTA) liefern.
+*   **Visual Hierarchy:** Lenke das Auge gezielt über markante Größenunterschiede, fette Typografie und kontraststarke Aktions-Elemente.
+*   **Whitespace Mastery:** Nutze großzügigen Leerraum (`py-16`, `py-24`, `space-y-12`), um Inhalten Raum zum Atmen zu geben und ein Premium-Gefühl zu erzeugen.
+*   **Thumb-Zone & Mobile-First:** Platziere interaktive Elemente in der mobilen Ansicht so, dass sie perfekt mit dem Daumen erreichbar sind.