Skill

Magazine Web PPT (guizang-ppt-skill)

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.

Html

Css

Javascript

frontend

design

Install

npx claudepluginhub joshuarweaver/cascade-ai-ml-agents-misc-1 --plugin aradotso-trending-skills-37

Tool Access

This skill uses the workspace's default tool permissions.

Preview

```markdown

SKILL.md

Similar Skills

cache-components

Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.

cache-components

139.2k

mcp-builder

9 files

Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).

anthropics-skills-13

124.2k

canvas-design

20 files

Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.

anthropics-skills-13

124.2k

Stats

Stars36

Forks8

Last CommitApr 24, 2026

Actions

View Source View Plugin View on GitHub View README

Repository Structure

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)

6-Step Workflow

Step 1: Requirements Clarification (6 Questions)

Ask the user:

Audience — Who's in the room? (investors, peers, public)
Duration — How many minutes? (determines slide count ~1 slide/min)
Content — Raw materials: outline, doc, bullet points?
Images — URLs provided or use placeholder patterns?
Theme — Which of the 5 presets? (default: Ink Classic)
Hard constraints — Max slides, forbidden content, language?

Step 2: Copy Template

cp ~/.claude/skills/magazine-web-ppt/assets/template.html ./my-presentation.html

Then edit the top of the file:

Change <title>Your Title</title>
Replace the :root{} theme variables (6 lines only)

Step 3: Fill Content from Layouts

Read references/layouts.md for the 10 skeleton templates. Copy paste and fill.

Pre-fill checklist:

Run class name pre-check: every class used in layout HTML must exist in template.html CSS
Plan hero/non-hero rhythm before writing (hero pages ~every 3-4 slides)

Step 4: Self-Check

Open references/checklist.md and verify all P0 items pass before delivering.

Step 5: Preview

open my-presentation.html
# or
python3 -m http.server 8080
# then visit http://localhost:8080/my-presentation.html

Step 6: Iterate

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>

Theme Presets

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;
}

The 10 Layout Templates

Paste these from references/layouts.md — shown here with key structure:

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">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>

2. Chapter Curtain (章节幕封)

<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>

3. Data Headline (数据大字报)

<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>

4. Left Text Right Image (左文右图)

<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>

5. Image Grid (图片网格)

<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>

6. Pipeline / Process (流程图)

<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>

7. Suspense Question (悬念问题)

<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>

8. Big Quote (大引用)

<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>

9. Before / After Comparison

<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>

10. Mixed Text + Image (图文混排)

<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>

Core CSS Classes Reference

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 */

Navigation Controls

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

Image Handling Rules

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>

Quality Checklist (P0 — Must Pass)

From references/checklist.md:

Common Errors & Fixes

Slide Content Overflows

<!-- 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 -->

WebGL Background Not Showing

<!-- 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>

Classes Not Styled

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

Images Cropping Wrong

<!-- Fix portrait image in landscape slide -->
<img src="tall.jpg" style="object-fit:cover; object-position: top; 
     width:100%; height:100%;">

Dots Not Updating

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">

Design Principles

Restraint over flashiness — WebGL only on hero slides
Structure over decoration — hierarchy via type scale + grid whitespace, not shadows/cards
Images are first-class — crop bottom only, keep top/sides compositionally whole
Rhythm via hero slides — alternate hero/non-hero, ~every 3-4 slides
Theme lock — 5 presets only, no custom hex, aesthetic protection > freedom

Slide Count Guidelines

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.

Full Minimal Example

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>

Troubleshooting

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

Resources

Full template: ~/.claude/skills/magazine-web-ppt/assets/template.html
All 10 layouts: ~/.claude/skills/magazine-web-ppt/references/layouts.md
Component library: ~/.claude/skills/magazine-web-ppt/references/components.md
Theme presets: ~/.claude/skills/magazine-web-ppt/references/themes.md
Quality checklist: ~/.claude/skills/magazine-web-ppt/references/checklist.md
GitHub: https://github.com/op7418/guizang-ppt-skill
Creator: @op7418