Daniel/ndsolutionswebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: formalize comprehensive technical, legal, and UX standards in agents guidelines

Browse Source
This commit is contained in:
DanielS
2026-07-18 04:16:26 +02:00
parent 56bf017e63
commit 03c37e592a
1 changed files with 27 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
.agents/AGENTS.md
View File

@@ -19,3 +19,30 @@
- **Don't Open Internal Links in New Tabs:** Let users control their own browsing journey instead of hijacking their back button.
- **Don't Use Text Gradients:** Avoid using gradient colors on text elements to maintain maximum readability, high contrast, and a clean, non-AI-generated look.
- **Don't Violate Familiarity (Jakob's Law):** Adhere to common design patterns (e.g. logo top-left redirects home) so users do not have to relearn basic navigation.
# Technische & Rechtliche Standards
## 1. Technische Barrierefreiheit (A11y)
- **Touch-Targets:** Mindestens 44x44 CSS-Pixel für interaktive Elemente.
- **Kontraste:** Text-Kontrast mind. 4,5:1. Bei Liquid Glass `backdrop-blur-xl` und deckende Hintergrund-Opacities sicherstellen.
- **Tastatur-Navigation:** Sinnvolle `:focus-visible` Ringe für die Tab-Navigation nutzen.
- **Screenreader:** Explizite `<label>`-Tags für Inputs. Akkordeons mit `aria-expanded` und `aria-controls`. Dekorative Icons mit `aria-hidden="true"`.
## 2. Rechtliche Sicherheit (100% DSGVO-Konformität)
- **Zero-Third-Party-Requests:** Keine externen CDNs (Fonts, Skripte, Icons lokal ausliefern).
- **Keine Cookies/Opt-Ins:** Ausschließlich funktionale Daten (wie Darkmode im LocalStorage) verwenden.
- **Formularverarbeitung:** DSGVO-konforme Übermittlung ohne ungefragte US-Drittdienste.
## 3. Design & Ästhetik ("Liquid Glass" & Clean Look)
- **Lesbarkeit:** Aurora-Glows dezent halten (z-0, Opacity max. 10-20%) und Text lesbar halten.
- **Kanten-Effekt:** Hauchdünne Borders (`border-[0.5px]` oder `border`) mit semi-transparenten Farben für edle Lichtkanten.
- **Theme-Transition:** Weiche Farbübergänge (`transition-colors duration-300`) auf großen Flächen zur Vermeidung harter Blitze.
## 4. Performance & Astro Hybrid-Architektur
- **Kein FOUC:** Darkmode-Erkennungsskripte blockierend im `<head>` als `is:inline` laden.
- **Image-Optimierung:** Astros `<Image/>` Komponente mit WebP/AVIF und festen Dimensionen verwenden, um CLS zu verhindern.
- **Teilhydrierung:** Clientseitiges JS minimieren. Animationen über CSS-Keyframes und nativen IntersectionObserver steuern.
## 5. Conversion & Psychologie (KMU Zielgruppe)
- **Verständlichkeit:** Kundensprache statt Tech-Sprech.
- **Sorgenfrei-Versprechen:** FAQ zu Änderungen, kostenlosem Domain-Umzug und Festpreisgarantie direkt positionieren.