---
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.