工具集

shadcn/ui 官方技能：让 agent 借助 shadcn CLI 读取项目配置与组件文档，按规范添加、搜索、组合和修复组件，遵守样式、表单与无障碍规则，也能用预设初始化新项目。

GSAP 官方动画技能合集：教 agent 正确使用核心 API、时间轴、ScrollTrigger 与各类插件，涵盖 React/Vue/Svelte 集成和动画性能优化。GreenSock 官方维护，所有插件均免费。

用轻量 WebGL 库 cobe 在首页或关于页加入可旋转的地球，讲解画布按设备像素比设置尺寸、位置标记、旋转动画、窗口缩放后重建与销毁，可在 React/Next.js 中集成。

用 GSAP 编写或调试网页动画：补间、时间线与位置参数、缓动、错峰，以及 ScrollTrigger 的固定与滚动联动；说明优先动 transform、在 React 中用 gsap.context() 清理、图片加载后刷新等常见问题。

先通过提问了解设计范围、痛点、参考产品、品牌调性与约束，再从项目现有的 Tailwind 配置、CSS 变量或组件库主题中提取视觉语言，在临时路由里生成 5 个不同的界面方案并附带交互式反馈浮层，按反馈迭代后输出实现计划，结束或取消时清理所有临时文件。面向 Next.js、Vite 等 React 项目。

用 Remotion 在产品代码库里制作产品宣传片（落地页循环视频、发布片、演示片等），复用产品自己的设计系统、组件与文案语气：先访谈用户确定内容，再写分镜、按音乐节拍卡点、逐轮出静帧评审，最后渲染并校验成片。

给界面加功能性的微动效：悬停与按下反馈、开关、点赞按钮、提示条、抽屉、弹窗、列表增删与排序、共享元素过渡，规定 100–250ms 的时长、进入慢退出快的节奏与缓动曲线，只动 transform 与 opacity，并尊重减少动态效果设置。基于 Framer Motion（motion/react）与现代 CSS。

把 After Effects 导出的 Lottie 动画接入网页、iOS、Android 与 React Native：优先用 dotLottie 运行时，控制播放、片段与速度，做滚动或悬停驱动的交互，运行时换色，并附 AE 导出检查清单。

审查动画代码的时间函数选择：手势拖拽和可被打断的动画用弹簧，系统状态变化用缓动曲线，进度类用线性，打字等高频交互不加动画；同时检查弹簧参数与时长是否合理，按「文件:行号」列出问题。示例基于 Motion。

指导 agent 构建能在任意两个图标之间变形过渡的 SVG 图标组件：每个图标固定由三条线段组成，用不到的线段收缩到中心点，同组的旋转变体用弹簧动画转动，并遵守统一 viewBox、圆角线头、减弱动效偏好与 aria-hidden 等规则。示例基于 React 与 Motion。

修复相邻可交互元素之间的悬停与点击死区：图表柱、列表行、导航项、标签页等用 gap 或 margin 留白时，指针落在间隙里会失效或闪烁；改为让元素紧贴铺满各自的槽位，把视觉间距移到元素内部，附 React/Tailwind 示例。

把 Paper 设计稿（经 Paper MCP、Viewfinder 或导出的 JSX）实现为 React/Next.js 代码前先梳理层级、识别可复用组件；每个图标单独成组件，任意值收进 globals.css 令牌，优先复用 shadcn 组件，移植真实字体，图表按数据建模。

用 Remotion（React）制作产品发布、宣传与功能介绍视频：先问清产品、受众、时长、配音与发布平台等 9 个问题，提出 2–3 个视觉方向供选择，写出 storyboard.json 分镜后再编码，按需生成配音与补充素材。

Prototyper UI 组件库的动效规范：浮层、对话框、侧边面板的进出场类名，按压反馈的缩放比例，状态过渡，缓动令牌与选用决策，用于编写、审查或调试组件动画，并统一用 motion-reduce 处理减少动态效果。

Prototyper UI 组件库的使用指南：基于 @base-ui/react 与 Tailwind CSS v4，以复制源码的方式分发，采用 OKLCH 配色与 CVA 变体。说明安装依赖、令牌文件、组件选型与常用写法，并提醒它不是 Radix，用 render 属性代替 asChild。