你好,我是 Kagol,个人公众号:前端开源星球。
一个月前,有用户建议 TinyVue 出几个 Skills,方便 AI 编程。

必须安排上!
目前 TinyVue 组件库和 TinyRobot AI 对话组件均已支持 Agent Skills,你可以在支持 Skills 的 IDE(比如 VSCode、Cursor、Trae 等) 上配置和使用。
1 演示视频
先看下使用效果(以 Trae 为例)。
TinyVue Skills:让 AI 使用 TinyVue 组件生成前端页面:www.bilibili.com/video/BV1d6...
以 Trae 为例,给大家介绍如何安装和配置 TinyVue Skills。
2 安装 TinyVue Skills
在命令行终端中执行以下命令:
bash
npx skills add opentiny/agent-skills -g --skill tiny-vue-skill --agent trae

安装方式选择 Symlink (Recommended)
安装成功!

查看 Skills 是否安装成功:
npx skills list -g

3 开启 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:
bash
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/ |
联系我们
GitHub:github.com/opentiny/ag...(欢迎 Star ⭐)
TinyVue 官网:opentiny.design/tiny-vue
小助手微信:opentiny-official
公众号:OpenTiny