How to use the Magazine Web Slides agent skill

What the skill makes the agent do

When the skill is active, the agent generates one self-contained HTML file that works as a horizontal-swipe slide deck. The style is described as a hybrid of electronic magazine and electronic ink, and the design resembles the Monocle magazine look.

The output uses serif headlines (Noto Serif SC and Playfair Display), sans-serif body text (Noto Sans SC and Inter), monospace metadata (IBM Plex Mono) and Lucide line icons instead of emoji. Hero pages can show an animated WebGL fluid or contour background, and colours and background shift smoothly when you move onto a hero page.

• Choose one of five magazine-inspired directions, such as Monocle Editorial, WIRED Tech, Kinfolk Slow, Domus Architectural or Lab / Reference.
• Navigate with the keyboard arrow keys, the scroll wheel, touch swipe, bottom dots, or ESC for an index.
• Before generating slides, the agent works through a short plan: it infers audience and talk length, then outlines a narrative arc.

Install the magazine-web-ppt skill

Download the skill ZIP from this page. You then have two ways to add it, depending on whether you want it for all your projects or just one.

For a personal install, unzip the folder into ~/.claude/skills/. To limit it to one project, unzip it into that project's .claude/skills/ folder. Claude apps can also load the ZIP directly: open Settings, go to Capabilities, then Skills, and upload it there.

• Personal (all projects): ~/.claude/skills/
• Single project: the .claude/skills/ folder inside your project
• Claude apps: Settings → Capabilities → Skills, then upload the ZIP

Trigger the skill with a natural request

You do not need special syntax. Describe the talk and ask for an HTML deck or HTML slides. The skill's trigger list includes phrases such as html deck, html slides, launch, campaign and pipeline, so requests that mention these words are most likely to load it.

The agent will normally ask only for missing essentials, such as audience, talk length, any source material, any images and hard constraints. If you say nothing about style, it picks a direction from your brief.

• Make an HTML deck for my 30-minute offline talk on remote teams, for a private salon audience.
• Build HTML slides for our product launch demo day. We have a draft outline and screenshots.
• Create an html deck from these notes for an internal industry talk, with a serious but warm tone.

Prepare images and files

Images are optional. If you want your own pictures, place them in an images folder beside index.html inside a ppt folder for your project, for example ppt/images/. Name each file with its page number and a short English description, such as 01-cover.jpg or 03-figma.jpg.

The skill recommends images at least 1600px wide, JPG for photos and screenshots, PNG for transparent UI or charts, and a total size under 10MB. To replace an image, overwrite the file with the same name. If you rename it, the path in the HTML must be updated too.

If you have no images yet, the agent can build the structure with placeholder colour blocks, but image-and-text layouts cannot be checked visually until real images are added.

Understand what it needs and the safety notes

You need a browser to view the finished file. The deck loads web fonts (Noto Serif SC, Playfair Display, Noto Sans SC, Inter and IBM Plex Mono) and Lucide icons when you view it, so the page needs network access for those. The skill's metadata says it does not run scripts. It does use the network, as described above.

Note that the SKILL.md front matter describes a marketing and go-to-market annual plan deck, but the body of the skill covers magazine-style visual HTML decks. The body determines how the skill behaves, so expect a magazine-style deck, not a marketing plan template.

• Runs scripts: no
• Uses network: yes, for web fonts and Lucide icons at view time
• The output is static HTML, so it has no built-in multi-user editing

Tips for better results

Give the agent a complete outline and your images up front, because a finished outline lets it skip straight to building. Keep a project record so the direction does not change mid-build. The skill notes that switching direction midway wastes earlier work.

Match length to pages. The skill's guideline is about 10 pages for 15 minutes, about 20 pages for 30 minutes, and about 25 to 30 pages for 45 minutes.

• Let the agent choose a direction unless you have a clear preference. If you mention AI, benchmarks or a technical launch, it leans toward WIRED; reading, private or social circle, toward Kinfolk; design, architecture or portfolio, toward Domus; research or academic, toward Lab.
• Ask for the outline first, then the slides, so you can check the story before the styling.
• Open the finished HTML file in a browser and test every page with the arrow keys and touch, since layout depends on your images.