Course Slides

course-slides

Turn Markdown lecture notes into a single-file HTML slide deck — on-brand AI Spark, Keynote-restrained, ready to project.

A [Claude Code Skill](https://docs.claude.com/en/docs/claude-code/skills) that converts a Markdown source (lecture / tutorial / tech talk / internal doc) into a single `.html` file you can actually project and present from — with navigation, step reveals, speaker notes, a time bar, and keyboard shortcuts.

Built for 2–3 hour single-presenter lectures, bootcamps, and internal deep-dive sessions, with the **AI Spark** brand identity baked in.

What you get

• One file, no build step — pure HTML + CSS + JS, double-click to open
• Presenter-ready — arrow keys / space to advance, N for speaker notes, time bar across the bottom
• On-brand — white background, AI Spark blue accent, flame logo, system fonts; no framework, no external fonts
• Restrained animations — Apple-Keynote-style fade-and-rise, 0.85s ease; no bounce or spin
• Layout at the model's discretion — per-page layout chosen from the content, not a fixed template

Brand: AI Spark

The skill is built around AI Spark's identity — it's the brand the final deck ships with.

Asset	Value
Name	AI Spark
Primary color	#1E40FF (CSS variable --brand)
Slogan	始于火花 · 成于实战
Logo	火苗 (flame) SVG, defined once as

How it works

1. Parse — read the Markdown, normalize into sections / timings / speaker notes via references/source-schema.md. Missing fields degrade gracefully (no speaker notes → hide that panel; no timings → hide the time bar).
2. Skeleton — load assets/final-deck-example.html as the technical donor: CSS tokens, JS controller, deck chrome, flame logo, speaker notes panel, time bar, keyboard bindings — reused verbatim.
3. Assemble — generate one divider + N content slides per section. Per-slide layout is chosen by the model from the section's content, subject to 4