Using the Digital Transformation Roadmap Deck Template skill

What the skill makes the agent do

Once installed, the skill tells your agent to build a single self-contained web-page slide deck in a fixed visual style: Cormorant Garamond serif type on warm paper, with sage, blush and lemon accents. The bundled example is a digital-transformation roadmap for a legacy insurer, covering the diagnosis, the sequenced bets and the operating rhythm needed to land them.

The agent fills the slides with your own headlines, body copy, numbers and names while keeping the design unchanged. It can also design extra slide layouts in the same style when your content needs one the template does not include.

• Output is an HTML file you open in a web browser.
• The skill is written for decision-grade consulting decks aimed at client executives.
• The skill says the palette and serif are intentionally quiet, so it is not suited to bold, high-energy visuals.

Install the skill from the download ZIP

Download the ZIP for this skill from this page and unzip it. The skill is named html-ppt-zhangzara-soft-editorial, so keep that folder name when you place it.

You can install it in either of two places. For a personal install, put the unzipped folder in your home directory under .claude/skills/. For a single project, put it in the .claude/skills/ folder inside that project.

If you use the Claude apps instead, you can upload the skill under Settings, then Capabilities, then Skills.

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

Trigger the skill with a natural request

You do not need special syntax. Describe the deck you want in plain language and mention a deck or slides, the audience and the purpose. The skill's own example asks for a decision-grade consulting deck for client executives, with a slide plan, written slides, visual direction and a final review pass.

The skill's example also asks the agent to ask for missing essentials first: audience, decision target, source-of-truth materials, deadline and any numbers that must be kept. Answer those questions so the deck reflects your facts rather than placeholders.

• Build a digital-transformation roadmap deck for a legacy insurer's executive team using this template.
• Make an HTML slide deck for our client steering committee on sequencing three transformation bets.
• Turn my notes on our operating rhythm into a roadmap deck in the Soft Editorial style, as HTML slides.

What you need before you start

The skill needs only two things: a web browser to view the finished HTML deck, and an agent that can read and write files in your workspace. The skill's metadata lists no network use and no scripts that the agent runs.

The package includes four files: assets/deck-stage.js, example.html, SKILL.md and template.json. The agent copies example.html and the assets folder into your workspace.

• A web browser
• An agent that can read and write files in your workspace
• Files: assets/deck-stage.js, example.html, SKILL.md, template.json

Replace the example content and keep the design

The skill's workflow starts by copying example.html and the assets folder into your workspace. The HTML loads assets/deck-stage.js by that relative path, so the file must stay next to the copied HTML or navigation will break. Inlining the JavaScript into one script block inside the HTML is an accepted alternative if you want a single file.

The skill asks the agent to replace placeholder text with your real content, and to match the original image dimensions when swapping image placeholders. It also says the agent should not change fonts, colours, the layout grid or decorative elements such as corner brackets and paper grain. If you need more slides, the agent duplicates a layout of the same kind. If you need fewer, it removes slides from the bottom and updates the page numbers.

• Replace headlines, body copy, numbers, names, dates and section labels with your own.
• Ask for more or fewer slides and the agent will duplicate or drop layouts.
• Ask for a new layout and the agent designs one in the same style rather than switching templates.

Safety notes on scripts and network use

The skill's metadata says it does not run scripts and does not use the network. The deck does include assets/deck-stage.js, a JavaScript file that the HTML loads to handle keyboard navigation and stage rendering when you open the deck in a browser. Read it before you share the deck if your organisation restricts scripts in files.

The skill's SKILL.md says the template is vendored from an MIT-licensed upstream project. Its full licence text is meant to ship in the skill as a LICENSE file and to be redistributed with any copy of example.html, template.json or the assets folder. Check that the file is in your download before you pass the deck on.

• Keep assets/deck-stage.js next to the HTML, or inline it, so navigation works.
• Review the JavaScript if your security policy limits scripts in shared files.
• Keep the upstream licence text with any copies you distribute.

Tips for better results

Give the agent real figures and sources at the start. The skill's example is a generic consulting roadmap and does not supply research or data, so any numbers in a client deck must come from you and be checked by you.

Ask the agent for a critic pass against a clear test. The skill's example uses the question of whether a client would know what to do on Monday morning.

• Supply source-of-truth materials and must-keep numbers before drafting.
• Do not use this template for decks that need bold, high-energy visuals.
• Ask the agent to keep the same layouts across slides for consistency.