ECC frontend-slides零依赖演示文稿怎么做到每屏不滚动【免费下载链接】ECCThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.项目地址: https://gitcode.com/GitHub_Trending/ev/ECCfrontend-slides 是 Everything Claude Code 项目里的一个技能输入主题或 PPTX 文件产出一个能直接在浏览器里打开的零依赖演示文稿 HTML。它面向不想配构建工具、又担心 PPT 换个设备就变形的开发者。最硬的一条设计决定写在文档开头每张幻灯片必须装进一个视口内容超了就拆页绝不缩小字号也不允许出现滚动条。全文按它的规则拆给没装过这套东西的人看。先看 3 个真实翻车现场手机上浏览器地址栏会收缩和展开。100vh 写死的高度算上地址栏标题就顶到屏幕外。手机上标题被截断是 100vh 页面的经典事故。用 Reveal.js 套了模板桌面看正常iPad 横屏字号挤成一团改断点要翻几十个媒体查询。不知道自己要什么风格让 AI 直接生成一版返工三次还是觉得不对。一条规则撑起全部特性PPT 的页面是固定尺寸内容超了要么拆页要么缩字观众永远看到完整一页。frontend-slides 把这条规矩搬进浏览器内容超了拆成多页文字绝不缩小到看不清页内滚动条一律禁止。后面拆的 3 个机制——视口锁定、clamp 缩放、预览选风格——都是这条规则的具体做法。三个机制拆给你看SKILL.md 列了五条不可妥协的规则下面挑 3 个最见功力的。100dvh 视口锁定为什么禁止页内滚动每页幻灯片锁死为一个视口大小溢出的部分直接裁掉而不是出滚动条。.slide同时写height: 100vh和height: 100dvh后者让移动端按地址栏伸缩时的真实高度重算overflow: hidden把滚动路堵死再配scroll-snap-align: start保证翻页对齐到整页。.slide { width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; scroll-snap-align: start; }只用 100vh 的话手机地址栏一收缩页面就多出几十像素最后一行文字正好被裁掉而overflow: auto会放出滚动条演示时手一抖就翻乱了节奏。clamp() 字体缩放矮屏手机横过来怎么摆字体和间距不用固定值全部走clamp()自定义属性屏幕越窄字号越小桌面端封顶不胀。标题、正文、内边距各给一个clamp()区间另设 700px、600px、500px 三档视口高度断点做降级600px 档直接隐藏导航点和键盘提示。图片限max-height: min(50vh, 400px)网格用auto-fit minmax()自动折行。:root { --title-size: clamp(1.5rem, 5vw, 4rem); --body-size: clamp(0.75rem, 1.5vw, 1.125rem); --slide-padding: clamp(1rem, 4vw, 4rem); }固定 48px 标题在 iPhone 横屏会撑爆版面18px 在 4K 屏上又小到看不清。一堆min-height媒体查询跟不上屏幕的连续变化。三张预览选风格替代抽象风格问卷用户说不出想要什么风格时先生成 3 张单页预览每张都是自包含 HTML讲清排版、配色和动效篇幅控制在约 100 行以内。预览落在.ecc-design/slide-previews/目录随后按情绪词做映射impressed 对应 Bold Signalfocused 对应 Notebook Tabs一共 12 个预设可映射。用户挑一张或要求混搭再生成完整演示文稿。已知想要的预设时直接跳过预览。让用户从 12 个抽象名字里做选择题大概率会挑错。先给看得见的样片选择成本一下降下来。从零到第一份成品完整路径git clone https://gitcode.com/GitHub_Trending/ev/ECC——拿到全部技能源码。在 Claude Code 里安装 ECC确认 frontend-slides 技能可用——验证技能加载成功。告诉 agent我要做一个 10 页的技术分享——它会反问目的、篇幅和内容状态只问最小必要项。从 3 个预览里挑一个或要求混搭元素——这一步确认视觉方向。得到presentation.html双击用浏览器打开——验证单文件直接跑、零依赖成立。开发者工具切到 375x667 和 667x375 检查——这两个分辨率最挤过它就基本稳了。需要发 PDF 时跑bash scripts/export-pdf.sh ./presentation.html--compact可出 1280x720 的小文件——验证交付闭环。和 Reveal.js、Slidev 怎么选看的是依赖、产物和部署三件事对号入座即可。维度frontend-slidesReveal.jsSlidev依赖0CSS/JS 全内联npm 包Node 工具链产物形态单 HTML 文件图片可选放 assets/依赖外部库的多文件项目源码工程需构建离线可用双击 HTML 即可依赖加载完才行需本地构建环境部署把文件发给谁都能看需托管整个目录需构建后托管移动端适配规则写死100dvh clamp 3 个高度断点自行处理自行处理别在这两种情况下用它需要多人实时协作编辑文稿时交付物是单文件 HTML协作只能靠改文件。幻灯片内要嵌实时图表或复杂交互组件时技能定位是静态演示交互上限是翻页、动画和导航。做分享、路演、内部汇报想要一个发给谁都能直接打开的文件现在就能上手。技能全文见 frontend-slides视口基础样式在 viewport-base.css 可直接抄走。【免费下载链接】ECCThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.项目地址: https://gitcode.com/GitHub_Trending/ev/ECC创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 ECC frontend-slides：零依赖演示文稿怎么做到每屏不滚动
ECC frontend-slides零依赖演示文稿怎么做到每屏不滚动【免费下载链接】ECCThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.项目地址: https://gitcode.com/GitHub_Trending/ev/ECCfrontend-slides 是 Everything Claude Code 项目里的一个技能输入主题或 PPTX 文件产出一个能直接在浏览器里打开的零依赖演示文稿 HTML。它面向不想配构建工具、又担心 PPT 换个设备就变形的开发者。最硬的一条设计决定写在文档开头每张幻灯片必须装进一个视口内容超了就拆页绝不缩小字号也不允许出现滚动条。全文按它的规则拆给没装过这套东西的人看。先看 3 个真实翻车现场手机上浏览器地址栏会收缩和展开。100vh 写死的高度算上地址栏标题就顶到屏幕外。手机上标题被截断是 100vh 页面的经典事故。用 Reveal.js 套了模板桌面看正常iPad 横屏字号挤成一团改断点要翻几十个媒体查询。不知道自己要什么风格让 AI 直接生成一版返工三次还是觉得不对。一条规则撑起全部特性PPT 的页面是固定尺寸内容超了要么拆页要么缩字观众永远看到完整一页。frontend-slides 把这条规矩搬进浏览器内容超了拆成多页文字绝不缩小到看不清页内滚动条一律禁止。后面拆的 3 个机制——视口锁定、clamp 缩放、预览选风格——都是这条规则的具体做法。三个机制拆给你看SKILL.md 列了五条不可妥协的规则下面挑 3 个最见功力的。100dvh 视口锁定为什么禁止页内滚动每页幻灯片锁死为一个视口大小溢出的部分直接裁掉而不是出滚动条。.slide同时写height: 100vh和height: 100dvh后者让移动端按地址栏伸缩时的真实高度重算overflow: hidden把滚动路堵死再配scroll-snap-align: start保证翻页对齐到整页。.slide { width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; scroll-snap-align: start; }只用 100vh 的话手机地址栏一收缩页面就多出几十像素最后一行文字正好被裁掉而overflow: auto会放出滚动条演示时手一抖就翻乱了节奏。clamp() 字体缩放矮屏手机横过来怎么摆字体和间距不用固定值全部走clamp()自定义属性屏幕越窄字号越小桌面端封顶不胀。标题、正文、内边距各给一个clamp()区间另设 700px、600px、500px 三档视口高度断点做降级600px 档直接隐藏导航点和键盘提示。图片限max-height: min(50vh, 400px)网格用auto-fit minmax()自动折行。:root { --title-size: clamp(1.5rem, 5vw, 4rem); --body-size: clamp(0.75rem, 1.5vw, 1.125rem); --slide-padding: clamp(1rem, 4vw, 4rem); }固定 48px 标题在 iPhone 横屏会撑爆版面18px 在 4K 屏上又小到看不清。一堆min-height媒体查询跟不上屏幕的连续变化。三张预览选风格替代抽象风格问卷用户说不出想要什么风格时先生成 3 张单页预览每张都是自包含 HTML讲清排版、配色和动效篇幅控制在约 100 行以内。预览落在.ecc-design/slide-previews/目录随后按情绪词做映射impressed 对应 Bold Signalfocused 对应 Notebook Tabs一共 12 个预设可映射。用户挑一张或要求混搭再生成完整演示文稿。已知想要的预设时直接跳过预览。让用户从 12 个抽象名字里做选择题大概率会挑错。先给看得见的样片选择成本一下降下来。从零到第一份成品完整路径git clone https://gitcode.com/GitHub_Trending/ev/ECC——拿到全部技能源码。在 Claude Code 里安装 ECC确认 frontend-slides 技能可用——验证技能加载成功。告诉 agent我要做一个 10 页的技术分享——它会反问目的、篇幅和内容状态只问最小必要项。从 3 个预览里挑一个或要求混搭元素——这一步确认视觉方向。得到presentation.html双击用浏览器打开——验证单文件直接跑、零依赖成立。开发者工具切到 375x667 和 667x375 检查——这两个分辨率最挤过它就基本稳了。需要发 PDF 时跑bash scripts/export-pdf.sh ./presentation.html--compact可出 1280x720 的小文件——验证交付闭环。和 Reveal.js、Slidev 怎么选看的是依赖、产物和部署三件事对号入座即可。维度frontend-slidesReveal.jsSlidev依赖0CSS/JS 全内联npm 包Node 工具链产物形态单 HTML 文件图片可选放 assets/依赖外部库的多文件项目源码工程需构建离线可用双击 HTML 即可依赖加载完才行需本地构建环境部署把文件发给谁都能看需托管整个目录需构建后托管移动端适配规则写死100dvh clamp 3 个高度断点自行处理自行处理别在这两种情况下用它需要多人实时协作编辑文稿时交付物是单文件 HTML协作只能靠改文件。幻灯片内要嵌实时图表或复杂交互组件时技能定位是静态演示交互上限是翻页、动画和导航。做分享、路演、内部汇报想要一个发给谁都能直接打开的文件现在就能上手。技能全文见 frontend-slides视口基础样式在 viewport-base.css 可直接抄走。【免费下载链接】ECCThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.项目地址: https://gitcode.com/GitHub_Trending/ev/ECC创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考