Skip to content

Guide · Agent skill

How to use the Playful HTML Sales Training Deck agent skill

Updated · written with AI from the project's own documentation and checked against our catalogue data

This guide explains the Playful HTML Sales Training Deck, an agent skill that gives an AI agent a ready-made visual template for a single-file HTML slide presentation. It is aimed at a retail training deck on consultative selling, though the same template can be reused for other topics. By the end you will know what the skill does, how to install it, how to ask for a deck in plain language, and where it is not the right tool.

Playful HTML Sales Training Decknexu-io/open-design · Apache-2.0

Quick start

  1. 1Download the ZIP. Get the skill ZIP from the page where you found this guide.
  2. 2Install the skill. Unzip it into ~/.claude/skills/ for personal use or .claude/skills/ inside a project, or upload it under Settings → Capabilities → Skills in the Claude apps.
  3. 3Describe your deck. Ask in plain words for an HTML training deck, using a trigger term like training deck or html slides.
  4. 4Answer the agent's questions. Provide the audience, the decision the deck should drive, your source materials, the deadline and any must-keep numbers.
  5. 5Open and check the HTML. Open the returned single HTML file in a browser, check every number and name, and adjust the slide count if needed.

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, named html-ppt-zhangzara-playful, is a template-based helper for building slide decks as one self-contained HTML file.

When you ask for it, the agent copies the template, replaces the placeholder content with your real headlines, numbers and names, and adjusts the number of slides. The skill's instructions tell the agent to keep the fonts, colours, layout grid and decorative elements intact, so the deck keeps its friendly, indie look. The template uses a sun-warm peach background and a rounded display font.

Install the Playful HTML Sales Training Deck skill

There are two routes. In both, start by downloading the skill ZIP from the page where you found this guide.

For a personal setup, unzip the download into ~/.claude/skills/. For a single project, unzip it into the project's .claude/skills/ folder. Alternatively, if you use the Claude apps, open Settings, go to Capabilities, and upload the skill under Skills.

  • Personal: unzip into ~/.claude/skills/
  • Single project: unzip into .claude/skills/ inside the project
  • Claude apps: Settings → Capabilities → Skills, then upload

How do you trigger the skill with a natural request?

You do not need special syntax. Describe the deck you want in ordinary words that match the skill's trigger terms, such as training deck, html slides, html deck, workshop, course module, or employee onboarding deck.

Before building, the skill's example workflow has the agent ask only for missing essentials: the audience, the decision the deck should drive, your source materials, the deadline, and any numbers that must stay exactly as given. Having these ready speeds things up.

  • Create a 10-slide HTML training deck for store associates on consultative selling, using the numbers in my attached notes.
  • Make an HTML slide deck for floor managers covering the role-play routine and the daily habit that lifts conversion.
  • Build an onboarding deck for new hires as one HTML file, keeping the playful style.

What output should you expect?

The skill's output contract asks the agent to return a single HTML document wrapped in artifact tags. Open that HTML file in a browser to view and present the slides. The template includes a preview file, example.html, that shows the look before you customise it.

The skill's workflow asks the agent to duplicate existing slide layouts if you need more slides, or drop slides from the end if you need fewer, and to update page-number labels. If a slide needs a layout the template does not have, the agent is told to design one in the same visual style rather than switch templates.

  • Working file: a copy of example.html in your workspace
  • Slide count: changed by duplicating or removing layouts
  • Speaker notes and animations: not included (set to false in the template)

What does it need, and what should you check for safety?

The skill lists no required tools or packages. It does not run scripts and does not use the network, according to its metadata. Its files are example.html, SKILL.md and template.json.

SKILL.md says the upstream template is MIT-licensed and that the full licence text ships with the skill as LICENSE, which must be kept with any copy of the template. The listing for this page gives the licence as Apache-2.0, so check the licence files in your download before redistributing anything. Note that SKILL.md also mentions an optional assets/deck-stage.js navigation file; the listed files do not include an assets folder, so do not expect one.

  • Required tools: none listed
  • Runs scripts: no
  • Uses network: no
  • Keep the upstream LICENSE with any copy you share

When is this skill the wrong choice?

The skill itself states that the peach palette is intentionally informal and lacks institutional credibility. For formal or compliance-heavy corporate training, pick a more neutral template.

If you need a deck that works without a browser, or that includes speaker notes and animations, this template is not built for that, because it sets both to false.

  • Good fit: friendly retail training, informal workshops, small-team onboarding
  • Poor fit: compliance training, formal corporate decks, presentations needing speaker notes or animations

What people use it for

  • Training store associates on a consultative selling flow and role-play routine
  • Giving floor managers a short deck on a daily habit that supports conversion
  • Creating an informal onboarding deck for a small team
  • Reusing the same playful layout across several internal workshop topics

Frequently asked questions

How do I install the Playful HTML Sales Training Deck skill?

Download the skill ZIP from the page, then unzip it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. In the Claude apps, you can instead upload it under Settings → Capabilities → Skills.

Is this skill free to use?

The listing for this page gives the licence as Apache-2.0, while SKILL.md says the upstream template is MIT-licensed and must be redistributed with its LICENSE file. Read the licence files in your download before you share or reuse the template.

What does the skill require?

The skill lists no required tools or packages. It is marked as not running scripts and not using the network.

Can I use it for compliance training?

It is not recommended. The skill states that the peach palette is intentionally informal and lacks institutional credibility, so formal or compliance-heavy training needs a more neutral template.

Does the deck include speaker notes or animations?

No. The template sets speaker notes and animations to false, so you should plan any presenter notes separately.

What should I do if the deck needs more or fewer slides?

Ask the agent to adjust the count. According to the skill's workflow, it duplicates an existing layout to add slides or removes slides from the bottom to cut them.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use this skill if you want a friendly, single-file HTML training deck for store staff or an informal workshop, and you want an agent to keep the visual style consistent. Choose a different template if you need formal corporate or compliance training, speaker notes, animations, or a deck that runs without a browser.

Download the skill