Coral Presentation Deck
FreeCreate warm, editorial-style HTML presentations easily.
Free · Opens the source repo
What Coral Presentation Deck does
Coral is a self-contained HTML presentation deck designed for users seeking to create visually appealing and editorial-style slides. This skill provides a cohesive typography and color palette, specifically tuned to deliver a warm and engaging aesthetic. The deck is ideal for applications in the fashion, beauty, fitness, food and beverage, and lifestyle sectors, as well as for creator portfolios and tech or research presentations that require a bold yet inviting design.
To get started, users simply clone the provided example.html file into their workspace. From there, they can replace placeholder content with their own headlines, body text, and images while preserving the design system's integrity. The skill emphasizes the importance of maintaining the original fonts, colors, and layout structures to ensure a consistent brand identity throughout the presentation. Users can adjust the length of the deck by duplicating existing layouts or removing slides as needed, allowing for flexibility in content delivery.
Coral's design is not suitable for contexts requiring a more subdued or institutional feel, as its vibrant coral accents and oversized Bebas Neue typography create a confident, magazine-like voice. This skill is perfect for those who want to make a strong visual impact while presenting their ideas or products. By adhering to the established design guidelines, users can produce professional-quality presentations that resonate with their target audience.
When to use it
Use Coral when you need to craft a presentation that feels warm and editorial, particularly in creative or lifestyle industries.
When not to use it
Avoid Coral for presentations that require a formal or institutional tone, as its design elements are bold and expressive.
What you can build with it
Creating a Fashion Brand Presentation
Use Coral to design a visually striking presentation for a fashion brand launch, utilizing its warm color palette and bold typography.
Building a Creator Portfolio
Leverage Coral to craft an engaging portfolio that showcases your work in a stylish and editorial format, perfect for attracting clients.
Preparing a Marketing Campaign Deck
Utilize Coral to prepare a marketing campaign presentation that communicates your strategy with a confident and warm design.
How to install Coral Presentation Deck
View source1. Install with the skills CLI
npx skills add nexu-io/open-design/html-ppt-zhangzara-coral --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-ioCoral
Cream and coral on near-black, set in oversized Bebas Neue.
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: 10
Best for
Anything that should feel warm-graphic and editorial: fashion, beauty, fitness, F&B, lifestyle brands, agency credentials. Just as strong for a creator portfolio, a manifesto, or a tech / research deck that wants warmth and a single bold accent instead of corporate cool.
Avoid for
Contexts that should feel quiet or institutional — the coral accent and oversized Bebas Neue commit hard to a confident magazine voice.
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-coral" 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 Coral 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.