17 lines
1.4 KiB
Markdown
17 lines
1.4 KiB
Markdown
---
|
|
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.
|