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

name, description

name	description
astro-react-architecture	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.