人工智能AI 技能/插件提示工程【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址https://gitcode.com/GitHub_Trending/we/garden-skills点击查看免费下载导读list-reveal是 garden-skills 仓库中 web-video-presentation 技能沉淀的章节结构 anchor结构示意模板专门解决口播要念三件事 / 四个原因 / N 个特性时画面如何逐个揭示、不翻车成 PPT这一视频网页最常见的难题。读完本文你将掌握列举型章节 N1 步的节奏切分方法、单网格 N 槽位 ghost / active / past 三种状态的状态机实现原理、以及如何基于 chapter.tsx 与 chapter.css 的完整示例为自己的项目换主题、换动作选型。一、定位为什么列举型最需要 anchor在 web-video-presentation 的流程里章节开发的核心标准是这是视频不是 PPT见 CHAPTER-CRAFT.md。口播说三件事 / 四个原因 / N 个特性时每项 1 step 逐个揭示这是视频中段最常用的章节类型——同时也是最容易翻车成 PPT的类型因为如果一次把 N 项全部 stagger 上来观众扫一眼就看完了讲者还在念第一项。list-reveal这个 anchor 的定位正是为此而生它给的不是一个可照抄的成品模板而是**列举型章节的结构骨架**——单网格 N 槽位 每 step 只填一个槽位 位置不重排。正如 EXAMPLES/README.md 反复强调的这是结构示意不是抄袭模板倒过来照抄会被 CHAPTER-CRAFT.md Part 5 第 8 条整章只用一种入场动画的同质化反模式点名。适用场景anchor 的适用场景非常明确全部是主题 N 个并列子项的结构主体 强在哪 → 三件事选购 → 四个角度为什么我喜欢 → 五个理由任何主题 N 个并列子项的结构判断标准很朴素讲者会一个一个念出来吗会 → 必须逐个揭示CHAPTER-CRAFT.md 逐步揭示禁止一次全展示一节。二、节奏设计N1 步的 outline 写法在写具体视觉实现之前anchor 建议先在outline.md里按下面这种抽象结构规划章节。假设的 outline.md 章节段## 4. chapter-id — 主题 N 件事N1 steps - **step 1** (~3s) — masthead 引子N 件事 - **step 2** (~6s) — 第 1 件标题 article 抽来的细节 - **step 3** (~6s) — 第 2 件标题 - ... - **step N1** (~6s) — 第 N 件标题注意三个设计点总步数是 N1step 1 是引子只出三件事的承诺之后 N 个 step 各揭示一项每步时长可估算约 3 秒引子 每项约 6 秒。这个时长不是随便写的——在 web-video-presentation 的工程约束里动画时长必须 ≤ 该 step 的口播时长详见 CHAPTER-CRAFT.md 代码层最小约束与 AUDIO.md因为 Auto 模式严格按音频结束推进没有等动画跑完的兜底细节来自原文章每项标注标题 article 抽来的细节遵循双源原则——节奏跟口播稿画面细节回原文章抽让画面信息密度 口播信息密度。关键节奏决策表anchor 给出了每个 step 的视觉布局决策step视觉布局1中心引子大字 序号 01/02/.../N 占位不显示内容纯占位201 槽位填充标题 简短说明 accent 编号其余仍是 ghost302 填充01 已激活变次级其余仍 ghost...当前槽位填充之前的激活降级之后的 ghost这张表直接对应了三种槽位状态的定义ghost未揭示占位→ active当前激活高亮→ past已揭示降级灰化。整个章节的生命周期就是这三个状态沿步骤推进。三、核心原理布局不重排只有单元格内容变化anchor 对应的是 CHAPTER-CRAFT.md Part 0 原则 8 的核心实现原则原文只有一句话布局不重排只是单元格内容变化。3.1 为什么位置必须不重排整个章节只有一个网格布局N 个槽位的 React 节点位置完全不变。变的只是每个槽位的内容状态ghost / active / past。这样有两个直接收益单元格不会重排 →视觉稳观众不会觉得画面在抖动每点一次只有一个槽位变化 →观众视线明确锁定新揭示的项。反模式anchor 明确警告每点一次重新渲染整个布局 → 已揭示的项也跟着抖动 / 重新入场 → 观众不知道该看哪。3.2 源码实现chapter.tsx 的三态状态机chapter.tsx 是完整的章节示例默认绑定newsroom主题展示文字渲染 / 指令遵循 / 照片真实感三个特性。核心结构如下const ITEMS [ { num: 01, title: 文字渲染, body: 图里的文字也能正确写出来 }, { num: 02, title: 指令遵循, body: 可以给到非常具体的要求 }, { num: 03, title: 照片真实感, body: 光影 / 材质 / 人物接近真实 }, ]; export default function ListRevealChapter({ step }: ChapterStepProps) { // step 1 — 引子 if (step 0) { return ( div classNamelr-scene scene-pad lr-intro header classNamelr-masthead span classNamelr-rule / span classNamelr-kicker第一部分/span span classNamelr-rule / /header MaskReveal show duration{1100} h1 classNamelr-intro-h强在span classNamelr-em哪/span/h1 /MaskReveal MaskReveal show delay{400} duration{900} div classNamelr-intro-sub三件事 —— 一个个看/div /MaskReveal div classNamelr-grid {ITEMS.map((it) ( Slot key{it.num} stateghost item{it} / ))} /div /div ); } const activeIdx step - 1; return ( div classNamelr-scene scene-pad header classNamelr-masthead span classNamelr-rule / span classNamelr-kicker第一部分 · 强在哪/span span classNamelr-rule / /header div classNamelr-grid {ITEMS.map((it, i) { const state i activeIdx ? past : i activeIdx ? active : ghost; return Slot key{it.num} state{state} item{it} /; })} /div /div ); }关键点逐一拆解状态推导是一行表达式i activeIdx ? past : i activeIdx ? active : ghost——每个槽位的状态完全由step纯函数推导没有命令式状态、没有定时器。这与 web-video-presentation 的整体架构一致章节是step的纯函数见 Stage.tsx 与 types.ts 中ChapterStepProps的定义节点位置不重排三个Slot永远以相同顺序、相同key渲染在同一个lr-grid里key{it.num}保证了 React 不会重挂载引子与正文共用同一个网格step 1 的网格里所有槽位都是stateghost只显示序号占位——所以01/02/03 占位不显示内容的节奏决策在代码里是一行stateghost实现的组件签名Slot接收state: ghost | active | past这是一个受约束的联合类型编译期就杜绝了写错状态名的可能。3.3 Slot 组件内容随状态开关function Slot({ state, item }: { state: ghost | active | past; item: { num: string; title: string; body: string }; }) { return ( div className{lr-slot lr-slot-${state}} div classNamelr-slot-num{item.num}/div div classNamelr-slot-content {state ! ghost ( MaskReveal show duration{900} key{${item.num}-title} div classNamelr-slot-title{item.title}/div /MaskReveal {state active ( MaskReveal show delay{350} duration{900} div classNamelr-slot-body{item.body}/div /MaskReveal )} / )} /div /div ); }几个实现细节值得注意ghost 槽位只渲染序号标题和正文不挂载state ! ghost条件这是纯占位的实现方式正文只在 active 时显示且带delay{350}错峰让标题先出、说明后出形成节奏标题用MaskReveal入场这是 web-video-presentation 模板里定义的通用文字揭示组件见 MaskReveal.tsx本质是clip-path: inset(0 100% 0 0)→inset(0 0 0 0)的横向文字擦拭配套样式在 animations.css 的.mask-reveal类里。四、三态视觉语言ghost / active / past 的 CSS 实现chapter.css 定义了三种状态的完整视觉语言。零硬编码视觉属性——所有颜色、字体、圆角、阴影全部走主题 tokenvar(--text)、var(--accent)、var(--surface)、var(--rule)等这是换主题不破的工程底线。4.1 网格与槽位骨架.lr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } .lr-slot { border-radius: var(--r-card); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); min-height: 360px; transition: opacity var(--dur-base) var(--ease-quart), filter var(--dur-base) var(--ease-quart), border-color var(--dur-base) var(--ease-quart); }min-height: 360px是位置不重排的关键保障三个槽位的高度恒定即使某一项内容不同也不会撑开网格导致布局变化。过渡属性统一声明在基础类上状态切换走的是 opacity / filter / border-color天然平滑。4.2 三种状态ghost占位——虚线边 大灰序号透明度 0.55.lr-slot-ghost { border: var(--rule-w) dashed var(--rule); background: transparent; opacity: 0.55; } .lr-slot-ghost .lr-slot-num { color: var(--text-faint); }active当前——accent 实线红框 实心面板 巨号砸下 阴影.lr-slot-active { border: var(--rule-w) solid var(--accent); background: var(--surface); box-shadow: var(--shadow-card); } .lr-slot-active .lr-slot-num { color: var(--accent); animation: lr-num-drop var(--dur-base) var(--ease-quart) backwards; } keyframes lr-num-drop { 0% { transform: translateY(-40%) scale(1.6); opacity: 0; } 60% { transform: translateY(0) scale(0.94); opacity: 1; } 100% { transform: translateY(0) scale(1); } }past已揭示——灰化保留作上下文grayscale 0.4.lr-slot-past { border: var(--rule-w) solid var(--rule); background: transparent; opacity: 0.7; filter: grayscale(0.4); } .lr-slot-past .lr-slot-num { color: var(--text-mute); }4.3 槽位内部与字号关系序号font-family: var(--hero-num-font, var(--font-display-en))字号calc(var(--t-display-2) * 0.85)——即hero-num 字体衬线大数字约巨号 122px--t-display-2在 newsroom 主题下为 144px标题font-family: var(--font-display-cn)var(--t-h2)正文var(--t-body)line-height: 1.6max-width: 22ch限制行宽保证排版引子大字var(--t-display-2)即 anchor 关键手段表里说的巨号 144px serifaccent 强调字通过.lr-em { color: var(--accent); }实现masthead双线规则 mono kicker 小标签letter-spacing: 0.18em大写这是 newsroom 主题的报头气质。animation: lr-num-drop ... backwards里的backwards填充模式很重要它保证在动画 delay/启动前就应用 0% 关键帧透明 位移避免先闪一下再动画。五、关键手段汇总anchor 地板线anchor 把这一章用到的全部手段整理成一张地板线表格新写章节时对照自查维度这个 anchor 怎么实现字号标题 64px / 巨号 144px serif槽位状态dashed → 巨号红色高亮 → 灰化数字位置不重排序号hero-num 字体衬线大数字主导动作mask reveal标题 数字砸下accent 红伴随动作副标 stagger 200ms accent 横线 scaleX持续微动active 槽位的数字 accent 光晕infinite呼吸引子masthead 双线规则 serif 大字这里的持续微动遵循 CHAPTER-CRAFT.md Part 0 原则 7 的节制使用原则只有当不同 step 的主导动作不够多样时才需要挂且锚定在 active 槽位上infinite呼吸是持续微动的典型写法参考 animations.css 里pulse-halo、caret-blink等 bounded keyframe 的组合思路。六、配套工程约束narrations.ts 与 step 一致性写任何章节包括 list-reveal 型都必须遵守 web-video-presentation 的两条硬性约束CHAPTER-CRAFT.md 代码层最小约束每章必须有narrations.ts与Chapter.tsx同目录数组长度必须等于章节代码里if (step N)出现的最大 N 1。list-reveal 型章节是 N1 步所以narrations.length必须是 N1完全无音频的过场 step 用空串见 types.ts 中Narration类型的注释Auto 模式会在音频缺失或文本为空时按字数估时撑过。这是音频合成 Auto 模式自动推进的唯一真相源写错或漏写会让录屏对不上嘴动画时长必须 ≤ 该 step 的口播时长list-reveal 每项约 6 秒所以标题 mask reveal900ms 正文错峰350ms delay 900ms的总时长远在安全线内如果某项口播短就三选一写更长口播 / 拆 step / 调动画速度。七、切换主题结构不变动作换型anchor 特意强调结构不变N1 step、单网格 N 槽位、每 step 只填一个槽位。换主题时只需要换主导动作的形式和序号字体主题换法bauhaus-bold序号换 Archivo Black 大色块用 hard-cut 砸下terminal-green序号[01][02][03]风格打字机入场chalk-garden粉笔下划线手绘 wiggle 入场midnight-press数字 blur clear 慢锐化 暖橙光晕慢呼吸这是因为主题的性格签名.hero-num、.rule、.card、.stage-frame由 primitive class 自动接入CHAPTER-CRAFT.md 代码层最小约束而动画形式属于可硬编码 / 可 token按内容自由的范畴——比如newsroom主题见 newsroom/theme.json 的 mood 列表light / newspaper / editorial / serif / documentary / warmaccent 为报头红#c9302c就天然匹配印章砸下这种干脆的动作而慢主题就别写 200ms 的快动画。八、具象题材参考科技测评里的 why-strong如果想看这个 anchor 在真实题材里的应用case-tech-review/outline-snippet.md 的## 2. why-strong章节强在哪 · 四个方向就是完整示范——它绑的是midnight-press主题把四件事逐个揭示换成了电影感慢镜hero 从 blur(20px) 慢速景深聚焦、4 张 ghost 卡片同步从 blur 慢镜出现保持占位、第 1/4 项填实时用卡片 ghost → mask 填实 大图慢镜 takeover mono cue 标签 blur clear 入场 副标打字机逐字打出。这个 case 还示范了双源原则的具象落地step 2 口播只说它强在 X画面却同时挂上本项关键词 / 大图实例 / 具体数据点 / 副标补充——画面信息密度 口播信息密度。这正是 list-reveal 各槽位 body 里从 article 抽细节的实际效果。九、使用边界这是地板不是天花板最后必须强调 anchor 的角色边界EXAMPLES/README.md正确使用流程先走完 CHAPTER-CRAFT.md Part 0 五问确定这一章整体结构→ 实在卡壳才翻 EXAMPLES →保留它的形step 切分逻辑、字号关系、布局原则按本项目的主题 内容换动作选型这是地板不是天花板这个示例虽然已经有印章砸下、stagger、accent 红条但仍是相对克制的版本。想升级时可选背景层加 SVG turbulence 纸纹永动、主导动作换 Canvas 粒子聚合成 hero 字、数字用 JSrequestAnimationFrame easeOutQuart 滚动、转场用 clip-path inset 横向擦除等完整工具箱见 CHAPTER-CRAFT.md Part 2/3 视觉手段全栈工具箱实测原则写章节时先实现 anchor 同等的地板版本跑起来确认气质对再决定要不要加伴随动作 / 持续微动。如果整章主导动作太单一不要靠加持续微动补救——回 Part 0 五问换主导动作才是正解。一句话总结list-reveal 的价值不在它的动画而在它把列举型章节为什么不能一次全展示、为什么位置不能重排、三种状态怎么切讲成了可复用的结构骨架——复制这个骨架然后让动作替你的主题说话。赞分享人工智能AI 技能/插件提示工程【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址https://gitcode.com/GitHub_Trending/we/garden-skills点击查看免费下载相关推荐Marp 分片列表Fragmented List完整指南用 * 与 1) 列表标记实现逐条构建的演示效果Marp 分片列表Fragmented List完整指南用 与 1 列表标记实现逐条构建的演示效果 MarpMarkdown Presentation前端文档react-native-video v7 VideoView 章节功能实战Seekbar 章节标记与导航指南react native video v7 VideoView 章节功能实战Seekbar 章节标记与导航指南 本章节指南讲解 react native vi音视频移动开发Splink核心功能全解析多SQL后端支持如何实现跨平台数据关联Splink核心功能全解析多SQL后端支持如何实现跨平台数据关联 Splink是一款强大的概率数据关联工具通过多SQL后端支持实现跨平台数据关联帮助用户快数据分析数据工程上一篇探索开源创新OpenBlocks - 动态构建与交互的编程平台下一篇connectedhomeip 洗碗机Dishwasher示例Linux 平台构建、运行与 OperationalState 集群控制实战创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考