@openflowjs/cli 0.2.0

package/dist/core-artifacts/openflow/skills/prd/references/level-routing.md

@@ -0,0 +1,94 @@
+# PRD Level Routing
+
+PRD 按产品复杂度分三级。在生成 PRD 前，根据需求特征判断应使用的 Level，然后只生成对应 Level 必选（`*`）和推荐（`+`）的章节。
+
+## Level 1 — Quick PRD（轻量需求）
+
+**适用场景**：
+- 单个简单功能，1-2 个用户场景
+- 现有功能的小幅调整或开关
+- 一个独立的小页面或表单
+- 影响范围有限，不涉及跨模块变更
+
+**典型例子**：
+- 给现有页面加一个导出按钮
+- 增加一个简单的设置项
+- 单个工具类页面（如健康检查页）
+
+**章节集**：
+- 必选：Background, Goals & Success Metrics, Functional Design (1-2 个 feature), Non-Goals, Global Acceptance Criteria, Risks & Mitigations
+- 推荐：User Stories, Edge Cases（在 feature 内部）
+
+**Wireframe**：通常不需要。如果有 UI 改动，在 Functional Design 中文字描述即可。
+
+---
+
+## Level 2 — Standard PRD（标准需求）
+
+**适用场景**：
+- 多个相关功能组成一个完整模块
+- 需要明确用户角色和场景
+- 涉及一定的设计决策和取舍
+- 大多数产品需求都属于此级
+
+**典型例子**：
+- 用户登录注册系统
+- 个人主页与设置
+- 评论功能模块
+- 单个业务流程（如下单流程）
+
+**章节集**：
+- 必选：Background, Goals & Success Metrics, Personas, User Stories, Functional Design（含每 feature 的 Edge Cases）, Non-Goals, Global Acceptance Criteria, Risks & Mitigations, NFR（基础项）
+- 推荐：TL;DR, User Journey（多角色或多步骤时）, Feature Priority Matrix（功能 ≥ 4 个时）, Information Architecture, Test Scenarios, Decision Log, Open Dependencies
+- 可选：Content Strategy, Data Model, Integration Points, Glossary
+
+**Wireframe**：核心交互页面需要，简单页面可省略。
+
+---
+
+## Level 3 — Full PRD（完整需求）
+
+**适用场景**：
+- 跨模块、产品级或重大改造
+- 涉及多角色、多业务流程、长期影响
+- 需要协调多个团队或外部依赖
+- 信息架构和数据模型有显著改动
+
+**典型例子**：
+- 重构整个文档站点
+- 多角色权限系统
+- 复杂业务流程改造
+- 全新产品线
+
+**章节集**：
+- 必选：全部章节
+- 优先生成：TL;DR, Personas, User Stories, User Journey, Feature Priority Matrix, Functional Design, Information Architecture, NFR（完整）, Test Scenarios, Decision Log, Glossary, Open Dependencies, Risks
+
+**Wireframe**：每个核心交互页面一张，并按需补充流程图（mermaid flowchart）和状态图（state diagram）。
+
+---
+
+## 路由判定流程
+
+执行以下检查决定 Level：
+
+1. **Level 3 触发条件**（任一满足）：
+   - 跨多个产品模块或包
+   - 涉及 ≥ 3 个用户角色
+   - 包含信息架构或数据模型的重大改动
+   - 涉及外部团队依赖
+   - 需求文档讨论时长明显较长（draft 内容 > 200 行）
+
+2. **Level 1 触发条件**（全部满足）：
+   - 单一功能，无明显角色分化
+   - 不涉及新页面或新流程
+   - draft 内容 < 80 行
+   - 无外部依赖
+
+3. **其余情况** → Level 2（默认）
+
+判定后，向用户说明判定结果及章节范围，让用户确认或调整：
+
+> "根据需求特征，建议使用 Level <N> PRD（<理由>）。将生成以下章节：<章节列表>。是否调整 Level？"
+
+如果用户希望升级或降级 Level，按其意愿调整。

package/dist/core-artifacts/openflow/skills/prd/references/prd-template.md

@@ -0,0 +1,187 @@
+# PRD: <title>
+
+> **Level annotation**: each section is tagged `[L1]`, `[L2]`, `[L3]` showing which PRD levels require it. `*` = required, `+` = recommended, `?` = optional, `–` = skip.
+
+## TL;DR `[L1: ?] [L2: +] [L3: *]`
+
+_One paragraph (3-5 sentences) summarizing the product, the user, the value, and the success criterion. Written so an executive can grasp it in 30 seconds._
+
+## Background `[L1: *] [L2: *] [L3: *]`
+
+_Why this matters now. Include:_
+- _Current situation and concrete problems (with evidence, not just claims)_
+- _Why now — what changed that makes this urgent or timely_
+- _Strategic or business context_
+
+## Goals & Success Metrics `[L1: *] [L2: *] [L3: *]`
+
+_What does success look like? Define measurable outcomes._
+
+| Goal | Success Metric | Target | How to Measure |
+|------|---------------|--------|----------------|
+| <goal> | <metric> | <target value> | <measurement method> |
+
+## Personas `[L1: ?] [L2: *] [L3: *]`
+
+_Concise persona cards. Keep them short (3-5 lines each) but specific enough to make design decisions._
+
+### <Persona name>
+- **Role**: <job/identity>
+- **Context**: <when/where/why they use the product>
+- **Goal**: <what they're trying to achieve>
+- **Pain Point**: <what frustrates them today>
+- **Tech Familiarity**: <novice / intermediate / expert>
+
+## User Stories `[L1: +] [L2: *] [L3: *]`
+
+_Standard format. Group by persona or by feature area._
+
+- As a **<persona>**, I want to **<action>** so that **<benefit>**.
+- As a **<persona>**, I want to **<action>** so that **<benefit>**.
+
+## User Journey `[L1: –] [L2: +] [L3: *]`
+
+_How users progress through the product over time. Use a state diagram or journey map. Required when the product has distinct lifecycle stages or multiple touchpoints._
+
+## Feature Priority Matrix `[L1: –] [L2: +] [L3: *]`
+
+_MoSCoW classification for the feature set. Helps separate MVP from full scope._
+
+| Feature | Priority | Rationale |
+|---------|----------|-----------|
+| <feature> | Must / Should / Could / Won't | <why this priority> |
+
+## Functional Design `[L1: *] [L2: *] [L3: *]`
+
+_The core of the PRD. Organize by feature or feature group. Each feature must be detailed enough that an engineer can understand the expected behavior without ambiguity._
+
+### Feature: <name>
+
+**Purpose**: <what this feature does and why it exists>
+
+**User Story**: As a <persona>, I want to <action> so that <benefit>.
+
+**Detailed Behavior**:
+- <specific behavior 1>
+- <specific behavior 2>
+- <input/output specification>
+- <business rules>
+
+**UI/Interaction** (when applicable):
+- Layout: <describe the layout structure>
+- Key elements: <list interactive elements and their behavior>
+- States: <normal / empty / error / loading / disabled — describe each>
+- Wireframe: [<feature>-wireframe.html](./assets/<feature>-wireframe.html) (if visual complexity warrants)
+
+**Flow** (when multi-step or has branches):
+- Either describe in a numbered list, or include a mermaid flowchart in `assets/`
+
+**Edge Cases & Error States** `[L1: +] [L2: *] [L3: *]`:
+- <edge case 1 and how it's handled>
+- <error scenario and recovery>
+
+**Acceptance Criteria**:
+- [ ] <criterion specific to this feature>
+- [ ] <criterion specific to this feature>
+
+### Feature Group: <name> (for closely related features)
+
+#### Sub-feature A: <name>
+_<same structure as above>_
+
+#### Sub-feature B: <name>
+_<same structure as above>_
+
+## Information Architecture `[L1: –] [L2: +] [L3: *]`
+
+_How content/features are organized and navigated. Include site map, navigation structure, or content hierarchy diagram. Required when the product has multiple pages or sections._
+
+## Content Strategy `[L1: –] [L2: ?] [L3: +]`
+
+_Content rules and conventions:_
+- _Tone and voice_
+- _Naming conventions_
+- _Content sources (where text/data comes from)_
+- _Localization approach_
+
+## Data Model `[L1: –] [L2: ?] [L3: +]`
+
+_Key entities, their fields, and relationships. Use a table or ER diagram. Include only entities directly relevant to product behavior._
+
+| Entity | Fields | Relationships |
+|--------|--------|---------------|
+| <entity> | <key fields> | <relationships> |
+
+## Integration Points `[L1: –] [L2: ?] [L3: +]`
+
+_External systems, APIs, or services this product reads from or writes to._
+
+| System | Direction | Purpose |
+|--------|-----------|---------|
+| <system> | in/out/both | <why> |
+
+## Non-Functional Requirements `[L1: ?] [L2: +] [L3: *]`
+
+_Quality attributes that constrain the design._
+
+| Dimension | Requirement |
+|-----------|-------------|
+| Performance | <e.g., page load < 2s, p95 response < 500ms> |
+| Security | <auth, data protection, audit requirements> |
+| Accessibility | <WCAG level, keyboard navigation, screen reader> |
+| Internationalization | <languages, locale-specific behavior> |
+| Compatibility | <browsers, OS, devices> |
+| Reliability | <uptime, error budget> |
+
+## Non-Goals `[L1: *] [L2: *] [L3: *]`
+
+_What this explicitly does NOT cover and why. Prevents scope creep._
+
+| Excluded | Reason |
+|----------|--------|
+| <what> | <why> |
+
+## Test Scenarios `[L1: –] [L2: +] [L3: *]`
+
+_Product-level test scenarios from the user's perspective. Not implementation-level test cases — those belong in SPEC. Each scenario should map to one or more acceptance criteria._
+
+| ID | Scenario | Expected Outcome |
+|----|----------|-----------------|
+| TS-1 | <user-perspective scenario> | <observable outcome> |
+
+## Global Acceptance Criteria `[L1: *] [L2: *] [L3: *]`
+
+_Cross-cutting acceptance criteria that span multiple features or apply to the product as a whole. Per-feature criteria stay inside Functional Design._
+
+- [ ] <cross-cutting criterion>
+- [ ] <cross-cutting criterion>
+
+## Decision Log `[L1: –] [L2: +] [L3: *]`
+
+_Key product decisions made during discussion, with rationale. Different from Open Questions: these are RESOLVED. This is the audit trail of "why we chose X over Y"._
+
+| Decision | Options Considered | Chosen | Rationale |
+|----------|-------------------|--------|-----------|
+| <decision topic> | <A / B / C> | <chosen option> | <why> |
+
+## Risks & Mitigations `[L1: *] [L2: *] [L3: *]`
+
+| Risk | Impact | Likelihood | Mitigation |
+|------|--------|-----------|------------|
+| <risk> | High/Medium/Low | High/Medium/Low | <mitigation> |
+
+## Open Dependencies `[L1: –] [L2: +] [L3: *]`
+
+_External dependencies that block or affect this work. Surface them so they can be tracked._
+
+| Dependency | Owner | Needed By | Status |
+|-----------|-------|-----------|--------|
+| <dependency> | <team/person> | <date or milestone> | <pending/ready> |
+
+## Glossary `[L1: –] [L2: ?] [L3: *]`
+
+_Domain terms used in this PRD, defined consistently to prevent ambiguity._
+
+| Term | Definition |
+|------|-----------|
+| <term> | <definition> |

package/dist/core-artifacts/openflow/skills/prd/references/wireframe-template.html

@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Wireframe: <page-name></title>
+  <!--
+    WIREFRAME GUIDELINES:
+    - Grayscale only: #fff, #f5f5f5, #e0e0e0, #999, #666, #333
+    - No brand colors, gradients, or decorative elements
+    - Use dashed borders for placeholder/content areas
+    - Use solid borders for structural boundaries
+    - Focus on layout, hierarchy, and element placement
+    - Label all interactive elements clearly
+    - Show content structure, not visual polish
+    - Keep fonts system default, no custom fonts
+    - Max width 960px, responsive-aware
+  -->
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      padding: 24px;
+      background: #fff;
+      color: #333;
+      font-size: 14px;
+      line-height: 1.5;
+    }
+    .page {
+      max-width: 960px;
+      margin: 0 auto;
+      border: 1px solid #ccc;
+    }
+    .header {
+      padding: 12px 24px;
+      border-bottom: 1px solid #ccc;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .nav {
+      display: flex;
+      gap: 24px;
+      padding: 10px 24px;
+      border-bottom: 1px solid #e0e0e0;
+      font-size: 13px;
+      color: #666;
+    }
+    .main {
+      padding: 24px;
+    }
+    .placeholder {
+      border: 2px dashed #ccc;
+      padding: 32px 16px;
+      text-align: center;
+      color: #999;
+      font-size: 13px;
+      margin: 12px 0;
+    }
+    .btn {
+      display: inline-block;
+      padding: 8px 16px;
+      border: 1px solid #999;
+      color: #333;
+      font-size: 13px;
+      cursor: pointer;
+    }
+    .btn-primary {
+      background: #333;
+      color: #fff;
+      border-color: #333;
+    }
+    .label {
+      font-size: 11px;
+      color: #999;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 4px;
+    }
+    .footer {
+      padding: 12px 24px;
+      border-top: 1px solid #ccc;
+      text-align: center;
+      color: #999;
+      font-size: 12px;
+    }
+    /* Annotation: marks areas with notes for reviewers */
+    .annotation {
+      position: relative;
+    }
+    .annotation::after {
+      content: attr(data-note);
+      position: absolute;
+      top: -6px;
+      right: -6px;
+      background: #666;
+      color: #fff;
+      font-size: 10px;
+      padding: 2px 6px;
+      white-space: nowrap;
+    }
+  </style>
+</head>
+<body>
+  <div class="page">
+    <div class="header">
+      <strong>Page Title</strong>
+      <span class="btn">Action</span>
+    </div>
+    <div class="nav">
+      <span>Nav 1</span>
+      <span>Nav 2</span>
+      <span>Nav 3</span>
+    </div>
+    <div class="main">
+      <div class="placeholder">Main Content Area — describe what goes here</div>
+      <div class="placeholder">Secondary Area — describe what goes here</div>
+    </div>
+    <div class="footer">Footer</div>
+  </div>
+</body>
+</html>