Agent skill · creative production · aradotso
guizang-ppt-skill
guizang-ppt-skill — an agent skill for coding agents.
Why this skill is useful
Adds a complete executable HTML presentation generation workflow with WebGL backgrounds and multiple layout templates that the AI cannot generate on its own.
What it needs
Requires git installed locally. About 9k tokens when loaded. Last updated 2026-07-09. 70 stars on the source repository.
What this skill does
帮我安装 guizang-ppt-skill 这个 Claude Code skill。请按下面步骤做: 1. 确保 ~/.claude/skills/ 目录存在(不存在就创建) 2. 执行 git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/magazine-web-ppt 3. 验证: ls ~/.claude/skills/magazine-web-ppt/ 应该看到 SKILL.md、assets/、references/ 三项 4. 告诉我安装好了 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) bash cp ~/.claude/skills/magazine-web-ppt/assets/template.html ./my-presentation.html bash open my-presentation.html or python3 -m http.server 8080 then visit http://localhost:8080/my-presentation.html html <!-- 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> css :root { --bg: #EEF2F7; --fg: #1B2A4A; --accent: #2D5BE3; --accent-light: #E8EDFB; --muted: #6B7A99; --border: #C9D3E8; } html <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> html <section class="slide hero chapter" data-slide="2"> <div class="chapter-nu …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aradotso/guizang-ppt-skill