How to use the Editorial Tri-Tone Deck Design agent skill

What is an agent skill and what does this one do?

An agent skill is a folder of instructions and files that an AI agent loads when your request matches it. This skill is for building presentation decks as HTML. It starts from a provided example deck, replaces the placeholder text and numbers with yours, and keeps the template's decorative elements and keyboard navigation intact.

The skill also tells the agent not to change the fonts, colours or layout grid, so the output stays consistent. If the deck needs a slide layout the template lacks, the agent is told to design it with the same fonts, palette and decorative style rather than switch templates.

• Output: a single HTML deck you can open in a web browser.
• Palette: dusty pink, mustard cream and deep burgundy.
• Fonts: Bricolage and Instrument Serif.
• Navigation: keyboard navigation from the bundled assets/deck-stage.js runtime.

Install the skill from the ZIP download

Download the ZIP for html-ppt-zhangzara-editorial-tri-tone from this page, then unzip it. The skill folder contains SKILL.md, example.html, template.json and assets/deck-stage.js.

For a personal install, unzip it into ~/.claude/skills/. For a single project, unzip it into the project's .claude/skills/ folder. Either way, keep the folder structure as it came in the ZIP.

If you use the Claude apps instead, open Settings, go to Capabilities, then Skills, and upload the skill there.

• Personal install: ~/.claude/skills/
• Project install: .claude/skills/ inside your project
• Claude apps: Settings → Capabilities → Skills

Trigger the skill with a natural request

You do not need special syntax. Describe a deck that suits the look and mention the audience. The skill's trigger words include html deck, html slides, design, brand and visual-system, so phrasing like the examples below should match it.

Give the agent your subject, audience and the numbers that must appear. The template's own example prompt asks for missing essentials first, such as audience, decision target, source materials, deadline and must-keep numbers.

• "Make an HTML slide deck in the editorial tri-tone style for our magazine relaunch pitch to the board."
• "Build a 6-slide magazine-style html deck for our lifestyle brand, audience is the design team."
• "Create a design craft deck on our new type-and-color system using the html deck template."

Work through the template steps

The skill asks the agent to clone example.html and the assets/ folder into your workspace. The HTML loads assets/deck-stage.js by that path, so the file must sit beside the HTML or navigation will break. Inlining the JavaScript into one script block is an accepted alternative if you want a single file.

The agent then replaces placeholder content, adds or removes slides to match your material, and keeps the design system and navigation runtime unchanged. Check the page numbers after the deck length changes.

• Keep assets/deck-stage.js next to the HTML, or inline it.
• Replace headlines, body copy, numbers, names, dates and section labels.
• Match image sizes to the placeholders you replace.
• Add slides by duplicating a slide with the layout you need; remove slides from the bottom.

Safety notes: scripts and network

According to the skill's listing, it does not run scripts and does not use the network. Its requirements are a web browser to view the generated HTML and an agent able to write files so it can copy example.html and the assets folder.

The bundled assets/deck-stage.js is a browser runtime for navigation and stage rendering. Review it as you would any file you open in a browser before using the deck for anything sensitive.

• Runs scripts: no (the skill itself).
• Uses network: no.
• The deck itself runs in your browser through assets/deck-stage.js.

Tips for better results

The palette is high-contrast by design. Use it when the deck should look bold and art-directed. For a calm or conservative audience, pick a different skill.

Because the skill forbids changing the fonts or palette, it is not a good fit if your deck must follow a house brand. Keep your content to the template's structure and let the agent handle the layout.

• Give the agent real headlines and numbers early, so placeholders are replaced cleanly.
• Ask for a critic pass to review the deck against a checklist, as the example prompt does.
• Keep the LICENSE file (Apache-2.0 for this item) with any copy you redistribute.