메뉴
Generate website HTML exports and screenshots using the repo's HtmlRenderer and ScreenshotGenerator tools.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
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.