Communitygithub.com

cclank/lanshu-html-ppt-templates

Create, rewrite, and customize presentations using 30 sets of Uncle Lanshu HTML presentation templates, supporting business reports, government/enterprise reports, roadshows, product launches, academic defenses, teaching courseware, data storytelling, and interactive presentations.

What is lanshu-html-ppt-templates?

This skill provides access to 30 professionally designed HTML presentation templates (Uncle Lanshu templates) for creating, modifying, and delivering interactive web-based slides. It supports a wide range of use cases including business reporting, government/enterprise briefings, investor roadshows, product launches, academic defenses, teaching materials, data-driven storytelling, and interactive demos. The skill includes a `scripts/deck.py` CLI tool for listing, creating, and inspecting presentations, as well as `scripts/embed_fonts.py` for optimized Chinese font embedding and `scripts/present.py` for presenting with a mobile remote control feature. Each template comes with a built-in presentation toolkit (shortcuts, overview, laser pointer, drawing annotations, live editing, and theme customization). Users can select templates based on content type and audience, then modify HTML directly while preserving slide deck core dependencies. The skill works entirely in HTML/CSS/JavaScript and outputs standalone HTML files that work in modern browsers, perfect for developers and presenters who need fully customizable, interactive presentations without PowerPoint.

Works with~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/cclank/lanshu-html-ppt-templates/tree/HEAD

Ask in your favorite AI

Open a new chat with this agent skill pre-loaded.

Documentation

Uncle Lanshu HTML Presentation Templates

Use the complete single-file templates from assets/templates/ to create ready-to-present HTML presentations. Online catalog: https://ppt.lanshuagent.com/; Author: https://x.com/LufzzLiz.

Choosing a Template

First read references/template-catalog.md, and select based on content, audience, and delivery format. Follow the style specified by the user; if not specified, choose based on the material and briefly explain. No additional confirmation needed for standard style selections.

  • Business reports, strategy, and information-dense content: 07-consulting, 01-swiss.
  • Fundraising roadshows, product and tech launches: 04-brutalism, 03-aurora, 17-terminal.
  • Branding, culture, curation, and lifestyle: 02-editorial, 08-oriental, 09-organic, 18-riso, 19-collage.
  • Data distributions and sequential narratives: 11-morph; adjustable business assumptions: 14-live-model; geographic and global networks: 20-globe.
  • Academic defenses and research presentations: 21-academic; teaching courseware and training: 23-chalkboard.
  • Product feature introduction and annual summaries: 22-bento; AI products and customer stories: 24-chat; annual parties and team retrospectives: 25-pixel.
  • Government, state-owned enterprise, and official briefings: 28-official; annual milestones and internal company newsletters: 26-newspaper.
  • Engineering reviews and hardware proposals: 27-blueprint; product roadmaps and strategic planning: 29-metro; user stories and brand stories: 30-comic.
  • When the user needs multi-page PDF, prefer templates marked with multi-page print styles in the catalog; actual print quality still needs to be verified.

Creating and Modifying

Paths in commands are relative to this skill directory; first locate the actual installation directory of the skill.

python3 scripts/deck.py list
python3 scripts/deck.py new 07-consulting --output /path/to/outputs/presentation.html --title "Presentation Title"
python3 scripts/deck.py source 07-consulting
python3 scripts/deck.py inspect /path/to/outputs/presentation.html

new copies the full template, preserving fonts and scripts, and refuses to overwrite existing files. --title only modifies the browser tab title; the page body content needs further editing. source only hides font Base64 in the terminal, preserving original line numbers; do not save its output as a presentation file.

Before executing, read references/authoring.md. Make targeted modifications to the selected HTML:

  1. Build a page-by-page narrative based on user materials, then replace titles, body text, chart data, headers/footers, and branding. Prefer reusing existing layouts; add or remove pages based on content.
  2. Preserve IDs, classes, data-* attributes, event bindings, and chart interfaces that the playback kernel depends on, as well as TOOLKIT (presentation toolkit) and PRESENTER (presenter window) code blocks; when changing the number of pages, synchronize page numbers, generation arrays, and note counts.
  3. Update the JSON array in script#deck-notes to ensure note order matches actual presentation order. Replace or remove sample company names, numbers, source text, and contact information from templates.
  4. Output a standalone HTML file. Use SVG/CSS for static graphics; keep existing Canvas for live graphics; new assets must be embedded or delivered alongside the presentation.

Template Chinese fonts are subset based on the original characters. New text will first fall back to system fonts. After editing text, run python3 scripts/embed_fonts.py <presentation file> with internet access to re-subset embedded fonts based on the characters actually used on each page; if offline, prefer the existing font stack and verify layout. Keep the original font license notice.

Interaction and Export Boundaries

  • Standard templates use .slide; infinite canvas, cinematic, spatial interface, terminal, and collage each have their own data structures, as detailed in the authoring guide.
  • For 14-live-model, modify model parameters, cash flows, and bound elements together; the presenter preview is a separate instance and by default does not sync temporary model parameter adjustments made on the main screen.
  • All 30 templates include a built-in presentation toolkit: ? for keyboard shortcuts panel, O for overview, page number plus Enter to jump, B/W for black/white screen, L for laser pointer, D for drawing annotations, and E to edit text in the browser, edit speaker notes, perform full text replacement, and adjust theme colors then save as a new file. Open with python3 scripts/present.py <presentation file> and press M to use a mobile phone to scan a QR code as a remote control on the same Wi-Fi.
  • 17-terminal is a web presentation with a terminal appearance; displayed commands are page content.
  • 12-generative may produce different visuals each time it runs; fix the seed when reproducible results are needed.
  • Currently provides HTML and browser-printed PDF for some templates; interactions and animations play in the browser. If an editable .pptx is needed, clearly state the format differences, then convert separately based on user choice.
  • Public deployment only upon user request. Modifying the domain in the configuration does not automatically acquire a new domain or publishing permissions.

Validation and Delivery

python3 scripts/deck.py validate /path/to/outputs/presentation.html

This command checks the notes JSON and inline JavaScript syntax; it requires Node.js on the local machine to complete JavaScript validation. It does not execute page scripts.

In an available browser, verify the first and last pages, key charts, longest body text, page transitions, fullscreen, speaker notes, and interactions; if PDF is required, check the actual print output. If a browser is not available, explain the static checks performed and any unverified parts.

Deliver the HTML with its available path, page count, and necessary playback instructions; you can hint to press ? to view all shortcuts, and use scripts/present.py to open for mobile remote control if needed. When the user requests PDF, also deliver a verified PDF and explain the actual behavior of interactive states and animations in the exported format.

Related Skills