--- name: lighthouse description: | Iteriert den Lighthouse-Score einer Live-URL Richtung 100/100/100/100 — ohne das Design anzufassen. Triggert bei `/lighthouse `, „lighthouse score auf 100", „performance optimieren", „seite optimieren" oder vergleichbar. Identifiziert das passende Repo, arbeitet auf Feature-Branches off main, misst via PageSpeed Insights API, fixt ausschließlich design-neutrale Audits, deployt und loopt bis 100 oder bis kein weiterer Fix möglich ist, ohne das Design zu verändern. --- # /lighthouse — Performance auf 100 iterieren > **Standardisierte Version.** Das ist der Skill, mit dem wir bei CEELIS unsere > Kunden-Seiten auf 100/100/100/100 bringen — von firmenspezifischen Dingen (unsere > Repos, unser Hosting, unsere Secrets) befreit. Überall, wo du etwas an dein eigenes > Setup anpassen musst, steht ein `{{PLATZHALTER}}`. Wie du den Skill installierst und > auf dich anpasst, steht ganz unten unter **Installation & Anpassung**. > > Gebaut für [Claude Code](https://claude.com/claude-code). Drop-in: `~/.claude/skills/lighthouse/SKILL.md`. ## Ziel Du tippst `/lighthouse https://deine-seite.de`. Der Skill bringt **Performance / Accessibility / Best Practices / SEO** schrittweise auf 100 — **ohne Design-Änderungen**. ## Hard-Rule #1: Design bleibt wie es ist Optimierungen ausschließlich auf Render-/Network-/Markup-Ebene. Layout, Farben, Typografie, Komponenten-Struktur, Abstände, Animationen sind **tabu**. Ein Lighthouse-Lauf darf die Seite messbar schneller machen, aber niemals anders aussehen lassen. ### Erlaubt (Whitelist) - `loading="lazy"` + `decoding="async"` auf Below-Fold-Bildern - Preload/Preconnect-Hints für Above-Fold-Assets - `defer` / `async` / `media="print" onload=…`-Swap auf nicht-kritischem CSS/JS - Image-Konvertierung PNG/JPG → WebP/AVIF **bei identischer Pixel-Größe** - `srcset` + `sizes` ergänzen ohne Aspect-Ratio zu ändern - `width` + `height` Attribute auf ``/`