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