SkillsAdd

xiao0916/luckyxp-wf · Archived

animation-flow

为网页生成可预览的动画组件，目标框架由 AI 探测项目决定。当用户需要把预置的网页动画效果落地到 React/Vue/Svelte/原生项目时使用此技能——即使没明说"动画"也要触发。覆盖五类效果：① 数字滚动/计数（数字从0跳到目标值、统计数字递增、数据成就展示）；② Hover?

First seen Jun 26, 2026

Installation

$ npx skills add xiao0916/luckyxp-wf --skill animation-flow
View on skills.sh ↗ GitHub repository ↗
Feature your product here Skill page unit · reach builders installing agent skills View pricing →

Summary

为网页生成可预览的动画组件，目标框架由 AI 探测项目决定。当用户需要把预置的网页动画效果落地到 React/Vue/Svelte/原生项目时使用此技能——即使没明说"动画"也要触发。覆盖五类效果：① 数字滚动/计数（数字从0跳到目标值、统计数字递增、数据成就展示）；②…

Stronger alternatives

This repository is archived — consider an actively maintained alternative.

dev-workflow Same source
xiao0916/luckyxp-wf

结构化开发工作流，强制按步骤执行：需求文档 → 设计稿 → 需求拆解 → 技术方案（提供多个方案供用户选…

7 installs
toolchain-issue-recovery Same source
xiao0916/luckyxp-wf

当开发、测试、文档生成、技能创建或修改、文件编辑、浏览器操作、截图、构建、校验、脚本运行、Power…

5 installs
dwf-requirement Same source
xiao0916/luckyxp-wf

当用户需要把想法、需求说明、产品需求、项目背景、Markdown、纯文本或本地文档整理成 DWF 工作流风格…

5 installs
dwf-orchestrator Same source
xiao0916/luckyxp-wf

Use when 用户要启动、继续、恢复或重启 DWF 开发工作流，或需要编排 .dwf/state.json、specs 队列、…

5 installs

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

vercel-react-best-practices Same topic
vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill shoul…

3.7K installs
supabase Same topic
supabase/agent-skills

Use when doing ANY task involving Supabase. Triggers: Supabase products (Database, Auth, Edge F…

1.7K installs
vercel-react-native-skills Same topic
vercel-labs/agent-skills

React Native and Expo best practices for building performant mobile apps. Use when building Rea…

1.3K installs
vercel-react-view-transitions Same topic
vercel-labs/agent-skills

Guide for implementing smooth, native-feeling animations using React's View Transition API (`<V…

1.4K installs
web-artifacts-builder Same topic
anthropics/skills

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern fr…

324 installs
stripe-best-practices Same topic
stripe/ai

>- Guides Stripe integration decisions across API selection (Checkout Sessions vs PaymentIntent…

370 installs

Also in this package

Other skills from xiao0916/luckyxp-wf.

npx skills add xiao0916/luckyxp-wf
dev-workflow 7 toolchain-issue-recovery 5 dwf-requirement 5 dwf-orchestrator 5 dwf-development 5 dwf-design 5 dwf-coding 5

Browse all from xiao0916/luckyxp-wf

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Default branch main
Open issues 0
Status Archived

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 5,739 B
  • docs SUMMARY.md 1,065 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 7 installs

SKILL.md

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 文件，列出所有可用效果供用户选择。

工作流程

  1. 识别效果 — 通过关键词匹配用户描述到模板，或展示选项列表
  2. 读取模板 — 加载匹配的 templates/<效果>/effect.html 和 README.md
  3. 探测目标框架 — 按 component-spec.md 第 1 节「框架探测」的顺序判断；判断不出或同项目多框架特征冲突时显式询问用户
  4. 转换组件 — 套用 component-spec.md 规范，把 HTML + README schema 转成目标框架组件，输出：完整组件代码、使用示例、安装命令（若有依赖）、落地提示
  5. 跟进调整 — 询问用户是否需要调整颜色、动画时长或数据以适配项目风格

模板加载

按需读取模板文件——不要一次把所有模板加载到上下文中。匹配到效果后，只读取该效果的 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/ 下尚不存在的新效果时读取。