Stats
Actions
Tags
'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)
From decksmith
Create presentation slide decks and report pages as single self-contained HTML files with in-browser copy editing (served by a tiny local save server) and a built-in present mode with region zoom. Use when the user asks for a slide deck, presentation, pitch deck, or a designed HTML report they will present or share.
How this skill is triggered — by the user, by Claude, or both
Slash command
/decksmith:decksThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate decks/reports as one portable HTML file. Colleagues edit wording in the
Generate decks/reports as one portable HTML file. Colleagues edit wording in the browser and save without Claude; present mode (with magnify) is baked in.
Scaffold. From this skill's base directory run:
node scripts/new-deck.mjs deck <project-path>/<name>.html --title "<Title>"
Use report instead of deck for a long-form scrolling report. This inlines
the present runtime and copies serve.mjs + edit.js next to the output.
Design the content. Invoke the frontend-design skill (and impeccable, if
installed) for the visual identity, then rewrite the scaffold's <style> and
slides. Hard rules:
<section class="slide"> per slide (or per report section). Keep the
slide class — present mode depends on it.<style>/<script> block
in <head>) or anything carrying a data-decksmith-* attribute.class="zoom-target" to dense figures/charts so magnify snaps to them.</script> inside inline scripts.Serve it. Run as a background task (do not block the conversation):
node <project-path>/serve.mjs <project-path>/<name>.html
Report the printed http://localhost:<port>/ URL to the user. The server
keeps running after this conversation; the same command restarts it later.
Tell the user how to drive it (include this in your handoff):
.bak) and the page rerenders from disk.P (or the ▶ button) to present: arrows/space/click navigate,
Z+click or double-click magnifies a region, drag pans, Esc backs out.Serve it (step 3) and hand the URL to the user. If you also edit the file yourself, re-read it first — the user may have saved changes from the browser — and the open page will auto-reload when you write it.
Guides collaborative design exploration before implementation: explores context, asks clarifying questions, proposes approaches, and writes a design doc for user approval.
Creates structured, bite-sized implementation plans from specs or requirements before writing code. Useful for breaking down multi-step tasks into testable steps with file structure and task boundaries.
Synthesizes the current conversation into a structured spec (PRD) and publishes it to the project issue tracker with a ready-for-agent label, without interviewing the user.
npx claudepluginhub ashivalagar/decksmith --plugin decksmith