背景
逛 X 和 Github 的时候，经常会刷到一些很有意思的前端插件或组件，但它们大部分都是用 React 写的，毕竟 React 在全球的市占率还是远远高于 Vue 的。
但看到了就会一直心痒痒，总会想着如果能在我的 Vue 项目里也用上就好了。
换在以前，简单的我还能照着 React 源码实现手撸一份 Vue 的，但越来越多小而美的组件，背后的代码量不一定就很少。而且它也有可能是某个组件合集内的其中一个，并不是一个独立组件，这就会牵扯到 shared utils、样式入口、导出结构等等情况。大大增加了我这个只会一点 React 三脚猫功夫的 Vue 开发者。
于是，我决定写一个 skill ，让它能帮我将这些 React 组件，直接 1:1 复刻成 Vue 的。
为什么要用它？
直接让 AI 开干不行么？一定要用这个 skill 么？当然可以，如果是一个代码量很少的 React 组件，你完全可以直接将整个代码丢给 AI ，让 AI 直接写。
但下面这些场景，我更建议你使用这个 skill ：
1. 已经有明确的“参考实现”
这是最典型的情况，比如我在 GitHub 上看到了一个不错的组件，或者已经锁定了某个包、某个子目录，甚至只是某个 demo 页面。则可以直接将链接地址发给这个 skill ，接下来就是等待并验收。
我并不是从零想交互，而是已经有一个清晰的参考物，希望 Vue 版本尽量接近它的行为和体验。
2. 有些组件简约但不简单
很多组件表面上看起来不复杂，但想要复刻，背后的逻辑却是一层套一层：焦点管理、键盘交互、受控与非受控状态、浮层定位、portal、隐藏输入、事件抛出方式、组合式 API 的组织方式。这些东西很多只靠鼠标点点前端的UI界面是不一定能看出来的。
但如果使用这个 skill，它会把 README、示例、测试、源码、包导出这些材料一起当作“行为说明书”来看，完整复刻每一处逻辑，确保高还原度。
3. 迁移的是一个“小包”
还有一个场景就是把某个 React 小型前端库迁到 Vue，这时候就不只是重新实现几个 .tsx 文件了。比如一个带 Root、Trigger、Content、Item 这种结构的 headless 组件族，或者一个带若干 helper、样式入口和包级导出的轻量插件。
这种场景下，真正难的不是把组件渲染出来，而是保留它原来的使用方式和工程组织。
4. 不确定能不能实现一份 Vue 的版本
有些 React 组件它本身也就是个包装层，核心实现可能是引入了某个三方依赖，这时候我不确定三方依赖是否支持 Vue ，如果不支持，Vue 生态又是否有同类型的平替。再或者有些依赖本身就没必要保留，局部重写反而能让代码更轻量。
这时候这个 skill 就不是简单进行复刻了，它会先收集完整的信息，分析复刻难度，最后采用最合适的方案进行。
如何使用它？
安装：
npx skills add hooray/skills --skill='replica-to-vue' -g
然后在 Agent 里把链接丢给它就行，就像这样：
/replica-to-vue https://github.com/owner/repo 将这个仓库，实现一份适用于当前项目的 Vue 组件
实战案例
案例一：sileo
这是一个前阵子在 X 上算是比较火的 Toast 通知组件，这是它原本的样子：
而这是通过 skill 复刻后的样子：
案例二：Dice UI 里的 Mention 组件
这是一个在大组件库中的一个"提及"功能小组件，功能看起来不复杂，但因为并不是独立组件，涉及到一些组件库内部共享的包依赖，所以要单独复刻其中这一个组件，场景会更复杂。
这是它原本的样子：
而这是通过 skill 复刻后的样子：
甚至通过几轮简单沟通，还实现了自定义插槽，比原本组件功能更强大。
最后
写这个 skill 不仅仅是为了追求语法层面的转换效率，而是考虑在面对一个已经存在的优秀参考实现时，能更稳地把它带进 Vue 3 的世界里。
什么该保留，什么该替换，什么时候该承认边界，这些判断本身，才是这个 skill 真正重要的部分。
