How to use the Cherry-Blossom Photo Essay Deck agent skill

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

An agent skill is a folder of instructions and files that an AI agent can load when a task matches it. This skill is named html-ppt-zhangzara-sakura-chroma and is built for travel stories and similar personal presentations.

When you ask for a travel story or a similar presentation, the agent copies the included template and replaces its placeholder text and images with your own content. It adds or removes slides as needed while keeping the visual style fixed. The output is a single self-contained web page you can open in a browser.

• Visual style: cream paper, diagonal rainbow ribbons, condensed bold type and JIS-style spec checkboxes.
• Output: one HTML file, with no special software needed to view it.
• Design rule: the agent is told not to change fonts, colours, or the layout grid.

Install the skill from the ZIP download

Download the ZIP for this skill from the page you are reading. Then choose one of the two install locations below and unzip the file there.

The skill's files are example.html, SKILL.md and template.json. Keep the folder structure as it comes in the ZIP so the agent can find SKILL.md.

• Personal install: unzip into ~/.claude/skills/ so it is available across your projects.
• Project install: unzip into the .claude/skills/ folder inside a specific project.
• Claude apps: upload the skill under Settings, then Capabilities, then 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 presentation format such as slides or a deck. The skill's listed trigger words include html deck, html slides, photo-essay, and story, so phrasing your request around these terms makes it more likely the agent picks this skill.

The agent will first ask only for what it is missing: audience, decision target, source materials, deadline, and any numbers that must stay exact. Answer those, then it produces the slide plan and the written slides.

• Example request: Make an HTML slide deck about my cherry-blossom trip to Kyoto, arrival to peak bloom, for friends who like travel.
• Example request: Turn my spring trip photos and notes into an html deck with a retro product-catalogue look.
• Tell the agent the audience and the one thing you want them to remember.

What the agent does while building your deck

The skill sets a clear workflow. The agent clones the example file into your workspace as the working file, then replaces placeholder headlines, body copy, numbers, names, dates and section labels with yours. When you have more content than the demo holds, it duplicates an existing slide of the closest layout. When you have less, it removes slides from the bottom and updates page-number labels.

If a slide needs a layout the template does not include, the skill tells the agent to design it using the same fonts, palette and decorative elements rather than switch to another template.

• The demo has 8 slides, a light colour scheme, low formality and medium density.
• Image placeholders should be replaced at matching dimensions.
• The navigation code shipped with the deck is meant to be left as it is.

What it needs and safety notes

The skill lists no required tools or software. It does not run scripts and does not use the network, according to its listing. The deck is plain HTML that you open in a browser or host yourself.

The skill's own licence notes say the template is vendored from an MIT-licensed upstream project. The MIT licence text and copyright notice are meant to ship with the skill and must be kept with any copy of example.html, template.json or vendored assets. The listing for this directory gives the licence as Apache-2.0, so check the LICENSE file in your copy before you redistribute it.

• Requirements: none listed.
• Runs scripts: no. Uses network: no.
• Redistribution: keep the upstream MIT notice with any copy of the template files.
• Keep the bold style in mind: it is intentionally loud, so review the output before sharing it.

Tips for a better deck

Give the agent real material. Headlines, a clear sequence of moments, and exact numbers produce a better story than general instructions. The skill's example prompt asks for a deck that someone could retell after seeing it once, so keep that goal in mind when you review the slides.

• Supply your own photos at the right proportions so the image placeholders fit.
• Keep numbers you must not change in your message so the agent treats them as fixed.
• Check the page-number labels and slide count after the agent has added or removed slides.
• Open the final HTML file in a browser to check navigation before sharing.