Agent Skills
返回列表
YS-Agent 前端工程规范

YS-Agent 前端工程规范

开发编程 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_fbf2a1f5/ys-agent。

技能介绍

要解决的问题

ys-agent 的 frontend/ 迭代中，容易出现组件直接 import axios、样式写死十六进制、路由菜单手写、接口缺类型、Element Plus 图标静默不渲染、文案硬编码中文等问题。这些细节单看都不大，但会让多轮协作、mock 联调和后续维护变得脆弱。

技能如何工作

该 skill 把 docs/frontend-engineering-plan.md 的为什么落成可执行的怎么做。它先要求按任务选择 references/workflows.md 中的 W1 到 W10 工作流，再执行定位、类型先行、模板复用和自检。

核心约束包括：

  • 目录即契约：新增文件先查 references/conventions.md。
  • API 分层：视图通过 Pinia store 调 src/api/modules/，axios 只存在于 src/api/client.ts。
  • 类型先行：接口、Props、Emits、store state 先定义类型。
  • i18n 强制：用户可见文本走 $t('key')，禁止硬编码中英文。
  • Mock 优先：接口对接前补 MSW handler，保证 npm run dev:mock 可跑通。

交付前还会检查模板占位符、console.log、TODO、样式变量、图标引用和国际化覆盖。

适用边界

它只管辖 frontend/、前端文档与模板；不处理 Java 后端、CLI、MCP server、新增重量级依赖或核心架构调整。遇到这些范围外改动，应停下确认。

使用场景

  • 在 ys-agent 的 frontend/src 下新增 Skill/MCP 广场页面，需要按路由 meta、i18n、mock handler 和目录契约完成页面与菜单联动。
  • 对接后端接口前，需要按 store、api、service 分层新增 API 模块、类型和 MSW mock，并保证组件不直接调用 axios。
  • 调整 Element Plus 主题、图标或样式时，需要按 SCSS 变量、element-overrides 和图标导入规则修改，避免魔法色和图标不渲染。
  • 重构旧页面或抽取公共组件时，需要复用模板、清理占位符、console.log 和硬编码文案，并按 i18n 自检后交付。

适合人员

  • 接手 ys-agent frontend 迭代的 Vue 前端工程师，需要按统一目录、API、Pinia 和 i18n 规则改代码。
  • 负责 S13 广场、详情或 Playground 页面的开发者，需要把菜单、路由、翻译和 mock 一次性做对。
  • 做前端代码评审的人，需要按 9 条铁律和反模式检查 PR 是否违反 axios、类型、样式或文案约束。
  • 使用 agent 代写前端代码的工程负责人，需要约束 agent 先选 workflow、复用模板并完成交付自检。