skills.rest
Keimoshi
KeimoshiCOMMUNITY
Explore all skills by this author →
GitHub

html-ppt-xhs-pastel-card

Generates pastel macaron-styled HTML slide decks for lifestyle and slow-living content.

Updated May 20, 2026
Search Tags:#presentation deck#lifestyle content#html slides#slide generator#css design#pastel template
One-click install
npx skills add https://github.com/Keimoshi/Silverloft --skill html-ppt-xhs-pastel-card-keimoshi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: html-ppt-xhs-pastel-card
Source: https://github.com/Keimoshi/Silverloft/tree/main/open-design-port/skills/html-ppt-xhs-pastel-card
Command: npx skills add https://github.com/Keimoshi/Silverloft --skill html-ppt-xhs-pastel-card-keimoshi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Creating visually cohesive HTML presentations with a soft pastel aesthetic normally requires manual CSS design work; this Skill provides a ready-made full-deck template with a complete macaron color system, typography, and slide layouts. ## Core Features & Use Cases - Prebuilt pastel deck template: Cream background with soft gradient blobs, Playfair Display italic serif headlines, and 28px rounded macaron cards in peach, mint, sky, lilac, lemon, and rose. - Complete slide system: Includes cover, section, 2x2 card grid, quote, code block, SVG donut chart, CTA, and thanks layouts with chip topbars and page indicators. - Speaker notes and animations: Supports hidden presenter notes via <aside class="notes"> and the shared html-ppt keyboard runtime with 36 swappable themes. - Use Case: A content creator making a Xiaohongshu-style slow-living post about work-life balance can generate an 8-slide deck with numbered pastel cards and a time-savings donut chart in one pass. ## Quick Start Use the html-ppt-xhs-pastel-card template to create a slow-living themed deck with a cream background, macaron rounded cards, and a donut chart about my topic and key points.

Frequently Asked Questions about html-ppt-xhs-pastel-card

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

FAQPage Schema
How do I create a pastel-themed HTML slide deck?▼

Copy the index.html and style.css from the xhs-pastel-card template folder into your project, keeping the .tpl-xhs-pastel-card body class. Then replace the demo content while preserving the structural CSS classes the template styles target.

How to make HTML presentation slides with speaker notes?▼

Place speaker notes inside <aside class="notes"> or <div class="notes"> elements within each slide. The runtime hides them from the audience view and shows them in presenter mode, so never put presenter-only text as visible slide content.

Why do my copied HTML slides show no navigation or styling?▼

The upstream template links shared CSS and runtime.js via ../../../assets/ relative paths that break outside the skill tree. Either copy the four asset files into a project-local assets folder and rewrite the paths, or inline their contents directly into index.html.

Can I change the color theme of the pastel card deck?▼

Yes, the deck supports 36 themes from the html-ppt assets/themes folder. Link one via the theme-link element and press T to cycle through themes, while the default pastel tokens work without any changes.

What content types fit the pastel macaron slide template?▼

The template suits lifestyle, personal growth, slow living, and emotional wellness topics where a soft, magazine-like, non-technical feel is desired. It includes layouts for covers, numbered card grids, quotes, code prompts, donut charts, and calls to action.

Related Skills

Explore More Design & Creative Skills→
SuperagentsysSuperagentsys
650

ppt-generator

Generates editable PPTX files with slide outlines, speaker notes, and formatted content from user-provided topics, audiences, languages, and slide counts.

Community
Advanced
double-coding-labdouble-coding-lab
48

html-ppt

Generate static HTML slide decks from themes, layouts, and animation templates.

Official
Advanced
addisonkaddisonk
1

generating-images-with-fal

Generate images, icons, and visual assets using fal.ai models.

Community
Intermediate
Maccio-huangMaccio-huang

html-ppt-xhs-pastel-card

Generate slow living lifestyle decks with pastel colors and serif fonts.

Community
Intermediate