Animation Flow
为项目生成可配置的动画组件。每个效果以可预览的 HTML 模板形式提供，AI 探测目标项目框架后按 component-spec.md 规范把 HTML 转换为对应组件——React / Vue / Svelte / 原生等均支持。
工作原理
技能将用户意图匹配到 templates/ 目录下的动画模板。每个模板包含 README（关键词、框架中立数据 schema、可调参数）和 effect.html（可直接浏览器打开预览的完整实现）。技能读取匹配的模板，探测目标框架，按 component-spec.md 规范转换并输出。
触发识别
将用户请求匹配到以下模式（支持中英文）：
| 效果 |
关键词 |
用户想要什么 |
| 数字滚动 |
number-scroll, 数字滚动, counter, counting, 数字递增, 数字动画, 数字计数, 统计动画, 数据滚动 |
滚动到视口时数字从0递增到目标值——数据展示区、成就统计 |
| Hover光效 |
hover-glow, hover光效, 光效, 扫光, 卡片光效, 鼠标跟随光效, card glow, 产品卡片, 产品展示卡片, 鼠标悬停效果 |
鼠标悬停时卡片出现扫光和径向光效——产品展示 |
| 手风琴 |
accordion, 手风琴, 折叠面板, 悬停展开, hover expand, 横向展开, 图片展开, 类别展示, interactive panels |
横向排列的面板悬停时展开显示详情——类别展示 |
| 定屏滚动 |
fixed-scroll, 定屏滚动, sticky scroll, 固定滚动, 左固右滚, parallax scroll, 企业文化页面, 关于我们页面, sticky sidebar scroll |
左侧固定右侧随页面滚动——企业文化、关于我们页面 |
| 文字打字 |
typewriter, 打字效果, 打字机, typing effect, text typing, 文字逐字显示, 逐字动画, 文字动画, 打字动画, 终端打字 |
文字逐字输入并循环展示多行——首页标语、代码展示 |
如果用户请求没有匹配到任何关键词，读取所有 templates/*/README.md 文件，列出所有可用效果供用户选择。
工作流程
- 识别效果 — 通过关键词匹配用户描述到模板，或展示选项列表
- 读取模板 — 加载匹配的
templates/<效果>/effect.html 和 README.md
- 探测目标框架 — 按
component-spec.md 第 1 节「框架探测」的顺序判断；判断不出或同项目多框架特征冲突时显式询问用户
- 转换组件 — 套用
component-spec.md 规范，把 HTML + README schema 转成目标框架组件，输出：完整组件代码、使用示例、安装命令（若有依赖）、落地提示
- 跟进调整 — 询问用户是否需要调整颜色、动画时长或数据以适配项目风格
模板加载
按需读取模板文件——不要一次把所有模板加载到上下文中。匹配到效果后，只读取该效果的 effect.html 和 README.md：
templates/<效果名>/effect.html — 可预览效果实现（纯 CSS + 原生 JS）
templates/<效果名>/README.md — 数据结构、可调参数、依赖
组件规范
转换成组件时，读取并遵循 component-spec.md 的全部规范约束（框架探测、Props 驱动、TS 类型、自包含样式、最小依赖、惯用写法、命名惯例、响应式 + 可访问性、转换输出清单）。何时读：工作流第 4 步「转换组件」前读取一次。
可用效果
数字滚动
- 目录:
templates/number-scroll/
- 效果: 数字从0递增到目标值，滚动到视口时触发动画。适合数据展示区。
- 依赖: 无
Hover光效
- 目录:
templates/hover-glow/
- 效果: 卡片悬停时出现扫光和径向光效，跟随鼠标移动。适合产品展示。
- 依赖: 无
手风琴
- 目录:
templates/accordion/
- 效果: 横向排列的面板悬停时平滑展开，显示详细内容。适合类别展示。
- 依赖: 无
定屏滚动
- 目录:
templates/fixed-scroll/
- 效果: 左侧固定，右侧随页面滚动。常用于企业文化页面。
- 依赖: gsap（含 ScrollTrigger）
文字打字
- 目录:
templates/typewriter/
- 效果: 文字逐字输入并循环展示多行文本，配光标闪烁。适合首页标语、终端风格界面。
- 依赖: 无
扩展新效果
新增动画效果模板时，读取并遵循 adding-templates.md 的 3 阶段确认流程（定义 → 实现 → 集成）。每阶段末必须向用户呈现产出并等待确认，不要跳过门控直接写文件。何时读：仅当用户请求添加一个 templates/ 下尚不存在的新效果时读取。
1---2name: animation-flow3description: 为网页生成可预览的动画组件，目标框架由 AI 探测项目决定。当用户需要把预置的网页动画效果落地到 React/Vue/Svelte/原生项目时使用此技能——即使没明说"动画"也要触发。覆盖五类效果：① 数字滚动/计数（数字从0跳到目标值、统计数字递增、数据成就展示）；② Hover光效（卡片扫光、鼠标跟随光晕、产品卡片悬停光线扫过）；③ 手风琴（横向折叠面板、悬停展开变大、类别展示）；④ 定屏滚动/粘性滚动（左固右滚、sticky 标题随滚动叙事、苹果官网式滚动布局）；⑤ 打字机/逐字动画（文字一个个蹦出、光标闪烁、终端式输出、标语轮播）。技能提供可预览 HTML 模板，按 component-spec.md 转换为符合规范的组件代码。不适用于：动画/动效调试（Framer Motion 卡顿、CSS 动画 bug）、路由切换过渡动画、loading spinner、数据图表、轮播图、SVG 描边、Three.js/3D 粒子，或纯后端/无前端任务。4---56# Animation Flow78为项目生成可配置的动画组件。每个效果以可预览的 HTML 模板形式提供，AI 探测目标项目框架后按 `component-spec.md` 规范把 HTML 转换为对应组件——React / Vue / Svelte / 原生等均支持。910## 工作原理1112技能将用户意图匹配到 `templates/` 目录下的动画模板。每个模板包含 README（关键词、框架中立数据 schema、可调参数）和 effect.html（可直接浏览器打开预览的完整实现）。技能读取匹配的模板，探测目标框架，按 `component-spec.md` 规范转换并输出。1314### 触发识别1516将用户请求匹配到以下模式（支持中英文）：1718| 效果 | 关键词 | 用户想要什么 |19|------|--------|-------------|20| 数字滚动 | number-scroll, 数字滚动, counter, counting, 数字递增, 数字动画, 数字计数, 统计动画, 数据滚动 | 滚动到视口时数字从0递增到目标值——数据展示区、成就统计 |21| Hover光效 | hover-glow, hover光效, 光效, 扫光, 卡片光效, 鼠标跟随光效, card glow, 产品卡片, 产品展示卡片, 鼠标悬停效果 | 鼠标悬停时卡片出现扫光和径向光效——产品展示 |22| 手风琴 | accordion, 手风琴, 折叠面板, 悬停展开, hover expand, 横向展开, 图片展开, 类别展示, interactive panels | 横向排列的面板悬停时展开显示详情——类别展示 |23| 定屏滚动 | fixed-scroll, 定屏滚动, sticky scroll, 固定滚动, 左固右滚, parallax scroll, 企业文化页面, 关于我们页面, sticky sidebar scroll | 左侧固定右侧随页面滚动——企业文化、关于我们页面 |24| 文字打字 | typewriter, 打字效果, 打字机, typing effect, text typing, 文字逐字显示, 逐字动画, 文字动画, 打字动画, 终端打字 | 文字逐字输入并循环展示多行——首页标语、代码展示 |2526如果用户请求没有匹配到任何关键词，读取所有 `templates/*/README.md` 文件，列出所有可用效果供用户选择。2728### 工作流程29301. **识别效果** — 通过关键词匹配用户描述到模板，或展示选项列表312. **读取模板** — 加载匹配的 `templates/<效果>/effect.html` 和 `README.md`323. **探测目标框架** — 按 `component-spec.md` 第 1 节「框架探测」的顺序判断；判断不出或同项目多框架特征冲突时显式询问用户334. **转换组件** — 套用 `component-spec.md` 规范，把 HTML + README schema 转成目标框架组件，输出：完整组件代码、使用示例、安装命令（若有依赖）、落地提示345. **跟进调整** — 询问用户是否需要调整颜色、动画时长或数据以适配项目风格3536## 模板加载3738按需读取模板文件——不要一次把所有模板加载到上下文中。匹配到效果后，只读取该效果的 `effect.html` 和 `README.md`：3940```41templates/<效果名>/effect.html — 可预览效果实现（纯 CSS + 原生 JS）42templates/<效果名>/README.md — 数据结构、可调参数、依赖43```4445## 组件规范4647转换成组件时，读取并遵循 `component-spec.md` 的全部规范约束（框架探测、Props 驱动、TS 类型、自包含样式、最小依赖、惯用写法、命名惯例、响应式 + 可访问性、转换输出清单）。**何时读**：工作流第 4 步「转换组件」前读取一次。4849## 可用效果5051### 数字滚动52- **目录**: `templates/number-scroll/`53- **效果**: 数字从0递增到目标值，滚动到视口时触发动画。适合数据展示区。54- **依赖**: 无5556### Hover光效57- **目录**: `templates/hover-glow/`58- **效果**: 卡片悬停时出现扫光和径向光效，跟随鼠标移动。适合产品展示。59- **依赖**: 无6061### 手风琴62- **目录**: `templates/accordion/`63- **效果**: 横向排列的面板悬停时平滑展开，显示详细内容。适合类别展示。64- **依赖**: 无6566### 定屏滚动67- **目录**: `templates/fixed-scroll/`68- **效果**: 左侧固定，右侧随页面滚动。常用于企业文化页面。69- **依赖**: gsap（含 ScrollTrigger）7071### 文字打字72- **目录**: `templates/typewriter/`73- **效果**: 文字逐字输入并循环展示多行文本，配光标闪烁。适合首页标语、终端风格界面。74- **依赖**: 无7576## 扩展新效果7778新增动画效果模板时，读取并遵循 `adding-templates.md` 的 3 阶段确认流程（定义 → 实现 → 集成）。每阶段末必须向用户呈现产出并等待确认，不要跳过门控直接写文件。**何时读**：仅当用户请求添加一个 `templates/` 下尚不存在的新效果时读取。
xiao0916