Skip to content
Get packs

Replit Deck HTML Slides

Builds a single-file HTML slide deck for product and technical decision documents in one of eight themes.

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
11 files

What it does

When installed, the agent turns rough product or technical material such as PRDs, roadmaps, RFCs, architecture reviews, or retrospectives into a horizontal-swipe HTML presentation. It first picks one of eight visual themes, plans the slide sequence, copies predefined slide layouts from reference files, and fills in specific copy, aiming for a deck that helps reviewers approve a feature, architecture, roadmap, or incident follow-up. It is styled for a presentation, not a sales pitch, though its metadata uses commercial framing.

Great for

  • Product managers preparing a feature business case or decision deck for reviewers
  • Technical leads turning an RFC or architecture review into a slide presentation
  • Teams that want a consistent, single-file HTML deck without hand-building layouts

Skip it if

  • Tasks needing a PowerPoint or Google Slides file, since output is a single HTML file (the skill does not produce .pptx)
  • Decks with sensitive figures where the agent might invent numbers; the skill asks for must-keep numbers but any placeholders must be checked by a human
  • Anyone wanting a deck with no review step, since the skill expects the user to confirm the slide rhythm and theme

Try asking

  • “Turn these PRD notes into a six-slide decision deck for the steering committee using the helix theme”
  • “Create a three-slide memo deck in the holm editorial style summarising this incident retro”
  • “Build an architecture review deck with a KPI row and a closing ask for approval”
Step-by-step guide: how to use Replit Deck HTML SlidesInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 11 original files, the Apache-2.0 licence and an attribution note.

    replit-deck.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip replit-deck.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip replit-deck.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Provide the audience, the decision you want, and the must-keep numbers up front so the agent does not guess.
  • Review the proposed slide rhythm before the agent writes HTML; changes are cheap at that stage.
  • Open the generated index.html in a browser and check every figure against your source material before sharing.

What's inside

  • assets/template.html
  • examples/example-atlas.html
  • examples/example-bluehouse.html
  • examples/example-helix.html
  • examples/example-holm.html
  • examples/README.md
  • references/checklist.md
  • references/components.md
  • references/layouts.md
  • references/themes.md
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.