Saas Frontend Dev

Vue SaaS Frontend 开发 Skill

设计规范：颜色/字体/间距/交互/视觉层级 → 参考 saas-design-system skill

何时使用

适用场景：

• Vue 3 组件开发（UI 组件、业务组件、布局组件）
• SaaS 管理后台页面（数据表格、表单、仪表盘）
• shadcn-vue 组件库使用
• 状态管理（TanStack Query、Pinia）

不适用：

• React 项目
• 纯 CSS/样式设计（用 saas-design-system skill）
• 后端 API 开发
• 移动端开发

前置条件

• 项目使用 Vue 3.5+
• 已安装 Node.js 18+

技术栈

开发决策流程

需求分析
    │
    ├─ 判断输出粒度
    │   ├── 单个组件 → Step 2 → components-guide.md
    │   ├── 完整页面 → Step 3 → page-patterns.md
    │   └── 多页面模块 → Step 1 (项目结构)
    │
    ├─ 判断页面类型
    │   ├── 数据表格 → ui-config.md#表格
    │   ├── 表单页 → ui-config.md#表单
    │   ├── 仪表盘 → page-patterns.md#仪表盘
    │   ├── 认证页 → page-patterns.md#认证
    │   └── 设置页 → page-patterns.md#设置
    │
    └─ 质量门控 → Step 5 检查清单

Step 1 — 项目结构

src/
├── components/
│   ├── ui/              # shadcn-vue 组件
│   ├── common/          # 通用业务组件
│   └── business/        # 领域组件
├── composables/         # 组合式函数
├── pages/               # 路由页面
├── stores/              # Pinia stores
├── services/            # API 层
└── types/               # TypeScript 类型

详细结构 → references/architecture.md

Step 2 — 组件开发

SFC 结构顺序

1. 外部 import
2. Props / Emits 定义
3. Composables / Stores
4. 响应式状态
5. Computed
6. 方法
7. 生命周期

组件分层

组件模式/扩展机制/文档规范 → references/components-guide.md

Step 3 — 页面模式

完整示例 → references/page-patterns.md

Step 4 — 核心规范速查

TypeScript

• Props: defineProps<T>() 泛型语法
• Emits: defineEmits<{ (e: 'event', payload: T): void }>()
• API: Zod schema + 类型推导

状态管理

• 服务端状态: TanStack Query（缓存、重试、同步）
• 客户端状态: Pinia Setup Store 风格

样式规范

• 使用 cn() 合并类名
• 图标尺寸: 按钮 h-4 w-4，导航 h-5 w-5

详细规范 → references/components-guide.md

Step 5 — 质量门控

代码生成前检查

• Props 有明确类型，无 any
• API 有 Zod schema
• 异步有 loading/error 状态
• 列表用稳定 :key
• 三态齐全（空/加载/错误）

代码生成后验证

# 类型检查
pnpm typecheck

# Lint 检查  
pnpm lint

# 单元测试
pnpm test

与测试 Skill 协作

前端开发阶段调用测试能力确保组件质量：

测试规范参考

测试详细规范 → references/testing.md，包含：

• 组件测试模板（Vitest + Vue Test Utils）
• Composable 测试
• Store 测试
• E2E 测试（Playwright）

开发流程集成测试

开发业务组件：
Step 1: 设计组件 Props/Events
Step 2: TDD 先写测试 → test-driven-development
        - 测试 Props 传递
        - 测试 Events 触发
        - 测试状态变化
Step 3: 实现组件 → components/business/*.vue
Step 4: 补充测试 → test-generation + testing.md
        - 边缘情况（空数据、错误状态）
        - 异步操作测试

测试覆盖率标准

PRD 验收标准转化为测试

PRD验收标准：
Given 用户在用户列表页
When 搜索"张三"
Then 显示匹配的用户行

转化为 E2E 测试（参考 testing.md）：
test('用户搜索流程', async ({ page }) => {
    // Given
    await page.goto('/users');
    
    // When
    await page.getByPlaceholder('搜索').fill('张三');
    
    // Then
    await expect(page.getByRole('row', { name: /张三/ })).toBeVisible();
});

PR 前

• typecheck 通过
• lint 无错误
• test 全通过
• 新代码有测试

自定义配置

支持不修改 SKILL.md 的个性化配置：

项目级

创建 .skill-memories/vue-saas-frontend.md：

# 项目偏好

## 表单库
使用 React Hook Form 替代 FormKit

## 状态管理
大型项目用 Zustand，小型用 Pinia

个人级

创建 ~/.skill-memories/vue-saas-frontend.md：

# 个人偏好

## 注释风格
使用 JSDoc 注释

输入参数

输出清单

与 saas-design-system 协作

本技能负责"代码怎么写"，saas-design-system 技能负责"设计长什么样"。

Token 映射

设计约束引用

编写组件时，需遵循 saas-design-system 定义的设计约束：

协作流程

1. 设计决策（配色、间距、组件选型）→ 使用 saas-design-system skill
2. 代码实现（Vue 组件、状态管理、路由）→ 使用本 skill
3. 两者冲突时，以 saas-design-system 的设计约束为准

约束总表

执行任务时必须遵守。完整约束见各 references 文件。

组件约束 (C-COMP)

状态约束 (C-STATE)

TypeScript 约束 (C-TS)

样式约束 (C-STYLE)

路由约束 (C-ROUTE)

表格/表单约束 (C-FORM)

详细约束说明 → references/components-guide.md

快速参考

参考文档加载优先级

1. 必须加载（涉及核心约束）：components-guide.md
2. 按需加载：
   • 数据表格/表单 → ui-config.md
   • 页面开发 → page-patterns.md
   • 路由配置 → route-config.md
   • 测试编写 → testing.md
3. 可选加载：compatibility.md, feature-flags.md, config-center.md

核心规范

配置化

工具与兼容

页面模式

错误处理