software-manual

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Software Manual Skill

软件手册生成Skill

Generate comprehensive, interactive software manuals in TiddlyWiki-style single-file HTML format.
生成全面的、交互式的TiddlyWiki风格单文件HTML格式软件手册。

Architecture Overview

架构概述

┌─────────────────────────────────────────────────────────────────┐
│  Context-Optimized Architecture                                  │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│  Phase 1: Requirements      → manual-config.json                │
│           ↓                                                      │
│  Phase 2: Exploration       → exploration-*.json                │
│           ↓                                                      │
│  Phase 3: Parallel Agents   → sections/section-*.md             │
│           ↓ (6 Agents)                                          │
│  Phase 3.5: Consolidation   → consolidation-summary.md          │
│           ↓                                                      │
│  Phase 4: Screenshot        → screenshots/*.png                 │
│           Capture              (via Chrome MCP)                 │
│           ↓                                                      │
│  Phase 5: HTML Assembly     → {name}-使用手册.html              │
│           ↓                                                      │
│  Phase 6: Refinement        → iterations/                       │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│  上下文优化架构                                                  │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│  阶段1:需求分析      → manual-config.json                │
│           ↓                                                      │
│  阶段2:项目探索       → exploration-*.json                │
│           ↓                                                      │
│  阶段3:并行Agent执行   → sections/section-*.md             │
│           ↓ (6个Agent)                                          │
│  阶段3.5:内容整合   → consolidation-summary.md          │
│           ↓                                                      │
│  阶段4:截图生成        → screenshots/*.png                 │
│           采集              (通过Chrome MCP)                 │
│           ↓                                                      │
│  阶段5:HTML组装     → {name}-使用手册.html              │
│           ↓                                                      │
│  阶段6:迭代优化        → iterations/                       │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘

Key Design Principles

核心设计原则

  1. 主 Agent 编排,子 Agent 执行: 所有繁重计算委托给
    universal-executor
    子 Agent
  2. Brief Returns: Agents return path + summary, not full content (avoid context overflow)
  3. System Agents: 使用
    cli-explore-agent
    (探索) 和
    universal-executor
    (执行)
  4. 成熟库内嵌: marked.js (MD 解析) + highlight.js (语法高亮),无 CDN 依赖
  5. Single-File HTML: TiddlyWiki-style interactive document with embedded resources
  6. 动态标签: 根据实际章节自动生成导航标签
  1. 主 Agent 编排,子 Agent 执行: 所有繁重计算委托给
    universal-executor
    子 Agent
  2. 简洁返回: Agent仅返回路径+摘要,不返回完整内容(避免上下文溢出)
  3. 系统Agent: 使用
    cli-explore-agent
    (探索)和
    universal-executor
    (执行)
  4. 成熟库内嵌: marked.js(MD解析)+ highlight.js(语法高亮),无CDN依赖
  5. 单文件HTML: TiddlyWiki风格的交互式文档,内嵌所有资源
  6. 动态标签: 根据实际章节自动生成导航标签

Execution Flow

执行流程

┌─────────────────────────────────────────────────────────────────┐
│  Phase 1: Requirements Discovery (主 Agent)                     │
│  → AskUserQuestion: 收集软件类型、目标用户、文档范围             │
│  → Output: manual-config.json                                   │
├─────────────────────────────────────────────────────────────────┤
│  Phase 2: Project Exploration (cli-explore-agent × N)           │
│  → 并行探索: architecture, ui-routes, api-endpoints, config     │
│  → Output: exploration-*.json                                   │
├─────────────────────────────────────────────────────────────────┤
│  Phase 2.5: API Extraction (extract_apis.py)                    │
│  → 自动提取: FastAPI/TypeDoc/pdoc                                │
│  → Output: api-docs/{backend,frontend,modules}/*.md             │
├─────────────────────────────────────────────────────────────────┤
│  Phase 3: Parallel Analysis (universal-executor × 6)            │
│  → 6 个子 Agent 并行: overview, ui-guide, api-docs, config,     │
│    troubleshooting, code-examples                               │
│  → Output: sections/section-*.md                                │
├─────────────────────────────────────────────────────────────────┤
│  Phase 3.5: Consolidation (universal-executor)                  │
│  → 质量检查: 一致性、交叉引用、截图标记                          │
│  → Output: consolidation-summary.md, screenshots-list.json      │
├─────────────────────────────────────────────────────────────────┤
│  Phase 4: Screenshot Capture (universal-executor + Chrome MCP)  │
│  → 批量截图: 调用 mcp__chrome__screenshot                        │
│  → Output: screenshots/*.png + manifest.json                    │
├─────────────────────────────────────────────────────────────────┤
│  Phase 5: HTML Assembly (universal-executor)                    │
│  → 组装 HTML: MD→tiddlers, 嵌入 CSS/JS/图片                     │
│  → Output: {name}-使用手册.html                                  │
├─────────────────────────────────────────────────────────────────┤
│  Phase 6: Iterative Refinement (主 Agent)                       │
│  → 预览 + 用户反馈 + 迭代修复                                    │
│  → Output: iterations/v*.html                                   │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│  阶段1:需求调研(主Agent)                     │
│  → 询问用户问题: 收集软件类型、目标用户、文档范围             │
│  → 输出: manual-config.json                                   │
├─────────────────────────────────────────────────────────────────┤
│  阶段2:项目探索(cli-explore-agent × N)           │
│  → 并行探索: 架构、UI路由、API端点、配置     │
│  → 输出: exploration-*.json                                   │
├─────────────────────────────────────────────────────────────────┤
│  阶段2.5:API提取(extract_apis.py)                    │
│  → 自动提取: FastAPI/TypeDoc/pdoc                                │
│  → 输出: api-docs/{backend,frontend,modules}/*.md             │
├─────────────────────────────────────────────────────────────────┤
│  阶段3:并行分析(universal-executor × 6)            │
│  → 6个子Agent并行执行: 概述、UI指南、API文档、配置说明、     │
│    故障排查、代码示例                               │
│  → 输出: sections/section-*.md                                │
├─────────────────────────────────────────────────────────────────┤
│  阶段3.5:内容整合(universal-executor)                  │
│  → 质量检查: 一致性、交叉引用、截图标记                          │
│  → 输出: consolidation-summary.md, screenshots-list.json      │
├─────────────────────────────────────────────────────────────────┤
│  阶段4:截图采集(universal-executor + Chrome MCP)  │
│  → 批量截图: 调用 mcp__chrome__screenshot                        │
│  → 输出: screenshots/*.png + manifest.json                    │
├─────────────────────────────────────────────────────────────────┤
│  阶段5:HTML组装(universal-executor)                    │
│  → 组装HTML: MD转tiddlers,嵌入CSS/JS/图片                     │
│  → 输出: {name}-使用手册.html                                  │
├─────────────────────────────────────────────────────────────────┤
│  阶段6:迭代优化(主Agent)                       │
│  → 预览 + 用户反馈 + 迭代修复                                    │
│  → 输出: iterations/v*.html                                   │
└─────────────────────────────────────────────────────────────────┘

Agent Configuration

Agent配置

AgentRoleOutput FileFocus Areas
overviewProduct Managersection-overview.mdProduct intro, features, quick start
ui-guideUX Expertsection-ui-guide.mdUI operations, step-by-step guides
api-docsAPI Architectsection-api-reference.mdREST API, Frontend API
configDevOps Engineersection-configuration.mdEnv vars, deployment, settings
troubleshootingSupport Engineersection-troubleshooting.mdFAQs, error codes, solutions
code-examplesDeveloper Advocatesection-examples.mdBeginner/Intermediate/Advanced examples
Agent角色输出文件关注领域
overview产品经理section-overview.md产品介绍、功能特性、快速入门
ui-guideUX专家section-ui-guide.mdUI操作、分步指南
api-docsAPI架构师section-api-reference.mdREST API、前端API
configDevOps工程师section-configuration.md环境变量、部署、设置
troubleshooting支持工程师section-troubleshooting.md常见问题、错误码、解决方案
code-examples开发者布道师section-examples.md入门/中级/高级示例

Agent Return Format

Agent返回格式

typescript
interface ManualAgentReturn {
  status: "completed" | "partial" | "failed";
  output_file: string;
  summary: string;                    // Max 50 chars
  screenshots_needed: Array<{
    id: string;                       // e.g., "ss-login-form"
    url: string;                      // Relative or absolute URL
    description: string;              // "Login form interface"
    selector?: string;                // CSS selector for partial screenshot
    wait_for?: string;                // Element to wait for
  }>;
  cross_references: string[];         // Other sections referenced
  difficulty_level: "beginner" | "intermediate" | "advanced";
}
typescript
interface ManualAgentReturn {
  status: "completed" | "partial" | "failed";
  output_file: string;
  summary: string;                    // 最多50字符
  screenshots_needed: Array<{
    id: string;                       // 示例: "ss-login-form"
    url: string;                      // 相对或绝对URL
    description: string;              // "登录表单界面"
    selector?: string;                // 局部截图的CSS选择器
    wait_for?: string;                // 等待加载的元素
  }>;
  cross_references: string[];         // 引用的其他章节
  difficulty_level: "beginner" | "intermediate" | "advanced";
}

HTML Features (TiddlyWiki-style)

HTML特性(TiddlyWiki风格)

  1. Search: Full-text search with result highlighting
  2. Collapse/Expand: Per-section collapsible content
  3. Tag Navigation: Filter by category tags
  4. Theme Toggle: Light/Dark mode with localStorage persistence
  5. Single File: All CSS/JS/images embedded as Base64
  6. Offline: Works without internet connection
  7. Print-friendly: Optimized print stylesheet
  1. 搜索功能:全文搜索并高亮结果
  2. 折叠/展开:支持按章节折叠内容
  3. 标签导航:按分类标签筛选内容
  4. 主题切换:明暗模式切换,使用localStorage保存设置
  5. 单文件:所有CSS/JS/图片以Base64格式内嵌
  6. 离线可用:无需网络即可使用
  7. 打印友好:优化的打印样式表

Directory Setup

目录设置

javascript
// Generate timestamp directory name
const timestamp = new Date().toISOString().slice(0,19).replace(/[-:T]/g, '');
const dir = `.workflow/.scratchpad/manual-${timestamp}`;

// Windows
Bash(`mkdir "${dir}\\sections" && mkdir "${dir}\\screenshots" && mkdir "${dir}\\api-docs" && mkdir "${dir}\\iterations"`);
javascript
// 生成带时间戳的目录名称
const timestamp = new Date().toISOString().slice(0,19).replace(/[-:T]/g, '');
const dir = `.workflow/.scratchpad/manual-${timestamp}`;

// Windows系统
Bash(`mkdir "${dir}\\sections" && mkdir "${dir}\\screenshots" && mkdir "${dir}\\api-docs" && mkdir "${dir}\\iterations"`);

Output Structure

输出结构

.workflow/.scratchpad/manual-{timestamp}/
├── manual-config.json              # Phase 1
├── exploration/                    # Phase 2
│   ├── exploration-architecture.json
│   ├── exploration-ui-routes.json
│   └── exploration-api-endpoints.json
├── sections/                       # Phase 3
│   ├── section-overview.md
│   ├── section-ui-guide.md
│   ├── section-api-reference.md
│   ├── section-configuration.md
│   ├── section-troubleshooting.md
│   └── section-examples.md
├── consolidation-summary.md        # Phase 3.5
├── api-docs/                       # API documentation
│   ├── frontend/                   # TypeDoc output
│   └── backend/                    # Swagger/OpenAPI output
├── screenshots/                    # Phase 4
│   ├── ss-*.png
│   └── screenshots-manifest.json
├── iterations/                     # Phase 6
│   ├── v1.html
│   └── v2.html
└── {软件名}-使用手册.html           # Final Output
.workflow/.scratchpad/manual-{timestamp}/
├── manual-config.json              # 阶段1
├── exploration/                    # 阶段2
│   ├── exploration-architecture.json
│   ├── exploration-ui-routes.json
│   └── exploration-api-endpoints.json
├── sections/                       # 阶段3
│   ├── section-overview.md
│   ├── section-ui-guide.md
│   ├── section-api-reference.md
│   ├── section-configuration.md
│   ├── section-troubleshooting.md
│   └── section-examples.md
├── consolidation-summary.md        # 阶段3.5
├── api-docs/                       # API文档
│   ├── frontend/                   # TypeDoc输出
│   └── backend/                    # Swagger/OpenAPI输出
├── screenshots/                    # 阶段4
│   ├── ss-*.png
│   └── screenshots-manifest.json
├── iterations/                     # 阶段6
│   ├── v1.html
│   └── v2.html
└── {软件名}-使用手册.html           # 最终输出

Reference Documents

参考文档

DocumentPurpose
phases/01-requirements-discovery.md用户配置收集
phases/02-project-exploration.md项目类型检测
phases/02.5-api-extraction.mdAPI 自动提取
phases/03-parallel-analysis.md6 Agent 并行分析
phases/03.5-consolidation.md整合与质量检查
phases/04-screenshot-capture.mdChrome MCP 截图
phases/05-html-assembly.mdHTML 组装
phases/06-iterative-refinement.md迭代优化
specs/quality-standards.md质量标准
specs/writing-style.md写作风格
templates/tiddlywiki-shell.htmlHTML 模板
templates/css/wiki-base.css基础样式
templates/css/wiki-dark.css暗色主题
scripts/bundle-libraries.md库文件打包
scripts/api-extractor.mdAPI 提取说明
scripts/extract_apis.pyAPI 提取脚本
scripts/screenshot-helper.md截图辅助
文档用途
phases/01-requirements-discovery.md用户配置收集
phases/02-project-exploration.md项目类型检测
phases/02.5-api-extraction.mdAPI自动提取
phases/03-parallel-analysis.md6个Agent并行分析
phases/03.5-consolidation.md整合与质量检查
phases/04-screenshot-capture.mdChrome MCP截图
phases/05-html-assembly.mdHTML组装
phases/06-iterative-refinement.md迭代优化
specs/quality-standards.md质量标准
specs/writing-style.md写作风格
templates/tiddlywiki-shell.htmlHTML模板
templates/css/wiki-base.css基础样式
templates/css/wiki-dark.css暗色主题
scripts/bundle-libraries.md库文件打包
scripts/api-extractor.mdAPI提取说明
scripts/extract_apis.pyAPI提取脚本
scripts/screenshot-helper.md截图辅助