# HTML Slideshow

> Create a responsive browser-based presentation, keynote-style HTML deck, workshop deck, pitch deck, or shareable horizontal slideshow and verify navigation and layout.

- Skill: `nahiddotai/html-slideshow` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add nahiddotai/html-slideshow`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nahiddotai/html-slideshow/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: nahiddotai (https://skillmd.com/u/nahiddotai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/nahiddotai/html-slideshow

---


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