{"id":50685226,"url":"https://github.com/dashenbibi/tutorial-generator","last_synced_at":"2026-06-08T22:30:53.553Z","repository":{"id":362348094,"uuid":"1258508622","full_name":"dashenbibi/tutorial-generator","owner":"dashenbibi","description":"AI Skill that auto-generates tutorials from any URL — screenshots, steps, video with TTS narration. Works with Claude Code, Hermes, Gemini CLI, Codex, OpenClaw.","archived":false,"fork":false,"pushed_at":"2026-06-03T19:31:52.000Z","size":3059,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-03T21:11:59.104Z","etag":null,"topics":["ai-agent","automation","browser-automation","claude-code","documentation-tool","openclaw","playwright","screenshot","skill","tutorial-generator","video-tutorial"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dashenbibi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-03T16:40:05.000Z","updated_at":"2026-06-03T19:31:56.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/dashenbibi/tutorial-generator","commit_stats":null,"previous_names":["dashenbibi/tutorial-generator"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/dashenbibi/tutorial-generator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dashenbibi%2Ftutorial-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dashenbibi%2Ftutorial-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dashenbibi%2Ftutorial-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dashenbibi%2Ftutorial-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dashenbibi","download_url":"https://codeload.github.com/dashenbibi/tutorial-generator/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dashenbibi%2Ftutorial-generator/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34083848,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-08T02:00:07.615Z","response_time":111,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai-agent","automation","browser-automation","claude-code","documentation-tool","openclaw","playwright","screenshot","skill","tutorial-generator","video-tutorial"],"created_at":"2026-06-08T22:30:49.268Z","updated_at":"2026-06-08T22:30:53.547Z","avatar_url":"https://github.com/dashenbibi.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"[中文](./README.zh-CN.md) | **English**\n\n# tutorial-generator\n\nAn AI skill that automatically generates illustrated tutorials for any website. Input a URL, and the agent will explore pages, take screenshots, record action steps, and produce a polished tutorial — without writing a single line manually.\n\n## Features\n\n- **Tool-agnostic** — uses abstract capability identifiers, works with any AI agent that supports browser automation\n- **Login handling** — detects login state automatically; supports email/password, verification code, and OAuth flows\n- **Rich screenshots** — before + after each step, plus extras for modals, dropdowns, and scroll areas; minimum 3 per module guaranteed\n- **Multiple output formats** — Markdown / HTML (base64 screenshots embedded) / PDF / Video\n- **Video support** — screen recording + optional SRT subtitle burn-in + optional TTS narration\n- **Safe by default** — delete actions stop at the confirm dialog; payment pages are screenshot-only\n\n## Supported Tools\n\n| Tool | Browser | Login state | Video recording |\n|------|---------|-------------|----------------|\n| Claude Code (Claude in Chrome) | ✅ | Reuses real Chrome session | Via screencapture |\n| Hermes (NousResearch) | ✅ | CDP attach / persistent session | ✅ Native |\n| Gemini CLI | ✅ | Reuses real Chrome session | Via screencapture |\n| OpenHands | ✅ | ❌ Sandbox | Via recordmydesktop |\n| Codex (OpenAI) | ✅ In-app | ❌ Sandbox | Computer Use |\n| Any Playwright MCP tool | ✅ | Depends on config | Playwright built-in |\n\n## Installation\n\n**Option 1 — Clone to universal skills directory (recommended, works with all tools)**\n\n```bash\ngit clone https://github.com/dashenbibi/tutorial-generator ~/.skills/tutorial-generator\n```\n\n**Option 2 — Download skill file only**\n\n```bash\nmkdir -p ~/.skills/tutorial-generator\ncurl -o ~/.skills/tutorial-generator/SKILL.md \\\n  https://raw.githubusercontent.com/dashenbibi/tutorial-generator/main/SKILL.md\n```\n\n**Claude Code (auto-loaded):**\n\n```bash\nmkdir -p ~/.claude/skills/tutorial-generator\ncp ~/.skills/tutorial-generator/SKILL.md ~/.claude/skills/tutorial-generator/SKILL.md\n```\n\n**Other tools (Hermes / Gemini CLI / Codex etc.):**\n\nAdd to system prompt or at the start of a session:\n\n```\nPlease read ~/.skills/tutorial-generator/SKILL.md before starting.\n```\n\n## Usage\n\nSend a request to your AI agent:\n\n```\nGenerate a tutorial for https://example.com\n```\n\nThe agent will follow this workflow:\n\n1. **Phase 0** — Ask about target audience, features to cover, login info, output language, and format\n2. **Phase 1** — Scout the site structure, list discovered modules, **wait for you to pick scope**\n3. **Phase 2** — Check login state; handle authentication if needed\n4. **Phase 3** — Explore each module step-by-step with screenshots\n5. **Phase 4** — Compile all steps and screenshots into a tutorial\n6. **Phase 5** — Output files, show preview, ask if anything needs to be added\n\n### Output language\n\nThe generated tutorial supports any language. Specify in your request or during Phase 0:\n\n```\nGenerate a tutorial for https://example.com  language: 中文\nGenerate a tutorial for https://example.com  language: 日本語\nGenerate a tutorial for https://example.com  language: Español\n```\n\nSupported languages include (but are not limited to):\n\n| Language | Code |\n|----------|------|\n| English (default) | `English` |\n| 简体中文 | `中文` |\n| 日本語 | `日本語` |\n| 한국어 | `한국어` |\n| Español | `Español` |\n| Français | `Français` |\n| Deutsch | `Deutsch` |\n| Português | `Português` |\n| العربية | `العربية` |\n\nAll tutorial content — headings, step descriptions, captions, and TTS narration — will be generated in the selected language.\n\n## Output format examples\n\n```\n# Markdown only (default)\nGenerate a tutorial for https://example.com\n\n# Markdown + HTML\nGenerate a tutorial for https://example.com  format: markdown html\n\n# Video with subtitles and narration\nGenerate a tutorial for https://example.com  format: video+sub+audio\n\n# Full output\nGenerate a tutorial for https://example.com  format: markdown html video+sub+audio\n```\n\n### Video format dependencies\n\n| Feature | Dependency | Install |\n|---------|-----------|---------|\n| Video composition | ffmpeg | `brew install ffmpeg` |\n| TTS narration (recommended) | edge-tts | `pip install edge-tts` |\n| TTS narration (fallback) | gtts | `pip install gtts` |\n| PDF output | pandoc | `brew install pandoc` |\n\nAll dependencies have automatic fallbacks — missing tools degrade gracefully rather than failing.\n\n## Output structure\n\n```\n{domain}/\n├── {domain}-tutorial.md\n├── {domain}-tutorial.html\n├── {domain}-tutorial.pdf\n├── {domain}-tutorial.mp4      (with subtitles / narration if requested)\n├── {domain}-tutorial.srt\n└── screenshots/\n    ├── shot_00_home.png\n    ├── shot_01_module_overview.png\n    ├── shot_02_step1_before.png\n    ├── shot_02_step1_after.png\n    └── ...\n```\n\n## Capability mapping\n\nThe skill uses abstract identifiers. Map them to your tool before running:\n\n| Identifier | Description |\n|-----------|-------------|\n| `NAVIGATE` | Open / navigate to a URL |\n| `CAPTURE` | Take a screenshot and save to file |\n| `READ_PAGE` | Read page structure (compact / full) |\n| `CLICK` | Click an element |\n| `TYPE` | Type text into a field |\n| `PRESS_KEY` | Press keyboard keys (optional) |\n| `RUN_JS` | Execute JavaScript (optional) |\n| `VISUAL_ANALYZE` | Screenshot + AI visual analysis (optional enhancement) |\n| `SCREEN_RECORD` | Start/stop screen recording (video format only) |\n\n\u003e If your tool combines screenshot and visual analysis (e.g. Hermes `browser_vision`),\n\u003e map both `CAPTURE` and `VISUAL_ANALYZE` to it.\n\n## Changelog\n\n| Version | Changes |\n|---------|---------|\n| v3.2.0 | Pure English SKILL.md; separate bilingual README files |\n| v3.1.0 | Bilingual SKILL.md (English + Chinese inline) |\n| v3.0.0 | Full English rewrite; multi-language output support |\n| v2.0.0 | Abstract capability identifiers replace hard-coded tool names |\n| v1.9.0 | Decouple CAPTURE from VISUAL_ANALYZE |\n| v1.8.0 | Video add-ons: +sub / +audio combinable; TTS 5-tier fallback |\n| v1.7.0 | 5-tier screen recording detection |\n| v1.6.0 | Video output format with ffmpeg MP4 |\n| v1.5.0 | Phase 1 hard stop; browser_vision failure handling |\n| v1.4.0 | Markdown / HTML / PDF output formats |\n| v1.3.0 | Action type classification; edit/delete specialized handling |\n| v1.2.0 | Mandatory screenshot rules; minimum count guarantee |\n| v1.1.0 | Login handling by browser mode |\n| v1.0.0 | Initial release |\n\n## Contributing\n\nIssues and PRs welcome:\n- Add capability mapping examples for new tools\n- Improve login handling logic\n- Add new output format support\n- Fix execution issues on specific platforms\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdashenbibi%2Ftutorial-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdashenbibi%2Ftutorial-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdashenbibi%2Ftutorial-generator/lists"}