Skill Instructions

Purpose

Provide clear, actionable guidance for generating actual PNG screenshot files for release notes and documentation, preventing common mistakes like creating markdown links to source files or referencing non-existent images.

Hard Rules

Must

• Install Playwright before generating screenshots: Build the ScreenshotGenerator project (dotnet build src/tools/Oocx.TfPlan2Md.ScreenshotGenerator/), then install the browser via pwsh src/tools/Oocx.TfPlan2Md.ScreenshotGenerator/bin/Debug/net10.0/playwright.ps1 install chromium --with-deps. Do NOT use npx playwright install — the npm version differs from the .NET package version.
• Generate actual PNG files, NOT markdown links to source files or empty image references.
• Use scripts/generate-release-screenshots.sh for release note screenshots (includes retry logic and error reporting).
• Use scripts/generate-screenshot.sh for individual screenshots with full control (light/dark themes, DPI, crops).
• Verify generated PNG files exist at expected paths before adding markdown references.
• Verify screenshots show the intended content (not blank pages or errors) — visually inspect each screenshot.
• Use focused, small screenshots for release notes: max 580×400 pixels.
• Use only *-crop*.png files in release notes, or generate single screenshots using the release wrapper.
• Use absolute raw.githubusercontent.com URLs in release notes — relative paths like ./image.png do NOT work in GitHub Release pages. Use format: https://raw.githubusercontent.com/oocx/tfplan2md/v{VERSION}/docs/{path}/image.png where {VERSION} is the release tag.
• Choose selectors that capture the visual change: Match the selector to what the feature/fix actually changes (see Selector Guide below).
• Generate the report with --details open so resource details blocks are expanded in screenshots — unless you specifically want to capture a collapsed resource.