From 1c185f41217144bf833a30afe0c37dedb7bcdd24 Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Tue, 7 Jul 2026 01:00:21 +0200
Subject: [PATCH] feat: add performance, conversion and accessibility skills

---
 .agents/skills/accessible-inclusive-design/SKILL.md  | 10 ++++++++++
 .agents/skills/adaptive-responsive-fluidity/SKILL.md | 10 ++++++++++
 .agents/skills/clean-code-architecture/SKILL.md      | 10 ++++++++++
 .agents/skills/conversion-driven-ux/SKILL.md         | 11 +++++++++++
 .agents/skills/core-web-vitals-perfection/SKILL.md   | 10 ++++++++++
 5 files changed, 51 insertions(+)
 create mode 100644 .agents/skills/accessible-inclusive-design/SKILL.md
 create mode 100644 .agents/skills/adaptive-responsive-fluidity/SKILL.md
 create mode 100644 .agents/skills/clean-code-architecture/SKILL.md
 create mode 100644 .agents/skills/conversion-driven-ux/SKILL.md
 create mode 100644 .agents/skills/core-web-vitals-perfection/SKILL.md

diff --git a/.agents/skills/accessible-inclusive-design/SKILL.md b/.agents/skills/accessible-inclusive-design/SKILL.md
new file mode 100644
index 0000000..7039246
--- /dev/null
+++ b/.agents/skills/accessible-inclusive-design/SKILL.md
@@ -0,0 +1,10 @@
+---
+name: accessible-inclusive-design
+description: Gewährleistet, dass jede Website ohne Einschränkungen barrierefrei nach den WCAG 2.2 AA Richtlinien bedienbar und rechtssicher ist.
+---
+
+# Accessible Inclusive Design Guidelines
+
+*   **Kontrast & Lesbarkeit:** Strikte Einhaltung des Kontrastverhältnisses von mindestens 4.5:1 für Fließtext und 3:1 für große Überschriften und UI-Komponenten.
+*   **Keyboard-Navigierbarkeit:** Alle interaktiven Elemente (Buttons, Links, Formulare) müssen logisch mit der Tabulatortaste ansteuerbar sein und einen deutlich sichtbaren `:focus`-State besitzen.
+*   **Screenreader-Konformität:** Jedes Bild benötigt ein präzises, beschreibendes `alt`-Attribut. Formularfelder müssen über explizite `<label>`-Tags oder `aria-label` eindeutig verknüpft sein.
diff --git a/.agents/skills/adaptive-responsive-fluidity/SKILL.md b/.agents/skills/adaptive-responsive-fluidity/SKILL.md
new file mode 100644
index 0000000..b9ea429
--- /dev/null
+++ b/.agents/skills/adaptive-responsive-fluidity/SKILL.md
@@ -0,0 +1,10 @@
+---
+name: adaptive-responsive-fluidity
+description: Garantiere makellose, flüssige Layouts auf allen erdenkbaren Bildschirmgrößen (von der Smartwatch bis zum 4K-Monitor) ohne Layout-Shifts.
+---
+
+# Adaptive Responsive Fluidity Guidelines
+
+*   **Fluid Typography & Spacing:** Konsequente Nutzung von Tailwinds modernen Funktionen oder CSS-Funktionen wie `clamp()`, `calc()` und relativen Einheiten (`rem`, `vw`), damit Schriften und Abstände stufenlos mit der Bildschirmgröße mitatmen.
+*   **Mobile Daumenzone:** Platzierung aller kritischen Interaktionselemente (Menüs, primäre CTAs) im unteren und mittleren Drittel des Smartphones.
+*   **Flex- & Grid-Sicherungen:** Jedes Grid muss mit `minmax()` oder intelligenten Autofit-Klassen abgesichert sein, um Textüberlappungen oder abgeschnittene Bilder bei ungewöhnlichen Display-Ratios zu verhindern.
diff --git a/.agents/skills/clean-code-architecture/SKILL.md b/.agents/skills/clean-code-architecture/SKILL.md
new file mode 100644
index 0000000..d589239
--- /dev/null
+++ b/.agents/skills/clean-code-architecture/SKILL.md
@@ -0,0 +1,10 @@
+---
+name: clean-code-architecture
+description: Erzwingt eine saubere, modulare und leicht wartbare Code-Architektur basierend auf Best Practices des modernen Software-Engineering.
+---
+
+# Clean Code Architecture Guidelines
+
+*   **Single-Responsibility-Prinzip:** Jede UI-Komponente (z.B. `Button.astro`, `Card.astro`) erfüllt genau eine Aufgabe. Logik und visuelle Präsentation werden strikt getrennt.
+*   **DRY (Don't Repeat Yourself):** Wiederkehrende Layout-Muster, Farbkombinationen oder Abstände werden konsequent in globale CSS-Variablen, Tailwind-Configs oder wiederverwendbare Unterkomponenten ausgelagert.
+*   **Selbstdokumentierender Code:** Nutzung von aussagekräftigen, semantischen CSS- und Komponenten-Namen (z.B. `BentoGridGold.astro` statt `Grid2.astro`). Komplexe Logik wird inline kurz und prägnant kommentiert.
diff --git a/.agents/skills/conversion-driven-ux/SKILL.md b/.agents/skills/conversion-driven-ux/SKILL.md
new file mode 100644
index 0000000..b16e299
--- /dev/null
+++ b/.agents/skills/conversion-driven-ux/SKILL.md
@@ -0,0 +1,11 @@
+---
+name: conversion-driven-ux
+description: Richtet jedes Layout, jeden Textabschnitt und jedes UI-Element kompromisslos auf Verkaufspsychologie, Nutzerführung und Lead-Generierung aus.
+---
+
+# Conversion Driven UX Guidelines
+
+*   **3-Sekunden-Regel:** Der Hero-Bereich muss in unter 3 Sekunden drei Fragen beantworten: Was wird angeboten? Für wen ist es? Was ist der nächste Schritt?
+*   **Visuelle Hierarchie (F- & Z-Muster):** Platzierung von Vertrauenselementen (Bewertungen, Siegel) und CTAs exakt entlang des natürlichen Scan-Pfads des Nutzers.
+*   **Reibungsreduktion:** Formulare so kurz wie möglich halten. Komplexe Prozesse in mehrstufige, interaktive Funnels (Multi-Step-Forms) aufteilen, um die Absprungrate zu minimieren.
+*   **Einwand-Vorwegnahme:** Strategisches Platzieren von FAQs und Risikominderern (z.B. "In 2 Minuten erledigt", "Kostenfrei & unverbindlich") direkt in der Nähe von Conversion-Punkten.
diff --git a/.agents/skills/core-web-vitals-perfection/SKILL.md b/.agents/skills/core-web-vitals-perfection/SKILL.md
new file mode 100644
index 0000000..3e1486a
--- /dev/null
+++ b/.agents/skills/core-web-vitals-perfection/SKILL.md
@@ -0,0 +1,10 @@
+---
+name: core-web-vitals-perfection
+description: Optimiert den generierten Code auf maximale Ladegeschwindigkeit und erzwingt Werte von >95% in Google Lighthouse / Core Web Vitals.
+---
+
+# Core Web Vitals Perfection Guidelines
+
+*   **LCP (Largest Contentful Paint):** Hero-Bilder müssen immer das Attribut `loading="eager"` und `fetchpriority="high"` erhalten. Niemals Lazy-Loading im sichtbaren Bereich über dem Falz.
+*   **CLS (Cumulative Layout Shift) verhindern:** Jedes Bild und jedes interaktive Element (wie Slider oder Akkordeons) MUSS feste Breiten- und Höhenangaben (`width`, `height` oder `aspect-ratio`) besitzen, damit das Layout beim Laden nicht springt.
+*   **Semantisches HTML & CSS-First:** JavaScript-freie Alternativen bevorzugen. Animationen und interaktive States (wie Dropdowns oder Modals) wenn möglich über reines CSS (:hover, :focus-within, Details/Summary-Tags) lösen.