Skip to content
Get packs

Frontend Slides HTML Decks

Builds single-file, animated HTML slide decks on a fixed 16:9 stage that run in any browser.

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

What it does

When installed, the agent creates presentation slides as one self-contained HTML file that opens in a web browser and works offline. It starts from a provided template, keeps a consistent fixed-size layout that scales to any screen, and adds keyboard, mouse and swipe navigation plus entrance animations. The skill also guides the visual style, choosing from 12 curated colour and font presets and following accessibility rules such as reduced-motion support.

Great for

  • Teams that want a polished, animated slide deck as a web page rather than a PowerPoint file
  • Designers who want control over typography, colour tokens and motion in presentations
  • Developers who need a dependency-free slide deck they can host or email as one HTML file

Skip it if

  • Users who need to edit slides in PowerPoint, Keynote or Google Slides, since the output is raw HTML and CSS
  • Situations requiring data-driven charts from live sources, because the skill only includes CSS-drawn bar charts and no network data fetching
  • Use where the example content is sensitive: the example deck is framed as an AI-literacy talk, so review any generated claims before presenting to leadership

Try asking

  • “Turn my product roadmap notes into an animated single-file HTML slide deck in a bold, high-contrast style”
  • “Build a 10-slide deck for leadership on our AI rollout, with a big-stat slide and a closing slide”
  • “Create a low-density, speaker-led HTML presentation with keyboard navigation and deep-linkable slides”
Step-by-step guide: how to use Frontend Slides HTML DecksInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

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

    frontend-slides.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip frontend-slides.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip frontend-slides.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 your audience, decision goal and must-keep numbers up front so the deck is tailored rather than generic
  • Say whether the deck is speaker-led or reading-first, since that changes slide density
  • Ask for a specific preset such as Swiss Modern or Paper & Ink if you want a particular look

What's inside

  • example.html
  • open-design.json
  • references/animation-patterns.md
  • references/html-template.md
  • references/STYLE_PRESETS.md
  • references/viewport-base.css
  • 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.