@mahmudtjcu/frontend-agent-skill

这是一个偏 Vue 方向的前端 AI Agent Skill，适合在日常前端开发中让 AI 更懂你的工作方式：先读项目、尊重现有技术栈和代码风格，再去实现、修改、评审和打磨页面。

它不是单纯提醒 AI “写 Vue 代码”，而是把前端开发里更容易被忽略的部分也纳入流程，比如状态设计、表单校验、异步请求、响应式布局、可访问性、视觉一致性、测试和最终验证。

安装

npm install @mahmudtjcu/frontend-agent-skill

怎么使用

安装后，包里会包含这个 skill 目录：

frontend-agent-skill/
  SKILL.md
  agents/openai.yaml
  references/

如果你的 AI Agent 支持本地 skill，可以把 node_modules/@mahmudtjcu/frontend-agent-skill/frontend-agent-skill 这个目录复制或引用到对应的 skills 目录中使用。

适合什么场景

• 做 Vue 管理后台、业务页面、仪表盘和工具型页面
• 修改已有 Vue 组件、页面、表单、路由和状态逻辑
• 使用 Vue 3、Vite、Nuxt、TypeScript、Pinia、Vue Router、Tailwind 等技术栈
• 优化移动端布局、交互状态、加载状态、空状态和错误状态
• 做前端代码 review，重点检查用户可见 bug、Vue 响应式问题、可访问性和测试缺口
• 把一个页面从“能跑”继续打磨到“真实可用、容易维护”

Skill 内容

核心文件是 frontend-agent-skill/SKILL.md，里面定义了 Agent 的前端工作方式。references/ 目录里还有两份按需读取的参考内容：

• vue-patterns.md：Vue 组件结构、响应式、Composable、Pinia、Router、表单、异步数据和测试建议
• frontend-quality-checklist.md：产品行为、可访问性、响应式布局、视觉一致性和代码健康检查清单

默认倾向

这个 skill 默认偏向 Vue 3 Composition API 和 <script setup>，但不会强行覆盖项目现状。如果你的项目已经使用 Options API、Nuxt 约定、已有组件库或特定目录结构，Agent 应优先跟随当前项目的写法。