1、安装skills
这里我们使用的编辑器是cursor，首先我们需要创建一个react项目，
npm create vite@latest
根据提示完成项目创建后，我们可以切换到项目根目录下执行以下命令：
npx skills add VisActor/VChart
npm install @visactor/react-vchart @visactor/vchart
然后我们会看到这样的内容：
之前在使用这个cli工具的时候，是有cursor选项的，但是在本次使用中，发现没有cursor的选项了，所以我采用直接选择任意一个选择，先将skill下载下来。
这里我选择了第一项，后面一路回车确定即可。 当看到这样的结果时，说明你的skill已经安装成功了：
此时你可以在你的项目目录中看到多出了一个.agents的目录，目前在我测试下来，cursor的agent / 命令只能识别到.cursor中的skill，所以我们需要把.agents 重命名为 .cursor
此时我们再去对话框里 输入 / 命令即可看到：
此时说明你的Vchart skill 已经可以使用了，此时我们来使用一下它：
此时可以看到，ai已经正确的读取了skill，并根据skill的内容帮助我们开始开发图表。
因为我们的命令比较笼统，所以ai并没有帮我们应用在react应用中，后面小编让ai重新把内容应用在app.tsx组件中。可以看到效果如图：
尽管使用的是auto模型，但是效果也是非常可以的，但是此时饼图的交互上缺失悬浮突出的效果，我们让ai给他修改一下，
此时可以看到，ai正确的理解了我们意图，并做出了正确的调整。
当然，在实际的业务开发过程中，我们的需求都比较具体，这里我以标签过长为例：
可以看到 原本有5个类别，但是因为其中一个分类的名字过长，导致图表隐藏了其中两个分类的名称，此时让我们调用一下skill来解决这个问题。
可以看到，ai正确的修复了这个问题。
至此，Vchart的skill的使用就完成了。
