About explain-with-slides
A skill for presenting code changes as high-level slides for readers who need a visual overview. It structures the story around the problem, change, result, and remaining decisions, with one main idea per slide.
Key features
- 01Create 5–8 overview slides
- 02Center each slide on one takeaway and visual
- 03Order content from problem to result
- 04Support standalone or vertical-scroll layouts
- 05Respect reduced-motion preferences
Use cases
- 01Explain code changes with slides
- 02Give readers an overall view rather than details
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/explain-with-slidesin Claude Code to confirm it loaded.
Details
From the project READMEExplain with Slides
A short deck of high-level slides: one idea per slide, a headline that is the takeaway, one big visual. For an overall grasp, not for details.
Use this skill when
- The user asks for a visual explanation of changes with slides.
- Used by an orchestrator to explain changes visually with slides.
Content
- 5–8 slides. Each: a headline that states the takeaway, one big visual, at most ~20 words of supporting text.
- No code, no tables, no detail slides, no details drawer. If the reader needs more, the last slide can point to the full explanation.
- Order: the problem → the change → the result → what's left to decide.
Navigation
- When slides are part of a scrolling page, stack them vertically so the scroll direction stays the same as the rest of the page. Avoid horizontal paging inside a vertical page.
- A standalone deck may page sideways with keyboard, swipe, dots and prev/next buttons, with a deep link per slide.
- Subtle entry animations on each slide (bars grow, items rise); text never fades. Respect reduced motion.
Building it
- Build it with the
explainer-kitskill, usually as a standalone page (assemble.py --standalone).
Comments
Markdown supported