software-manual
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseSoftware 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
核心设计原则
- 主 Agent 编排,子 Agent 执行: 所有繁重计算委托给 子 Agent
universal-executor - Brief Returns: Agents return path + summary, not full content (avoid context overflow)
- System Agents: 使用 (探索) 和
cli-explore-agent(执行)universal-executor - 成熟库内嵌: marked.js (MD 解析) + highlight.js (语法高亮),无 CDN 依赖
- Single-File HTML: TiddlyWiki-style interactive document with embedded resources
- 动态标签: 根据实际章节自动生成导航标签
- 主 Agent 编排,子 Agent 执行: 所有繁重计算委托给 子 Agent
universal-executor - 简洁返回: Agent仅返回路径+摘要,不返回完整内容(避免上下文溢出)
- 系统Agent: 使用 (探索)和
cli-explore-agent(执行)universal-executor - 成熟库内嵌: marked.js(MD解析)+ highlight.js(语法高亮),无CDN依赖
- 单文件HTML: TiddlyWiki风格的交互式文档,内嵌所有资源
- 动态标签: 根据实际章节自动生成导航标签
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配置
| Agent | Role | Output File | Focus Areas |
|---|---|---|---|
| overview | Product Manager | section-overview.md | Product intro, features, quick start |
| ui-guide | UX Expert | section-ui-guide.md | UI operations, step-by-step guides |
| api-docs | API Architect | section-api-reference.md | REST API, Frontend API |
| config | DevOps Engineer | section-configuration.md | Env vars, deployment, settings |
| troubleshooting | Support Engineer | section-troubleshooting.md | FAQs, error codes, solutions |
| code-examples | Developer Advocate | section-examples.md | Beginner/Intermediate/Advanced examples |
| Agent | 角色 | 输出文件 | 关注领域 |
|---|---|---|---|
| overview | 产品经理 | section-overview.md | 产品介绍、功能特性、快速入门 |
| ui-guide | UX专家 | section-ui-guide.md | UI操作、分步指南 |
| api-docs | API架构师 | section-api-reference.md | REST API、前端API |
| config | DevOps工程师 | 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风格)
- Search: Full-text search with result highlighting
- Collapse/Expand: Per-section collapsible content
- Tag Navigation: Filter by category tags
- Theme Toggle: Light/Dark mode with localStorage persistence
- Single File: All CSS/JS/images embedded as Base64
- Offline: Works without internet connection
- Print-friendly: Optimized print stylesheet
- 搜索功能:全文搜索并高亮结果
- 折叠/展开:支持按章节折叠内容
- 标签导航:按分类标签筛选内容
- 主题切换:明暗模式切换,使用localStorage保存设置
- 单文件:所有CSS/JS/图片以Base64格式内嵌
- 离线可用:无需网络即可使用
- 打印友好:优化的打印样式表
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
参考文档
| Document | Purpose |
|---|---|
| phases/01-requirements-discovery.md | 用户配置收集 |
| phases/02-project-exploration.md | 项目类型检测 |
| phases/02.5-api-extraction.md | API 自动提取 |
| phases/03-parallel-analysis.md | 6 Agent 并行分析 |
| phases/03.5-consolidation.md | 整合与质量检查 |
| phases/04-screenshot-capture.md | Chrome MCP 截图 |
| phases/05-html-assembly.md | HTML 组装 |
| phases/06-iterative-refinement.md | 迭代优化 |
| specs/quality-standards.md | 质量标准 |
| specs/writing-style.md | 写作风格 |
| templates/tiddlywiki-shell.html | HTML 模板 |
| templates/css/wiki-base.css | 基础样式 |
| templates/css/wiki-dark.css | 暗色主题 |
| scripts/bundle-libraries.md | 库文件打包 |
| scripts/api-extractor.md | API 提取说明 |
| scripts/extract_apis.py | API 提取脚本 |
| scripts/screenshot-helper.md | 截图辅助 |
| 文档 | 用途 |
|---|---|
| phases/01-requirements-discovery.md | 用户配置收集 |
| phases/02-project-exploration.md | 项目类型检测 |
| phases/02.5-api-extraction.md | API自动提取 |
| phases/03-parallel-analysis.md | 6个Agent并行分析 |
| phases/03.5-consolidation.md | 整合与质量检查 |
| phases/04-screenshot-capture.md | Chrome MCP截图 |
| phases/05-html-assembly.md | HTML组装 |
| phases/06-iterative-refinement.md | 迭代优化 |
| specs/quality-standards.md | 质量标准 |
| specs/writing-style.md | 写作风格 |
| templates/tiddlywiki-shell.html | HTML模板 |
| templates/css/wiki-base.css | 基础样式 |
| templates/css/wiki-dark.css | 暗色主题 |
| scripts/bundle-libraries.md | 库文件打包 |
| scripts/api-extractor.md | API提取说明 |
| scripts/extract_apis.py | API提取脚本 |
| scripts/screenshot-helper.md | 截图辅助 |