ckm:slides

Übersicht

Was ist ckm:slides?

ckm:slides ist ein AI Skill zum Entwerfen kompletter, strategischer HTML-Foliendecks. Statt nur eine lose Sammlung von Stichpunkten auszugeben, führt es den Agenten dazu, eine stimmige, browserfertige Präsentationsstruktur zu erzeugen – basierend auf:

• Chart.js für Datenvisualisierungen
• Design Tokens für konsistente visuelle Themen
• Responsiven Layouts für verschiedene Geräte
• Copywriting-Formeln für überzeugende Botschaften
• Bewährten Folienstrategien für typische Deck-Typen

Der Skill ist optimiert für Marketingpräsentationen, Pitch-Decks, Stakeholder-Reports und Produktdemos, bei denen sowohl Story als auch Struktur entscheidend sind.

Für wen ist ckm:slides geeignet?

ckm:slides passt gut, wenn du:

• Foliendecks für Marketing, Vertrieb, Fundraising oder Reporting erstellst
• HTML/JavaScript-Präsentationen klassischen PowerPoint-Dateien vorziehst
• Wiederverwendbare Layout-Patterns und Templates statt einer leeren Folie bevorzugst
• Klare Erzählstrukturen (z. B. YC Seed Deck, Sales Pitch, QBR) direkt im Prozess verankern möchtest

Developer, Product Marketer, Gründer:innen und Analytics-Teams können den Skill nutzen, um von „Thema + gewünschte Foliendanzahl“ zu einem strukturierten HTML-Präsentationsplan zu gelangen.

Welche Probleme löst ckm:slides?

ckm:slides hilft dir, Folgendes zu vermeiden:

• Unstrukturierte Decks ohne klaren Spannungsbogen
• Inkonsistente Layouts und Typografie zwischen den Folien
• Schwache, generische Folientexte, die nicht überzeugen
• Manuelles Einbinden von Chart.js-Charts in jede neue Präsentation

Durch die Kombination von Layout-Patterns, Copywriting-Formeln und einem einsatzbereiten HTML-Template liefert der Skill dem Agenten alles, was er benötigt, um ein starkes Deck zu planen und HTML zu generieren, das direkt implementierbar ist.

Wann ist ckm:slides nicht die richtige Wahl?

ckm:slides ist wahrscheinlich nicht ideal, wenn du:

• Native PowerPoint- oder Keynote-Dateien statt HTML benötigst
• Nicht mit Frontend arbeitest oder keine HTML/JS-Assets hosten kannst
• Nur eine einzelne einmalige Folie statt eines vollständigen Decks brauchst

In diesen Fällen ist ein einfacher textbasierter Foliengenerator oder ein Tool, das .pptx exportiert, wahrscheinlich passender.

Verwendung

Installation und Setup

Um den slides Skill aus dem nextlevelbuilder/ui-ux-pro-max-skill Repository zu deiner Agent-Umgebung hinzuzufügen, installiere ihn mit:

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill slides

Nach der Installation:

1. Öffne SKILL.md unter .claude/skills/slides, um das grundlegende Verhalten und die Argumente zu verstehen.
2. Sieh dir den Ordner references/ an, um die Patterns und Templates zu prüfen, auf die der Skill zurückgreift:
   • references/layout-patterns.md
   • references/html-template.md
   • references/copywriting-formulas.md
   • references/slide-strategies.md
   • references/create.md

Ein zusätzlicher Build-Schritt ist für den Skill selbst nicht nötig; er läuft innerhalb deiner bestehenden Agent-Umgebung. Du brauchst jedoch eine Möglichkeit, das generierte HTML auszuliefern oder zu öffnen (z. B. in eine Datei speichern und im Browser öffnen).

Grundmuster für Aufrufe

Der Skill erwartet Argumente im Format:

• [topic] [slide-count]

und unterstützt den create Subcommand. Ein typischer Aufruf aus deinem Agent-Prompt könnte so aussehen:

Use the ckm:slides skill to create a "create" deck about "Series A fundraising narrative" with 12 slides.

Intern folgt das Routing diesem Ablauf (wie in SKILL.md beschrieben):

1. Den Subcommand aus $ARGUMENTS parsen (erstes Wort, z. B. create).
2. Die zugehörige Referenzdatei laden (für create ist das references/create.md).
3. Die restlichen Argumente (Thema und Foliendanzahl) nutzen, um Struktur und Inhalte des Decks zu erzeugen.

Empfohlener Workflow für ein neues Deck

1. Ziel und Zielgruppe definieren

Bevor du ckm:slides aufrufst, kläre:

• Ziel (z. B. Seed-Runde raisen, Enterprise-Deal abschließen, Board updaten)
• Primäre Zielgruppe (VCs, Prospects, Management, interne Teams, Konferenzpublikum)
• Ungefähre Foliendanzahl

Gib diesen Kontext in deinen Argumenten mit, damit der Skill passende Strukturen und Patterns wählen kann.

2. Eine Folienstrategie wählen – oder vom Skill wählen lassen

Die Datei references/slide-strategies.md listet 15 typische Deck-Strukturen, darunter:

• YC Seed Deck (10–12 Folien)
• Sales Pitch (7–10 Folien)
• Product Demo (5–8 Folien)
• QBR, Board Meeting, Webinar, Workshop und mehr

Du kannst entweder:

• Eine Struktur explizit anfordern (z. B. „Use a YC seed deck structure“), oder
• Den Agenten anhand von Ziel und Zielgruppe die beste Strategie ableiten lassen.

Jede Strategie enthält ein Folien-für-Folien-Outline und einen Emotionsbogen (z. B. Neugier → Frustration → Hoffnung → Zuversicht → Vertrauen → Dringlichkeit), um die Story schlüssig zu halten.

3. Copy mit überzeugenden Formeln erzeugen

Die Datei references/copywriting-formulas.md stellt 25 Formeln bereit, darunter:

• PAS (Problem–Agitate–Solution) für Problemfolien
• AIDA (Attention–Interest–Desire–Action) für Hooks und CTAs
• FAB (Features–Advantages–Benefits) für Feature- und Produktfolien
• Cost of Inaction und Before–After–Bridge für Dringlichkeit und Transformation

Der Skill nutzt diese Formeln, um Headlines, Fließtexte und CTAs pro Folie zu strukturieren. Ermutige ihn dazu:

• Jeden Folientyp einer passenden Formel zuzuordnen
• Die bereitgestellte Template-Sprache als Ausgangspunkt zu verwenden
• Tonalität an deine Marke und die Kompetenz deiner Zielgruppe anzupassen

4. Layout-Patterns und Animationen anwenden

Die Datei references/layout-patterns.md definiert 25 CSS-basierte Layout-Patterns, zum Beispiel:

• Title Slide
• Problem Statement
• Solution Overview
• Feature Grid
• Metrics Dashboard
• Comparison Table
• Timeline Flow
• Team Grid
• Pricing Cards
• CTA Closing

Jedes Layout enthält:

• Einen empfohlenen Use Case
• Beispiel-Animationsklassen (animate-fade-up, animate-stagger, animate-scale, etc.)
• Beispiel-CSS-Strukturen für typische Folientypen

Wenn du den Agenten bittest, ein Deck zu generieren, füge Anweisungen wie diese hinzu:

For each slide, assign a layout class from layout-patterns.md and, where relevant, an animation class.

So bleibt dein Deck visuell konsistent und leicht per CSS thematisierbar.

5. Das HTML-Slide-Template nutzen

Die Datei references/html-template.md stellt eine vollständige HTML-Struktur für das Deck bereit, inklusive:

• <head> mit via CDN eingebundenem Chart.js
• Einem token-basierten Theming-System über :root CSS-Variablen
• Einem .slide-deck Container und .slide Elementen im 16:9-Format
• Basis-Styles für Typografie und Layout

Ein typischer Workflow sieht so aus:

1. Mit dem bereitgestellten HTML-Template starten.
2. Die generierten Folien als <section> oder <div> mit den passenden Klassen einfügen.
3. Deine Design Tokens (z. B. aus embed-tokens.cjs) in den :root Block einfügen.
4. Chart.js <canvas> Elemente und den zugehörigen JavaScript-Code für die Charts ergänzen.

Der Skill kann ausgeben:

• Einen Entwurf der vollständigen HTML-Datei oder
• Nur die <body>-Folienstruktur, die du in dein eigenes Shell-Template einfügst.

6. Chart.js Datenvisualisierungen anbinden

Für datengetriebene Decks (Metrics Dashboards, Traction-Folien, QBRs, Board-Reports) ist ckm:slides darauf ausgelegt, mit Chart.js zu arbeiten (wie in html-template.md gezeigt).

Du kannst den Agenten anleiten, Folgendes zu tun:

• <canvas> Elemente für Charts in den passenden Folienlayouts anlegen
• Chart.js Config-Objekte (Datasets, Labels, Farben) basierend auf deinen Metriken vorschlagen
• <script> Blöcke einbetten, die diese Charts beim Laden der Seite initialisieren

Du bist dafür verantwortlich, die tatsächlichen Daten zu liefern und die Chart-Konfiguration zu prüfen, aber der Skill stellt das strukturelle Gerüst bereit.

7. Export und Präsentation

Wenn das Deck-HTML bereit ist:

1. Speichere es als .html Datei in deinem Projekt.
2. Öffne die Datei direkt im Browser oder serve sie über deinen bevorzugten Webserver.
3. Navigiere mit der Tastatur oder eigenem JS (falls hinzugefügt) zwischen den Folien.

Wenn du mit Stakeholdern arbeitest, die PowerPoint gewohnt sind, kannst du den Browser per Screensharing zeigen oder die Folien über die Druck-zu-PDF-Funktion des Browsers als Bilder/PDF exportieren.

Tipps für bessere Ergebnisse mit ckm:slides

• Sei nach Möglichkeit präzise bei Foliendanzahl und Struktur.
• Sag dem Agenten, welche Entscheidung das Deck auslösen soll (Funding, Kauf, Alignment, etc.).
• Gib an, welche Folien Charts enthalten sollen und welcher Typ (Line, Bar, Pie, etc.).
• Bitte um eine Tabelle, die Foliennummer, Titel, Ziel, Layout und primäre Copywriting-Formel listet, damit du den Plan prüfen kannst, bevor der Volltext generiert wird.

FAQ

Was erzeugt ckm:slides konkret?

ckm:slides ist darauf ausgelegt, Folgendes zu generieren:

• Ein Folien-für-Folien-Outline mit Zielen und Erzählbogen
• Entwurfstexte für jede Folie, basierend auf Formeln wie PAS, AIDA und FAB
• Layout-Vorschläge basierend auf den vordefinierten Patterns in layout-patterns.md
• HTML/CSS-Struktur für ein responsives, tokenbasiertes Foliendeck
• Chart.js-Gerüst für Folien mit Datenvisualisierung

Der genaue Output hängt davon ab, wie du den Agenten promptest, aber im Kern geht es um strategischen HTML-Foliencontent, nicht um ein generisches Textdokument.

Erstellt ckm:slides PowerPoint-Dateien (.pptx)?

Nein. ckm:slides konzentriert sich auf HTML-Foliendecks. Es nutzt HTML, CSS und Chart.js, um Präsentationen zu erzeugen, die du im Browser öffnen kannst. Wenn du .pptx Dateien benötigst, brauchst du einen separaten Export- oder Konvertierungsschritt außerhalb dieses Skills.

Kann ich das Design an meine Marke anpassen?

Ja. Die Datei html-template.md nutzt Design Tokens über CSS-Variablen. Du kannst:

• Die Beispielwerte im :root Block durch deine Markenfarben, Typografie und Spacing ersetzen
• CSS-Klassen für eigene Layouts oder Animationen erweitern
• Eigene Komponenten hinzufügen (Logos, Footer, Wasserzeichen-Stile)

ckm:slides liefert ein strukturiertes Fundament – das Brand-System bringst du mit.

Wie funktioniert der create Subcommand?

Der create Subcommand ist der zentrale Einstiegspunkt, wie in references/create.md beschrieben. Wenn du create mit Argumenten aufrufst, macht der Skill Folgendes:

1. Interpretiert <task>$ARGUMENTS</task> als Beschreibung des gewünschten Decks.
2. Nutzt die Knowledge Base (Layout-Patterns, Copywriting-Formeln, Folienstrategien, HTML-Template), um ein überzeugendes Deck zu entwerfen, das zu dieser Aufgabe passt.

Üblicherweise rufst du create nicht direkt als CLI auf, sondern weist deinen Agenten an, den ckm:slides Skill mit dem create Subcommand zu verwenden.

Für welche Arten von Decks ist ckm:slides besonders geeignet?

Basierend auf den Patterns in slide-strategies.md ist ckm:slides besonders hilfreich für:

• Fundraising-Decks (YC Seed Deck, Series A)
• Sales Pitches und Produktdemos
• Quarterly Business Reviews (QBRs) und Board-Updates
• Webinare, Workshops und Konferenzvorträge
• Case Studies und Wettbewerbsanalysen

All diese Formate leben von einer klaren Story, überzeugendem Copywriting und oft von Charts – genau darauf ist die Knowledge Base des Skills ausgerichtet.

Wie setze ich Navigation und Tastatursteuerung um?

Das Basis-HTML-Template konzentriert sich auf Layout und Visuals. Navigation (Pfeiltasten, Klick zum Weiterblättern, Fortschrittsanzeige) ist im Referenzsnippet nicht vollständig definiert und bleibt deiner Implementierung überlassen. Du kannst zum Beispiel:

• JavaScript hinzufügen, das auf ArrowLeft / ArrowRight hört und die sichtbare Folie wechselt
• URL-Hashes oder Data-Attribute nutzen, um die aktive Folie zu tracken
• Bei Bedarf ein bestehendes HTML-Slideshow-Framework integrieren

ckm:slides unterstützt dich bei Content und Struktur; das Navigationsverhalten hängt von deinem Frontend-Setup ab.

Muss ich JavaScript verstehen, um ckm:slides zu nutzen?

Grundlegende Frontend-Kenntnisse sind sehr hilfreich, vor allem wenn du:

• Das HTML-Template anpassen oder erweitern möchtest
• Chart.js Charts und Interaktivität konfigurieren willst

Ein Großteil der Arbeit (Story-Struktur, Layout-Auswahl, Copywriting-Patterns) ist jedoch nicht technisch. Nicht-Developer können weiterhin profitieren, indem sie mit einem Developer zusammenarbeiten, der HTML und Charts finalisiert.

Wo sehe ich alle verfügbaren Patterns und Strategien?

Öffne das Skill-Verzeichnis (in der Regel .claude/skills/slides) und schau dir folgende Dateien an:

• SKILL.md für Gesamtverhalten, Argumente und Routing
• references/layout-patterns.md für Layout- und CSS-Strukturen
• references/html-template.md für das HTML-Grundgerüst des Foliendecks
• references/copywriting-formulas.md für Frameworks für überzeugende Texte
• references/slide-strategies.md für vollständige Deck-Strukturen und Emotionsbögen

Das Durchsehen dieser Dateien gibt dir ein klares Bild davon, was ckm:slides kann, und hilft dir, präzisere Prompts zur Deck-Generierung zu formulieren.