Skip to content
FunCoding

kai-slide-creator

Generate zero-dependency HTML presentations that run entirely in the browser. Zero npm, no build tools. Includes presentation mode and edit mode.

Star
859
Last commit
Aug 20, 2026

skills/kai-slide-creator/SKILL.md

View on GitHub

Slide Creator

Generate zero-dependency HTML presentations that run entirely in the browser.


Core Philosophy

PrincipleDescription
Zero DependenciesSingle HTML files with inline CSS/JS. No npm, no build tools.
Show, Don't TellGenerate visual style previews; design preferences emerge from seeing options.
Distinctive DesignAvoid generic AI aesthetics (Inter font, purple gradients, predictable heroes).
Viewport FittingSlides fit exactly in the viewport. Overflowing content gets split, not squished.
Plan Before Generate--plan creates outline; --generate produces HTML from it.

Generation Contract (Non-Negotiable)

Every generated HTML file MUST include:

  1. Presentation Mode — F5 / ▶ button, fullscreen scaling, PresentMode class
  2. Edit Mode — top-left hotzone, ✏ Edit toggle, contenteditable on all text, notes panel

Command Routing

CommandWhat to LoadWhat to Do
--plan [prompt]planning-template.mdCreate PLANNING.md. Stop — no HTML.
--generatehtml-template.md + style file + base-css.mdRead PLANNING.md, generate HTML.
No flag (interactive)workflow.md + html-template.mdFollow Phase 0–5.
Content + style given directlyhtml-template.md + style file + base-css.mdGenerate immediately — no Phase 1/2.

Content-Type → Style Hints

Content TypeSuggested Styles
Data report / KPI dashboardData Story, Enterprise Dark, Swiss Modern
Business pitch / VC deckBold Signal, Aurora Mesh, Enterprise Dark
Developer tool / API docsTerminal Green, Neon Cyber, Neo-Retro Dev Deck
Research / thought leadershipModern Newspaper, Paper & Ink, Swiss Modern
Creative / personal brandVintage Editorial, Split Pastel, Neo-Brutalism
Product launch / SaaSAurora Mesh, Glassmorphism, Electric Studio
Education / tutorialNotebook Tabs, Paper & Ink, Pastel Geometry
Chinese contentChinese Chan, Aurora Mesh, Blue Sky
Hackathon / indie devNeo-Retro Dev Deck, Neo-Brutalism, Terminal Green

Style Reference Files

StyleFile
Blue Skyblue-sky-starter.html (full base)
Aurora Meshaurora-mesh.md
Chinese Chanchinese-chan.md
Data Storydata-story.md
Enterprise Darkenterprise-dark.md
Glassmorphismglassmorphism.md
Neo-Brutalismneo-brutalism.md
All other stylesSTYLE-DESC.md

For AI Agents

# From a topic or notes
/slide-creator Make a pitch deck for [topic]

# From a plan file (skip interactive phases)
/slide-creator --generate  # reads PLANNING.md automatically

# Two-step (review the plan before generating)
/slide-creator --plan "Product launch deck for Acme v2"
# (edit PLANNING.md if needed)
/slide-creator --generate

# Export to PPTX after generation
/kai-html-export presentation.html  # image mode (pixel-perfect)
/kai-html-export --mode native presentation.html  # native mode

Phase 0: Detect Mode

Before starting:

  • PLANNING.md exists → read it, skip to Phase 3
  • User provides source content + style directly → skip Phase 1/2, generate immediately
  • User has a .ppt/.pptx file → Phase 4 (PPT conversion)
  • User wants to enhance existing HTML → read and enhance
  • Everything else → Phase 1 (Content Discovery)

When to Use This Skill

  • Create HTML presentations from topics or notes
  • Convert existing content to slides
  • Design pitch decks, reports, tutorials
  • Generate zero-dependency HTML slideshows

  • report-creator — For long-form scrollable HTML reports (not slides)
  • frontend-design — For interactive pages that go beyond slides

Similar Skills

test-driven-development

OBobra/superpowers298k2,631 new stars in the last 7 days

migrate-to-shoehorn

MAmattpocock/skills288k10,178 new stars in the last 7 days

agent-runtime-gateway-smoke-test

AFaffaan-m/ECC278k4,046 new stars in the last 7 days

Featured

accessibility

Audit accessibility on Web, iOS, and Android to meet WCAG 2.2, with keyboard navigation and screen-reader support.

AFaffaan-m/ECC278k4,046 new stars in the last 7 days

ai-regression-testing

AFaffaan-m/ECC278k4,046 new stars in the last 7 days

Official

firecrawl-build-interact

FIfirecrawl/firecrawl191k2,010 new stars in the last 7 days