skills

Build a high-fidelity, auto-playing, interactive product demo for a marketing/landing-page hero — a device or browser mockup that scripts the product's REAL UI so visitors instantly feel the product. Use when someone asks to create an interactive hero, an interactive hero demo, a "try it live" showcase, an animated product walkthrough, a scripted UI demo, or a Codex-style playable hero. Not for static screenshots or generic marketing copy.

把录屏 / 视频用 ffmpeg 转成"网页可直接嵌入"的资源，一份脚本适配多种需求——H.264 MP4（文字密集 UI 录屏首选，比 GIF 清晰 10 倍、体积小 10 倍）、VP9 WebM（再小 30%）、或调色板优化的 GIF（仅在必须 GIF 的场景）；支持等比缩放控制文字清晰度、CRF 画质、帧率、裁剪 crop、按时间截取片段（--ss/--t）、导出 <video poster> 静帧。Use when asked to "把录屏转成网页视频 / demo 视频"、"录屏转 mp4 / webm / gif"、"压缩演示视频"、"UI 录屏放到官网 / README / 落地页"、"encode screen recording for web"、"convert mov to mp4 for website"、"make a demo gif"、"optimize video for web/landing page"。

网页文本高亮 / 划词批注的「模糊恢复」——保存的是文本锚点（引用文本 exact + 前后上下文 prefix/suffix + 字符偏移 position），而不是 DOM 路径 / XPath / nth-child。页面重渲染、空白重排、正文被小幅编辑之后，用三层降级 position→exact→fuzzy 把高亮重新定位回来：fuzzy 用「首尾自由 gap」的编辑距离做近似子串匹配，容忍错字与增删词并给出相似度分数，低于阈值判定丢失。零依赖单文件、纯 TS，含 Range↔偏移与无损 <span> 高亮绘制。当用户提到 高亮/划词/批注恢复、highlight 重新定位、restore highlight after re-render、text anchor / text fragment、DOM 变了高亮丢了、模糊匹配找回选区、W3C Web Annotation TextQuoteSelector 时使用。

只读扫描 macOS 磁盘占用，专门拆解储存面板里笼统的 "System Data" 分类：Docker、Xcode 缓存（DerivedData / iOS DeviceSupport / CoreSimulator）、包管理器缓存（npm/yarn/pnpm/homebrew）、~/Library/Caches 与 ~/Library/Logs、iOS 本地备份、Time Machine 本地快照、休眠镜像、/private/var/folders 临时文件、各 App 的 Application Support 目录、容器/沙箱工具（Apple container / colima / lima），产出按大小排序的汇总表并逐项给出是否可清理的判断。绝不删除或修改任何文件，只做统计。Use when asked to "扫描硬盘"、"磁盘占用"、"System Data 都是什么"、"清理空间前先看看占用"、"disk usage"、"scan disk"、"check disk space"。

选区浮层（划词工具条 / AI 解释卡 / 评论气泡）的定位算法：在指定矩形范围（通常是 viewport）内，popup 围绕选区按 右→下→左→上 择位，保持安全边距与呼吸间距、永不被裁切；四边都放不下时退化为「遮挡选区面积最小」的位置。零依赖纯函数，~170 行，不引入 @floating-ui。当用户提到 划词工具条放哪 / 选区气泡定位 / popup 超出屏幕被裁切 / tooltip 贴边 clamp / anchored popup 翻转 / 浮层遮住选中内容 时使用。

移动端全屏视口高度适配。解决 iOS Safari / Android Chrome / 国内 WebView 地址栏、工具栏动态伸缩导致 100vh「超高」、底部 TabBar/按钮被遮挡、滚动跳动的问题。给两个按场景选的方案：营销/内容型用纯 CSS svh；IM/应用型用「特性检测混合渐进增强」（JS 检测 + dvh + polyfill，覆盖老设备）。当用户提到 100vh 在手机上不对 / iOS 底部按钮被遮住 / 全屏布局高度跳动 / dvh svh 怎么选 / --app-height polyfill / 移动端 app shell 全屏高度 / 移动端全屏适配时使用。

用 Cloudflare Image Transformations（/cdn-cgi/image + R2/自有域名）替代 Vercel 图片优化，给 Next.js 配置 custom loader，保留 next/image 全部能力（srcset/lazy/priority/CLS 防抖）同时把图片流量成本降为零。当用户提到 Vercel 图片优化太贵、Image Optimization 超额、Cloudflare 图片裁剪/缩放、/cdn-cgi/image、R2 图片优化、custom image loader、图片 CDN 省钱，或想在 Cloudflare 上做响应式图片时使用。

给 Next.js 项目一键装上「付费解锁媒体资源」系统：Cloudflare R2 私有桶存储 + 预签名 URL 限时访问 + 解锁记录/扣费事务 + blurhash/高斯模糊付费预览 + headless PaidMediaProvider（Provider 提供数据，展示组件由业务自己实现）。当用户想做付费图片/视频解锁、会员专属媒体、积分解锁内容、R2 私有资源签名访问、paywall 媒体、防盗链媒体分发，或提到 "付费媒体 / 解锁图片 / 解锁视频 / R2 presigned / 私有桶 / paid content / unlock media" 时使用。

给 Next.js 项目一键装上"服务端主动推送到前端"的实时系统：SSE 长连接 + Redis Pub/Sub 跨实例广播 + BullMQ 延迟/定时任务 + 零依赖 React Hooks 订阅。以「通道」为核心，业务数据结构完全自定义。当用户想在 Next.js 里做实时通知、服务端主动推消息、站内信、未读角标实时更新、延迟/定时推送，或提到 "SSE / EventSource / server push / 主动推送 / 实时通知 / BullMQ 推送 / realtime notification" 时使用。

对 Chrome 扩展（Manifest V3）在提交 Chrome Web Store 审核前做一次可重复的上线前自查，覆盖单一用途、权限逐项理由、远程代码/MV3 红线、数据使用声明、商店素材、商标合规，产出一份带 ✅/⚠️/❌/❓ 判定的 Markdown 自查报告。Use when the user wants to check whether a browser extension can pass Chrome Web Store / CWS review before submitting, or asks for a "扩展过审 / 提审自查 / CWS review / Web Store 审核" report.

对「Chrome 扩展 + 官网 + 订阅计费」形态的产品，在提交 Creem（MoR 支付商户）审核前做一次可重复的上线前自查，产出一份带 ✅/⚠️/❌/❓ 判定的 Markdown 自查报告。Use when the user wants to check whether an extension+website product can pass Creem / payment-merchant / MoR review before submitting, or asks for a "过审自查 / 商户审核 / Creem review" report.