html-ppt-xhs-white-editorial

Generates white-background magazine-style HTML slide decks for Xiaohongshu posts and landscape presentations.

Updated May 20, 2026
One-click install
npx skills add https://github.com/Keimoshi/Silverloft --skill html-ppt-xhs-white-editorial-keimoshi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: html-ppt-xhs-white-editorial
Source: https://github.com/Keimoshi/Silverloft/tree/main/open-design-port/skills/html-ppt-xhs-white-editorial
Command: npx skills add https://github.com/Keimoshi/Silverloft --skill html-ppt-xhs-white-editorial-keimoshi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Creating visually consistent, editorial-style slide decks in HTML requires assembling typography, color tokens, card layouts, and a keyboard navigation runtime from scratch. This Skill provides a ready-made white-background magazine template so you can produce a polished deck for Xiaohongshu image posts or landscape PPT-style presentations without designing the visual system yourself. ## Core Features & Use Cases - Full-deck template: Ships an 8-slide example deck with cover, section divider, card grids, numbered steps, code block, SVG bar chart, CTA, and closing slides. - Distinct visual system: Pure white background, 10-color rainbow top bar, 80-110px display titles, purple-to-pink gradient text, macaron soft cards, and black-on-white focus pills. - Dual output: Suitable for both Xiaohongshu (XHS) vertical-style image content and horizontal presentation decks, with speaker notes support via hidden <aside class="notes"> elements. - Use Case: Ask for a deck on a topic like "career trends in the AI era" and receive an 8-12 page Chinese-first editorial deck with gradient headlines and soft-colored card grids. ## Quick Start Use the html-ppt-xhs-white-editorial template to create a white-background magazine-style deck about my topic, with rainbow top bar, large gradient titles, and macaron soft cards across 8-12 slides.

Frequently Asked Questions about html-ppt-xhs-white-editorial

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an HTML slide deck for Xiaohongshu posts?

Copy the template's index.html and style.css into your project, keep the tpl-xhs-white-editorial body class, and replace the demo slide content with your own. The deck uses scoped structural classes for covers, card grids, steps, and charts that the CSS recognizes.

How to make a magazine-style HTML presentation with gradient titles?

Use the xw-title class for 80-110px display headlines and wrap key phrases in the xw-grad span to apply the purple-to-pink gradient text effect. The template also provides xw-title-md for smaller 60px section titles.

Why is my copied HTML deck not navigating between slides?

The upstream template links shared CSS and runtime.js via ../../../assets/ paths that break outside the skill tree. Copy fonts.css, base.css, animations.css, and runtime.js into a project-local assets folder and rewrite the link and script tags, or inline them directly.

Can I add speaker notes to an HTML slide deck?

Yes, place speaker notes inside an aside or div element with the notes class on each slide. The CSS hides notes from the audience view, and the runtime displays them in presenter mode without showing them on the slide.

Can I change the color theme of the white editorial deck?

The default tokens work as-is, but you can swap in any of the 36 themes from the shared assets/themes folder via the theme-link stylesheet tag. The runtime lets you cycle themes with the T key.