| name | vue-frontend-dev |
| description | Use for implementing or repairing the Vue frontend of a web app with Vue 3, Vite, vue-router, Pinia, vue-i18n, Tailwind CSS v4. |
Vue Frontend Dev
在当前任务是“实现、重构或修复 Vue 前端”时使用这个 skill。
适用范围：
- 使用
Vue 3 构建前端页面和交互
- 使用
Vite 作为开发与构建入口
- 使用
vue-router 组织页面路由
- 使用
Pinia 管理前端状态
- 使用
vue-i18n 组织多语言文案
- 使用
Tailwind CSS v4 构建设计系统与页面样式
不适用范围：
- 后端 API、数据库、鉴权服务或 Ignis service 本身的实现
- 产品需求整理或前端设计文档撰写
- 纯设计讨论但不涉及实际前端开发
输出目标
根据已有需求和设计文档，实现可运行的 Vue 前端，并与已有后端能力对接。
默认输入来源：
- 产品需求：
.dev/prd_doc.md
- 前端设计：
.dev/frontend_design_doc.md
技术基线
默认技术栈如下，除非仓库已有明确约束且与之冲突：
Vue 3Vitevue-routerPiniavue-i18nTailwind CSS v4
工作流程
- 先读取
.dev/prd_doc.md，确认页面范围、用户流程、语言和平台约束。
- 再读取
.dev/frontend_design_doc.md，把设计说明转为实际页面结构、组件层级和样式实现。
- 盘点当前仓库已有前端结构，优先延续已有目录、命名和工程约定。
- 与后端实际能力对接，不要凭空假设 API 形状；不明确时从现有代码或已生成服务中确认。
- 构建并验证前端可运行，必要时修复构建或路由问题。
工作规则
- 把
.dev/prd_doc.md 当作“产品边界”的事实来源。
- 把
.dev/frontend_design_doc.md 当作“页面和交互细节”的事实来源。
- 页面实现优先还原设计中的布局、层级、状态、最少文案和交互反馈。
- 优先建立清晰的页面级结构，而不是过早抽象复杂组件体系。
- 多语言文案统一走
vue-i18n，不要把用户可见文本散落在页面里。
- 页面导航和受保护路由统一通过
vue-router 组织。
- 前端共享状态统一通过
Pinia 管理，不要到处堆局部全局变量。
- 样式统一使用
Tailwind CSS v4；避免内联样式和分散的临时视觉规则。
- 如果需求包含登录态、用户资料或会话信息，前端以真实登录流为准，不自行发明另一套认证入口。
实现重点
路由
- 为每个核心页面建立明确路由。
- 区分公开页面、登录后页面和错误页 / 兜底页。
- 若设计文档包含详情页、结果页、空状态页或引导页，需要在路由层体现出来。
状态
- 把会话、用户信息、核心业务状态、全局 UI 状态放入清晰的 Pinia store。
- 不要让页面之间通过隐式副作用共享数据。
国际化
- 默认把主要导航、按钮、标题、状态提示纳入
vue-i18n。
- 若需求明确为单语言，仍保持结构可扩展，不要把文案写死到难以迁移。
样式与布局
- 以设计文档定义的颜色、圆角、阴影、间距和信息层级为准。
- 优先建立页面壳层、内容区、关键卡片和交互控件的稳定视觉规则。
- 不要把页面做成通用后台模板观感，除非需求本身就是后台系统。
质量标准
- 页面、路由、状态和样式实现与
.dev/prd_doc.md、.dev/frontend_design_doc.md 一致
- 前端技术栈符合本 skill 的基线或仓库既有约束
- 文案组织清晰，可见文本没有无序散落
- 至少完成一次构建或等价验证；如果无法验证，需要明确指出阻塞点
