Stats
Actions
Tags
From apple-style-ppt
Generate a complete, self-contained web slide presentation (deck) using ONLY vanilla HTML, CSS, and JavaScript — no Reveal.js, impress.js, PowerPoint, or any library or build step. Produces an Apple-Keynote-style deck as a single index.html with smooth transitions, keyboard/swipe/wheel navigation, URL #slide-N deep links, progress bar, dot indicators, and an optional presenter-notes window. Use this skill whenever the user wants to create slides, a slide deck, a presentation, a pitch/talk/lecture deck, 발표자료, 슬라이드, or 프레젠테이션 as a web page — including when they say things like "make me a deck about X", "turn these notes into slides", "build an HTML presentation", or "keynote-style slides in the browser", even if they don't explicitly say "vanilla". Prefer this over hand-rolling slide markup from scratch or reaching for a slide library.
How this skill is triggered — by the user, by Claude, or both
Slash command
/apple-style-ppt:web-presentationThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate a polished, Apple-Keynote-style slide deck that runs from a single HTML
Generate a polished, Apple-Keynote-style slide deck that runs from a single HTML
file with zero dependencies. The visual engine (layout, transitions, navigation,
presenter sync) is already built and bundled — your job is to fill it with the
user's content. Don't reinvent the engine; treat slide-making as authoring
<section class="slide"> blocks.
A presentation engine is fiddly to get right: 16:9 letterboxing, GPU-smooth
transitions, keyboard + swipe + wheel input all funneling through one place,
deep-linkable URLs, a synced presenter window. Rewriting that each time wastes
effort and introduces bugs. So the hard part lives in assets/template.html as a
constant, and content is the only variable. This keeps every deck consistent and
lets you focus entirely on what the slides say.
Understand the deck. From the user's request, determine: the topic, roughly how many slides, the language, and whether they need the presenter-notes window. If they gave you source material (notes, an outline, a doc), use it as the content. If the brief is thin, draft a sensible outline (title → agenda → content slides → closing) rather than blocking on questions — it's faster to react to a real draft.
Read the component catalog. Read references/components.md for the available
background themes, text classes, reveal animation, and copy-paste layout
patterns (title, bullets, quote, stats, code, closing). This is what you compose
slides from.
Copy the template, don't rebuild it. Copy assets/template.html to the
user's target path as index.html. If they want presenter notes, also copy
assets/speaker.html alongside it (the engine looks for speaker.html next to
index.html when S is pressed).
Replace the slides region. In the copied index.html, replace everything
between the <!-- SLIDES START --> and <!-- SLIDES END --> markers with your
own <section class="slide"> blocks. Leave the <head>/<style> and the
<script> engine at the bottom untouched — they adapt to any slide count
automatically (dots, counter, progress bar, and presenter sync all self-configure).
Author good slides. One idea per slide; headings carry the message; 3–6
bullets max; push detail into <aside class="notes">. Alternate data-bg
themes so adjacent slides feel distinct. Match the deck language to the request.
See references/components.md for tips and the exact class names.
Show it. Serve the folder over a local HTTP server and open it — the
presenter window's cross-window sync needs same-origin, so file:// is not
enough if notes are included:
cd <deck-folder> && python3 -m http.server 8000
# then open http://localhost:8000/index.html
Tell the user the URL and the controls: arrows/Space/PageDn to move (one page
per press), S for presenter notes, F for fullscreen, dots to jump, and
#slide-N in the URL for deep links.
index.html — the complete deck, self-contained, openable in any modern browser.speaker.html — (only if presenter notes are wanted) the presenter window.Both are pure HTML/CSS/JS. Never add libraries, frameworks, CDNs, or build tooling — the entire point is a dependency-free file the user can email, host anywhere, or open locally.
To add, remove, or reorder slides, change only the <section> blocks between the
markers — the engine needs no edits. To restyle globally (colors, fonts), adjust
the CSS custom properties in :root at the top of the file.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub jeonguk29/my-marketplace --plugin apple-style-ppt