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

name, description

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