Show each skill's cover at the top of its guide

CONVENTIONS.md

@@ -64,7 +64,8 @@ as many agents as possible. `tests/repo/` checks the ones marked *(tested)*.
 [whimsical.com/skills](https://whimsical.com/skills) lists every skill in the latest
 release, built from this repository. Each skill's page shows:
 
-- Its title, the guide's `# Title` line, which is the guide's first line *(tested)*.
+- Its title, the guide's `# Title` line, which comes right after its cover: a guide starts
+  with `![<headline>](covers/<name>.png)`, a blank line, then `# Title` *(tested)*.
 - Its card description, the `description` in its `marketplace.json` entry.
 - A summary, the guide's intro: everything before its first `##` heading. The intro starts
   with one paragraph saying what the skill does, then a ```` ```text ```` block with an

docs/app-wireframe.md

@@ -1,3 +1,5 @@
+![Any app, as wireframes.](covers/app-wireframe.png)
+
 # App Wireframe
 
 Turn any app into editable wireframes in [Whimsical](https://whimsical.com). Name an

docs/covers/README.md

@@ -1,7 +1,7 @@
 # Skill covers
 
-Every skill has a cover: a 1600x1000 image, saved at 2x, that whimsical.com shows on the
-skill's card and at the top of its page. All covers share one layout, `template.html`; what
+Every skill has a cover: a 1600x1000 image, saved at 2x, at the top of the skill's guide,
+and on its card and page on whimsical.com. All covers share one layout, `template.html`; what
 changes per skill is a two-line text spec and one illustration. The page around the cover
 already says what the skill does and shows a prompt, so the cover only names the skill's
 promise and shows it.
@@ -35,7 +35,9 @@ For a skill named `<name>`:
    ```
 
 `tests/repo/` checks that every skill has all three files and that the PNG is the right
-size. Commit the PNG: the website reads it from the repository at the latest release.
+size. Commit the PNG, and put it at the top of the skill's guide, above its title:
+`![<headline>](covers/<name>.png)`. The website reads it from the repository at the latest
+release.
 
 ## Drawing the illustration
 

docs/renewal-timeline.md

@@ -1,3 +1,5 @@
+![Every renewal, on one timeline.](covers/renewal-timeline.png)
+
 # Renewal Timeline
 
 Turn a customer's renewal emails into a timeline in [Whimsical](https://whimsical.com), and a

tests/repo/test_repo.py

@@ -99,7 +99,11 @@ def test_has_guide_tests_and_gallery_row(skill):
 def test_guide_intro_is_what_the_website_shows(skill):
     # whimsical.com/skills reads the title and the intro, up to the first "##". See CONVENTIONS.md.
     guide = (ROOT / "docs" / f"{skill.name}.md").read_text()
-    assert re.match(r"# \S.*\n\n", guide), "the guide starts with a '# Title' line, then a blank line"
+    cover = f"(covers/{skill.name}.png)\n\n"
+    assert guide.startswith("![") and cover in guide.split("\n", 1)[0] + "\n\n", \
+        f"the guide starts with its cover: ![<headline>]{cover.strip()}"
+    guide = guide.split("\n\n", 1)[1]
+    assert re.match(r"# \S.*\n\n", guide), "the cover is followed by a '# Title' line, then a blank line"
     intro = guide.split("\n## ", 1)[0].split("\n", 1)[1].strip()
     first = intro.split("\n\n", 1)[0]
     assert not first.startswith(("```", "!", "[!", "|", "-")), "the intro opens with a paragraph of prose"