AlphaXe-Hub

UI Interaction Kit — AI skill for Claude Code

AI community

Pick the right UI interaction before writing code - 61 个前端交互与动效词条（磁吸、液态形变、液态 Tab、3D 视差、手势转场、图表交互、加载动效），为 AI 编码助手提供选型规则与英文 Copyable prompt.

How to install UI Interaction Kit

This entry records only its repository, not the path inside it, so there is no exact command to give. Open AlphaXe-Hub/ui-interaction-kit and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What UI Interaction Kit does

Pick the right UI interaction before writing code - 61 个前端交互与动效词条（磁吸、液态形变、液态 Tab、3D 视差、手势转场、图表交互、加载动效），为 AI 编码助手提供选型规则与英文 Copyable prompt。

Alternatives in AI

Omnara — by Ishaan Sehgal - A command center for AI agents that syncs Claude Code sessions across terminal, web, and mo 2.6k ★
Gentle AI — Agent Skills Index — When working on this project, load the relevant skill(s) BEFORE writing any code 1.9k ★
Parchi — Your AI friend right in your browser 542 ★

README

UI Interaction Kit

**64 patterns** · **No dependencies** · **MIT License** · **CodeBuddy Skill**

让 AI 选对交互：8 种质感动效、7 种图表交互、10 种 App 模式、7 + 8 展开与折叠、7 种导航、7 种弹窗、7 种加载、3 种滚动驱动官网模式，共 64 个词条，每个词条都有可运行的 Demo。

**English version → [README_EN.md](./README_EN.md)** · **在线 Demo → https://alphaxe-hub.github.io/ui-interaction-kit/**

深色主题浅色主题

这是什么

把模糊的动效需求（"有质感""跟手""像液体""更高级"）翻译成 64 个已定义词条；让 AI 在动手前先选对一个，主交互一个就够。规则写进了 `SKILL.md`：**先理解任务 → 选一个主交互 → 再写代码**，描述任何交互必须写清触发、开始状态、变化过程、结束状态、取消状态。

一分钟安装

CodeBuddy（已实测）

# 用户级（跨项目可用）
cp -r ui-interaction-kit ~/.codebuddy/skills/

# 项目级（仅当前项目）
mkdir -p .codebuddy/skills && cp -r ui-interaction-kit .codebuddy/skills/

Claude Code / Cursor（SKILL.md 是通用 Agent Skills 格式，未实测）

# Claude Code
mkdir -p ~/.claude/skills && cp -r ui-interaction-kit ~/.claude/skills/

# Cursor（项目级）
mkdir -p .cursor/skills && cp -r ui-interaction-kit .cursor/skills/

触发词

当对话里出现下面这些词，AI 编码助手会自动调出本 Skill：

质感动效 · 有质感 · 更顺滑 · 跟手 · 像液体 · 磁吸 · 液态 · 回弹 · 视差 · 手势转场 · 动效优化 · 交互选型 · copyable prompt · 图表交互 · 展开动画 · 导航组件 · 弹窗 · 加载动效

61 个词条速览

01 质感动效 · Motion Texture（8）

英文	中文	一句话场景
Magnetic Attraction	磁吸效果	拖动元素靠近明确目标时提示落点
Velocity-driven Deformation	液态形变	卡片随拖动速度产生柔软拉伸
Layered Parallax	3D 视差	前景 / 中景 / 背景随输入产生深浅差异
Center-focus Scaling	中心聚焦	滚动浏览时突出当前居中项
Liquid Tab Indicator	液态 Tab	选中背景在标签间伸缩流动
Shared-element Image Expansion	图片展开	缩略图连续扩展到全屏图
Gesture-driven Transition	手势转场	拖动控制页面切换，可取消
Collision and Spring Response	碰撞回弹	自由移动元素彼此碰撞推挤

02 图表交互 · Chart Interaction（7）

英文	中文	一句话场景
Brush Selection	框选	选择特定时间或数据范围
Crosshair	十字线	对齐数据点并查看对应数值
Data Point Highlight	数据点高亮	强调某个特定或重要的数据点
Tooltip	数据提示框	查看某个数据点