### Install Wiki Feedback Skill Source: https://github.com/lewislulu/html-ppt-skill/blob/main/templates/full-decks/knowledge-arch-blueprint/index.html Command to install the wiki-feedback skill globally using pnpm. ```bash pnpm i -g @lewis/wiki-feedback ``` -------------------------------- ### Graphify Usage Example Source: https://github.com/lewislulu/html-ppt-skill/blob/main/templates/full-decks/graphify-dark-graph/index.html A practical example of using the Graphify command to generate a knowledge graph from an Obsidian vault. ```bash $ graphify ~/obsidian-vault ``` -------------------------------- ### Install html-ppt AgentSkill Source: https://github.com/lewislulu/html-ppt-skill/blob/main/README.md Use this command to register the html-ppt skill with your agent runtime. This allows any compatible agent to author presentations using this skill. ```bash npx skills add https://github.com/lewislulu/html-ppt-skill ``` -------------------------------- ### Copy Presenter Mode Template Source: https://github.com/lewislulu/html-ppt-skill/blob/main/templates/full-decks/presenter-mode-reveal/index.html Copy the presenter mode reveal template to your project's examples directory. This sets up the basic structure for your presentation. ```bash cp -r templates/full-decks/presenter-mode-reveal examples/my-talk ``` -------------------------------- ### Graphify Configuration File Source: https://github.com/lewislulu/html-ppt-skill/blob/main/templates/full-decks/graphify-dark-graph/index.html Example configuration for Graphify, specifying paths to ingest, file inclusions, LLM model for extraction, schema, and rendering engine options. ```yaml # graphify.config.yaml ingest: paths: [~/notes, ~/code/docs] include: ["*.md", "*.pdf", "*.py"] extract: model: claude-opus-4-6 schema: [concept, person, event, relation] render: engine: d3-force audit: true # 每条边带 source span ``` -------------------------------- ### Graphify Installation Source: https://github.com/lewislulu/html-ppt-skill/blob/main/templates/full-decks/graphify-dark-graph/index.html Install Graphify globally using npm. This command makes the 'graphify' executable available in your terminal. ```bash $ npm i -g @lewis/graphify ``` -------------------------------- ### Scaffold a New Deck Source: https://github.com/lewislulu/html-ppt-skill/blob/main/README.md Use this script to create a new presentation deck from the base template. Ensure you have installed the project dependencies or cloned the repository first. ```bash # Scaffold a new deck from the base template ./scripts/new-deck.sh my-talk ``` -------------------------------- ### Counter Markup Example Source: https://github.com/lewislulu/html-ppt-skill/blob/main/references/animations.md Use this HTML structure with the 'counter' class and 'data-to' attribute for the counter-up animation. The initial content '0' will be replaced by the animated count. ```html 0 ``` -------------------------------- ### Presenter Mode HTML Structure Source: https://github.com/lewislulu/html-ppt-skill/blob/main/templates/full-decks/presenter-mode-reveal/index.html Example of an HTML slide structure including the main content and an aside tag for speaker notes. The speaker notes should be between 150-300 characters. ```html

Why PPT design is not enough

``` -------------------------------- ### Review Deck in Browser Source: https://github.com/lewislulu/html-ppt-skill/blob/main/references/authoring-guide.md Open the generated HTML file in your browser to preview the presentation. Use keyboard shortcuts to check overview, themes, and speaker notes. ```bash open examples/my-talk/index.html ``` -------------------------------- ### Scaffold a New Deck Source: https://github.com/lewislulu/html-ppt-skill/blob/main/SKILL.md Use this script to create a new presentation directory and open the initial HTML file. ```bash ./scripts/new-deck.sh my-talk open examples/my-talk/index.html ``` -------------------------------- ### Open Showcase Templates Source: https://github.com/lewislulu/html-ppt-skill/blob/main/README.md These commands open HTML files in your browser to showcase themes, layouts, and animations. They are useful for previewing available options. ```bash # Browse everything open templates/theme-showcase.html # all 36 themes (iframe-isolated) open templates/layout-showcase.html # all 31 layouts open templates/animation-showcase.html # all 47 animations open templates/full-decks-index.html # all 14 full decks ``` -------------------------------- ### Scaffold a New Deck Source: https://github.com/lewislulu/html-ppt-skill/blob/main/references/authoring-guide.md Use this script to create a new presentation directory and copy template files. It initializes the basic structure for your talk. ```bash ./scripts/new-deck.sh my-talk ``` -------------------------------- ### Theme Initialization and Rendering Source: https://github.com/lewislulu/html-ppt-skill/blob/main/templates/theme-showcase.html Initializes the theme showcase by iterating through the THEMES array. For each theme, it creates a section, adds a theme chrome overlay, and an iframe to display the demo content. ```javascript function demoHTML(themeName, label) { return `

Theme · ${themeName}

${label}

Same demo slide, different tokens. Background, type, accent, radius, shadow all come from assets/themes/${themeName}.css.

Palette · 调色盘

accent / accent-2 / accent-3 / text / surface-2

KPI

2.4K

上周月活 · weekly active

Code · 令牌

:root { --accent: /* theme */; --radius: /* theme */; }
#tokens primary #radius #shadow #type
`; } (function(){ const deck = document.querySelector('.deck'); THEMES.forEach((t,i)=>{ const s = document.createElement('section'); s.className = 'slide'; s.setAttribute('data-title', t[0]); const chrome = `
${String(i+1).padStart(2,'0')} · ${t[0]}${i+1}/${THEMES.length}
`; const iframe = document.createElement('iframe'); iframe.className = 'theme-frame'; iframe.setAttribute('lo ``` -------------------------------- ### Full-Deck Gallery Initialization Source: https://github.com/lewislulu/html-ppt-skill/blob/main/templates/full-decks-index.html Initializes the full-deck gallery by iterating through a list of templates and dynamically creating slide elements with iframe previews. Each slide displays template metadata and links to its respective `index.html` file. ```javascript const TPLS = [ ['xhs-white-editorial', '白底杂志风', 'extracted', 'xhs posts, editorial lifestyle'], ['graphify-dark-graph', '暗底知识图谱', 'extracted', 'AI/graph/data products'], ['knowledge-arch-blueprint', '奶油蓝图架构', 'extracted', 'architecture, systems thinking'], ['hermes-cyber-terminal', '暗终端 cyber', 'extracted', 'devtool, honest-review, agent demos'], ['obsidian-claude-gradient', 'GitHub 暗紫渐变', 'extracted', 'tool walkthroughs, LLM product'], ['testing-safety-alert', '红琥珀警示', 'extracted', 'security, incident review, AI safety'], ['xhs-pastel-card', '柔和马卡龙', 'extracted', 'lifestyle, soft emotional'], ['dir-key-nav-minimal', '方向键 8 色极简', 'extracted', 'keynote, one-idea-per-slide'], ['pitch-deck', 'Pitch Deck YC 风', 'scenario', 'fundraising, startup pitch'], ['product-launch', 'Product Launch', 'scenario', 'product announcement, launch keynote'], ['tech-sharing', 'Tech Sharing 技术分享','scenario','internal tech talk, conference talk'], ['weekly-report', 'Weekly Report 周报','scenario', 'status update, business review'], ['xhs-post', '小红书 图文 9 屏 3:4','scenario', 'xiaohongshu / ig carousel'], ['course-module', 'Course Module 教学模块','scenario','online course, workshop module'], ['presenter-mode-reveal', '🎤 Presenter Mode 演讲者模式','scenario','tech sharing, talk with 逐字稿, speaker view'] ]; const deck = document.querySelector('.deck'); TPLS.forEach((t,i)=>{ const s = document.createElement('section'); s.className = 'slide'; s.setAttribute('data-title',t[0]); s.innerHTML = ` ${i+1}/${TPLS.length+1}

${t[0]}

${t[1]} · ${t[2]} ${t[3]}

`; deck.appendChild(s); }); ``` -------------------------------- ### Graphify CLI Command Source: https://github.com/lewislulu/html-ppt-skill/blob/main/templates/full-decks/graphify-dark-graph/index.html Run Graphify to convert a notes folder into a knowledge graph. This command initiates the process of scanning, extracting, and rendering the graph. ```bash $ graphify ~/notes --out ./graph ``` -------------------------------- ### Include Runtime Script Source: https://github.com/lewislulu/html-ppt-skill/blob/main/SKILL.md Ensure the runtime script is included for keyboard navigation, presenter mode, and other interactive features. ```html ``` -------------------------------- ### Chart Initialization with Chart.js Source: https://github.com/lewislulu/html-ppt-skill/blob/main/examples/demo-deck/index.html Initializes a bar chart using Chart.js to visualize time spent on presentations before and after using html-ppt. It dynamically fetches theme colors for chart elements. ```javascript addEventListener('DOMContentLoaded',()=>{ const css=getComputedStyle(document.documentElement); const a1=css.getPropertyValue('--accent').trim(); const a2=css.getPropertyValue('--accent-2').trim(); const text2=css.getPropertyValue('--text-2').trim(); const border=css.getPropertyValue('--border').trim(); new Chart(document.getElementById('chart'),{ type:'bar', data:{ labels:['\u5199\u5185\u5bb9','\u6311\u7248\u5f0f','\u8c03\u6837\u5f0f','\u51fa\u56fe','\u52a8\u7684'], datasets:[ { label:'\u4f7f\u7528\u524d (\u5206\u949f)', data':[92,48,36,22,14], backgroundColor:a2, borderRadius:6 }, { label:'\u4f7f\u7528\u540e (\u5206\u949f)', data':[18,3,2,1,1], backgroundColor:a1, borderRadius:6 } ] }, options:{ plugins:{ legend:{ labels:{ color:text2 } } }, scales:{ x:{ ticks:{ color:text2 }, grid:{ color:border } }, y:{ ticks:{ color:text2 }, grid:{ color:border } } } } }); }); ``` -------------------------------- ### Render Presentation to PNG Source: https://github.com/lewislulu/html-ppt-skill/blob/main/SKILL.md Use the render.sh script to convert presentation HTML files into PNG images. Specify the HTML file path and optionally the number of slides and an output directory. ```bash ./scripts/render.sh templates/single-page/kpi-grid.html # single page ./scripts/render.sh examples/demo-deck/index.html 8 out-dir # 8 slides, custom dir ``` -------------------------------- ### Include FX Runtime Source: https://github.com/lewislulu/html-ppt-skill/blob/main/references/animations.md Include the FX runtime script to enable dynamic loading of animation modules. ```html ``` -------------------------------- ### Minimal Async Runtime Implementation Source: https://github.com/lewislulu/html-ppt-skill/blob/main/templates/full-decks/tech-sharing/index.html A basic implementation of an async runtime in Rust, demonstrating task spawning, polling, and the use of a shared queue for waking tasks. ```rust use std::collections::VecDeque; use std::sync::{Arc, Mutex}; use std::task::{Context, Poll, Wake, Waker}; struct Task(Mutex + Send>>>); impl Wake for Task { fn wake(self: Arc) { QUEUE.lock().unwrap().push_back(self); } } fn block_on + Send + 'static>(fut: F) { spawn(fut); while let Some(task) = QUEUE.lock().unwrap().pop_front() { let waker = Waker::from(task.clone()); let mut cx = Context::from_waker(&waker); let mut fut = task.0.lock().unwrap(); let _ = fut.as_mut().poll(&mut cx); // 就是这一行 } } ``` -------------------------------- ### HTML PPT Skill Project Structure Source: https://github.com/lewislulu/html-ppt-skill/blob/main/README.md Overview of the project's directory structure, detailing the purpose of key files and folders such as scripts, assets, templates, and documentation. ```text html-ppt-skill/ ├── SKILL.md agent-facing dispatcher ├── README.md this file ├── references/ detailed catalogs │ ├── themes.md 36 themes with when-to-use │ ├── layouts.md 31 layout types │ ├── animations.md 27 CSS + 20 FX catalog │ ├── full-decks.md 14 full-deck templates │ └── authoring-guide.md full workflow ├── assets/ │ ├── base.css shared tokens + primitives │ ├── fonts.css webfont imports │ ├── runtime.js keyboard + presenter + overview │ ├── themes/*.css 36 theme token files │ └── animations/ │ ├── animations.css 27 named CSS animations │ ├── fx-runtime.js auto-init [data-fx] on slide enter │ └── fx/*.js 20 canvas FX modules ├── templates/ │ ├── deck.html minimal starter │ ├── theme-showcase.html iframe-isolated theme tour │ ├── layout-showcase.html all 31 layouts │ ├── animation-showcase.html 47 animation slides │ ├── full-decks-index.html 14-deck gallery │ ├── full-decks// 14 scoped multi-slide decks │ └── single-page/*.html 31 layout files with demo data ├── scripts/ │ ├── new-deck.sh scaffold │ ├── render.sh headless Chrome → PNG │ └── verify-output/ 56 self-test screenshots └── examples/demo-deck/ complete working deck ``` -------------------------------- ### HTML PPT Skill Keyboard Navigation Source: https://github.com/lewislulu/html-ppt-skill/blob/main/README.md This cheat sheet outlines keyboard shortcuts for navigating and controlling presentations. It covers basic navigation, fullscreen, presenter window, notes, and slide linking. ```text ← → Space PgUp PgDn Home End navigate F fullscreen S open presenter window (magnetic cards) N quick notes drawer (bottom) R reset timer (in presenter window) O slide overview grid T cycle themes (syncs to presenter) A cycle a demo animation on current slide #/N (URL) deep-link to slide N ?preview=N (URL) preview-only mode (single slide, no chrome) ``` -------------------------------- ### Keyboard Shortcuts for Presentation Control Source: https://github.com/lewislulu/html-ppt-skill/blob/main/templates/full-decks/presenter-mode-reveal/index.html List of keyboard shortcuts for controlling the presentation, including entering presenter mode, switching themes, navigating slides, and resetting the timer. ```markdown 键盘操作 S → 进入演讲者视图 T → 切换主题（5 种预设） ← → → 翻页 R → 重置计时器 ``` -------------------------------- ### Load Demo HTML with Base URL Source: https://github.com/lewislulu/html-ppt-skill/blob/main/templates/theme-showcase.html Loads demo HTML into an iframe, setting a base URL to ensure relative paths resolve correctly. This is useful for inline demos where assets are located relative to the template directory. ```javascript ading','eager'); // Use src via data URL for the inline demo HTML so relative paths still resolve from the templates/ dir. // Easier: use srcdoc but set to the templates dir so relative ../assets paths work. const base = ``; iframe.srcdoc = demoHTML(t[0], t[1]).replace('',''+base); s.innerHTML = chrome; s.appendChild(iframe); deck.appendChild(s); }); })(); ``` -------------------------------- ### Export Slides with Explicit Count and Output Directory Source: https://github.com/lewislulu/html-ppt-skill/blob/main/references/authoring-guide.md Render a specified number of slides from your presentation to a designated output directory. This provides more control over the export process. ```bash ./scripts/render.sh examples/my-talk/index.html 12 out/my-talk-png ``` -------------------------------- ### Render Slides to PNG Source: https://github.com/lewislulu/html-ppt-skill/blob/main/SKILL.md Use the render script to generate PNG images of your slides. You can render a single slide, a specific range, or all slides. ```bash ./scripts/render.sh templates/theme-showcase.html # one shot ./scripts/render.sh examples/my-talk/index.html 12 # 12 slides ``` -------------------------------- ### Apply a Theme via Link Source: https://github.com/lewislulu/html-ppt-skill/blob/main/SKILL.md Hard-code a theme by linking a CSS file in the HTML. Refer to references/themes.md for a catalog of available themes. ```html ``` -------------------------------- ### Include runtime.js for Presenter Features Source: https://github.com/lewislulu/html-ppt-skill/blob/main/references/presenter-mode.md Ensure `runtime.js` is included in your HTML to enable presenter mode features like the presenter view and slide navigation. ```html ``` -------------------------------- ### Export All Slides to PNG Source: https://github.com/lewislulu/html-ppt-skill/blob/main/references/authoring-guide.md Render all slides in your presentation into PNG images. The script automatically detects the number of slides. ```bash ./scripts/render.sh examples/my-talk/index.html all ``` -------------------------------- ### Radar Chart Initialization Source: https://github.com/lewislulu/html-ppt-skill/blob/main/templates/single-page/chart-radar.html Initializes a radar chart using Chart.js. It fetches accent colors and text color from CSS variables and populates the chart with data for 'html-ppt' and 'reveal.js'. ```javascript addEventListener('DOMContentLoaded',()=>{ const css=getComputedStyle(document.documentElement); const a1=css.getPropertyValue('--accent').trim(); const a2=css.getPropertyValue('--accent-2').trim(); const text2=css.getPropertyValue('--text-2').trim(); new Chart(document.getElementById('c'),{ type:'radar', data:{ labels:['上手','美观','自定义','性能','导出','生态'], datasets:[ { label:'html-ppt', data:[9,9,10,10,9,6], borderColor:a1, backgroundColor:a1+'33', borderWidth:3, pointRadius:5 }, { label:'reveal.js', data:[8,7,9,8,8,10], borderColor:a2, backgroundColor:a2+'22', borderWidth:3, pointRadius:5 } ] }, options:{ plugins:{ legend:{ labels:{ color:text2 } } }, scales:{ r:{ suggestedMin:0, suggestedMax:10, ticks:{ color:text2, backdropColor:'transparent' }, pointLabels:{ color:text2, font:{ size:14 } }, grid:{ color:'rgba(0,0,0,.08)' }, angleLines:{ color:'rgba(0,0,0,.08)' } } } } }); }); ``` -------------------------------- ### Apply Theme with Link Tag Source: https://github.com/lewislulu/html-ppt-skill/blob/main/references/themes.md Use this method to directly link a specific theme CSS file to your HTML document. ```html ``` -------------------------------- ### Enable Theme Cycling with Data Attributes Source: https://github.com/lewislulu/html-ppt-skill/blob/main/references/themes.md Enable keyboard-based theme cycling by adding the 'data-themes' attribute to the body or html tag. The 'data-theme-base' attribute specifies the path to the theme files. ```html ``` -------------------------------- ### Render Template to PNG Source: https://github.com/lewislulu/html-ppt-skill/blob/main/README.md This script renders a specified HTML template to a PNG image using a headless Chrome browser. You can also specify a slide number to render a specific slide. ```bash # Render any template to PNG via headless Chrome ./scripts/render.sh templates/theme-showcase.html ./scripts/render.sh examples/my-talk/index.html 12 ``` -------------------------------- ### Initialize Canvas FX Animations Source: https://github.com/lewislulu/html-ppt-skill/blob/main/docs/readme/montage-animations.html This JavaScript code iterates through all elements with a `data-fx` attribute and attempts to initialize the corresponding animation function from the `window.HPX` object. It includes basic error handling for invalid functions or initialization issues. ```javascript (function(){ document.querySelectorAll('\\[data-fx\\]').forEach(el => { const name = el.getAttribute('data-fx'); const fn = window.HPX && window.HPX[name]; if (typeof fn === 'function') { try { fn(el, {}); } catch(e) { console.warn('\\\\[fx\\\', name, e); } } }); })(); ``` -------------------------------- ### Export Single Slide to PNG Source: https://github.com/lewislulu/html-ppt-skill/blob/main/references/authoring-guide.md Render a specific slide from your presentation into a PNG image. This is useful for creating individual slide assets. ```bash ./scripts/render.sh examples/my-talk/index.html ``` -------------------------------- ### Speaker Notes Writing Tips Source: https://github.com/lewislulu/html-ppt-skill/blob/main/templates/full-decks/presenter-mode-reveal/index.html Guidelines for writing effective speaker notes: use them as 'prompt signals' rather than a verbatim script, keep them between 150-300 characters per page, and write in spoken language. ```markdown 逐字稿的3 条铁律 --------- 01 **不是一字不差的讲稿，是"提示信号"** 把要讲的核心点加粗，把过渡句单独成段，把数据和名字列清楚——_让你看一眼就接得上_。 02 **每页 150–300 字，不多不少** 少于 150 字提示不够，多于 300 字你没时间读。按 2–3 分钟/页的节奏控制。 03 **用口语写，不用书面语** "因此" → "所以"；"该方案" → "这个方案"。写的时候读一遍，听起来像说话才对。 ``` -------------------------------- ### Dynamically Generate Layout Cells Source: https://github.com/lewislulu/html-ppt-skill/blob/main/docs/readme/montage-layouts.html Uses JavaScript to iterate through a list of layouts, create corresponding HTML elements (div, iframe, span), and append them to a grid container. Each cell embeds an iframe pointing to a specific template HTML file and displays a label with the template name and its file name. ```javascript const LAYOUTS = [ ['kpi-grid', 'KPI Grid'], ['chart-bar', 'Chart · Bar'], ['timeline', 'Timeline'], ['mindmap', 'Mindmap'], ['flow-diagram', 'Flow Diagram'], ['roadmap', 'Roadmap'], ['pros-cons', 'Pros / Cons'], ['code', 'Code'] ]; const grid = document.getElementById('grid'); LAYOUTS.forEach(([name, label]) => { const cell = document.createElement('div'); cell.className = 'cell'; const ifr = document.createElement('iframe'); ifr.src = '../../templates/single-page/' + name + '.html'; ifr.loading = 'eager'; cell.appendChild(ifr); const lab = document.createElement('span'); lab.className = 'label'; lab.textContent = label + ' · ' + name; cell.appendChild(lab); grid.appendChild(cell); }); ``` -------------------------------- ### Load and Display Presentation Templates Source: https://github.com/lewislulu/html-ppt-skill/blob/main/docs/readme/montage-templates.html This script iterates through a list of template names, creates a div for each, embeds an iframe pointing to the template's index.html, and adds a label with the template name. It supports dark mode variants. ```javascript const DECKS = [ ['graphify-dark-graph', true], ['xhs-post', false], ['hermes-cyber-terminal', true], ['knowledge-arch-blueprint', false], ['pitch-deck', false], ['xhs-white-editorial', false] ]; const grid = document.getElementById('grid'); DECKS.forEach(([name, dark]) => { const cell = document.createElement('div'); cell.className = 'cell' + (dark ? ' dark' : ''); const ifr = document.createElement('iframe'); ifr.src = '../../templates/full-decks/' + name + '/index.html'; ifr.loading = 'eager'; cell.appendChild(ifr); const lab = document.createElement('span'); lab.className = 'label'; lab.textContent = name; cell.appendChild(lab); grid.appendChild(cell); }); ``` -------------------------------- ### JavaScript for Layout Navigation and Control Source: https://github.com/lewislulu/html-ppt-skill/blob/main/templates/layout-showcase.html Manages the navigation through different HTML presentation layouts. It defines a list of layouts, handles button clicks and keyboard events (arrow keys, spacebar) to change the displayed layout in an iframe, and updates the current layout indicator. It also initializes the display based on the URL hash. ```javascript const list=[ 'cover', 'toc', 'section-divider', 'bullets', 'two-column', 'three-column', 'big-quote', 'stat-highlight', 'kpi-grid', 'table', 'code', 'diff', 'terminal', 'flow-diagram', 'timeline', 'roadmap', 'mindmap', 'comparison', 'pros-cons', 'todo-checklist', 'gantt', 'image-hero', 'image-grid', 'chart-bar', 'chart-line', 'chart-pie', 'chart-radar', 'arch-diagram', 'process-steps', 'cta', 'thanks' ]; let i=0; const frame=document.getElementById('frame'); const cur=document.getElementById('cur'); function go(n){ i=(n+list.length)%list.length; frame.src='single-page/'+list[i]+'.html'; cur.textContent=list[i]+' · '+(i+1)+'/'+list.length; history.replaceState(null,'','#/'+(i+1)); } document.querySelectorAll('[data-go]').forEach(a=>a.addEventListener('click',e=>{ e.preventDefault(); go(i+parseInt(a.dataset.go,10)); })); document.addEventListener('keydown',e=>{ if(e.key==='ArrowRight'||e.key===' '){ go(i+1); e.preventDefault() } if(e.key==='ArrowLeft'){ go(i-1); e.preventDefault() } }); const m=/^#\/(\d+)/.exec(location.hash||''); if(m) go(parseInt(m[1],10)-1); else go(0); ``` -------------------------------- ### Header and Grid Layout Styling Source: https://github.com/lewislulu/html-ppt-skill/blob/main/docs/readme/montage-themes.html Styles the header section with a title and subtitle, and sets up a responsive grid layout for theme previews. The grid is designed to hold multiple theme cells. ```css .hdr { display: flex; align-items: flex-end; justify-content: space-between; } .hdr h2 { font: 900 48px/1 "Inter", sans-serif; letter-spacing: -.02em; } .hdr h2 b { display: inline-block; font-size: 58px; padding-right: 14px; background: linear-gradient(90deg, #7c5cff, #22d3ee); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hdr .sub { font: 600 16px/1 "JetBrains Mono", "SF Mono", monospace; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; } .grid { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 18px; min-height: 0; } ``` -------------------------------- ### Demo HTML Generation Function Source: https://github.com/lewislulu/html-ppt-skill/blob/main/templates/theme-showcase.html Generates the HTML content for a single demo slide within an iframe. It dynamically includes theme-specific CSS and uses CSS variables for styling elements like colors, fonts, and sizes. ```javascript function demoHTML(themeName, label) { return `

Theme · ${themeName}

${label}

Same demo slide, different tokens. Background, type, accent, radius, shadow all come from assets/themes/${themeName}.css.

Palette · 调色盘

accent / accent-2 / accent-3 / text / surface-2

KPI

2.4K

上周月活 · weekly active

Code · 令牌

:root { --accent: /* theme */; --radius: /* theme */; }
#tokens primary #radius #shadow #type
`; } ``` -------------------------------- ### Gantt Chart Container Styles Source: https://github.com/lewislulu/html-ppt-skill/blob/main/templates/single-page/gantt.html Styles for the main Gantt chart container, including margins, background, borders, and padding. ```css .gantt { margin-top: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; } ``` -------------------------------- ### AI Acceptance Skill Definition Source: https://github.com/lewislulu/html-ppt-skill/blob/main/templates/full-decks/xhs-white-editorial/index.html Defines an AI acceptance skill with a name, description, and a 4-gate review checklist. This is useful for ensuring AI output meets functional, edge case, safety, and rollback requirements. ```yaml name: ai-acceptance description: "Runs AI output through a 4-gate review checklist." gates: - functional: "Does it actually do what the user asked?" - edge_cases: "Empty / long / non-ASCII / concurrent?" - safety: "PII, secrets, destructive ops — all red-flagged?" - rollback: "If this ships and breaks, can we undo in 60s?" ``` -------------------------------- ### Theme Data Structure Source: https://github.com/lewislulu/html-ppt-skill/blob/main/templates/theme-showcase.html An array of theme names and their corresponding labels, used to define the available themes for the showcase. ```javascript const THEMES = [ ['minimal-white', '极简白 · clean restraint'], ['editorial-serif', '杂志衬线 · high editorial'], ['soft-pastel', '马卡龙 · soft pastel'], ['sharp-mono', '黑白高对比 · sharp mono'], ['arctic-cool', '冷色调 · arctic'], ['sunset-warm', '暖色调 · sunset'], ['catppuccin-latte', 'Catppuccin Latte'], ['catppuccin-mocha', 'Catppuccin Mocha'], ['dracula', 'Dracula'], ['tokyo-night', 'Tokyo Night'], ['nord', 'Nord · nordic cool'], ['solarized-light', 'Solarized Light'], ['gruvbox-dark', 'Gruvbox Dark'], ['rose-pine', 'Rose Pine'], ['neo-brutalism', 'Neo-Brutalism'], ['glassmorphism', 'Glassmorphism'], ['bauhaus', 'Bauhaus 几何原色'], ['swiss-grid', 'Swiss Grid'], ['terminal-green', 'Terminal Green'], ['xiaohongshu-white', '小红书白底'], ['rainbow-gradient', 'Rainbow Gradient'], ['aurora', 'Aurora 极光'], ['blueprint', 'Blueprint 蓝图'], ['memphis-pop', 'Memphis Pop'], /* v2 additions */ ['cyberpunk-neon', 'Cyberpunk Neon 霓虹'], ['y2k-chrome', 'Y2K Chrome 镜面'], ['retro-tv', 'Retro TV CRT 扫描线'], ['japanese-minimal', '和风极简 · 朱红'], ['vaporwave', 'Vaporwave 蒸汽波'], ['midcentury', 'Mid-Century Modern'], ['corporate-clean', 'Corporate Clean 商务'], ['academic-paper', '学术白皮书'], ['news-broadcast', 'News Broadcast 新闻'], ['pitch-deck-vc', 'Pitch Deck VC / YC'], ['magazine-bold', 'Magazine Bold 大字杂志'], ['engineering-whiteprint', 'Engineering Whiteprint'] ]; ``` -------------------------------- ### Add Speaker Notes Source: https://github.com/lewislulu/html-ppt-skill/blob/main/SKILL.md Wrap speaker-specific content within a div with the class 'notes'. This content will only be visible in presenter mode. ```html
…
``` -------------------------------- ### Automate Email Replies with AI Prompt Source: https://github.com/lewislulu/html-ppt-skill/blob/main/templates/full-decks/xhs-pastel-card/index.html This prompt automates the process of replying to simple emails. It specifies the tone, maximum lines, and signature for the replies, while also defining conditions to skip auto-replying. ```Prompt # auto-reply skill when email matches "收到 / 好的 / 确认 / 收到谢谢": reply: tone: "温柔，简短，不要太商业" max_lines: 2 sign_with: "— Lewis" always_skip: - from: ["家人", "伴侣", "亲密朋友"] - contains: ["紧急", "合同", "付款"] # 一周省 38 分钟，测过 ``` -------------------------------- ### Fit and Resize Template Iframes Source: https://github.com/lewislulu/html-ppt-skill/blob/main/docs/readme/montage-templates.html This function calculates the appropriate scale and position to fit an iframe within its parent container, ensuring the template is displayed correctly regardless of container size. It's called on load and resize events. ```javascript function fit() { document.querySelectorAll('.cell iframe').forEach(ifr => { const c = ifr.parentElement; const w = c.clientWidth, h = c.clientHeight; const s = Math.min(w / 1920, h / 1080); ifr.style.transform = 'scale(' + s + ')'; const sw = 1920 * s, sh = 1080 * s; ifr.style.left = ((w - sw) / 2) + 'px'; ifr.style.top = ((h - sh) / 2) + 'px'; ifr.style.position = 'absolute'; }); } window.addEventListener('resize', fit); setTimeout(fit, 100); setTimeout(fit, 500); setTimeout(fit, 1500); ```