html-ppt-zhangzara-editorial-tri-tone
Provides an HTML presentation template with an editorial tri-tone design for professional decks.
Install
mkdir -p .claude/skills/html-ppt-zhangzara-editorial-tri-tone && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/12001" && unzip -o skill.zip -d .claude/skills/html-ppt-zhangzara-editorial-tri-tone && rm skill.zipInstalls to .claude/skills/html-ppt-zhangzara-editorial-tri-tone
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Editorial Tri-Tone — Three-color editorial system: dusty pink, mustard cream, and deep burgundy, set in Bricolage + Instrument Serif. Anything that should feel like a fashion-magazine spread: editorial pitches, fashion brand decks, lifestyle media, art direction reviews.Key capabilities
- →Clone `example.html` and `assets/` folder
- →Replace placeholder content with user's text and images
- →Adjust deck length by duplicating or dropping slides
- →Design missing layouts using existing fonts, palette, and vocabulary
How it works
The skill clones the template files, replaces placeholder content, and guides the user to maintain the design system while adjusting deck length or designing new layouts based on the existing aesthetic.
Inputs & outputs
When to use html-ppt-zhangzara-editorial-tri-tone
- →Creating editorial style pitch decks
- →Fashion brand presentations
- →Developing HTML slide decks
About this skill
Editorial Tri-Tone
Three-color editorial system: dusty pink, mustard cream, and deep burgundy, set in Bricolage + Instrument Serif.
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-high
- Density: medium
- Slides in demo: 8
Best for
Anything that should feel like a fashion-magazine spread: editorial pitches, fashion brand decks, lifestyle media, art direction reviews. Equally good for any deck — including tech, research, or business — that wants tri-tone discipline and serif/sans contrast instead of the usual neutrals.
Avoid for
Decks that need to read as soft or comforting — the burgundy/pink/cream tri-tone is intentionally high-contrast and styled.
Workflow
- Clone
example.htmlAND theassets/folder into the user's workspace. This template ships anassets/deck-stage.jsruntime (keyboard navigation, stage rendering); the HTML references it asassets/deck-stage.js, so the file must sit next to the cloned HTML or that path will 404 in the generated artifact and navigation will silently break. Inlining the JS into a single<script>block in the HTML is an acceptable alternative when a single self-contained file is preferred. - 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-editorial-tri-tone" 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.
When not to use it
- →When the user needs a deck that reads as soft or comforting
- →When the user wants to mix layouts across different templates
- →When the user wants to substitute fonts, recolor the palette, or restructure the layout grid
Limitations
- →Mixing layouts across templates breaks the system
- →Never substitute fonts, recolor the palette, restructure the layout grid, or strip decorative elements
- →Requires maintaining the navigation runtime as shipped
How it compares
This skill provides a complete HTML/CSS design system for editorial-style presentations with a specific tri-tone color palette and typography, ensuring visual consistency and adherence to a fashion-magazine aesthetic.
Compared to similar skills
html-ppt-zhangzara-editorial-tri-tone side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| html-ppt-zhangzara-editorial-tri-tone (this skill) | 0 | 2mo | No flags | Beginner |
| baoyu-xhs-images | 20 | 2mo | No flags | Beginner |
| pitch-deck | 16 | 9mo | Review | Beginner |
| pptx-posters | 9 | 2mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by skeletorflet
View all by skeletorflet →You might also like
baoyu-xhs-images
JimLiu
Generates Xiaohongshu (Little Red Book) infographic series with 10 visual styles and 8 layouts. Breaks content into 1-10 cartoon-style images optimized for XHS engagement. Use when user mentions "小红书图片", "XHS images", "RedNote infographics", "小红书种草", or wants social media infographics for Chinese platforms.
pitch-deck
ailabs-393
Generate professional PowerPoint pitch decks for startups and businesses. Use this skill when users request help creating investor pitch decks, sales presentations, or business pitch presentations. The skill follows standard 10-slide pitch deck structure and includes best practices for content and design.
pptx-posters
K-Dense-AI
Create research posters using HTML/CSS that can be exported to PDF or PPTX. Use this skill ONLY when the user explicitly requests PowerPoint/PPTX poster format. For standard research posters, use latex-posters instead. This skill provides modern web-based poster design with responsive layouts and easy visual integration.
infographic-creator
antvis
基于给定文字内容创建精美信息图。当用户请求创建信息图时使用。
ckm:design
akshh229
Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), soci
frontend-slides
sickn33
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.