选工具与控制依赖

来源：pick-ui-library/SKILL.md。这是课程作者的常用工具选择法，不是当前市场排名或所有库的完整能力表。

9.1 四个前置动作

先读 package.json、锁文件和现有组件；按真实任务选，不按用户随口提到的库名选；默认推荐一个合适方案；超出课程涉及范围要明确说明。新增第二套动画/原语系统前，先看现有能力能否解决。

9.2 动画选型表

CSS 与 Motion 可以共存；不是必须把全站统一成一种驱动。原生并不天然更快，库也不天然掉帧，要按实际执行路径测量。

9.3 无样式原语解决的是行为

菜单、Select、Dialog、Tooltip、Tabs、Popover 除了画面还有键盘顺序、焦点、ARIA、嵌套弹层、Portal 与关闭行为。课程偏好 Radix，也列 Base UI、React Aria；Toast 列 Sonner；Sheet 列 Vaul。项目已有成熟原语时优先沿用。

视觉轻量不代表行为轻量。自写十行 dropdown 只是演示，不等于完整可访问组件。业务场景确有差异时可以自建，但要明确要承担哪些边界。

9.4 Motion、React Spring、GSAP 的取舍

Motion 适合 React 声明式状态、布局、presence 与手势；复杂场景的“魔法”意味着需要理解测量和生命周期。React Spring 适合深入物理控制；是否更小、更易用要按入口与项目比较。GSAP 强在时间线与跨框架编排；不能把原文“没有 spring”“最容易”“免费”等历史比较当永远有效事实，当前授权、插件与能力以官方和项目需求核对。

不要因为教材未使用某库，就推断那个库无法完成任务；这里只是控制学习范围和选型成本。

9.5 工具型依赖

React-use-measure 封装尺寸观察；usehooks-ts 的 outside-click 类 hook 封装事件；clsx 组合 class；Tailwind 提供能力查询/状态工具。原文另提 torph 字符变形、DialKit 实时调参，属于可选探索，不是学习必装清单。

能用现有 ResizeObserver 封装完成测量时，不一定新增依赖；但自己维护清理、SSR、边界的时间也是成本。不要用一个 package 的下载体积替代整个方案成本分析。

9.6 依赖决策记录

任务：多步骤弹层，支持动态高度和退出
现有：项目已使用 Motion 与现成 Dialog 原语
方案：原语负责语义/焦点，Motion 负责内容和高度过渡
收益：复用依赖与模式
成本：测量、层级和快速反向操作需要验证
回退：reduce 下静态布局与短淡入

记录版本、入口、真实 bundle 影响、维护责任与回退。不能照抄“换库只用五分钟”或“某库不维护也没关系”，要实际检查迁移成本与风险。

Skill 的实现方式

这是限制候选范围的路由器：先侦察项目，再用任务→工具→理由映射，最后拦截重复依赖和不必要自建。它和 animate 的区别是前者选工具，后者定运动规则。

自测与答案

1. 用户说“用 Motion 加 toast”，要直接造通知系统吗？先找已有 Toast 原语及项目需求。

2. 只判断某元素入视口，要新装 Motion 吗？通常 IntersectionObserver 已足够。

3. 新库更流行，应该迁移吗？先确认解决什么具体问题，再算迁移与维护成本。