本文由体验技术团队Kagol原创。一个月前有用户建议 TinyVue 出几个 Skills方便 AI 编程。必须安排上目前 TinyVue 组件库和 TinyRobot AI 对话组件均已支持 Agent Skills你可以在支持 Skills 的 IDE比如 VSCode、Cursor、Trae 等 上配置和使用。1 演示视频先看下使用效果以 Trae 为例。TinyVue Skills让 AI 使用 TinyVue 组件生成前端页面https://www.bilibili.com/video/BV1d6PNzNENw/以 Trae 为例给大家介绍如何安装和配置 TinyVue Skills。2 安装 TinyVue Skills在命令行终端中执行以下命令npx skills add opentiny/agent-skills -g --skill tiny-vue-skill --agent trae安装方式选择 Symlink (Recommended)安装成功查看 Skills 是否安装成功npx skills list -g3 开启 TinyVue Skills打开 Trae 的设置页面在左侧的【规则和技能】菜单中找到【技能】开启【tiny-vue-skill】这个技能即可。4 在 AI 对话框中使用 TinyVue Skills在 Trae 中打开 AI 侧栏输入以下内容使用TinyVue组件创建一个登录组件并集成到App.vue中AI 会去调用 tiny-vue-skill 技能根据其中的 SKILL.md 中的描述去查看对应的组件 API/Demo 文档然后使用适当的 TinyVue 组件搭建你需要的页面。这样比 AI 去海量互联网信息中寻找 TinyVue 的用法要准确得多而且消耗更少的 Token也不容易产生幻觉。如果你正在使用 TinyVue 组件库强烈推荐你配置上 tiny-vue-skill让 AI 辅助编码效率更高如果你用的是 VSCode Copilot、Cursor 等其他 IDE也没关系安装 TinyVue Skills 遵循类似的步骤只需要把命令中的--agent修改成对应的 IDE 即可以下是对应表格。比如在 Cursor 中安装 tiny-vue-skillnpx skills add opentiny/agent-skills -g --skill tiny-vue-skill --agent cursorAgent--agent项目内路径全局路径Ampamp.agents/skills/~/.config/agents/skills/Antigravityantigravity.agent/skills/~/.gemini/antigravity/skills/Claude Codeclaude-code.claude/skills/~/.claude/skills/Clawdbotclawdbotskills/~/.clawdbot/skills/Codexcodex.codex/skills/~/.codex/skills/Cursorcursor.cursor/skills/~/.cursor/skills/Droiddroid.factory/skills/~/.factory/skills/Gemini CLIgemini-cli.gemini/skills/~/.gemini/skills/GitHub Copilotgithub-copilot.github/skills/~/.copilot/skills/Goosegoose.goose/skills/~/.config/goose/skills/Kilo Codekilo.kilocode/skills/~/.kilocode/skills/Kiro CLIkiro-cli.kiro/skills/~/.kiro/skills/OpenCodeopencode.opencode/skills/~/.config/opencode/skills/Roo Coderoo.roo/skills/~/.roo/skills/Traetrae.trae/skills/~/.trae/skills/Windsurfwindsurf.windsurf/skills/~/.codeium/windsurf/skills/关于OpenTiny欢迎加入 OpenTiny 开源社区。添加微信小助手opentiny-official 一起参与交流前端技术OpenTiny 官网opentiny.designOpenTiny 代码仓库github.com/opentinyTinyVue skill源码https://github.com/opentiny/agent-skills 欢迎 Star ⭐欢迎进入代码仓库 StarTinyVue、TinyEngine、TinyPro、TinyNG、TinyCLI、TinyEditor 如果你也想要共建可以进入代码仓库找到 good first issue标签一起参与开源贡献~