skills.rest
DawnMoon1542
DawnMoon1542COMMUNITY
Explore all skills by this author →
GitHub

guizang-ppt-skill

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

7|Updated May 13, 2026
Search Tags:#claude code#presentation#webgl#deck generation#cover image#swiss style#html slides
One-click install
npx skills add https://github.com/DawnMoon1542/agents-skills --skill guizang-ppt-skill-dawnmoon1542
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: guizang-ppt-skill
Source: https://github.com/DawnMoon1542/agents-skills/tree/main/guizang-ppt-skill
Command: npx skills add https://github.com/DawnMoon1542/agents-skills --skill guizang-ppt-skill-dawnmoon1542

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Creating visually consistent presentation decks with AI agents often produces broken layouts, mismatched fonts, and overflowing images. This Skill provides locked templates, curated themes, and validation scripts so agents generate polished single-file HTML decks that open directly in a browser. ## Core Features & Use Cases - Two visual systems: Style A editorial magazine (serif type, WebGL fluid backgrounds, 10 layouts) and Style B Swiss International Typographic Style (16-column grid, 22 locked layouts, 4 anchor-color themes). - Image and cover workflows: Generate deck visuals, screenshot redesigns, and social covers (21:9 WeChat, 1:1 share cards, 3:4 Xiaohongshu) matched to template image slots. - Quality gates: A Swiss layout validator script plus a tiered P0-P3 checklist catch layout drift, unsafe image placement, and typography errors. - Use Case: Paste a long article into Claude Code or Codex and ask for a 7-slide Swiss-style deck with 2-3 generated visuals; the agent picks layouts, fills content, validates, and outputs one openable index.html. ## Quick Start Ask your agent to install the skill by cloning the repository into ~/.claude/skills/guizang-ppt-skill, then say "Create a Swiss-style deck from this article, around 7 slides, with 2-3 generated visuals."

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 Claude Code to make a magazine-style or Swiss-style deck from your article. The agent copies the matching template, fills locked layout skeletons, and outputs a single index.html you open in a browser.

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

Style A is an editorial magazine style with serif headlines, WebGL fluid backgrounds, and 10 flexible layouts for narrative talks. Style B is Swiss International Typographic Style with a 16-column grid, one accent color, and 22 locked layouts for factual, data-driven content.

Can I use custom colors or fonts in the generated slides?▼

No. The skill only allows curated theme presets: 5 electronic-ink themes for Style A and 4 anchor-color themes for Style B. Custom hex values are rejected because arbitrary colors break the visual system.

Does the HTML deck support keyboard navigation and offline use?▼

Yes. Decks support arrow keys, scroll wheel, touch swipe, bottom dots, ESC overview, and a B key low-power static mode. A local copy of Motion One provides offline animation fallback, and no server or build step is required.

Why does my Swiss-style deck fail validation?▼

The validator rejects unregistered layouts, missing data-layout attributes, SVG text, centered body titles, and images outside template slots. Run node scripts/validate-swiss-deck.mjs on your index.html and fix each reported rule using the S01-S22 registered layouts.

When should I not use HTML decks instead of PowerPoint?▼

Avoid this approach for data-heavy tables, training courseware needing high information density, and decks requiring multi-user collaborative editing. The output is static single-file HTML best suited for talks, keynotes, and product launches.

Related Skills

Explore More Design & Creative Skills→
renatoasserenatoasse
2.0k

image-fetcher

Acquires visual assets from web search, Playwright screenshots, and user files into a reference folder with metadata.

Community
Intermediate
ssimhanssimhan
1

frontend-slides

Convert PowerPoint slides or outlines into self-contained HTML slide decks.

Community
Advanced
psd401psd401
2

image-gen

Generate images, infographics, and diagrams with Google's Nano Banana 2 model.

Official
Intermediate
so-ota-bizso-ota-biz

slide-deck-pptx-google-safe

Create .pptx slide decks optimized for Google Slides compatibility and collaboration.

Community
Advanced