Playful Presentation Deck
FreeCreate warm, approachable HTML presentations with ease.
Free · Opens the source repo
What Playful Presentation Deck does
The Playful Presentation Deck is designed for retail sales-floor training, specifically focused on consultative selling techniques. It provides a structured, visually appealing HTML deck that emphasizes a friendly and indie aesthetic. The deck is particularly suitable for training store associates and floor managers, helping them to enhance their conversion skills through role-plays and daily habits. With a sun-warm peach background and a carefully curated typography and decorative system, this presentation style aims to create an inviting atmosphere for learning.
This skill is built around a single HTML template that maintains a cohesive design system. Users are encouraged to clone the provided example.html file and replace its placeholder content with their own. The design elements, including fonts, colors, and layouts, are integral to the identity of the deck, and users must adhere to these specifications to preserve its professional integrity. The deck is structured to allow for customization in length by duplicating existing layouts or removing slides as needed, making it flexible for various presentation lengths.
While the Playful Presentation Deck excels in creating a warm and approachable vibe, it is not suitable for contexts that require a more formal or institutional appearance. The informal peach palette and overall design are intended for creative pitches, community decks, and other scenarios where a friendly tone is prioritized. Users should consider this when deciding on the appropriate context for their presentations. Overall, this skill is ideal for those looking to create engaging and visually appealing training materials or presentations that resonate with a more casual audience.
When to use it
Use this skill when you need to create a presentation that feels friendly and approachable, particularly for training or small business contexts.
When not to use it
Avoid using this skill for formal presentations where institutional credibility is paramount, as the design is intentionally informal.
What you can build with it
Retail Training Session
Use the Playful Presentation Deck to train retail associates on consultative selling techniques, enhancing their skills in a warm and engaging manner.
Small Business Pitch
Create a friendly and approachable pitch deck for your small business, making your presentation feel more relatable to potential clients.
Community Workshop
Utilize this deck for community workshops where a casual tone is essential, ensuring participants feel welcomed and engaged.
How to install Playful Presentation Deck
View source1. Install with the skills CLI
npx skills add nexu-io/open-design/html-ppt-zhangzara-playful --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by nexu-ioPlayful
Sun-warm peach background with Syne display: a friendly indie launch deck.
A single self-contained HTML deck — typography, palette, decorative system, and slide vocabulary are all tuned together. Mixing layouts across templates breaks the system; stay inside this one.
At a glance
- Scheme: light
- Formality: low
- Density: medium
- Slides in demo: 10
Best for
Anything that should feel warm, indie, and approachable: creator portfolios, indie product launches, lifestyle brands, small-business pitches, newsletter / community decks. Also welcoming for any deck — including tech or research — that wants to feel friendly and human rather than corporate.
Avoid for
Contexts where institutional credibility matters more than warmth — the peach palette is intentionally informal.
Workflow
- Clone
example.htmlinto the user's workspace as the working file. - Replace placeholder content with the user's real headlines, body copy, numbers, names, dates, and section labels. Match existing dimensions when swapping image placeholders.
- Preserve the design system. Never substitute fonts, recolor the palette, restructure the layout grid, or strip decorative elements (corner brackets, paper grain, geometric shapes, illustrated SVGs). They are part of the identity.
- Adjust deck length by duplicating layouts. If the user has more content than the demo holds, duplicate an existing slide of the most appropriate layout. If less, drop slides from the bottom. Update page-number labels.
- Designing missing layouts: if a slide needs a layout the template doesn't have, design it from scratch using the same fonts, palette, decorative vocabulary, spacing rhythm, and component grammar — never bail to a different template.
- Keep the navigation runtime as shipped. If the deck ships an
assets/deck-stage.jsor inline keyboard handler, leave it intact.
Output contract
Emit between <artifact> tags:
<artifact identifier="zhangzara-playful" type="text/html" title="Deck Title">
<!doctype html>
<html>...</html>
</artifact>
Source & license
Vendored from upstream MIT-licensed
zarazhangrui/beautiful-html-templates.
The full upstream MIT license text — including the original copyright notice — ships in this skill at
LICENSE and must be redistributed alongside any copy of example.html,
template.json, or any vendored assets/ runtime. See template.json for the upstream metadata snapshot.
Frequently asked questions about Playful Presentation Deck
Similar skills
PPTX HTML Fidelity Audit
Ensure your PPTX matches its HTML source perfectly.
HTML PPT Studio
Create professional HTML presentations effortlessly.
Humanize PPT
Transform raw material into presentation-ready outlines.
Replit Deck
Create visually cohesive decision decks with ease.
Open Design Landing Deck
Create engaging marketing decks with a magazine-style format.
Magazine Web Presentation
Create visually striking HTML presentations with ease.