TinyVue skills使用指南
本文由体验技术团队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-skill：
npx skills add opentiny/agent-skills -g --skill tiny-vue-skill --agent cursor| Agent | --agent | 项目内路径 | 全局路径 |
|---|---|---|---|
| Amp | amp | .agents/skills/ | ~/.config/agents/skills/ |
| Antigravity | antigravity | .agent/skills/ | ~/.gemini/antigravity/skills/ |
| Claude Code | claude-code | .claude/skills/ | ~/.claude/skills/ |
| Clawdbot | clawdbot | skills/ | ~/.clawdbot/skills/ |
| Codex | codex | .codex/skills/ | ~/.codex/skills/ |
| Cursor | cursor | .cursor/skills/ | ~/.cursor/skills/ |
| Droid | droid | .factory/skills/ | ~/.factory/skills/ |
| Gemini CLI | gemini-cli | .gemini/skills/ | ~/.gemini/skills/ |
| GitHub Copilot | github-copilot | .github/skills/ | ~/.copilot/skills/ |
| Goose | goose | .goose/skills/ | ~/.config/goose/skills/ |
| Kilo Code | kilo | .kilocode/skills/ | ~/.kilocode/skills/ |
| Kiro CLI | kiro-cli | .kiro/skills/ | ~/.kiro/skills/ |
| OpenCode | opencode | .opencode/skills/ | ~/.config/opencode/skills/ |
| Roo Code | roo | .roo/skills/ | ~/.roo/skills/ |
| Trae | trae | .trae/skills/ | ~/.trae/skills/ |
| Windsurf | windsurf | .windsurf/skills/ | ~/.codeium/windsurf/skills/ |
关于OpenTiny
欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～
OpenTiny 官网：opentiny.design
OpenTiny 代码仓库：github.com/opentiny
TinyVue skill源码：https://github.com/opentiny/agent-skills （欢迎 Star ⭐）
欢迎进入代码仓库 Star🌟TinyVue、TinyEngine、TinyPro、TinyNG、TinyCLI、TinyEditor 如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献~