From aradotso-trending-skills-37
Generates single-file HTML magazine-style horizontal swipe PPT presentations with WebGL fluid backgrounds, editorial typography, and 10 layout templates. Ideal for quick browser-openable slide decks.
npx claudepluginhub joshuarweaver/cascade-ai-ml-agents-misc-1 --plugin aradotso-trending-skills-37This skill uses the workspace's default tool permissions.
```markdown
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
---
name: guizang-ppt-skill
description: Generate single-file HTML magazine-style horizontal swipe PPT presentations with WebGL fluid backgrounds, editorial typography, and 10 layout templates
triggers:
- "make a magazine style PPT"
- "generate a horizontal swipe presentation"
- "create an editorial magazine slide deck"
- "帮我做一份杂志风 PPT"
- "生成电子杂志风格演示文稿"
- "electronic ink style presentation slides"
- "create a single file HTML presentation"
- "build a web PPT with WebGL background"
---
# Magazine Web PPT (guizang-ppt-skill)
> Skill by [ara.so](https://ara.so) — Daily 2026 Skills collection.
A Claude Code / Agent skill for generating **single-file HTML horizontal-swipe PPT** presentations with an "electronic magazine × electronic ink" aesthetic — like *Monocle* magazine with code.
## What This Skill Does
- Generates a **single `.html` file** — no build step, no server, open directly in browser
- **WebGL fluid/dispersion background** visible on hero pages, restrained on content pages
- **Horizontal left-right pagination**: keyboard ← → / scroll wheel / touch swipe / bottom dots / ESC index
- **5 color theme presets**: Ink Classic / Indigo Porcelain / Forest Ink / Kraft Paper / Dune
- **10 page layout templates**: Cover, Chapter, Data Headline, Left-Text-Right-Image, Image Grid, Pipeline, Question, Big Quote, Before/After, Mixed Layout
- **Triple font hierarchy**: serif headlines + sans-serif body + monospace metadata
## Installation
### Method 1: Ask Your AI Agent
帮我安装 guizang-ppt-skill 这个 Claude Code skill。请按下面步骤做:
### Method 2: Manual
```bash
git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/magazine-web-ppt
ls ~/.claude/skills/magazine-web-ppt/
# Should see: SKILL.md assets/ references/
magazine-web-ppt/
├── SKILL.md ← Skill main file: workflow, principles, common errors
├── README.md
├── assets/
│ └── template.html ← Complete runnable seed HTML (CSS + WebGL + pagination JS)
└── references/
├── components.md ← Component manual (fonts, colors, grid, icons, callout, stat, pipeline)
├── layouts.md ← 10 page layout skeletons (paste-ready)
├── themes.md ← 5 color theme presets (choose, don't customize)
└── checklist.md ← Quality checklist (P0 / P1 / P2 / P3 graded)
Ask the user:
cp ~/.claude/skills/magazine-web-ppt/assets/template.html ./my-presentation.html
Then edit the top of the file:
<title>Your Title</title>:root{} theme variables (6 lines only)Read references/layouts.md for the 10 skeleton templates. Copy paste and fill.
Pre-fill checklist:
template.html CSSOpen references/checklist.md and verify all P0 items pass before delivering.
open my-presentation.html
# or
python3 -m http.server 8080
# then visit http://localhost:8080/my-presentation.html
Use inline styles for per-slide tweaks:
<!-- Adjust font size -->
<h1 style="font-size: 4.5rem;">Bigger Title</h1>
<!-- Adjust slide height constraint -->
<div class="slide" style="--slide-padding: 3rem;">
<!-- Tighten line height -->
<p style="line-height: 1.4;">Dense paragraph</p>
Never use custom hex values. Only select from these 5 presets in references/themes.md.
| Theme | CSS Variables Snippet | Best For |
|---|---|---|
| 🖋 Ink Classic | --bg: #F5F2ED; --fg: #1A1A1A; --accent: #2C2C2C | Default, business, launches |
| 🌊 Indigo Porcelain | --bg: #EEF2F7; --fg: #1B2A4A; --accent: #2D5BE3 | Tech, AI, research |
| 🌿 Forest Ink | --bg: #F0F4F0; --fg: #1A2E1A; --accent: #2D6A2D | Nature, sustainability, culture |
| 🍂 Kraft Paper | --bg: #F4EDE0; --fg: #2E1F0E; --accent: #8B4513 | Retro, humanities, indie |
| 🌙 Dune | --bg: #F5F0E8; --fg: #2A1F0A; --accent: #C4860A | Art, design, gallery |
To switch themes, replace only the :root {} block at the top of template.html:
:root {
--bg: #EEF2F7;
--fg: #1B2A4A;
--accent: #2D5BE3;
--accent-light: #E8EDFB;
--muted: #6B7A99;
--border: #C9D3E8;
}
Paste these from references/layouts.md — shown here with key structure:
<section class="slide hero" data-slide="1">
<canvas class="webgl-bg"></canvas>
<div class="slide-content cover-layout">
<div class="eyebrow mono">VOL.01 · 2026</div>
<h1 class="display-title">Your Big<br>Main Title</h1>
<p class="subtitle">Subtitle or tagline goes here</p>
<div class="meta-row">
<span class="mono">SPEAKER NAME</span>
<span class="mono">EVENT · DATE</span>
</div>
</div>
</section>
<section class="slide hero chapter" data-slide="2">
<div class="chapter-number mono">02</div>
<div class="chapter-content">
<h2 class="chapter-title">Chapter Title</h2>
<p class="chapter-sub">Brief chapter description</p>
</div>
</section>
<section class="slide data-hero" data-slide="3">
<div class="slide-content">
<div class="stat-block">
<span class="stat-number display-title">73%</span>
<span class="stat-label">of something important</span>
</div>
<p class="stat-context">Supporting context sentence explaining the data point above.</p>
</div>
</section>
<section class="slide split-layout" data-slide="4">
<div class="split-left">
<div class="eyebrow mono">SECTION LABEL</div>
<h2>Section Heading</h2>
<p>Body copy goes here. Keep it to 3-4 lines maximum for readability at presentation distance.</p>
<ul class="bullet-list">
<li>Key point one</li>
<li>Key point two</li>
<li>Key point three</li>
</ul>
</div>
<div class="split-right">
<img src="https://example.com/image.jpg" alt="Description" class="slide-image">
</div>
</section>
<section class="slide grid-layout" data-slide="5">
<div class="grid-header">
<h2>Grid Section Title</h2>
</div>
<div class="image-grid grid-2x2">
<figure class="grid-item">
<img src="img1.jpg" alt="Item 1">
<figcaption class="mono">CAPTION ONE</figcaption>
</figure>
<figure class="grid-item">
<img src="img2.jpg" alt="Item 2">
<figcaption class="mono">CAPTION TWO</figcaption>
</figure>
<figure class="grid-item">
<img src="img3.jpg" alt="Item 3">
<figcaption class="mono">CAPTION THREE</figcaption>
</figure>
<figure class="grid-item">
<img src="img4.jpg" alt="Item 4">
<figcaption class="mono">CAPTION FOUR</figcaption>
</figure>
</div>
</section>
<section class="slide pipeline-layout" data-slide="6">
<h2>Process Title</h2>
<div class="pipeline">
<div class="pipeline-step">
<div class="step-number mono">01</div>
<div class="step-content">
<h3>Step One</h3>
<p>Brief description</p>
</div>
</div>
<div class="pipeline-arrow">→</div>
<div class="pipeline-step">
<div class="step-number mono">02</div>
<div class="step-content">
<h3>Step Two</h3>
<p>Brief description</p>
</div>
</div>
<div class="pipeline-arrow">→</div>
<div class="pipeline-step">
<div class="step-number mono">03</div>
<div class="step-content">
<h3>Step Three</h3>
<p>Brief description</p>
</div>
</div>
</div>
</section>
<section class="slide hero question-slide" data-slide="7">
<div class="slide-content centered">
<div class="question-mark mono">?</div>
<h2 class="question-text">What if everything<br>you knew was wrong?</h2>
<p class="question-sub mono">We're about to find out.</p>
</div>
</section>
<section class="slide quote-slide" data-slide="8">
<div class="slide-content">
<blockquote class="big-quote">
<p>"The best way to predict the future is to invent it."</p>
<footer class="quote-attribution mono">— ALAN KAY · 1971</footer>
</blockquote>
</div>
</section>
<section class="slide compare-layout" data-slide="9">
<h2>Before vs After</h2>
<div class="compare-grid">
<div class="compare-panel before">
<div class="panel-label mono">BEFORE</div>
<ul class="compare-list negative">
<li>Pain point one</li>
<li>Pain point two</li>
<li>Pain point three</li>
</ul>
</div>
<div class="compare-divider"></div>
<div class="compare-panel after">
<div class="panel-label mono accent">AFTER</div>
<ul class="compare-list positive">
<li>Improvement one</li>
<li>Improvement two</li>
<li>Improvement three</li>
</ul>
</div>
</div>
</section>
<section class="slide mixed-layout" data-slide="10">
<div class="mixed-header">
<h2>Mixed Layout Title</h2>
<p class="lead">Opening paragraph that frames the content below.</p>
</div>
<div class="mixed-body">
<img src="wide-image.jpg" alt="Main visual" class="mixed-image">
<div class="mixed-caption">
<p>Caption or supplementary text explaining the image above.</p>
<span class="mono">SOURCE · 2026</span>
</div>
</div>
</section>
From references/components.md:
/* Typography */
.display-title /* Serif, hero-scale (5-8rem) headline */
.mono /* Monospace, metadata/labels/numbers */
.eyebrow /* Small mono label above heading */
.lead /* Large sans-serif intro paragraph */
.subtitle /* Secondary heading text */
/* Layout */
.slide /* Base slide container (100vw × 100vh) */
.slide.hero /* Hero variant — WebGL bg visible */
.slide-content /* Inner content wrapper with padding */
.split-layout /* Two-column 50/50 or 40/60 */
.centered /* Flex center both axes */
/* Components */
.stat-number /* Giant number display */
.stat-label /* Label under stat number */
.big-quote /* Blockquote with editorial styling */
.callout /* Highlighted aside box */
.pipeline /* Horizontal step process */
.bullet-list /* Styled unordered list */
.image-grid /* CSS grid image container */
.compare-grid /* Two-panel before/after */
/* Navigation (auto-generated) */
.slide-dots /* Bottom pagination dots */
.slide-index /* ESC overlay with all slides */
Built into template.html — no configuration needed:
| Input | Action |
|---|---|
→ / Space | Next slide |
← | Previous slide |
| Mouse wheel down | Next slide |
| Mouse wheel up | Previous slide |
| Touch swipe left | Next slide |
| Touch swipe right | Previous slide |
ESC | Toggle slide index overlay |
| Click dot | Jump to slide |
Critical: Images crop from bottom only — top and sides must be compositionally complete.
<!-- Correct: object-fit cover with top anchor -->
<img src="photo.jpg" class="slide-image"
style="object-fit: cover; object-position: top center;">
<!-- For portrait images in landscape slides -->
<img src="portrait.jpg" class="slide-image"
style="object-fit: cover; object-position: center top; height: 100%;">
If no images are provided, use structured placeholder patterns:
<!-- Placeholder with label -->
<div class="img-placeholder" style="background: var(--accent-light);
aspect-ratio: 16/9; display:flex; align-items:center;
justify-content:center;">
<span class="mono" style="color: var(--muted);">IMAGE · 16:9</span>
</div>
From references/checklist.md:
template.html — no undefined classes<img> tags have alt attributes.hero slides<title> updated from template defaultfile:// protocol (no server required)<!-- Problem: too much text in one slide -->
<!-- Fix: reduce content OR add font-size override -->
<div class="slide-content" style="font-size: 0.9em;">
<!-- Or split into two slides -->
<!-- Canvas must be direct child of .hero slide -->
<section class="slide hero">
<canvas class="webgl-bg"></canvas> <!-- ← must be here -->
<div class="slide-content">...</div>
</section>
ERROR: Using .grid-3col but template only has .grid-2x2 and .grid-3x1
FIX: Check references/components.md for available classes, or add inline styles
<!-- Fix portrait image in landscape slide -->
<img src="tall.jpg" style="object-fit:cover; object-position: top;
width:100%; height:100%;">
The pagination dots are auto-generated from [data-slide] attributes. Ensure every <section class="slide"> has data-slide="N" with sequential numbers starting from 1.
<section class="slide hero" data-slide="1">
<section class="slide" data-slide="2">
<section class="slide" data-slide="3">
| Talk Length | Suggested Slides |
|---|---|
| 5 min | 5-7 slides |
| 10 min | 10-12 slides |
| 20 min | 18-22 slides |
| 30 min | 25-30 slides |
Rule of thumb: 1 slide per minute, with hero/chapter slides as breathing room.
Complete working 3-slide presentation:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Magazine PPT</title>
<style>
/* Copy full CSS from assets/template.html */
:root {
--bg: #F5F2ED;
--fg: #1A1A1A;
--accent: #2C2C2C;
--accent-light: #ECEAE6;
--muted: #888580;
--border: #D8D4CE;
}
/* ... rest of template CSS ... */
</style>
</head>
<body>
<!-- Slide 1: Hero Cover -->
<section class="slide hero" data-slide="1">
<canvas class="webgl-bg"></canvas>
<div class="slide-content cover-layout">
<div class="eyebrow mono">VOL.01 · 2026</div>
<h1 class="display-title">The Future<br>of Work</h1>
<p class="subtitle">How AI is folding organizations</p>
<div class="meta-row">
<span class="mono">GUIZANG</span>
<span class="mono">SHANGHAI · APR 2026</span>
</div>
</div>
</section>
<!-- Slide 2: Data Headline -->
<section class="slide data-hero" data-slide="2">
<div class="slide-content">
<div class="stat-block">
<span class="stat-number display-title">1人</span>
<span class="stat-label">可以做到过去10人的工作</span>
</div>
<p class="stat-context">AI agent 的出现让个体效能产生了指数级变化。</p>
</div>
</section>
<!-- Slide 3: Big Quote -->
<section class="slide quote-slide" data-slide="3">
<div class="slide-content">
<blockquote class="big-quote">
<p>"The company of one is the company of the future."</p>
<footer class="quote-attribution mono">— A NEW WORKING METHOD · 2026</footer>
</blockquote>
</div>
</section>
<!-- Navigation dots auto-generated by JS -->
<div class="slide-dots"></div>
<script>
/* Copy full JS from assets/template.html */
</script>
</body>
</html>
| Problem | Solution |
|---|---|
| Blank white page | Check browser console; likely a JS error in template |
| Fonts look wrong | Ensure Google Fonts link in <head> from template |
| Can't advance slides | Verify data-slide attributes are sequential from 1 |
| WebGL flickering | Only one <canvas class="webgl-bg"> per hero slide |
| File too large | Compress images before embedding as data URIs |
| Slide content cut off | Reduce font size or split slide; never scroll within slide |
~/.claude/skills/magazine-web-ppt/assets/template.html~/.claude/skills/magazine-web-ppt/references/layouts.md~/.claude/skills/magazine-web-ppt/references/components.md~/.claude/skills/magazine-web-ppt/references/themes.md~/.claude/skills/magazine-web-ppt/references/checklist.md