Menú
Generate website HTML exports and screenshots using the repo's HtmlRenderer and ScreenshotGenerator tools.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
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.
| 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.