software-manual
๐ฏSkillfrom catlog22/claude-code-workflow
software-manual skill from catlog22/claude-code-workflow
Part of
catlog22/claude-code-workflow(15 items)
Installation
npm install -g claude-code-workflowpip install -e .Skill Details
Generate interactive TiddlyWiki-style HTML software manuals with screenshots, API docs, and multi-level code examples. Use when creating user guides, software documentation, or API references. Triggers on "software manual", "user guide", "generate manual", "create docs".
Overview
# Software Manual Skill
Generate comprehensive, interactive software manuals in TiddlyWiki-style single-file HTML format.
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/ โ
โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
```
Key Design Principles
- ไธป Agent ็ผๆ๏ผๅญ Agent ๆง่ก: ๆๆ็น้่ฎก็ฎๅงๆ็ป
universal-executorๅญ Agent - 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
- ๅจๆๆ ็ญพ: ๆ นๆฎๅฎ้ ็ซ ่่ชๅจ็ๆๅฏผ่ชๆ ็ญพ
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 โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
```
Agent Configuration
| 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 Return Format
```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";
}
```
HTML Features (TiddlyWiki-style)
- 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
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");
```
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
```
Reference Documents
| Document | Purpose |
|----------|---------|
| [phases/01-requirements-discovery.md](phases/01-requirements-discovery.md) | ็จๆท้ ็ฝฎๆถ้ |
| [phases/02-project-exploration.md](phases/02-project-exploration.md) | ้กน็ฎ็ฑปๅๆฃๆต |
| [phases/02.5-api-extraction.md](phases/02.5-api-extraction.md) | API ่ชๅจๆๅ |
| [phases/03-parallel-analysis.md](phases/03-parallel-analysis.md) | 6 Agent ๅนถ่กๅๆ |
| [phases/03.5-consolidation.md](phases/03.5-consolidation.md) | ๆดๅไธ่ดจ้ๆฃๆฅ |
| [phases/04-screenshot-capture.md](phases/04-screenshot-capture.md) | Chrome MCP ๆชๅพ |
| [phases/05-html-assembly.md](phases/05-html-assembly.md) | HTML ็ป่ฃ |
| [phases/06-iterative-refinement.md](phases/06-iterative-refinement.md) | ่ฟญไปฃไผๅ |
| [specs/quality-standards.md](specs/quality-standards.md) | ่ดจ้ๆ ๅ |
| [specs/writing-style.md](specs/writing-style.md) | ๅไฝ้ฃๆ ผ |
| [templates/tiddlywiki-shell.html](templates/tiddlywiki-shell.html) | HTML ๆจกๆฟ |
| [templates/css/wiki-base.css](templates/css/wiki-base.css) | ๅบ็กๆ ทๅผ |
| [templates/css/wiki-dark.css](templates/css/wiki-dark.css) | ๆ่ฒไธป้ข |
| [scripts/bundle-libraries.md](scripts/bundle-libraries.md) | ๅบๆไปถๆๅ |
| [scripts/api-extractor.md](scripts/api-extractor.md) | API ๆๅ่ฏดๆ |
| [scripts/extract_apis.py](scripts/extract_apis.py) | API ๆๅ่ๆฌ |
| [scripts/screenshot-helper.md](scripts/screenshot-helper.md) | ๆชๅพ่พ ๅฉ |
More from this repository10
project-analyze skill from catlog22/claude-code-workflow
review-code skill from catlog22/claude-code-workflow
copyright-docs skill from catlog22/claude-code-workflow
prompt enhancer skill from catlog22/claude-code-workflow
skill-generator skill from catlog22/claude-code-workflow
text-formatter skill from catlog22/claude-code-workflow
skill-tuning skill from catlog22/claude-code-workflow
parallel dev cycle skill from catlog22/claude-code-workflow
issue-manage skill from catlog22/claude-code-workflow
ccw-loop skill from catlog22/claude-code-workflow