Menu

Individual skill

generate-illustrated-article

Produce a COMPLETE illustrated help-centre article in one pass — draft the prose, deliberately choose which steps benefit from a screenshot, render source-grounded mockups, and optionally generate missing raster content or separately-ledgered external surfaces with OpenAI. Use when the user asks for a how-to guide, user-facing documentation, or help-centre article. Triggers on "write an article", "generate a guide", "document how to…", "write an illustrated article", "article with screenshots".

engine/generate-illustrated-article/SKILL.md

Read pinned source

Source commit e6c0b52f53793d2a45e6268a449e67c7d976d755

What was checked

Matches the observed repository HEAD
Yes
Scanner rules are current
Yes
Repository scan complete
No
Skill scan complete
No
Observed behavior
Network or broad shell
Last checked
Nov 7, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings)
121
Repository last updated
Nov 5, 2026
License
Apache-2.0

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files
Read excerpt

You are producing a **complete illustrated help-centre article** for "$topic" — prose plus rendered PNG screenshots — in **this single session**. Doing both phases in one session lets you reuse the project map, branding, and resolved view sources instead of re-loading them cold.

The crucial difference from illustrating everything: **you deliberately cover the user-performed UI actions on the main path, then choose whether any non-action steps also earn a screenshot.** `$max_images` is a **hard limit** — the `max_images` argument, else `RTFM_MAX_IMAGES` (echoed in STEP 0), else 3 — and the lint fails an article with more screenshots. Reuse one action-ready screenshot across same-surface actions; when the actions still do not fit, cover the main path first and leave conditional branches and secondary tasks as text. Rendering each mockup is the slowest part of the job, so fewer, well-chosen screenshots are the goal.

Publish the article progressively: write `article.json` as soon as the prose is complete, then publish each `block_<id>.png` immediately after that section mockup is ready. Do not hold completed screenshots until every mockup has been authored. **The reader is waiting from the first second and sees nothing until `article.json` exists, so the prose is written from a minimal grounding (Phase 1's reading budget) and the deep source resolution the mockups need happens in Phase 3, after the article is on disk — the same reading, later.** Final output remains `./output/articles/<slug>/` with `article.json`, `view_sources.json`, `block_<id>.html`, `block_<id>.png`, `lint_report.json`, and `branding.css`, plus generated-asset files only when needed.

## Phase 1 — Draft the article prose

Resolve the topic's source files and author the prose:

- STEP 0 bootstrap. Derive the slug and **write the run-trace marker** (so the trace hook logs this run for later analysis), then build the image manifest:

  ```bash
  echo "rtfm-skills v$(cat ${RTFM_SKILLS_DIR:-$HOME/.rtfm-skills}/VERSION 2>/dev/null || echo '?') — generate-illustrated-article"