Motion Skill Kit — AI skill for Claude Code

motion-skill-kit

前端艺术动效代码片段库 + Agent Skill。让你（或 AI Agent）在生成前端页面时，快速检索并注入**经过验证的动效代码片段与艺术风格套件**，提升 AI 产出页面的视觉质感。

• 42 个片段：18 个 React .tsx（Next.js App Router 兼容）+ 24 个原生 HTML 单文件（双击即可预览）
• 9 大分类：背景 / 文字 / 光标 / 滚动 / 图片 / 转场 / 生成艺术 / 着色器 + 艺术风格（孟菲斯、蒸汽波、Y2K、新拟态、玻璃拟态、欧普、粗野主义、瑞士网格、印象派点彩、梵高星夜、浮世绘、包豪斯、波普——共 13 套风格 token + 组件 demo）
• 零第三方运行时依赖：全部用原生 CSS / Canvas / Web Animations API / IntersectionObserver / WebGL 实现（唯一例外：p5.js 流场走 CDN）
• 每个片段都带：顶部 CONFIG 参数对象（颜色/速度/幅度集中调参）、prefers-reduced-motion 降级、解释「为什么这么写」的中文注释

目录结构

motion-skill-kit/
├── SKILL.md              # Agent Skill 入口（触发条件 + 检索流程 + 注入规范）
├── skill.json            # skill 元数据（名称/描述/触发关键词）
├── README.md             # 本文件
├── patterns/             # 42 篇模式文档（Context / Approach / Example 三段式）
├── snippets/             # 42 个可运行片段（.tsx / .html，与文档一一对应）
├── templates/            # 起步模板：p5.js / Three.js / shader boilerplate
├── data/index.json       # 结构化索引（Agent 检索入口）
└── scripts/
    ├── build-patterns.ts # 把 snippet 代码嵌入 pattern 文档的 Example 段
    └── validate.ts       # 索引健康报告（语法/一致性/降级/孤儿文件检查）

快速开始（人类用法）

npm install        # 只装 tsx + typescript（校验脚本用，片段本身零依赖）
npm run validate   # 健康报告：字段完整 / TSX 语法 / 文档与代码一致 / 降级检查
npm run build:docs # 修改 snippet 后重新同步 pattern 文档的 Example 段

想直接看效果：Finder 里**双击任意 `snippets/**/*.html`**（如 `shaders/fragment-ripple.html`、`styles/vaporwave.html`、`styles/van-gogh-swirl.html`）即可在浏览器预览；`.tsx` 片段复制进任意 React 项目即用。

在 Claude Code 里安装

全局安装（所有会话可用）

# 把整个仓库复制到 Claude 的全局 skills 目录
cp -r motion-skill-kit ~/.claude/skills/motion-skill-kit

项目级安装（仅当前项目）

cp -r motion-skill-kit <你的项目>/.claude/skills/motion-skill-kit

安装后 Claude Code 会读取 `SKILL.md` 的 frontmatter（name + description）。当你的请求命中触发条件（炫酷页面 / 动效背景 / 生成艺术 / 光标特效……）时会自动加载该 skill；也可以显式引用：

用 motion-skill-kit 里的 aurora-background 做一个暗色科技感 Hero
参考 motion-skill-kit，给这个落地页加滚动叙事和磁吸按钮

在 Cursor 里安装

Cursor 没有 Anthropic 式的 skills 自动触发，用 **Project