Frontend Slides

Was macht Frontend Slides?

Erstelle abhängigkeitsfreie, animationsreiche HTML-Präsentationen, die vollständig im Browser laufen.

Inspiriert vom Ansatz der visuellen Exploration, wie er in den Arbeiten von zarazhangrui gezeigt wird (Credit: @zarazhangrui).

Wann aktivieren

• Erstellen eines Vortragsdecks, Pitchdecks, Workshopdecks oder einer internen Präsentation
• Konvertieren von .ppt- oder .pptx-Folien in eine HTML-Präsentation
• Verbessern einer bestehenden HTML-Präsentation hinsichtlich Layout, Bewegung oder Typografie
• Erkunden von Präsentationsstilen mit einem Benutzer, der noch keine Designvorlieben kennt

Unverhandelbar

1. Keine Abhängigkeiten: Standardmäßig eine einzelne, in sich geschlossene HTML-Datei mit inline CSS und JS.
2. Viewport-Fit ist Pflicht: Jede Folie muss in einen Viewport passen, ohne intern zu scrollen.
3. Zeigen, nicht erzählen: Verwende visuelle Vorschauen anstelle von abstrakten Stilfragebögen.
4. Charakteristisches Design: Vermeide generische Lila-Verläufe, Inter-auf-weiß, vorlagenartige Decks.
5. Produktionsqualität: Halte den Code kommentiert, zugänglich, responsiv und performant.

Vor dem Generieren lies STYLE_PRESETS.md für die viewportsichere CSS-Basis, Dichtegrenzen, den Vorlagenkatalog und CSS-Fallen.

Arbeitsablauf

1. Modus erkennen

Wähle einen Pfad:

• Neue Präsentation: Benutzer hat ein Thema, Notizen oder einen vollständigen Entwurf
• PPT-Konvertierung: Benutzer hat .ppt oder .pptx
• Verbesserung: Benutzer hat bereits HTML-Folien und möchte Verbesserungen

2. Inhalt ermitteln

Frage nur das Nötigste:

• Zweck: Pitch, Lehre, Konferenzvortrag, internes Update
• Länge: kurz (5-10), mittel (10-20), lang (20+)
• Inhaltszustand: fertiger Text, grobe Notizen, nur Thema

Wenn der Benutzer Inhalte hat, bitte ihn, sie vor dem Styling einzufügen.

3. Stil ermitteln

Standardmäßig visuelle Exploration.

Wenn der Benutzer bereits die gewünschte Vorlage kennt, überspringe die Vorschauen und verwende sie direkt.

Andernfalls:

1. Frage, welches Gefühl das Deck vermitteln soll: beeindruckt, energiegeladen, fokussiert, inspiriert.
2. Generiere 3 einzelne Folien-Vorschaudateien in .ecc-design/slide-previews/.
3. Jede Vorschau muss in sich geschlossen sein, Typografie/Farbe/Bewegung deutlich zeigen und unter etwa 100 Zeilen Folieninhalt bleiben.
4. Frage den Benutzer, welche Vorschau behalten werden soll oder welche Elemente gemischt werden sollen.

Verwende den Vorlagen-Leitfaden in STYLE_PRESETS.md, wenn du Stimmung mit Stil verbindest.

4. Präsentation erstellen

Ausgabe entweder:

• presentation.html
• [name-der-praesentation].html

Verwende einen assets/-Ordner nur, wenn das Deck extrahierte oder vom Benutzer bereitgestellte Bilder enthält.

Erforderliche Struktur:

• semantische Folienabschnitte
• eine viewportsichere CSS-Basis aus STYLE_PRESETS.md
• CSS-Custom-Properties für Themenwerte
• eine Präsentations-Controller-Klasse für Tastatur-, Mausrad- und Touch-Navigation
• Intersection Observer für Enthüllungs-Animationen
• Unterstützung für reduzierte Bewegung

5. Viewport-Fit erzwingen

Behandle dies als harte Anforderung.

Regeln:

• jede .slide muss height: 100vh; height: 100dvh; overflow: hidden; verwenden
• alle Schrift und Abstände müssen mit clamp() skalieren
• wenn der Inhalt nicht passt, teile ihn auf mehrere Folien auf
• löse Überlauf niemals, indem du Text auf unlesbare Größen verkleinerst
• erlaube niemals Scrollbalken innerhalb einer Folie

Verwende die Dichtegrenzen und den obligatorischen CSS-Block aus STYLE_PRESETS.md.

6. Validieren

Überprüfe das fertige Deck bei diesen Größen:

• 1920x1080
• 1280x720
• 768x1024
• 375x667
• 667x375

Wenn Browser-Automatisierung verfügbar ist, verwende sie, um zu überprüfen, dass keine Folie überläuft und die Tastaturnavigation funktioniert.

7. Übergeben

Bei der Übergabe:

• lösche temporäre Vorschaudateien, es sei denn, der Benutzer möchte sie behalten
• öffne das Deck mit dem plattformüblichen Öffner, wenn sinnvoll
• fasse den Dateipfad, die verwendete Vorlage, die Folienanzahl und einfache Anpassungspunkte des Themas zusammen

Verwende den richtigen Öffner für das aktuelle Betriebssystem:

• macOS: open datei.html
• Linux: xdg-open datei.html
• Windows: start "" datei.html

PPT / PPTX Konvertierung

Für die PowerPoint-Konvertierung:

1. Bevorzuge python3 mit python-pptx, um Text, Bilder und Notizen zu extrahieren.
2. Wenn python-pptx nicht verfügbar ist, frage, ob es installiert werden soll oder ob auf einen manuellen/exportbasierten Workflow zurückgegriffen werden soll.
3. Erhalte die Folienreihenfolge, Sprechernotizen und extrahierten Vermögenswerte.
4. Führe nach der Extraktion den gleichen Stilauswahl-Workflow wie bei einer neuen Präsentation durch.

Halte die Konvertierung plattformunabhängig. Verlasse dich nicht auf macOS-exklusive Tools, wenn Python die Arbeit erledigen kann.

Implementierungsanforderungen

HTML / CSS

• Verwende inline CSS und JS, es sei denn, der Benutzer wünscht ausdrücklich ein Multi-Datei-Projekt.
• Schriftarten können von Google Fonts oder Fontshare stammen.
• Bevorzuge atmosphärische Hintergründe, eine starke Typografie-Hierarchie und eine klare visuelle Richtung.
• Verwende abstrakte Formen, Verläufe, Raster, Rauschen und Geometrie anstelle von Illustrationen.

JavaScript

Enthalten:

• Tastaturnavigation
• Touch-/Wisch-Navigation
• Mausrad-Navigation
• Fortschrittsanzeige oder Folienindex
• Enthüllungs-Animationen beim Betreten

Barrierefreiheit

• verwende semantische Struktur (main, section, nav)
• halte Kontraste lesbar
• unterstütze reine Tastaturnavigation
• respektiere prefers-reduced-motion

Inhaltsdichtegrenzen

Verwende diese Maximalwerte, es sei denn, der Benutzer wünscht ausdrücklich dichtere Folien und die Lesbarkeit bleibt erhalten:

Folientyp	Grenze
Titel	1 Überschrift + 1 Untertitel + optionaler Slogan
Inhalt	1 Überschrift + 4-6 Aufzählungspunkte oder 2 kurze Absätze
Funktionsraster	maximal 6 Karten
Code	maximal 8-10 Zeilen
Zitat	1 Zitat + Quellenangabe
Bild	1 Bild, durch Viewport begrenzt

Anti-Patterns

• generische Startup-Verläufe ohne visuelle Identität
• Systemschriftart-Decks, es sei denn, beabsichtigt redaktionell
• lange Aufzählungslistenwände
• Code-Blöcke, die scrollen müssen
• feste Höhen-Content-Boxen, die auf kurzen Bildschirmen brechen
• ungültige negierte CSS-Funktionen wie -clamp(...)

Verwandte ECC-Skills

• frontend-patterns für Komponenten- und Interaktionsmuster rund um das Deck
• liquid-glass-design, wenn eine Präsentation bewusst die Apple-Glasästhetik übernimmt
• e2e-testing, wenn du automatisierte Browser-Überprüfung für das fertige Deck benötigst

Checkliste für die Übergabe

• Präsentation läuft von einer lokalen Datei im Browser
• jede Folie passt in den Viewport ohne Scrollen
• Stil ist charakteristisch und beabsichtigt
• Animation ist sinnvoll, nicht laut
• reduzierte Bewegung wird respektiert
• Dateipfade und Anpassungspunkte werden bei der Übergabe erklärt