Communitygithub.com

xoai/sage

Universelle Webentwicklungsprinzipien – Barrierefreiheit (WCAG 2.2), Performance (Core Web Vitals), Sicherheitsheader (OWASP), SEO, Responsive Design, Fehler-UX und Ladezustände. Framework-unabhängig.

Was ist sage?

Dieses Skill-Paket kodiert grundlegende Webplattform-Prinzipien, die in jedem Webprojekt gelten – unabhängig vom verwendeten Framework (React, Vue, Svelte, Vanilla JS). Es schließt die Lücke zwischen theoretischem Wissen und konsistenter Anwendung: So wissen Agenten zwar, was ARIA-Labels sind, erstellen aber trotzdem Formulare ohne Fehleransagen für Screenreader. Das Paket enthält sieben Patterns (Barrierefreiheit nach WCAG 2.2, Core Web Vitals, OWASP-Sicherheitsheader, SEO, Responsive Design, Fehler-UX, Ladezustände), sechs Anti-Patterns (u.a. Div-Suppe, fehlender Alternativtext, Layout Shifts, ungeschützte Formulare) und sieben Verfassungsprinzipien. Es basiert auf aktuellen Standards wie WCAG 2.2 (Oktober 2023), Google Core Web Vitals (2025), OWASP Secure Headers Project und dem European Accessibility Act (Juni 2025). Nicht abgedeckt werden frameworkspezifische Patterns, CSS-Methodiken oder Build-Tool-Konfigurationen.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/xoai/sage/tree/HEAD/skills/web

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

web

Layer 1 – Domain Foundation (v2.0)

Universelle Webentwicklungsprinzipien, die in jedem Webprojekt gelten – unabhängig vom Framework. React, Vue, Svelte, Vanilla JS – diese Prinzipien sind gültig.

Philosophie

Dieses Paket kodiert grundlegende Webplattform-Kenntnisse, die Agenten oft isoliert richtig haben, in der Praxis aber vermissen. Ein Agent weiß, was ARIA-Labels sind. Trotzdem produziert er ein Formular ohne Fehlerankündigungen für Screenreader. Ein Agent kennt Core Web Vitals. Trotzdem rendert er ein 2 MB Heldenbild ohne Maße.

Die Lücke liegt nicht im Wissen – sondern in der konsistenten Anwendung.

Was enthalten ist

TypAnzahlAbdeckung
Patterns7Barrierefreiheit (WCAG 2.2), Performance (Core Web Vitals), Sicherheitsheader (OWASP), SEO, Responsive Design, Fehler-UX, Ladezustände
Anti-Patterns6Div-Suppe, fehlender Alternativtext, Layout Shifts, ungeschützte Formulare, clientseitige kritische Pfade, keine Sicherheitsheader
Verfassung7Prinzipien

Fundiert durch: W3C WCAG 2.2 (Oktober 2023), Google Core Web Vitals (2025), OWASP Secure Headers Project, OWASP CSP Cheat Sheet, MDN Web Docs, Web Almanac 2025, European Accessibility Act (Juni 2025).

Was dieses Paket NICHT abdeckt

  • Frameworkspezifische Patterns (siehe react, nextjs, usw.)
  • Meinungen zu CSS-Methodiken (BEM vs. Utility-First vs. CSS-in-JS)
  • Build-Tool-Konfiguration (Webpack, Vite, Turbopack)
  • Backend-/API-Patterns (siehe api oder baas)

Verwandte Skills