Skip to content

Magazine Web Deck

Builds a magazine-style, swipeable 16:9 HTML slide deck with serif type and animated background

Stars
9,376
Licence
Apache-2.0
Files
2 files

What it does

When installed, the agent can turn your content into a single HTML presentation styled like an editorial magazine, with serif headlines, an e-ink feel, and a WebGL fluid-motion background on the cover. The deck follows a set layout: cover, chapter title pages, big-number data slides, image grids, and quote pages. Viewers move between slides with the arrow keys, and the current slide is reflected in the URL hash.

Great for

  • Marketers who want a polished, visually striking web presentation for a campaign or product story
  • Designers or editors who prefer magazine-style layouts over standard bullet-point slides
  • Anyone who wants a shareable HTML deck that opens in a browser without PowerPoint

Skip it if

  • Users who need an editable .pptx file for colleagues, since this produces HTML rather than PowerPoint files
  • Presentations needing offline use or heavy data charts, because the skill's described layouts focus on big numbers, images and quotes and the WebGL background needs a capable browser

Try asking

  • “Make a 10-slide magazine-style web deck introducing our new product launch”
  • “Turn this quarterly report summary into a horizontal swipe HTML presentation with big-number slides”
  • “Create a editorial-style deck with a cover, three chapter pages and a closing quote slide”
Step-by-step guide: how to use Magazine Web DeckInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

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

    deck-magazine-web.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip deck-magazine-web.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

  • Give the agent the full text of each slide and roughly how many slides you want, so it can fill the layouts cleanly
  • Ask for image placeholders or supply image URLs, since the image grid layout needs assets
  • Open the generated HTML in a current desktop browser to check the animation and arrow-key navigation

What's inside

  • example.html
  • SKILL.md

Redistributed unmodified from nexu-io/html-anything 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.