motionsite 是做什么的？
构建"动效站点"风格：全屏循环视频首屏、用于文本可读性的深色渐变遮罩、玻璃效果卡片、文字动画、响应式按钮，以及滚动时揭示的部分。优秀的站点与缓慢、不可访问的站点之间的区别在于下面的检查清单，因此该技能会先构建页面，然后进行审核。
与 motionsites.ai 无关。此技能不包含任何第三方提示或资源。
独立运行： 当你要求构建落地页、首屏或动画网站时，Claude 会选择此技能，根据模板构建页面，并在向你报告之前运行审核。
操作流程
- 一次性获取需求概要。 品牌名称、一句话承诺、主要号召性用语、3 到 6 个部分（功能、客户证明、定价、常见问题）、风格基调（平静、大胆、俏皮、奢华），以及他们已有的任何标志、颜色或字体。如果用户没有提供任何信息，请自行选择一个方向并说明是哪一个。
- 从项目中选取技术栈。 现有 React/Next/Vue/Svelte 项目：在该技术栈中构建组件。空文件夹且无偏好：使用单文件
templates/site.html（无需构建步骤，双击即可打开）。如果他们要求使用 React、Vite、TypeScript 和 Tailwind，则使用templates/Hero.tsx和templates/useReveal.ts。 - 确保视频真实且轻量。 参见
references/assets.md。使用用户自己的素材或生成的/授权的片段，切勿热链接他人的 CDN。在获得真实素材之前，使用模板中包含的 CSS 动画渐变背景，使页面看起来已完成。真实素材通过填充.hero-media上的三个数据属性（data-video-mp4、data-video-webm、data-poster）来切换。使用scripts/make_video_assets.sh生成网络版本（mp4 + webm + poster）。 - 根据模板构建页面。 保留以下部分：首屏（视频 + 遮罩 + 标题 + 号召性按钮）、玻璃导航栏、3 到 6 个带有揭示动画的内容部分、页脚。应用
references/design-recipes.md中的设计配方（字号比例、间距、调色板、玻璃卡片、按钮状态、动画时间）。 - 遵循性能与可访问性规则（如下）。它们不是可选的附加项；它们是确保页面在手机上可用的关键。
- 审核。 运行
python3 <skill-dir>/scripts/check_motion.py <site-folder>并修复每个 FAIL 项。然后在浏览器中查看：桌面和手机宽度、启用减少动效、首次绘制时禁用 JavaScript。详细信息见references/performance-accessibility.md。 - 报告 创建的文件、如何替换占位视频、审核结果，以及一个需要检查的要点。
决定质量的关键规则
- 视频：
muted、loop、playsinline（缺少这些属性，移动浏览器将拒绝在页面中播放）、已设置poster、preload="metadata"、无音轨。像模板所做的那样，在检查减少动效和流量节省模式后，从脚本启动播放，以便这些访客永远不会下载视频。目标为 2 到 4 MB 的首屏片段，分辨率最多 1080p，时长 6 到 12 秒且能干净循环。 - 海报图像是首次绘制内容。 访客首先看到且 Largest Contentful Paint 测量的是海报图像（或渐变背景）。为其设置
fetchpriority="high"和确切尺寸。 - 尊重访客偏好。 当
prefers-reduced-motion: reduce生效或流量节省模式开启时，显示海报图像代替播放视频，并关闭动画。当视频滚动出屏幕时暂停播放。 - 仅对
transform和opacity属性进行动画。 永远不要对top、left、width、height或margin进行动画；它们会强制布局并导致手机卡顿。 - 文本在视频上保持可读。 在视频和文本之间放置渐变遮罩，保持正文文本与最暗和最亮帧的对比度至少为 4.5:1，切勿将小文本直接放置在动态画面之上。
- 每个部分一个想法，每个元素一个动画。 动画间隔在 60 到 100 毫秒，持续时间 400 到 800 毫秒，使用 ease-out 缓动函数。如果所有元素都在运动，就没有焦点引导视线。
- 移动端优先。 首屏使用
100svh，而非100vh。在 375px 宽度下测试；不应有水平滚动。考虑在小屏幕上使用更轻量或静止的首屏。 - 真实的内容结构。 一个
h1，地标元素（header、main、footer），按钮是<button>或<a>，链接包含文本，图片包含alt属性。 - 拥有自己的资源。 不使用第三方 CDN 视频，字体自行托管或来自字体提供商，许可证记录在
assets/README.md中。
文件
| 文件 | 用途 |
|---|---|
templates/site.html | 完整的单文件落地页：视频首屏（通过数据属性启用）带有 CSS 渐变回退、玻璃导航、动态标题、滚动揭示、卡片、号召性按钮、页脚 |
templates/Hero.tsx, templates/useReveal.ts | React 版本的首屏和滚动揭示 hook |
references/design-recipes.md | 字体、颜色、间距、玻璃效果、按钮、动画时间、部分模式 |
references/performance-accessibility.md | 性能预算、减少动效、视频行为、测试步骤 |
references/assets.md | 视频来源、许可、生成片段、编码方式 |
scripts/make_video_assets.sh | ffmpeg：输入片段转换为 web mp4、webm、poster |
scripts/check_motion.py | 审核站点文件夹中上述问题的脚本 |