前言¶
在 ys-agent 仓库里动 frontend/ 时，常见痛点不是「写不出功能」，而是「写出来了但放错目录、命名和现有代码对不上、又造了一个差不多的组件」。多个 Agent 轮流改同一块前端时，这种问题会更快堆起来：路由、Pinia、API 封装、Element Plus 用法各有一套，review 成本上升，合并也容易冲突。
下面介绍 SkillHub 上的 前端开发（@user_fbf2a1f5/ys-agent）。它的定位是：在动手改 frontend/ 之前，先让 Agent 按同一套工程规范执行，减少风格漂移和重复造轮子。
这是什么¶
前端开发 是面向 ys-agent 项目 frontend/ 目录的「工程规范守门」Skill，采用社区常见的 SKILL.md 格式，由发布者 user_fbf2a1f5 维护，当前版本 1.0.0，分类为 dev-programming，来源标注为 community。SkillHub 页面显示 requires_api_key=false，安装与调用不依赖额外 API Key。
官方简介的核心要求可以概括为：凡与 ys-agent 前端相关的任务，必须先调用本 Skill，再按统一规范实施——而不是凭 Agent 的默认习惯直接改文件。
核心功能¶
根据 SkillHub 与 API 页面上的简介，本 Skill 覆盖（并在规范层面约束）的前端工作包括但不限于：
- 页面与组件：新增页面、新增组件、写公共组件、迁移 demo 代码、调整布局与样式。
- 数据与状态：新增 API 封装、对接后端接口、新增 Pinia store、写 mock。
- 路由与权限：改路由、加权限。
- UI 与交互：表单、弹窗、表格、搜索过滤、数据可视化；Element Plus 用法、主题、响应式。
- 工程文件：在
frontend/下编辑.vue、.ts、.scss、.css，以及vite.config、tsconfig、package.json等配置。 - 质量方向：性能优化等前端迭代事项。
强调点在于 放置位置、命名、引入方式 要与项目约定一致。即使任务很小（例如「加个按钮」「改个文案」），只要发生在 frontend/ 下，官方说明也要求先读本 Skill 再动手，避免「小改动」累积成目录混乱。
Skill 正文中的具体目录树、命名规则和代码模板需以安装后的 SKILL.md 为准；本文仅复述已公开的职责范围，不展开未在官方页面出现的内部条文。
安装与启用¶
SkillHub 官方给出的安装方式，是让 AI 按安装文档拉取指定坐标：
请根据 https://skillhub.cn/install/skillhub.md，安装 `@user_fbf2a1f5/ys-agent`。
若你本地已具备 skillhub CLI，可按 SkillHub 安装文档第三节操作：安装时必须用 --dir 指向当前 Agent 实际使用的 skills 目录，否则默认装到 ./skills/ 可能不会被识别。
- 检查 CLI（文档建议先确认是否已安装）：
command -v skillhub && skillhub --version
- 未安装时安装 CLI（完整安装或仅 CLI，以官方脚本为准）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
- 安装本 Skill（将
<skills 目录>换成当前环境路径）：
skillhub install @user_fbf2a1f5/ys-agent --dir <skills 目录>
常见 Agent 的 skills 目录（摘自 SkillHub 安装文档，以你本机实际配置为准）：
| 环境 | 典型 skills 目录 |
|---|---|
| Cursor | ~/.cursor/skills/ |
| Claude Code | ~/.claude/skills/ |
| Codex | ~/.codex/skills/ 或项目下的 .agents/skills/ |
安装完成后，在 Cursor、Claude Code、Codex CLI 等支持 Skills 的客户端中，需保证任务会加载该目录下的 Skill；具体启用方式以各客户端当前文档为准。
典型用法¶
本 Skill 的使用逻辑在官方简介里写得很直接：接到 ys-agent 前端相关任务 → 先调用本 Skill → 再按规范改代码。
可复现的协作提示示例（发给 Agent）：
我要在 ys-agent 的 frontend/ 里新增一个带表格和搜索的页面，请先调用 @user_fbf2a1f5/ys-agent（前端开发）Skill，确认页面、路由、API 和组件的放置位置与命名，再开始实现。
更小粒度的改动同样适用：
只在 frontend/ 改一个按钮文案，请先读前端开发 Skill，确认改动文件与引入方式正确后再编辑。
经过上面的步骤，Agent 应先阅读 Skill 内规范，再输出符合项目结构的修改，而不是在仓库里随意新建路径或重复封装已有能力。
适用场景与注意¶
适合谁
- 在 ys-agent 仓库中维护
frontend/的开发者，或委托 Agent 做前端迭代的团队。 - 需要 多 Agent、多会话 连续改同一前端工程，且希望目录与风格保持一致的场景。
使用注意
- 范围绑定项目：规范针对 ys-agent 的
frontend/，不自动适用于其他仓库；换项目应使用对应项目的守门 Skill（若有）。 - 先 Skill 后代码：官方明确要求「必须先调用」；跳过 Skill 直接改文件，与发布意图相反，也容易重现目录与风格问题。
- 安装路径：
skillhub install的--dir必须对准当前 Agent 的 skills 目录，否则 Skill 可能未被加载。 - 数据以 SkillHub 为准：页面展示的评分为 100000，下载 6692（抓取时安装数为 0，仅表示统计口径，不代表不可用）；若与第三方转载数据不一致，以 SkillHub 技能页 为准。
结尾¶
前端开发（@user_fbf2a1f5/ys-agent）解决的是 ys-agent 前端在多 Agent 协作下的 规范一致性问题：把「放哪、叫什么、怎么引」收敛到同一套 Skill，再动 .vue、路由、Pinia 或 Element Plus。需要安装或查看说明时，可打开 SkillHub 技能页或 API 入口：
- SkillHub：https://www.skillhub.cn/skills/user_fbf2a1f5/ys-agent
- 官方地址：https://api.skillhub.cn/user_fbf2a1f5/ys-agent
