전문적인 HTML 프레젠테이션을 제작하는 세계적 수준의 에이전트 스킬 36개의 테마, 15개의 풀덱 템플릿, 36개의 페이지 레이아웃, 47개의 애니메이션 (27 CSS + 20 캔버스 FX), 그리고 진정한 발표자 모드 픽셀 단위로 완벽한 미리보기 + 스피커 스크립트 + 타이머 — 모두 순수한 잡음 HTML/CSS/JS, 빌드 단계는 없습니다.

저자: 루이스 <[email protected]> 면허: MIT 中文文档: README.zh-CN.md

한 가지 명령어로 36개의 테마× 20개의 캔버스 FX × 36개의 레이아웃 × 15개의 풀 덱 + 프레젠터 모드를 설치합니다. 위의 모든 미리보기는 실제 템플릿 파일의 라이브 iframe으로 덱 내부에서 렌더링된 것으로, 스크린샷이나 목업은 없습니다.

🎤 진행자 모드 (새로움!)

어느 데크에서든 S를 누르면 네 명의 전용 발표자 창을 열게 됩니다 드래그 가능, 크기 조절 가능한 자석 카드: 현재 슬라이드, 다음 슬라이드 미리보기, 스피커 스크립트(逐字稿)와 타이머. 두 개의 창이 동기화되어 있습니다. BroadcastChannel.

왜 미리보기가 픽셀 단위로 완벽한가요? 각 카드는 로 로딩됩니다 동일한 덱 HTML에 ?preview=N 쿼리 매개변수가 있습니다. 런타임은 이를 감지하고 크롬 없이 슬라이드 N만 렌더링하므로 미리보기는 동일한 CSS를 사용합니다, 테마, 글꼴, 뷰포트를 관객 시점으로 표시합니다. 색상과 레이아웃은

html-ppt — HTML PPT Studio

A world-class AgentSkill for producing professional HTML presentations in 36 themes, 15 full-deck templates, 36 page layouts, 47 animations (27 CSS + 20 canvas FX), and a true presenter mode with pixel-perfect previews + speaker script + timer — all pure static HTML/CSS/JS, no build step.

Author: lewis <[email protected]> License: MIT 中文文档: README.zh-CN.md

One command installs 36 themes × 20 canvas FX × 36 layouts × 15 full decks + presenter mode. Every preview above is a live iframe of a real template file rendering inside the deck — no screenshots, no mock-ups.

🎤 Presenter Mode (new!)

Press S on any deck to pop open a dedicated presenter window with four draggable, resizable magnetic cards: current slide, next slide preview, speaker script (逐字稿), and timer. Two windows stay in sync via BroadcastChannel.

Why previews are pixel-perfect: each card is an `` that loads the same deck HTML with a ?preview=N query param. The runtime detects this and renders only slide N with no chrome — so the preview uses the same CSS, theme, fonts and viewport as the audience view. Colors and layout are guaranteed identical.

Smooth (no-reload) navigation: on slide change, the presenter window sends postMessage({type:'preview-goto', idx:N}) to each iframe. The iframe just toggles .is-active between slides — no reload, no flicker.

Speaker script rules (3 golden):

1. Prompt signals, not lines to read — bold the keywords, separate transition sentences into their own paragraphs
2. 150–300 words per slide — that’s the ~2–3 min/page pace
3. Write it like you speak — conversational, not written prose

See references/presenter-mode.md for the full authoring guide, or copy the ready-made template at templates/full-decks/presenter-mode-reveal/ which ships with full 150-300 word speaker scripts on every slide.

Install (one command)

npx skills add https://github.com/lewislulu/html-ppt-skill

That registers the skill with your agent runtime. After install, any agent that supports AgentSkills can author presentations by asking things like:

“做一份 8 页的技术分享 slides，用 cyberpunk 主题” “turn this outline into a pitch deck” “做一个小红书图文，9 张，白底柔和风”

Offline / manual install

npx skills add needs network on the target machine. Three alternatives, in decreasing order of how much network they need.

1. Install from a local copy. Fetch the repo anywhere, move the folder over (git, zip, USB), then point the CLI at the directory instead of the URL:

git clone https://github.com/lewislulu/html-ppt-skill
npx skills add ./html-ppt-skill

npx still downloads the skills package itself once. For a fully air-gapped