vue-frontend-dev

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 3
• Vite
• vue-router
• Pinia
• vue-i18n
• Tailwind CSS v4

工作流程

1. 先读取 .dev/prd_doc.md，确认页面范围、用户流程、语言和平台约束。
2. 再读取 .dev/frontend_design_doc.md，把设计说明转为实际页面结构、组件层级和样式实现。
3. 盘点当前仓库已有前端结构，优先延续已有目录、命名和工程约定。
4. 与后端实际能力对接，不要凭空假设 API 形状；不明确时从现有代码或已生成服务中确认。
5. 构建并验证前端可运行，必要时修复构建或路由问题。

工作规则

• 把 .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 的基线或仓库既有约束
• 文案组织清晰，可见文本没有无序散落
• 至少完成一次构建或等价验证；如果无法验证，需要明确指出阻塞点