| name | website-visual-assets |
| description | Generate website HTML exports and screenshots using the repo's HtmlRenderer and ScreenshotGenerator tools. |
Skill Instructions
Purpose
Provide a repeatable workflow to generate HTML exports and screenshots for the website using real repository artifacts.
Hard Rules
Must
Must Not
Golden Example
scripts/generate-screenshot.sh \
--plan examples/firewall-with-static-analysis/plan.json \
--output-prefix firewall-example \
--selector "details:has(summary:has-text('azurerm_firewall_network_rule_collection'))" \
--thumbnail-width 580 --thumbnail-height 400 \
--lightbox-width 1200 --lightbox-height 900 \
--render-target azdo \
--open-details-selector "details"
dotnet run --project src/tools/Oocx.TfPlan2Md.HtmlRenderer -- \
--input artifacts/comprehensive-demo.md \
--flavor azdo \
--template src/tools/Oocx.TfPlan2Md.HtmlRenderer/templates/azdo-wrapper.html \
--output artifacts/comprehensive-demo.azdo.html
DOTNET_SYSTEM_GLOBALIZATION_INVARIANT=1 dotnet run --project src/tools/Oocx.TfPlan2Md.ScreenshotGenerator -- \
--input artifacts/comprehensive-demo.azdo.html \
--output website/src/assets/screenshots/full-report-azdo.png \
--open-details "details" \
--full-page
Actions
- Pick the markdown report under
artifacts/ to use as the source.
- Generate the required HTML exports with
src/tools/Oocx.TfPlan2Md.HtmlRenderer.
- Generate screenshots from the exported HTML with
src/tools/Oocx.TfPlan2Md.ScreenshotGenerator.
- Place the generated screenshots in
website/src/assets/screenshots/.
- Update the consuming page or content source so it references the new screenshot asset.
- Verify the relevant page in
website/dist/ uses the correct light or dark asset variants and that any lightbox or screenshot wrapper still works.