guizang-ppt-skill

Generate single-file HTML horizontal-swipe presentation decks with editorial magazine or Swiss typographic layouts.

Updated Aug 15, 2026
One-click install
npx skills add https://github.com/qqlcx5/skills-hub --skill guizang-ppt-skill-qqlcx5
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: guizang-ppt-skill
Source: https://github.com/qqlcx5/skills-hub/tree/main/skills/guizang-ppt-skill
Command: npx skills add https://github.com/qqlcx5/skills-hub --skill guizang-ppt-skill-qqlcx5

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Creating visually polished presentation decks usually requires design tools and manual layout work. This Skill produces complete, browser-ready HTML slide decks with curated typography, grid systems, and image handling, so a talk or article can become a presentable deck without opening PowerPoint or Keynote. ## Core Features & Use Cases - Two locked visual systems: Style A (editorial magazine × electronic ink, serif headlines, WebGL fluid backgrounds) and Style B (Swiss International Typographic Style, 22 registered layouts S01-S22, single accent color, strict grid), each with fixed theme presets that disallow custom hex values. - Structured workflow: requirement clarification, template copy, layout selection from paste-ready skeletons, optional GPT-Image generated visuals matched to slot ratios, and a P0-P3 quality checklist plus a Swiss layout validator script. - Cover generation: produce 21:9 WeChat covers, 1:1 share cards, 3:4 Xiaohongshu covers, and 16:9 video thumbnails from the same visual rules. - Use Case: A speaker preparing a 30-minute industry talk asks the agent for a Swiss-style deck, picks the Klein Blue theme, and receives a single index.html with horizontal swipe navigation, keyboard/scroll/touch controls, ESC index view, and a low-power static mode toggled by pressing B. ## Quick Start Ask the agent to make a magazine-style or Swiss-style web deck from your talk outline or article, then open the generated index.html directly in a browser.

Frequently Asked Questions about guizang-ppt-skill

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

FAQPage Schema
How do I create an HTML presentation deck with Claude Code?

Install the skill into ~/.claude/skills/, then ask for a magazine-style or Swiss-style deck. The agent copies the matching template, fills slide layouts from paste-ready skeletons, and outputs a single index.html you open directly in a browser.

What is the difference between Style A and Style B decks?

Style A is an editorial magazine look with serif headlines, WebGL fluid backgrounds, and 10 layouts for narrative talks. Style B is Swiss International Typographic Style with sans-serif type, one accent color, a strict grid, and 22 locked layouts for data and product content.

Can I use custom theme colors in the generated slides?

No. The skill only allows choosing from preset themes: five electronic-ink themes for Style A and four Swiss anchor colors for Style B. Custom hex values are rejected to protect the curated visual quality.

Does the HTML deck need a server or build step?

No build or server is required. The output is a single self-contained HTML file with inline CSS, fonts via CDN, and local fallback for the Motion One animation library, so it opens directly in any browser.

Why does my Swiss deck fail the layout validator?

The validator rejects unregistered layouts, missing data-layout attributes, text inside SVG, and images outside designated slots. Body slides must use layouts S01-S22 from layouts-swiss.md, then rerun node scripts/validate-swiss-deck.mjs on the file.

When should I not use this HTML deck approach?

Avoid it for data-heavy tables, training courseware needing high information density, and decks requiring multi-user collaborative editing, since the output is a static single HTML file.