SEO Image Generator
AgriciDaniel/claude-seo
Generates Open Graph previews, blog hero images, product photos and infographics for SEO use through Gemini image tools and the banana extension.
为技术长文自动识别插图位置,并生成 16:9 概念图/流程图/对比图/架构图。支持七种风格:手绘网格笔记本风(notebook)、专业扁平信息图(infographic)、现代高级科技商务风(executive-tech)、温暖手绘卡片风(cozy-handdrawn)、技术简笔画风(tech-doodle)、卡通信息图风(cartoon-infographic)和白板手绘风(whiteboar…
Install Tech Article Diagram
$ npx skills add wwwzhouhui/skills_collection --skill tech-article-diagram -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install wwwzhouhui/skills_collection tech-article-diagram --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/wwwzhouhui/skills_collection.git skills-src && mkdir -p .claude/skills && cp -r skills-src/ai-teaching-media/tech-article-diagram .claude/skills/tech-article-diagram && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "tech-article-diagram" agent skill from https://github.com/wwwzhouhui/skills_collection/tree/main/ai-teaching-media/tech-article-diagram into .claude/skills/tech-article-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tech-article-diagram", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/wwwzhouhui/skills_collection/tree/main/ai-teaching-media/tech-article-diagramType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add wwwzhouhui/skills_collection --skill tech-article-diagram -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install wwwzhouhui/skills_collection tech-article-diagram --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/wwwzhouhui/skills_collection.git skills-src && mkdir -p .agents/skills && cp -r skills-src/ai-teaching-media/tech-article-diagram .agents/skills/tech-article-diagram && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "tech-article-diagram" agent skill from https://github.com/wwwzhouhui/skills_collection/tree/main/ai-teaching-media/tech-article-diagram into .agents/skills/tech-article-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tech-article-diagram", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add wwwzhouhui/skills_collection --skill tech-article-diagram -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install wwwzhouhui/skills_collection tech-article-diagram --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/wwwzhouhui/skills_collection.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/ai-teaching-media/tech-article-diagram .cursor/skills/tech-article-diagram && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "tech-article-diagram" agent skill from https://github.com/wwwzhouhui/skills_collection/tree/main/ai-teaching-media/tech-article-diagram into .cursor/skills/tech-article-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tech-article-diagram", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/wwwzhouhui/skills_collection.git --path ai-teaching-media/tech-article-diagram--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add wwwzhouhui/skills_collection --skill tech-article-diagram -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install wwwzhouhui/skills_collection tech-article-diagram --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/wwwzhouhui/skills_collection.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/ai-teaching-media/tech-article-diagram .gemini/skills/tech-article-diagram && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "tech-article-diagram" agent skill from https://github.com/wwwzhouhui/skills_collection/tree/main/ai-teaching-media/tech-article-diagram into .gemini/skills/tech-article-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tech-article-diagram", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install wwwzhouhui/skills_collection tech-article-diagramInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add wwwzhouhui/skills_collection --skill tech-article-diagram -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/wwwzhouhui/skills_collection.git skills-src && mkdir -p .github/skills && cp -r skills-src/ai-teaching-media/tech-article-diagram .github/skills/tech-article-diagram && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "tech-article-diagram" agent skill from https://github.com/wwwzhouhui/skills_collection/tree/main/ai-teaching-media/tech-article-diagram into .github/skills/tech-article-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tech-article-diagram", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add wwwzhouhui/skills_collection --skill tech-article-diagram -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install wwwzhouhui/skills_collection tech-article-diagram --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/wwwzhouhui/skills_collection.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/ai-teaching-media/tech-article-diagram .opencode/skills/tech-article-diagram && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "tech-article-diagram" agent skill from https://github.com/wwwzhouhui/skills_collection/tree/main/ai-teaching-media/tech-article-diagram into .opencode/skills/tech-article-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tech-article-diagram", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
tech-article-diagram- GitHub stars
- 283
- Token cost
- ~1.8k tokens
- SKILL.md length
- 328 words
- Files
- 12 (incl. scripts, references)
- Skills in repo
- 25
- Repo updated
- First seen
- Licence
- None found
At a glance
为技术长文自动识别插图位置,并生成 16:9 概念图/流程图/对比图/架构图。支持七种风格:手绘网格笔记本风(notebook)、专业扁平信息图(infographic)、现代高级科技商务风(executive-tech)、温暖手绘卡片风(cozy-handdrawn)、技术简笔画风(tech-doodle)、卡通信息图风(cartoon-infographic)和白板手绘风(whiteboar…
- Works in 3 steps: 用户可能想保留某些位置的"文字纯净度",不加图 → 用户可能想在你没选的位置加 → 这是一个协作决策点,省了会让用户觉得失控
- Tasks that involve Image generation
- SKILL.md covers 什么时候触发这个 skill, 核心流程(四步走), 产物结构 and 常见翻车点和对策, plus 1 more section
- Runs Python scripts from its folder; calls python3; needs MULERUN_API_KEY and APIMART_API_KEY
What it does
Tech Article Diagram is an agent skill from wwwzhouhui/skills_collection. 为技术长文自动识别插图位置,并生成 16:9 概念图/流程图/对比图/架构图。支持七种风格:手绘网格笔记本风(notebook)、专业扁平信息图(infographic)、现代高级科技商务风(executive-tech)、温暖手绘卡片风(cozy-handdrawn)、技术简笔画风(tech-doodle)、卡通信息图风(cartoon-infographic)和白板手绘风(whiteboard-sketch)。当用户需要给已经写好的文章配插图、加配图、排版优化、让长文不那么单调时使用。触发词包括:加插图、配图、加几张图、让文章更生动、排版优化、文章太单调了、给文章画几张手绘图、手绘示意图、信息图、商务风配图、科技商务风。skill 的核心价值在于"智能识别文章里哪些段落值得配图"——优先选抽象概念、流程循环、对比分类、架构组件这四类地方,不在每段机械配图。通过 ai-image-generator 生图执行层生成(默认 MuleRun Nano Banana 2, 也可切换 APImart/Atlas/Agnes),支持通过 --style 切换不同视觉风格。不要用于封面图(走封面…
Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. The skill folder holds 14 other files, including scripts and reference files (for example `README.md`, `references/examples.md` and `references/prompt_template.md`).
It sits in Media & Creative, covering Image generation and Infographics. It works with Google Gemini. The repository describes itself as: 本项目是个人开发的 Claude Code Skills 集合，提供实用的技能工具，助力提升开发效率和内容创作。 分享一些好用的 Claude Code Skills，自用、学习两相宜，适用于 Claude Code v2.0 及以上版本。
When your agent uses it
- Tasks that involve Image generation
- Tasks that involve Infographics
Example prompts
- “智能识别文章里哪些段落值得配图”
- “/tech-article-diagram”
Requirements
- Python 3
- A credential in MULERUN_API_KEY
- A credential in APIMART_API_KEY
Workflow steps
3 steps, taken from the first numbered list in SKILL.md.
- 用户可能想保留某些位置的"文字纯净度",不加图
- 用户可能想在你没选的位置加
- 这是一个协作决策点,省了会让用户觉得失控
What it can do on your machine
Read from SKILL.md and the folder at commit b98f166. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 1 file in scripts/ (Python), which the agent can run.
Shell commands in SKILL.md call:
python3
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names these keys or tokens, usually read from environment variables:
MULERUN_API_KEYAPIMART_API_KEYATLASCLOUD_API_KEYAGNES_API_KEY
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Tech Article Diagram loads about 1.8k tokens when it runs, and up to ~17k if it reads all its reference files. Until then it costs about 137 tokens; SKILL.md has 328 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
Without a licence we can't republish the file, so here is its outline and opening line. It has 328 words (~1,769 tokens).
- name
- tech-article-diagram
Files
SKILL.md and 11 other files (scripts, references) in ai-teaching-media/tech-article-diagram of wwwzhouhui/skills_collection.
- SKILL.md
- README.md
- references/examples.md
- references/prompt_template.md
- references/styles/cartoon-infographic.md
- references/styles/cozy-handdrawn.md
- references/styles/executive-tech.md
- references/styles/infographic.md
- references/styles/notebook.md
- references/styles/tech-doodle.md
- references/styles/whiteboard-sketch.md
- scripts/inject_style.py
Open the folder on GitHubat commit b98f166
Compare with similar skills
Tech Article Diagram next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Tech Article Diagram this skillwwwzhouhui/skills_collection | 283 | — | ~1.8k | Automated safety check: Pass | None | |
| SEO Image GeneratorAgriciDaniel/claude-seo | 19k | 2 repos | ~2.1k | Automated safety check: Pass | MIT | |
| Gemini Carouselcharlie947/social-media-skills | 3.8k | — | ~1.7k | Automated safety check: Pass | MIT | |
| Nano Banana Pronicepkg/ai-workflow | 285 | — | ~806 | Automated safety check: Pass | MIT | |
| Create Explanatory ImageAbilityai/cornelius | 109 | — | ~2.8k | Automated safety check: Notes | MIT | |
| InfographicsK-Dense-AI/scientific-agent-skills | 48k | 1 repos | ~3.8k | Automated safety check: Notes | MIT |
Similar skills
Gemini Carousel
charlie947/social-media-skills
Generate a branded slide-by-slide LinkedIn carousel using Gemini.
Nano Banana Pro
nicepkg/ai-workflow
Generate images using Google's Nano Banana Pro (gemini-3-pro-image-preview).
Create Explanatory Image
Abilityai/cornelius
Generate explanatory diagrams and infographics that visually communicate concepts.
Infographics
K-Dense-AI/scientific-agent-skills
Creates and reviews infographics with Nano Banana 2 via OpenRouter.
Nano Banana
social-media-skills/skills
A skill your agent uses to write great prompts for Nano Banana (Google's Gemini image model: Nano Banana Pro = Gemini 3 Pro Image) to generate or edit images for social media — the…
More from wwwzhouhui/skills_collection
All 25 skills in this repoKnowledge Absorber
wwwzhouhui/skills_collection
深度解析链接/文档/代码，生成导师级教学笔记 + Wan 2.7 知识海报. An agent skill from wwwzhouhui/skills_collection.
Remotion Video Factory
wwwzhouhui/skills_collection
视觉从代码生长的技术讲解视频工厂：给一个主题，产出一条"图解动画 + AI 配音"的 MP4——结构图/矩阵/连线拓扑/图表/数字滚动全部用 Remotion + React/SVG 代码精确绘制（不用 AI 视频模型，杜绝公式乱码与连线漂移，可参数化、改数据自动重排），旁白由 TTS 逐段生成 + ffprobe 实测时长（默认 edge-tts 神经音色；--engine clone…
Voice To Video
wwwzhouhui/skills_collection
口播文字稿一键成片：TTS 配音（edge-tts，带逐句/逐词时间戳）→ HTML 动画合成（场景由时间戳驱动，画面跟着声音走）→ Playwright 逐帧确定性渲染合成 MP4。Use whenever the user wants to 把口播稿/文字稿/文案/文章做成视频、配音视频、解说视频、知识类短视频、口播视频、文字转视频、TTS video、voice-over…
Article Explainer Video
wwwzhouhui/skills_collection
把一篇技术长文/论文解读自动做成章节式解说视频(1080p, 5-8 分钟)。双主题:warm(奶油底+珊瑚红+cozy-handdrawn 透明插图,亲和感)和 midnight(深蓝黑底+琥珀金+宋体标题+executive-tech 插图,AI 科技感),storyboard 一个 theme 字段切换。每章三种 layout 混排:illustration(左文右图+Ken…
Edu Teaching Animation
wwwzhouhui/skills_collection
把单个学科概念(中文/英文都行,如"声现象""杠杆原理""光合作用")自动做成动态教学内容。两种产出都由 HyperFrames 渲染、共用同一个 index.html(mode 变量切换):① 配音教学视频 — 分镜 + Minimax / Edge TTS 中文配音 + 字幕 + 完整 MP4(1080p, ~90s, 发视频号/给孩子看);② 无声循环动图 — 同一内容的紧凑无声版…
Env Setup
wwwzhouhui/skills_collection
Checking and provisioning the machine's environment for the video-agent-kit plugin — probing for ffmpeg/ffprobe that actually carry the encoders and filters we render with (libx264/aac/libmp3lame…
Related
Works with
Categories
Questions about Tech Article Diagram
What does Tech Article Diagram do?
为技术长文自动识别插图位置,并生成 16:9 概念图/流程图/对比图/架构图。支持七种风格:手绘网格笔记本风(notebook)、专业扁平信息图(infographic)、现代高级科技商务风(executive-tech)、温暖手绘卡片风(cozy-handdrawn)、技术简笔画风(tech-doodle)、卡通信息图风(cartoon-infographic)和白板手绘风(whiteboar…. Tech Article Diagram is an agent skill from wwwzhouhui/skills_collection.
When should I use Tech Article Diagram?
Tech Article Diagram fits situations like: tasks that involve Image generation; tasks that involve Infographics.
How do I install Tech Article Diagram in Claude Code?
Run `npx skills add wwwzhouhui/skills_collection --skill tech-article-diagram -a claude-code`. Or copy the skill folder (ai-teaching-media/tech-article-diagram in wwwzhouhui/skills_collection) into .claude/skills/tech-article-diagram in your project. Claude Code loads it when a task matches its description.
How do I install Tech Article Diagram in Codex?
Run `npx skills add wwwzhouhui/skills_collection --skill tech-article-diagram -a codex`. Or copy the skill folder (ai-teaching-media/tech-article-diagram in wwwzhouhui/skills_collection) into .agents/skills/tech-article-diagram in your project. Codex loads it when a task matches its description.
Can I use Tech Article Diagram in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add wwwzhouhui/skills_collection --skill tech-article-diagram -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/tech-article-diagram, .gemini/skills/tech-article-diagram, .github/skills/tech-article-diagram and .opencode/skills/tech-article-diagram in your project.
What does Tech Article Diagram need to run?
Going by SKILL.md and its folder, Tech Article Diagram needs Python for the scripts in its folder, the command-line tools its instructions call (python3) and credentials named MULERUN_API_KEY, APIMART_API_KEY, ATLASCLOUD_API_KEY and AGNES_API_KEY. Our summary lists: Python 3; A credential in MULERUN_API_KEY; A credential in APIMART_API_KEY.
Does Tech Article Diagram access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Tech Article Diagram safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Tech Article Diagram use?
No licence was found for Tech Article Diagram or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.
How many tokens does Tech Article Diagram use?
About 1.8k tokens (SKILL.md is roughly 7.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 15k tokens, read only when the agent opens those files.
What are the alternatives to Tech Article Diagram?
Skills that share tags, products or a category with Tech Article Diagram: SEO Image Generator (AgriciDaniel/claude-seo, 19k stars), Gemini Carousel (charlie947/social-media-skills, 3.8k stars), Nano Banana Pro (nicepkg/ai-workflow, 285 stars) and Create Explanatory Image (Abilityai/cornelius, 109 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Tech Article Diagram?
wwwzhouhui (a GitHub user) maintains it in wwwzhouhui/skills_collection, which has 283 GitHub stars. The repository holds 25 skills in this directory. The repository was last updated on October 6, 2026.
Source: wwwzhouhui/skills_collection on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.