Menu
Generate website HTML exports and screenshots using the repo's HtmlRenderer and ScreenshotGenerator tools.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | website-visual-assets |
| description | Generate website HTML exports and screenshots using the repo's HtmlRenderer and ScreenshotGenerator tools. |
Provide a repeatable workflow to generate HTML exports and screenshots for the website using real repository artifacts.
src/tools/Oocx.TfPlan2Md.HtmlRenderer to generate HTML from markdown reports.src/tools/Oocx.TfPlan2Md.ScreenshotGenerator (Playwright) to generate screenshots from those HTML exports.website/src/assets/screenshots/.website/src/pages/ or shared content data in website/src/_data/).# Preferred Method: Use the automated script
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"
# This generates 12 screenshot variants automatically:
# - Thumbnail and lightbox crops
# - Light and dark themes
# - 1x and 2x DPI versions
# - Azure DevOps rendering style
# Manual Method (for advanced use cases):
# 1) Generate HTML (Azure DevOps flavor, wrapped)
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
# 2) Capture a screenshot with details expanded
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
artifacts/ to use as the source.src/tools/Oocx.TfPlan2Md.HtmlRenderer.src/tools/Oocx.TfPlan2Md.ScreenshotGenerator.website/src/assets/screenshots/.website/dist/ uses the correct light or dark asset variants and that any lightbox or screenshot wrapper still works.Minimum-requirements checklist for any change — code or docs-only. Run this before every PR creation or push to avoid CI failures on the first attempt.
Generate PNG screenshots for release notes using the repository's HtmlRenderer and ScreenshotGenerator tools. Use when asked to add screenshots to release notes or documentation.
Determine the next available issue number across all change types (feature, fix, workflow) by checking both local docs and remote branches, then reserve it by pushing an empty branch.
Convert the mermaid diagram in docs/agents.md to a blueprint-styled SVG for the website. Use when the workflow diagram in agents.md is updated and needs to be reflected on the website.
Run a focused accessibility pass for website changes (WCAG 2.1 AA-oriented).
Create and update interactive examples for the Eleventy website using page entrypoints and src/examples fragments.