Stats
Actions
Tags
From slidecast
Generate a polished, self-contained HTML slide deck from a topic, outline, or document. Use when the user asks to create, make, build, or design a presentation, slide deck, or slides — especially if they may later want it narrated into a video.
How this skill is triggered — by the user, by Claude, or both
Slash command
/slidecast:create-presentationThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Produce a single self-contained `.html` deck the user can open in any browser and (optionally) feed to the `narrate-to-video` skill.
Produce a single self-contained .html deck the user can open in any browser and (optionally) feed to the narrate-to-video skill.
Gather the content. Use the topic, outline, or document the user gave you. If the scope is unclear, ask 1–2 quick questions (audience, length, key message). Otherwise infer a tight narrative arc (hook → context → substance → takeaway).
Start from the template. Copy the bundled template to the user's chosen location (default: the current directory):
cp "${CLAUDE_PLUGIN_ROOT}/templates/deck-template.html" ./<name>.html
Read it first — it documents every reusable block at the top.
Brand it. In the copied file:
<title> and the .brand wordmark.--accent / --accent2 in :root to the brand colour (default emerald)..watermark (replace the text with the brand name, paste an inline <svg> logo, or delete the element).Author the slides. Replace the example <section class="slide"> blocks with real ones, in order. Each slide = one idea. Use the building blocks already in the template: h1/h2, .kicker, .sub, .card(+.em), .two/.cols-3, table, .flow+.node, .stat, .quote, .shot (screenshots), .foot (footer). Keep the first slide a title slide. Aim for 8–16 slides.
assets/ folder next to the deck and reference them as assets/<file>.png inside a .shot. To capture app screens, drive a browser and crop out the browser chrome.Keep it self-contained. All CSS/JS stays inline; only local image files are external. Do not remove the <script> block — it powers #N hash routing, ?render=1 (used by the video build), and keyboard navigation.
Verify. Open it (open <name>.html on macOS) or render a slide headless to confirm it looks right:
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless=new \
--window-size=1920,1080 --screenshot=/tmp/check.png "file://$PWD/<name>.html?render=1#1"
If the user wants a video next, also write a sibling narration.json (see ${CLAUDE_PLUGIN_ROOT}/templates/narration.example.json): one { "slide": N, "text": "..." } per slide, with voice_id and model set. Then hand off to the narrate-to-video skill. Spell out numbers and acronyms in the narration text so the voice reads them naturally.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub alinaqi/slidecast --plugin slidecast