lawrencewzen

Course Slides — Design skill for Claude Code

Design community

Turn Markdown lecture notes into a single-file HTML slide deck — Keynote-style Claude Code Skill.

How to install Course Slides

This entry records only its repository, not the path inside it, so there is no exact command to give. Open lawrencewzen/course-slides and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Course Slides does

Turn Markdown lecture notes into a single-file HTML slide deck — Keynote-style Claude Code Skill.

Alternatives in Design

Planning With Files — Claude Code skill implementing Manus-style persistent markdown planning — the workflow pattern behind the $2B 17.4k ★
Skill Deck — Generate slide deck presentations from briefs — use when you need slides, pitch decks, or visual summaries 2.8k ★
Vox Director — Turn one topic into a finished Vox-style paper-collage explainer/ad video — automated end to end on Atlas Clou 2.1k ★

README

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

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).
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.
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