byteTuto/website

Regeln, damit jede Seite von bytetuto.com responsive ist (Mobile-First, 320 px → 1920 px, ohne horizontales Scrollen). Für jede Erstellung oder Änderung von Seiten, CSS, Layouts, Bildern oder Komponenten in site/ sowie vor dem Validieren eines PRs, der das Display betrifft.

Was ist website?

Dieser Skill definiert strenge Responsive-Design-Regeln für die Website bytetuto.com. Er stellt sicher, dass jede Seite auf Bildschirmgrößen von 320 px (kleinstes Smartphone) bis 1920 px (großer Desktop) ohne horizontales Scrollen oder Überlauf dargestellt wird. Das Skript `python3 scripts/check_responsive.py` prüft automatisch sechs Referenzbreiten (320, 375, 414, 768, 1024, 1440 px) auf Einhaltung der Regeln – auch in der CI/CD-Pipeline. Entwickler werden angehalten, alle Änderungen an Seiten, CSS, Layouts, Bildern oder Komponenten im Verzeichnis `site/` vor dem PR-Review lokal zu testen. Der Skill enthält detaillierte CSS-Richtlinien wie Mobile-First mit Breakpoints bei 600, 900 und 1200 px, Verbot von festen Breiten über 280 px ohne `min()`/`max-width`, flüssige Typografie mit `clamp()`, Mindesthöhen mit `100svh` statt `100vh`, Touch-Ziele ≥ 44 × 44 px, und korrekte Einbindung von Bildern und Videos. Zusätzlich wird die Barrierefreiheit durch `prefers-reduced-motion` und den Verzicht auf `user-scalable=no` unterstützt. Der Skill ist als konkrete Arbeitsanweisung für Entwickler konzipiert, die an bytetuto.com arbeiten, und kann direkt in Entwicklungsumgebungen wie Claude Code, Cursor oder Codex verwendet werden.

Funktioniert mit~Claude Code~Codex CLI~Cursor

npx skills add https://github.com/byteTuto/website/tree/HEAD/.claude/skills/site-responsive

Dokumentation

Site immer responsive

Eine Seite ist erst fertig, wenn sie python3 scripts/check_responsive.py besteht (kein horizontales Scrollen, nichts ragt über den Bildschirmrand, Touch-Ziele groß genug) bei allen 6 Referenzgrößen. Diese Prüfung läuft auch in der CI: Ein PR, der das responsive Design kaputt macht, kann nicht deployed werden.

Referenzbreiten (alle testen)

Breite	Fall
320 px	kleines Android, iPhone SE im Zoom
375 px	iPhone Standard (Ziel Nr. 1: die Zielgruppe kommt von TikTok)
414 px	großes Telefon
768 px	Tablet im Hochformat
1024 px	Tablet im Querformat / kleiner Laptop
1440 px	Desktop

Vom Skript getestete Größen: 320×640, 375×667, 414×896, 768×1024, 1024×600 (niedriger Bildschirm), 1440×900.

CSS-Regeln

Mobile-First: Basis-Styles für 320 px, dann @media (min-width: …) für größere Bildschirme. Breakpoints: 600px, 900px, 1200px (keine anderen magischen Werte; eine Komponente kann @container verwenden).
Keine feste Breite größer als 280 px ohne min() / max-width: 100%: width: min(520px, 100%).
Flüssige Typografie mit clamp(): Überschriften clamp(32px, 7vw, 72px), Fließtext mindestens 16 px (niemals darunter auf mobilen Geräten, sonst zoomt iOS in Felder hinein).
Höhen: min-height: 100svh (nicht 100vh, das unter der mobilen Adressleiste verschwindet). Niemals eine feste height bei einem Textblock.
Seitenabstände: Rand von 16 px auf mobilen Geräten (space-4), plus env(safe-area-inset-left/right) für Bildschirme mit Notch (der Viewport hat bereits viewport-fit=cover).
Langer Text: overflow-wrap: anywhere für URLs, Befehle und Dateinamen; Codeblöcke mit overflow-x: auto innerhalb des Blocks, niemals auf der Seite.
Grids: grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)) für Tutorial-Karten.
Dekorative Elemente, die überlaufen (z.B. byte/spark-Blöcke, Canvas): position: fixed oder Eltern-Element mit overflow: clip, und Größen mit min(vw, px).
Touch: isolierte Schaltflächen und Links ≥ 44 × 44 px (24 px = Mindestgrenze des Skripts, WCAG 2.2), mindestens 8 px Abstand zwischen zwei Zielen. Keine Informationen, die nur bei Hover (:hover) verfügbar sind: :focus-visible und Touch-Zustand vorsehen.
Videos und iFrames (YouTube): aspect-ratio: 16 / 9; width: 100%; height: auto; — TikTok-Videos in 9 / 16 mit max-width: 360px.

Bilder

Immer width und height im HTML (vermeidet Layout-Verschiebungen, CLS) + max-width: 100%; height: auto in CSS.
Formate: SVG für Logos und Symbole, WebP/AVIF für Screenshots, mit srcset + sizes (z.B. 480w, 960w, 1600w).
loading="lazy" und decoding="async" unter dem Falz; niemals beim Hauptbild (LCP), das fetchpriority="high" erhält.
Tutorial-Vorschaubilder: aspect-ratio: 16 / 9; object-fit: cover.

Viewport (bereits vorhanden, nicht entfernen)

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

Verboten: maximum-scale=1, user-scalable=no (blockiert Zoom, schlecht für Barrierefreiheit).

Animation und mobile Performance

prefers-reduced-motion beachten (Projektregel).
Canvas: devicePixelRatio auf 2 begrenzen und Dichte unter 600 px reduzieren (bereits in app.js umgesetzt, dieses Prinzip beibehalten).
Kein schweres backdrop-filter auf mobilen Geräten stapeln.

Überprüfen

# mit dem check-site-Container, der auf :8088 läuft, oder ohne Argument (lokaler Server auf site/)
python3 scripts/check_responsive.py                 # alle Seiten in site/
python3 scripts/check_responsive.py --shots /tmp/rs # + PNG-Screenshots pro Breite

Das Skript schlägt fehl, wenn scrollWidth > Breite, wenn ein sichtbares Element über den Rand ragt, wenn ein Touch-Ziel kleiner als 24 px ist (Links in einem Satz sind ausgenommen) oder wenn der Fließtext kleiner als 16 px ist. Screenshots bei 320 und 375 px ansehen, bevor du pushst.