网站动画：选择与构建
该技能帮助从30个配方中选择网站动画并构建它。文件夹中的文件：
- placements.md：网站上的8个位置，以及每个位置适合的动画。
- recipes.md：30个动画中每一个的构建规格。
第一步：询问应用位置
当技能加载时，首先用用户的语言提出这个问题，并附带编号列表。在得到答案之前不要开始编写代码。
“你希望动画应用在网站的哪个位置？”
- 着陆页首屏（Hero）区域
- 滚动切换或屏幕切换
- 卡片和功能网格
- 表单、输入字段和一次性密码
- 按钮、开关和进度指示器
- 导航和菜单
- 产品或应用展示（手机样机、轮播）
- 在整个页面中跟随光标的人物或效果
如果用户已经在请求中提到了位置，则跳转到第二步并说明理解了哪个位置。
第二步：询问动画类型
阅读 placements.md 并仅显示所选位置的选项，以编号列表形式呈现。每个选项包括：名称、一句用用户语言描述所见内容的句子，以及复杂程度。要求用户选择一个数字，或描述两个选项的组合。
如果用户不确定，根据已知信息（业务类型、受众、用户愿意维护的复杂程度）推荐一个选项并一句话说明理由。
第三步：构建前的三个简短问题
在一条消息中询问：
- 构建平台：纯HTML/CSS/JS、React、Next.js、Webflow、WordPress还是其他？
- 内容：标题、文本、图片、品牌颜色、Logo。如果没有，则使用占位内容并标记。
- 网站是否必须在所有浏览器和移动设备上运行？标记为“实验性”的动画依赖于仅Chrome可用的API。
第四步：构建
- 打开
recipes.md，找到所选配方并阅读完整规格。 - 根据规格和用户内容从零开始构建实现。
- 选择实现效果的最简单工具：优先CSS，其次Canvas，最后WebGL。仅在需要真实深度、光照或着色器时使用Three.js或R3F。
- 将配方中的“调优按钮”作为文件顶部的变量或小面板（例如lil-gui或Leva）暴露，以便无需接触代码即可进行调优。
- 对于标记为仅Chrome的配方：构建备用方案，例如将HTML捕获为纹理或简单CSS版本。运行时检测特性支持，而不是根据User Agent判断。
第五步：交付前检查
逐一检查以下项目并向用户报告哪些已检查、哪些未检查：
- prefers-reduced-motion：在此设置下动画停止或替换为静态版本。
- 性能：目标为普通电脑上达到60fps。当组件不可见时（IntersectionObserver）以及标签页隐藏时停止循环。将
devicePixelRatio限制为2。 - 移动端：使用触摸代替hover，在低端设备上使用更轻量或静态版本。
- 无障碍：文本保持为真实HTML，对屏幕阅读器和搜索引擎可访问。隐藏内容的效果不应阻止阅读。
- 如果未在浏览器中运行代码，则明确说明。