Create a responsive browser-based presentation, keynote-style HTML deck, workshop deck, pitch deck, or shareable horizontal slideshow and verify navigation and layout.
Installs into .claude/skills of the current project.
Are you the author of Html Slideshow?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/nahiddotai-html-slideshow)
---
name: html-slideshow
description: Create a responsive browser-based presentation, keynote-style HTML deck, workshop deck, pitch deck, or shareable horizontal slideshow and verify navigation and layout.
---
# HTML Slideshow
Create a finished browser presentation that tells one coherent story and works without a slide platform.
## Job contract
- Owns: horizontal, browser-based slide decks.
- Does not own: 1080x1350 social carousels (`instagram-carousel-maker`) or reusable visual identity (`brand-system-builder`).
- Finished deliverable: working HTML deck, source attribution, and viewing instructions.
## Workflow
1. Establish audience, purpose, viewing context, duration, source material, and brand constraints.
2. Create the story spine before styling: opening tension, development, proof, resolution, action.
3. Choose a visual direction from the source, audience, and brand constraints. Use a small set of recurring motifs rather than a generic card-deck treatment.
4. Use one idea per slide and vary composition to match the job of the slide. Cut content instead of shrinking type.
5. Build semantic HTML, scoped CSS, keyboard and click navigation, slide counter, and responsive scaling.
6. Avoid dependencies unless the user needs them. Keep external assets credited and legally usable.
7. Test first, middle, last, overflow, keyboard controls, and common viewport sizes.
8. Return the actual file, not only a storyboard.
## Minimum quality bar
- Clear visual hierarchy at presentation distance.
- A visual direction that reflects the source or brand rather than an interchangeable template.
- Real examples, screenshots, diagrams, or source-specific proof when the supplied material supports them.
- Keyboard navigation with left/right arrows and space.
- No clipped text or accidental scrollbars.
- Respect `prefers-reduced-motion` when animation is used.
- Source or credit factual claims and third-party media.
## Delivery note
Report the deck path, slide count, how to open it, what was tested, and any external asset dependency.
## Guardrails
- Never invent statistics, customer quotes, logos, or endorsements.
- Do not use copyrighted imagery without permission or a usable licence.
- Do not publish or deploy the deck unless the user explicitly approves that external action.
