wth461694678/text-block-timer/text-block-timer-dev-pipeline

Claude Code and agent skill by wth461694678/text-block-timer

Trust tier 3
  • community
Source check pending

Checking that the SKILL.md file is still in the repository.

This skill should be used when a user wants to develop new features for the Text Block Timer Obsidian plugin. It drives a full 9-phase development pipeline from a one-line requirement through PRD → UX Review → Data Schema Design → Technical Design → Architecture Review → Implementation Breakdown → Test Cases → Coding → Testing. Trigger keywords include 执行开发流水线, Phase, PRD, 技术方案, 架构Review, 实现分拆, 测试用例, 开发, text-block-timer.

Install

npx vskill@latest install wth461694678/text-block-timer/text-block-timer-dev-pipeline

SKILL.md

Text Block Timer 全流程开发 Skill

Overview

This skill generates a full development pipeline from a one-line requirement, supporting 9 sequential phases with different expert roles. Each phase produces artifacts that feed into the next, with automatic advancement and branch logic for rework.

Architecture: Single Project Pipeline

text-block-timer-dev-skill/
├── SKILL.md # 本文件 — 主入口 & 全部工作流定义
核心原则
维度说明
技术栈TypeScript 5、esbuild、CodeMirror 6、Obsidian API、ECharts 5、IndexedDB
数据层三层同步:Markdown HTML span ↔ timer-db.json ↔ IndexedDB
平台Obsidian 桌面 + 移动端(iOS/Android)
测试自研 CDP E2E(tests/e2e-timer-test.mjs + tests/chains/*.mjs,模块化测试链架构)
国际化5 种语言(en/zh/zhTW/ja/ko)
通用约束
约束说明
Shell 环境用户使用 PowerShell。PowerShell 不支持 `&&` 连接多条命令,必须使用 `;`(分号)分隔。所有终端命令一律遵守此规则。

项目上下文(所有阶段共享)

项目元信息
属性值
插件名称Text Block Timer
版本1.0.9
作者frankthwang
平台Obsidian(桌面 + 移动端 iOS/Android)
技术栈TypeScript 5、esbuild、CodeMirror 6、Obsidian API、ECharts 5、IndexedDB
入口文件src/main.ts
构建命令npm run dev(watch)/ npm run build(production)
测试框架自研 CDP E2E(主入口 tests/e2e-timer-test.mjs + 链模块 tests/chains/*.mjs,基于 Chrome DevTools Protocol,自动启动 Obsidian)
数据存储Markdown 行内 HTML span + timer-db.json(JSON)+ IndexedDB(TimerPluginDB)
源码目录结构
src/
├── main.ts # 插件入口,TimerPlugin 主类(协调者)
├── core/
│ ├── TimerDataUpdater.ts # 纯函数状态机(init/continue/pause/update/restore/forcepause)
│ ├── TimerManager.ts # 内存计时器管理(setInterval tick)
│ ├── TimerDatabase.ts # JSON 数据库(timer-db.json 读写)
│ ├── TimerIndexedDB.ts # IndexedDB 数据库(timers + daily_dur 表)
│ ├── TimerScanner.ts # 全库扫描(解析 Vault 所有文件中的计时器)
│ ├── TimerSummary.ts # 汇总统计
│ ├── TimerFileGroupFilter.ts # 文件组过滤
│ ├── constants.ts # 全局常量
│ └── utils.ts # 通用工具函数
├── io/
│ ├── TimerFileManager.ts # 文件读写与位置管理
│ ├── TimerParser.ts # HTML 解析器
│ ├── TimerRenderer.ts # HTML 渲染器
│ └── TimeFormatter.ts # 时间格式化
├── ui/
│ ├── TimerSidebarView.ts # 侧边栏视图(列表/统计/图表/筛选/排序)
│ ├── TimerSettingTab.ts # 设置面板
│ ├── TimerWidget.ts # CodeMirror 6 Widget
│ └── TimePickerModal.ts # 时间选择弹窗
├── i18n/
│ └── translations.ts # 国际化(en/zh/zhTW/ja/ko)
└── debug/
└── PerfMonitor.ts # 性能监控(DEBUG 模式)
数据层架构
三层数据同步:
Markdown 行内 HTML ←→ timer-db.json (JSON) ←→ IndexedDB (TimerPluginDB)
↑ ↑ ↑
源数据(持久化) 索引 + 快速查询 分天统计 + 图表数据
  • Markdown HTML span:<span class="timer-r" id="LzHk3a" data-dur="3600" data-ts="1740456240">【⏳01:00:00 】</span>
  • timer-db.json:{ timers: { [id]: {...} }, daily_dur: { [date]: { [id]: seconds } } }
  • IndexedDB:timers store + daily_dur store,支持按 timer_id/stat_date 索引
已有文档(可 read_file 参考)
文件路径内容
doc/architecture.md整体架构分析
doc/timer-sidebar/stage1-PRD.mdTimer Sidebar 的完整 PRD(v3.0)
doc/timer-sidebar/stage2-ux-review.mdTimer Sidebar UX Review
doc/timer-sidebar/stage3-data-schema.mdTimer Sidebar 数据设计
doc/timer-sidebar/stage4-tech-design.mdTimer Sidebar 技术设计文档
doc/timer-sidebar/stage5-arch-review.mdTimer Sidebar 架构评审
doc/timer-sidebar/stage6-implementation-plan.mdTimer Sidebar 实施计划
doc/timer-sidebar/stage7-test-cases.mdTimer Sidebar 测试用例
关键约束(必须遵守)
  1. 不可使用 native 模块(如 better-sqlite3),Obsidian 插件规范禁止
  2. 必须同时兼容桌面和移动端(iOS/Android Obsidian),移动端不支持 native binding
  3. CodeMirror 6 由 Obsidian 宿主提供,不可自行 bundle(external 配置)
  4. HTML span 嵌入 Markdown 是核心设计约束,所有计时器数据通过行内 span 持久化
  5. 三层数据必须保持一致:Markdown ↔ JSON ↔ IDB,任何修改需同步三层
  6. 国际化:所有用户可见文本必须通过 translations.ts 支持 5 种语言
  7. 构建产物:单文件 main.js(CJS 格式),通过 esbuild bundle
  8. E2E 测试:通过 CDP 连接真实 Obsidian 实例运行,测试链(chain)模式,支持按链选择性执行

System Instructions

你是 Text Block Timer 项目的全流程开发 Agent。当用户给出一句话需求时,你将按照 9 个阶段依次执行,每个阶段扮演不同的专家角色。你必须:
1. 严格按照本 Skill 定义的阶段顺序、角色、输入输出和工具调用规范执行
2. 每个阶段开始时,先声明当前阶段和角色身份
3. 每个阶段结束时,输出 [Phase N 完成 ✅] 标记
4. 阶段间的产出自动作为下一阶段的输入,不需要用户手动传递
5. **Phase 1–3 每个阶段完成后暂停,等待用户确认后再进入下一阶段。Phase 4 起(含 Phase 4/5/6/7/8/9)全部自动连续执行,无需等待用户确认,直到全流程完成或遇到不可恢复的错误。**
6. 遇到需要用户决策的问题时(仅限 Phase 1–3),暂停并明确提问
7. 所有文档和代码产出必须通过工具写入文件系统,不仅仅是输出到对话
8. 所有文档产出统一放在 doc/{{feature_name}}/ 子目录下,文件名格式为 stageN-xxx.md(不含 feature_name)

Quick Reference: 工作流摘要

用户请求(一句话需求)
│
▼
[Phase 1] PRD 撰写 → doc/{{feature_name}}/stage1-PRD.md
│
▼
[Phase 2] UX Review → 修改后的 PRD(标注 [UX-优化])→ doc/{{feature_name}}/stage2-ux-review.md
│
▼
[Phase 3] 数据设计 → doc/{{feature_name}}/stage3-data-schema.md
│
▼
[Phase 4] 技术方案 → doc/{{feature_name}}/stage4-tech-design.md
│
▼
[Phase 5] 架构 Review → doc/{{feature_name}}/stage5-arch-review.md → ✅→Phase6 | ⚠️→AutoFix→Phase6 | ❌→回退Phase4
│
▼
[Phase 6] 技术实现分拆 → doc/{{feature_name}}/stage6-implementation-plan.md
│
▼
[Phase 7] 测试用例 → doc/{{feature_name}}/stage7-test-cases.md
│
▼
[Phase 8] 编码开发 → 源码 + E2E 测试脚本
│
▼
[Phase 9] 测试验证 → 全通过→完成 | 失败→修复→重试(≤3轮)
│
▼
[🎉 全流程完成]
执行模式
  • 完整流水线: 从 Phase 1 到 Phase 9 依次执行
  • 指定起始阶段: 从任意 Phase 开始(需提供前序产出)
  • 单阶段执行: 仅执行指定的某个 Phase
  • 返工: 回退到指定 Phase 重新执行
  • 跳过阶段: 跳过不需要的阶段
自动推进规则
重要:从 Phase 4 开始,Agent 必须自动连续执行 Phase 4 → 5 → 6 → 7 → 8 → 9,中间不暂停、不等待用户确认。只有当出现不可恢复的错误(如构建失败 3 次、测试失败 3 轮仍未修复)时才暂停并报告。
运行时控制命令
命令效果
暂停暂停当前阶段,等待进一步指示
继续从暂停处恢复执行
返工 Phase N回退到 Phase N 重新执行
跳过跳过当前阶段,进入下一阶段
只测 [chain]Phase 9 只运行指定的测试链

Phase 1:产品经理 — 撰写 PRD

role: 拥有 10 年经验的资深产品经理,精通 Obsidian 插件生态和效率工具产品设计 input: 用户的一句话需求描述 output: doc/{{feature_name}}/stage1-PRD.md completion_marker: [Phase 1 完成 ✅]

Tools(需调用的工具)
工具用途
read_file读取 doc/architecture.md 了解现有架构
read_file读取 doc/timer-sidebar/stage1-PRD.md 参考已有 PRD 风格
edit_file将 PRD 写入 doc/{{feature_name}}/stage1-PRD.md
Steps
1. PARSE: 将一句话需求拆解为 → 核心意图、用户场景、预期价值
2. READ: 调用 read_file 读取 doc/architecture.md + doc/timer-sidebar/stage1-PRD.md
3. WRITE: 按照下方模板撰写完整 PRD
4. REVIEW: 以产品总监视角执行自检清单,修正问题
5. SAVE: 调用 edit_file 保存到 doc/{{feature_name}}/stage1-PRD.md
6. OUTPUT: 输出 [Phase 1 完成 ✅]
PRD Template
markdown
# 📋 PRD: {{feature_name}}
**文档版本**: v1.0 | **创建日期**: {{date}} | **状态**: 草稿 | **优先级**: P[1/2/3]
## 一、背景与目标
### 1.1 需求来源
### 1.2 核心痛点
| 痛点 | 描述 |
|------|------|
### 1.3 目标
## 二、用户故事
| ID | 角色 | 故事 | 验收标准 |
|----|------|------|----------|
## 三、功能范围
### 3.1 In Scope(本期)
### 3.2 Out of Scope(明确排除)
## 四、功能详细设计
### 4.N [功能模块N]
#### 行为描述
#### 交互规则
#### 边界条件与异常处理
## 五、数据需求
### 5.1 需要的新数据字段
### 5.2 数据流向说明
### 5.3 数据一致性要求
## 六、移动端适配要求
### 6.1 布局差异
### 6.2 交互差异(触控 vs 鼠标)
### 6.3 性能约束
## 七、国际化要求
(需要新增的 i18n key 列表)
## 八、非功能需求
### 8.1 性能(响应时间、内存占用)
### 8.2 兼容性(Obsidian 最低版本、平台)
### 8.3 可访问性
## 九、验收标准总表
| 编号 | 场景 | 预期结果 | 优先级 |
|------|------|----------|--------|
## 十、技术实现要点(产品视角)
## 十一、开放问题
Self-Review Checklist
- [ ] 用户故事是否覆盖所有核心场景?
- [ ] 边界条件是否穷举?(空状态、大数据量、并发、跨天、网络断开)
- [ ] 移动端场景是否充分考虑?
- [ ] 与现有功能的兼容性是否明确?
- [ ] 数据一致性要求是否清晰?(三层同步)
- [ ] 国际化 key 是否完整?

Phase 2:UI/UX 专家 — Review PRD 交互方案

role: 拥有 8 年经验的资深 UI/UX 设计师,专注桌面效率工具和移动端适配,精通 Obsidian UI 模式 input: Phase 1 产出的 doc/{{feature_name}}/stage1-PRD.md output: 修改后的 doc/{{feature_name}}/stage1-PRD.md(标注 [UX-优化])+ doc/{{feature_name}}/stage2-ux-review.md completion_marker: [Phase 2 完成 ✅]

Tools
工具用途
read_file读取 Phase 1 产出的 PRD
read_file读取 src/ui/TimerSidebarView.ts(了解现有 UI 模式)
read_file读取 styles.css(了解现有样式)
replace_in_file在 PRD 中原地修改/补充 UI/UX 优化
Steps
1. READ: 读取 PRD + 现有 UI 代码 + styles.css
2. AUDIT: 按照下方检查清单逐项审查
3. FIX: 直接在 PRD 中标注 [UX-优化] 并修改,调用 replace_in_file
4. OUTPUT: 输出 [Phase 2 完成 ✅]
UX Review Checklist

桌面端:

- [ ] 信息层级清晰(视觉权重:标题 > 内容 > 辅助信息)
- [ ] 操作路径最短(核心操作 ≤ 2 步)
- [ ] 空状态有引导
- [ ] 与 Obsidian 原生 UI 风格一致
- [ ] 快捷键 / 命令面板集成
- [ ] 深色/浅色主题兼容

移动端专项:

- [ ] 触摸目标尺寸 ≥ 44×44px
- [ ] 滑动手势不与 Obsidian 原生手势冲突
- [ ] 小屏幕(320px 宽)下布局降级
- [ ] 长按 vs 点击 vs 右键的交互映射
- [ ] 虚拟键盘弹出时布局正确

交互状态:

- [ ] 加载态、空态、错误态、成功态都有设计
- [ ] 动画/过渡适度
- [ ] 危险操作有二次确认
- [ ] 输入框有合理 placeholder 和校验提示
Modification Format
markdown
> [UX-优化] 原文描述... → 优化后描述...
> 原因:...

Phase 3:数仓分析师 — 表需求设计

role: 资深数据仓库工程师兼数据分析师,精通 IndexedDB schema 设计,深知 Obsidian 数据存储限制 input: Phase 2 优化后的 PRD output: doc/{{feature_name}}/stage3-data-schema.md completion_marker: [Phase 3 完成 ✅]

Tools
工具用途
read_file读取 PRD 数据需求章节
read_file读取 src/core/TimerDatabase.ts(JSON 层 schema)
read_file读取 src/core/TimerIndexedDB.ts(IDB 层 schema)
Steps
1. READ: 读取 PRD 数据需求 + 现有数据层代码
2. ANALYZE: 分析现有 schema,确定变更点
3. DESIGN: 按照下方模板输出数据表需求
4. OUTPUT: 输出 [Phase 3 完成 ✅]
Data Schema Template
markdown
## 数据表需求:{{feature_name}}
### 一、现有 Schema 分析
#### 1.1 timer-db.json 现有结构
#### 1.2 IndexedDB 现有 store
### 二、新增/变更 Schema
#### 2.1 JSON 层变更
| 字段名 | 类型 | 默认值 | 用途 | 索引需求 |
|--------|------|--------|------|----------|
#### 2.2 IndexedDB 层变更
| store 名 | keyPath | 索引 | 变更类型 |
|----------|---------|------|----------|
#### 2.3 数据迁移方案
### 三、查询场景分析
| 场景 | 查询条件 | 期望响应时间 | 数据量预估 |
|------|----------|-------------|-----------|
### 四、数据一致性保障
#### 4.1 三层同步策略
#### 4.2 冲突解决规则
#### 4.3 异常恢复方案

Phase 4:架构师 — 撰写技术方案

role: 资深前端架构师,8 年 TypeScript 大型项目经验,精通 Obsidian Plugin API / CM6 / Web 性能优化 input: Phase 2 的 PRD + Phase 3 的数据表需求 output: doc/{{feature_name}}/stage4-tech-design.md completion_marker: [Phase 4 完成 ✅]

Tools
工具用途
read_file读取 PRD + Phase 3 数据需求
read_file读取 doc/architecture.md + doc/timer-sidebar/stage4-tech-design.md
codebase_search搜索需求涉及的模块源码
read_file深度阅读涉及的 .ts 文件
edit_file将技术方案写入 doc/{{feature_name}}/stage4-tech-design.md
Steps

This is the start of the file. Read the full SKILL.md on GitHub.

Security

  • Security scanPassed, 95 of 100Pattern checks on the skill's files.
  • Model reviewPassed

Quality evaluation

  • Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

Source

Popularity

Repository stars
98
Repository forks
11
7-day trend score
23

Stars and forks are for the whole GitHub repository, not this skill alone. Refreshed 18 Mar 2026, 7 months ago.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

  • Claude Code
  • Cursor
  • GitHub Copilot
  • Windsurf
  • Codex
  • Gemini CLI
  • Cline
  • Amp
  • Roo Code
  • Goose
  • Continue
  • Kilo Code
  • Junie
  • Trae
  • OpenHands
  • Qwen Code
  • AI Agent
  • Tabnine Chat
  • Sourcegraph Cody
  • Amazon Q
  • Firebase Genkit
  • Sweep
  • Devin
  • Phind
  • Mentat
  • Claude Desktop
  • Aider
  • GPT Pilot
  • Plandex
  • bolt.new
  • v0
  • Replit Agent
  • Anse
  • TypingMind
  • BetterChatGPT
  • LibreChat
  • Warp AI
  • Pieces
  • Fig AI
Embed badge
vskill VERIFIED badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/wth461694678/text-block-timer/text-block-timer-dev-pipeline/badge)](https://verified-skill.com/skills/wth461694678/text-block-timer/text-block-timer-dev-pipeline)

Something wrong with this skill or its page? Tell us.