HTML Presentation Deck
FreeCreate mid-century styled presentation decks effortlessly.
Free · Opens the source repo
What HTML Presentation Deck does
The HTML Presentation Deck skill provides a structured template for creating visually appealing presentation decks, specifically designed with a mid-century modern aesthetic. This skill is ideal for users looking to produce high-quality consulting deliverables, such as decision-grade decks for clients or steering committees. The template includes a cohesive design system with a dark sage canvas, bone paper, and burnt-orange accents, ensuring a tactile and intentional feel that resonates with design studios, architecture firms, and advisory services.
Users can start by cloning the provided example.html file, which serves as a working document. The skill emphasizes the importance of maintaining the integrity of the design system; users are instructed to replace placeholder content without altering the established typography, color palette, or layout structure. This ensures that the final product remains consistent and professional, adhering to the intended aesthetic.
The workflow is straightforward, allowing users to adjust the length of the deck by duplicating existing layouts or removing slides as necessary. However, if additional layouts are required, users must create them from scratch while adhering to the established design principles. This skill is particularly suited for those who appreciate a warm, distinctive style and want to convey a sense of craftsmanship in their presentations, making it a valuable tool for professionals in creative and consulting fields.
When to use it
Use this skill when you need to create a presentation that conveys a mid-century modern feel, particularly for design or consulting contexts.
When not to use it
Avoid this skill for presentations requiring a fast-paced, high-energy aesthetic or strict institutional branding.
What you can build with it
Consulting Presentations
Use this skill to create polished consulting decks that require a professional yet warm aesthetic.
Design Studio Credentials
Ideal for design studios looking to present their work in a manner that reflects their brand identity.
Client Decision Decks
Perfect for crafting decision-grade decks for clients or steering committees that need a cohesive visual narrative.
How to install HTML Presentation Deck
View source1. Install with the skills CLI
npx skills add nexu-io/open-design/html-ppt-zhangzara-mat --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-ioMat
Dark sage canvas with bone paper and burnt-orange accent; mid-century modern with wood undertones.
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: mixed
- Formality: medium
- Density: medium
- Slides in demo: 9
Best for
Anything that should feel mid-century, tactile, and intentional: design studio credentials, architecture / interior brands, ceramics / craft / furniture, advisory decks. Also a warm, distinctive choice for tech, research, or business decks that want a considered analog feel instead of digital-cool.
Avoid for
Contexts that need fast tech energy or institutional restraint — the muted sage and burnt-orange palette is intentionally warm and slow.
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-mat" 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 HTML 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.