Aitishiku.com- 📌Skill基础信息
- Skill名称：n-rate（Naive UI评分组件）
- 来源：社区第三方（作者jiaiyan）
- 运行宿主：仅限基于Naive UI框架的Vue.js项目
- 核心定位：提供高度可定制的评分组件，支持半星评分、自定义图标和颜色，适用于产品评价、用户反馈收集等场景。
- 🧩内部核心组成
- Vue组件：核心为
<n-rate>单文件组件 - 主要功能模块：
| 功能 | 实现方式 |
|---|---|
| 基础评分 | v-model双向绑定数值 |
| 半星评分 | allow-half属性 |
| 自定义图标 | 通过default插槽传入<n-icon> |
| 颜色/尺寸定制 | color/size属性 |
| 只读模式 | readonly属性 |
- 🛠安装与启用方式
- 前置依赖：
- Vue 3.x
- Naive UI 2.x+
- 安装命令：
skills install --user jiaiyan/naive-ui-skills - 引入方式：通过Naive UI标准组件导入机制
- 📋标准工作流
- 用户在UI界面与评分组件交互（点击/悬停）
- 组件实时计算评分值（含半星精度处理）
- 通过
v-model同步数值到父组件 - 可选触发
on-update:value回调事件 - 表单场景下可结合
<n-form>进行验证提交
- ⚠️关键限制、缺陷、注意事项
- 平台限制：仅支持Vue 3技术栈，不兼容React/Angular
- 性能影响：动态图标渲染可能增加DOM复杂度
- 已知问题：
- 自定义图标时需手动处理高亮状态逻辑
- 深色模式需要额外样式适配
- 生产建议：适合中小型项目，超大规模列表需做虚拟滚动优化
- ✅适用场景 & ❌不适合场景
- 推荐场景：
- 电商产品评价系统
- SaaS用户满意度调查
- 内容质量评分展示（如文章/视频）
- 不推荐场景：
- 需要复杂动画交互的评分场景
- 非Vue技术栈项目
- 超高频次渲染的仪表盘（建议改用Canvas方案）
如何安装
skills install --user jiaiyan/naive-ui-skills通用安装教程：在哪里输入上面的命令
上面的命令本质是在「终端 / 命令行」中调用技能管理器，把该 Skill 下载并注册到你的 AI 工具。各主流工具打开终端的位置不同，按下面操作即可：
- 打开工具自带的终端面板，或系统终端（macOS「终端」、Windows「PowerShell」、Linux「Terminal」）。
- 把上面的安装命令复制进去，回车运行，等待下载与注册完成。
- 重启或重新加载 AI 工具，让新安装的 Skill 被识别。
- 新建对话并触发：直接描述用途，或通过该工具的技能 / 斜杠菜单选中此 Skill。
Claude 桌面版（macOS / Windows）
桌面版没有内置命令行，Skill 需通过 Claude Code CLI 安装。打开系统终端，先执行 npm install -g @anthropic-ai/claude-code，再运行上面的安装命令；完成后完全退出并重新打开 Claude。
Claude Code（终端 CLI）
直接在项目目录的终端里运行上面的命令即可。也可先输入 claude 启动交互界面，再在对话中引用该 Skill（/ 斜杠菜单或直接描述用途）。
VS Code（含 GitHub Copilot）
打开终端面板：菜单「终端 → 新建终端」，或快捷键 Ctrl+`（macOS 为 ⌃+`）。在终端里运行上面的命令；装完后执行「重新加载窗口」（Ctrl+Shift+P → Reload Window），让 Copilot 等扩展识别新技能。
Cursor
底部「终端」面板（Ctrl+`）即是内置终端。粘贴运行上面的命令，完成后在命令面板执行「Reload Window」刷新，再开始对话。
Windsurf
底部「终端」面板运行命令；也可直接使用其内置 Agent 终端，在对话侧执行安装。
其他工具（ChatGPT、本地脚本等）
不支持本地终端的产品，可先在本机终端完成安装，再在对话中描述该 Skill 的能力让其调用；不同工具的命令格式请以其官方文档为准。
风险提示
自动扫描未发现高危命令、隐私抓取或数据外传行为。仍建议安装前快速浏览仓库代码。