Skip to content

Add docs-say-cheese screenshot workflow skill - #12104

Open
rahmanunver wants to merge 1 commit into
mendix:developmentfrom
rahmanunver:docs-say-cheese
Open

rahmanunver wants to merge 1 commit into
mendix:developmentfrom
rahmanunver:docs-say-cheese

Conversation

@rahmanunver

@rahmanunver rahmanunver commented Oct 19, 2026 •

Copy link
Copy Markdown
Contributor

Summary

Adds /docs-say-cheese, a Claude Code skill that updates the screenshots on documentation pages after you've changed their text.

You point it at the pages, or at "the pages I changed on my branch", and Claude:

  1. Builds a shot list: every image and screenshot todo marker on those pages, each marked as new, replace, verify, or remove.
  2. Optionally checks the page text against the product's code (for example, mendix/web-widgets) and flags outdated labels or screenshots.
  3. Takes the running-app screenshots itself with Playwright, in a visible browser where you sign in yourself.
  4. Gives you a short, plain list of the Studio Pro screenshots only you can take, with exact file names.
  5. Compares each new screenshot with the current image (a subagent prefers the new one when both are equally good) and waits for your OK.
  6. Places the images: overwrites files in place so URLs keep working (or uses a new name when another page still needs the old image), halves double-resolution captures, and writes alt text with /docs-alt-text.
  7. Checks that every image path exists, runs the Hugo build if you have it, and reports what changed and what's still open.

It's user-invoked only, so it adds nothing to Claude's context until you type /docs-say-cheese.

Files

  • .claude/skills/docs-say-cheese/SKILL.md: the 7 steps.
  • .claude/skills/docs-say-cheese/shot-list.md: tracker file format and todo markers, for jobs with more than 5 shots or more than one session.
  • .claude/skills/docs-say-cheese/capture-playwright.md: getting Playwright (asks before installing anything; nothing is added to the repo's package.json), capture settings, and gotchas from real use.

There's no Copilot twin in .github/prompts/ yet. A Copilot agent-mode version would need the Playwright MCP server.

Case Study

The workflow comes from the Charts documentation overhaul in #12041. In that PR, it:

  • Replaced 15 screenshot todo markers and refreshed about 40 images (Studio Pro dialogs, runtime Chart playground shots, and sample charts in the Studio Pro 11 and 10 guides).
  • Kept two old images where the comparison showed that the new capture was worse.
  • Found a missing property (Enable advanced options) by checking the pages against the widget code, which would have left readers unable to find the settings the how-tos describe.

The gotchas in capture-playwright.md come from that work. For example: test-app license limits lock you out if you capture in parallel; some apps don't load their own fonts; and overlapping top bars need hiding.

Notes for Reviewers

  • The skill follows the screenshot rules in the contribution guidelines (contribute-to-mendix-docs/_index.md) instead of repeating them.
  • It never commits or pushes; that stays with the writer.

Add a user-invoked Claude Code skill that plans, captures, compares,
and places screenshots for documentation pages. Claude builds a shot
list from the pages' images and todo markers, takes running-app shots
with Playwright, lists the Studio Pro shots the writer must take,
compares new captures with current images, and places approved images
with alt text.

Extracted from the Charts docs overhaul (mendix#12041).
@ConnorLand ConnorLand self-assigned this Oct 19, 2026

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants