How to use the Magazine Web Deck agent skill (deck-magazine-web)

What the skill makes the agent do

Once installed, the agent can produce a horizontal-swipe HTML deck in a magazine style. The deck follows a fixed set of page types: a cover, chapter title pages, big-number data slides, image grids and quote pages.

The cover uses a serif display headline over a WebGL fluid-motion background. Viewers move between slides with the left and right arrow keys, and the current slide is reflected in the URL hash, so a specific slide can be linked to.

• Cover with serif display headline and WebGL fluid background
• Chapter title pages
• Data slides with one large number and one explaining sentence
• Image grid pages
• Quote pages in a Sunday-paper style
• Keyboard navigation with ← and →, hash sync in the URL

Install the skill from the ZIP file

Download the ZIP for this skill from this page and unzip it. The package contains two files: SKILL.md and example.html.

For a personal install, unzip the folder into ~/.claude/skills/. To keep it only for one project, unzip it into that project's .claude/skills/ folder.

You can also upload the skill in the Claude apps: open Settings, go to Capabilities, then Skills, and upload it there.

• Personal: ~/.claude/skills/
• Single project: .claude/skills/ inside the project folder
• Claude apps: Settings → Capabilities → Skills

Trigger the skill with a natural request

You do not need a special command. Describe a deck in plain language and mention the look you want, such as a magazine-style or editorial presentation for a campaign or product story. The skill's own tags and description cover magazine, editorial, e-ink and horizontal swipe, so those words help the agent match it.

Give the agent your content and the audience. Name the slide types you want if you have them in mind, for example a big-number slide for a key result or a quote page for a customer line.

• "Make a magazine-style HTML presentation for our spring product launch, with a big-number slide for the 40% growth figure."
• "Turn this campaign brief into an editorial web deck with a cover, three chapter pages and a quote page."
• "Build an e-ink style swipeable deck I can send as a link."

Check the output and what it needs

The skill loads web fonts Playfair, Noto Serif SC and Inter from the web, so the viewer needs an internet connection for the intended look. The cover background needs a browser that supports WebGL. Use a current desktop browser and test the deck before sharing.

Use the example.html file in the package as a reference for what a finished deck looks like before you ask for your own.

• Browser with WebGL for the cover background
• Internet access to load Playfair, Noto Serif SC and Inter
• Open the result in a browser and step through every slide with the arrow keys

Safety notes: scripts and network

This skill does not run scripts. It does use the network, because the fonts are loaded from the web when the deck is viewed. Review the files in the ZIP before installing any skill, and review the generated HTML before publishing it to make sure it contains only the content you intend to share.

• Runs scripts: no
• Uses network: yes (web fonts)
• Output is HTML, not an editable .pptx file

Tips for better decks

Plan the story in chapters first. The skill's layouts work best when each chapter has one clear message, one big number or one quote.

Keep data slides to one number and one explanatory sentence, since that is the layout the skill describes. If you need dense charts, use a different tool.

• Write the key numbers and quotes out before asking for the deck
• Ask for the slide order you want so the story flows
• Keep image grids to images you have the rights to use