원클릭으로 Manus에서 모든 스킬 실행

html-effectiveness-slides

스타4

포크0

업데이트2026년 5월 13일 16:23

子 skill — 键盘控制幻灯片。当用户要"上去就能讲"的会议幻灯片、不想用 Keynote/PPT/Google Slides、希望单 HTML 文件左右键翻页时使用。当父 skill 路由命中"幻灯片/slide deck/做几张 slides/讲几页"类请求时加载。

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

Azhi-ss

Azhi-ss/html-effectiveness

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

06-slides — 键盘控制幻灯片

"A handful of <section> tags and twenty lines of JS is a slide deck. Point the agent at a Slack thread or a design doc and get something you can arrow-key through in a meeting — no Keynote, no export step."

何时用

用户说	该走这里吗
"做几张 slides 给团队讲讲"	✓
"把这份 RFC 讲一下，slide 形式"	✓
"上台分享 5 页内容"	✓
"做一份幻灯片用键盘翻"	✓
"做一份正式 deck 给 board / 投资人"	✗ 走专业工具 (Keynote)，HTML deck 太朴素
"做一份 PDF"	✗ 不是这个 skill 的范畴

标准结构（6 张以内最好）

#	类型	干什么
1	Title	一句标题 + 一句副标题（讲什么、要做什么决定）
2	"Three things shipped"	3 列等宽卡片，并行展示
3	In progress	工作流 + 完成度百分比
4	Metrics	大数字 + delta（2-4 个）
5	Decision needed	决定的问题 + 两个 options
6	Next & closer	下周计划 + "Questions →"

3-7 张是甜区。≤ 2 张走 markdown，≥ 8 张观众睡着。

键盘交互（必备）

键	行为
`→` `Space` `PageDown`	下一张
`←` `PageUp`	上一张
`.` `Home`	回到第一张
`f`	全屏切换

底部右下角显示 n / total 页码，左下角显示 keyboard hint。

关键 JS（直接复用）

const slides = document.querySelectorAll('.slide');
const pager = document.querySelector('.pager');
let i = 0;

function show(n) {
  i = Math.max(0, Math.min(slides.length - 1, n));
  slides.forEach((s, k) => s.classList.toggle('active', k === i));
  pager.textContent = (i + 1) + ' / ' + slides.length;
}

window.addEventListener('keydown', e => {
  if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'PageDown') {
    e.preventDefault(); show(i + 1);
  }
  if (e.key === 'ArrowLeft' || e.key === 'PageUp') {
    e.preventDefault(); show(i - 1);
  }
  if (e.key === '.' || e.key === 'Home') show(0);
  if (e.key === 'f') {
    if (!document.fullscreenElement) document.documentElement.requestFullscreen();
    else document.exitFullscreen();
  }
});
show(0);

关键 CSS

.deck { width: 100vw; height: 100vh; overflow: hidden; }
.slide { display: none; min-height: 100vh; padding: 80px 100px;
         flex-direction: column; gap: 24px; }
.slide.active { display: flex; }

.slide h1 { font-size: 56px; font-weight: 500; line-height: 1.1;
            letter-spacing: -0.015em; max-width: 14ch; }
.slide h2 { font-size: 36px; font-weight: 500; line-height: 1.2; }
.slide p  { font-size: 22px; line-height: 1.55; color: var(--gray-700);
            max-width: 60ch; }

.pager { position: fixed; bottom: 24px; right: 32px;
         color: var(--gray-500); font-family: var(--font-mono);
         font-size: 14px; user-select: none; }
.help { position: fixed; bottom: 24px; left: 32px;
        color: var(--gray-500); font-size: 13px; }

直接可用模板

../../templates/slides.html — 6 张完整模板，含：

Title slide
"Three things shipped" 三栏并排
"Carrying into next week" 进度卡
Metrics 大数字
Decision needed + 两个 option 卡片
Next & closer

修改方式：直接打开模板，把 [占位] 文字换成真实内容，保持张数 ≤ 6。

共同原则

每张只讲一件事——拥挤的 slide 是 LLM 写 deck 最常犯的错
字号至少 22px——演示距离屏幕远，小字看不清
数字要大——KPI 卡片 font-size: 72px 不算夸张
永远显示页码——观众需要知道还剩几页
f 切全屏——上台前按一下，移除浏览器 chrome

이 저장소의 다른 Skills

같은 저장소

html-effectiveness

Azhi-ss/html-effectiveness

让 agent 用单文件 HTML 替代 markdown 输出空间性、并行性、可比较或可交互的内容。当用户请求"对比/计划/评审/报告/解释器/幻灯片/编辑器/可视化"或当输出含并排选项、流程图、时间线、代码 diff、可交互元素、需要"指着某处说就是它"的场景时使用。本 skill 是路由器：先用决策框架判断是否走 HTML，再按 9 大类调度对应的子 skill（01-explore / 02-review / 03-design / 04-proto / 05-diagram / 06-slides / 07-research / 08-report / 09-editor），并复用 ../templates/*.html 与 shared/base.css 输出真实可运行的产物。

2026-05-144

html-effectiveness-design

Azhi-ss/html-effectiveness

子 skill — 设计系统与组件展示。当用户要从 repo 提取 design tokens 做团队 reference、或要把一个组件的所有 variant 平铺在一张 contact sheet 上 review 时使用。包含设计系统参考（design-tokens.html）和组件变体陈列两种范式。当父 skill 路由命中"设计系统/design tokens/组件变体/展示组件库"类请求时加载。

2026-05-134

html-effectiveness-proto

Azhi-ss/html-effectiveness

子 skill — 原型与可点击流。当用户要决定一个 transition 的 duration/easing（动画沙盒，animation.html）或要"走一遍"4-6 屏交互流验证手感时使用。包含动画沙盒和可点击流两种范式。当父 skill 路由命中"动画/原型/手感/clickable flow"类请求时加载。

2026-05-134

html-effectiveness-diagram

Azhi-ss/html-effectiveness

子 skill — 插画与图表。当用户要博客/文档配图（SVG 插图集）、流程图、状态机、deploy pipeline（flowchart.html）时使用。所有图都用内联 SVG，不引外部库（mermaid/d3/excalidraw）。当父 skill 路由命中"图/diagram/flowchart/state machine/pipeline 可视化"类请求时加载。

2026-05-134

html-effectiveness-explore

Azhi-ss/html-effectiveness

子 skill — 探索与规划。用户在多种实现方案/设计风格之间未决，或方案选定后要写工程版 RFC 时使用。包含三方案对比（compare.html）、视觉设计方向、实现计划（plan.html）三种范式。当父 skill html-effectiveness 路由命中"对比/选型/RFC/计划"类请求时加载。

2026-05-134

html-effectiveness-review

Azhi-ss/html-effectiveness

子 skill — 代码评审与理解。当用户要 PR 评审、PR 写作（作者侧）、或要理解陌生代码模块的请求路径/调用栈时使用。包含 PR 评审（diff.html）、PR 写作（pr.html）、模块图三种范式。当父 skill 路由命中"评审/PR/审阅/这段代码怎么工作"类请求时加载。

2026-05-134

name	html-effectiveness-slides
description	子 skill — 键盘控制幻灯片。当用户要"上去就能讲"的会议幻灯片、不想用 Keynote/PPT/Google Slides、希望单 HTML 文件左右键翻页时使用。当父 skill 路由命中"幻灯片/slide deck/做几张 slides/讲几页"类请求时加载。

06-slides — 键盘控制幻灯片

"A handful of <section> tags and twenty lines of JS is a slide deck. Point the agent at a Slack thread or a design doc and get something you can arrow-key through in a meeting — no Keynote, no export step."

何时用

用户说	该走这里吗
"做几张 slides 给团队讲讲"	✓
"把这份 RFC 讲一下，slide 形式"	✓
"上台分享 5 页内容"	✓
"做一份幻灯片用键盘翻"	✓
"做一份正式 deck 给 board / 投资人"	✗ 走专业工具 (Keynote)，HTML deck 太朴素
"做一份 PDF"	✗ 不是这个 skill 的范畴

标准结构（6 张以内最好）

#	类型	干什么
1	Title	一句标题 + 一句副标题（讲什么、要做什么决定）
2	"Three things shipped"	3 列等宽卡片，并行展示
3	In progress	工作流 + 完成度百分比
4	Metrics	大数字 + delta（2-4 个）
5	Decision needed	决定的问题 + 两个 options
6	Next & closer	下周计划 + "Questions →"

3-7 张是甜区。≤ 2 张走 markdown，≥ 8 张观众睡着。

键盘交互（必备）

键	行为
`→` `Space` `PageDown`	下一张
`←` `PageUp`	上一张
`.` `Home`	回到第一张
`f`	全屏切换

底部右下角显示 n / total 页码，左下角显示 keyboard hint。

关键 JS（直接复用）

const slides = document.querySelectorAll('.slide');
const pager = document.querySelector('.pager');
let i = 0;

function show(n) {
  i = Math.max(0, Math.min(slides.length - 1, n));
  slides.forEach((s, k) => s.classList.toggle('active', k === i));
  pager.textContent = (i + 1) + ' / ' + slides.length;
}

window.addEventListener('keydown', e => {
  if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'PageDown') {
    e.preventDefault(); show(i + 1);
  }
  if (e.key === 'ArrowLeft' || e.key === 'PageUp') {
    e.preventDefault(); show(i - 1);
  }
  if (e.key === '.' || e.key === 'Home') show(0);
  if (e.key === 'f') {
    if (!document.fullscreenElement) document.documentElement.requestFullscreen();
    else document.exitFullscreen();
  }
});
show(0);

关键 CSS

.deck { width: 100vw; height: 100vh; overflow: hidden; }
.slide { display: none; min-height: 100vh; padding: 80px 100px;
         flex-direction: column; gap: 24px; }
.slide.active { display: flex; }

.slide h1 { font-size: 56px; font-weight: 500; line-height: 1.1;
            letter-spacing: -0.015em; max-width: 14ch; }
.slide h2 { font-size: 36px; font-weight: 500; line-height: 1.2; }
.slide p  { font-size: 22px; line-height: 1.55; color: var(--gray-700);
            max-width: 60ch; }

.pager { position: fixed; bottom: 24px; right: 32px;
         color: var(--gray-500); font-family: var(--font-mono);
         font-size: 14px; user-select: none; }
.help { position: fixed; bottom: 24px; left: 32px;
        color: var(--gray-500); font-size: 13px; }

直接可用模板

../../templates/slides.html — 6 张完整模板，含：

Title slide
"Three things shipped" 三栏并排
"Carrying into next week" 进度卡
Metrics 大数字
Decision needed + 两个 option 卡片
Next & closer

修改方式：直接打开模板，把 [占位] 文字换成真实内容，保持张数 ≤ 6。

共同原则

每张只讲一件事——拥挤的 slide 是 LLM 写 deck 最常犯的错
字号至少 22px——演示距离屏幕远，小字看不清
数字要大——KPI 卡片 font-size: 72px 不算夸张
永远显示页码——观众需要知道还剩几页
f 切全屏——上台前按一下，移除浏览器 chrome