Monitor CI
nrwl/nx
Monitor Nx Cloud CI pipeline and handle self-healing fixes. An agent skill from nrwl/nx.
Generate website HTML exports and screenshots using the repo's HtmlRenderer and ScreenshotGenerator tools.
Install Website Visual Assets
$ npx skills add oocx/tfplan2md --skill website-visual-assets -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install oocx/tfplan2md website-visual-assets --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/oocx/tfplan2md.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/website-visual-assets .claude/skills/website-visual-assets && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "website-visual-assets" agent skill from https://github.com/oocx/tfplan2md/tree/main/.agents/skills/website-visual-assets into .claude/skills/website-visual-assets/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "website-visual-assets", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/oocx/tfplan2md/tree/main/.agents/skills/website-visual-assetsType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add oocx/tfplan2md --skill website-visual-assets -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install oocx/tfplan2md website-visual-assets --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/oocx/tfplan2md.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/website-visual-assets .agents/skills/website-visual-assets && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "website-visual-assets" agent skill from https://github.com/oocx/tfplan2md/tree/main/.agents/skills/website-visual-assets into .agents/skills/website-visual-assets/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "website-visual-assets", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add oocx/tfplan2md --skill website-visual-assets -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install oocx/tfplan2md website-visual-assets --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/oocx/tfplan2md.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/website-visual-assets .cursor/skills/website-visual-assets && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "website-visual-assets" agent skill from https://github.com/oocx/tfplan2md/tree/main/.agents/skills/website-visual-assets into .cursor/skills/website-visual-assets/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "website-visual-assets", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/oocx/tfplan2md.git --path .agents/skills/website-visual-assets--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add oocx/tfplan2md --skill website-visual-assets -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install oocx/tfplan2md website-visual-assets --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/oocx/tfplan2md.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/website-visual-assets .gemini/skills/website-visual-assets && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "website-visual-assets" agent skill from https://github.com/oocx/tfplan2md/tree/main/.agents/skills/website-visual-assets into .gemini/skills/website-visual-assets/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "website-visual-assets", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install oocx/tfplan2md website-visual-assetsInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add oocx/tfplan2md --skill website-visual-assets -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/oocx/tfplan2md.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/website-visual-assets .github/skills/website-visual-assets && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "website-visual-assets" agent skill from https://github.com/oocx/tfplan2md/tree/main/.agents/skills/website-visual-assets into .github/skills/website-visual-assets/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "website-visual-assets", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add oocx/tfplan2md --skill website-visual-assets -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install oocx/tfplan2md website-visual-assets --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/oocx/tfplan2md.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/website-visual-assets .opencode/skills/website-visual-assets && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "website-visual-assets" agent skill from https://github.com/oocx/tfplan2md/tree/main/.agents/skills/website-visual-assets into .opencode/skills/website-visual-assets/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "website-visual-assets", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
website-visual-assets- GitHub stars
- 174
- Token cost
- ~700 tokens
- SKILL.md length
- 163 words
- Files
- 1
- Skills in repo
- 28
- Repo updated
- First seen
- Licence
- MIT
At a glance
Generate website HTML exports and screenshots using the repo's HtmlRenderer and ScreenshotGenerator tools.
- Works in 6 steps: Pick the markdown report under… → Generate the required HTML exports with… → Generate screenshots from the exported… → …
- DevOps & Cloud work in your project
- SKILL.md covers Purpose, Hard Rules, Golden Example and Actions
- Calls dotnet
What it does
Website Visual Assets is an agent skill from oocx/tfplan2md. Generate website HTML exports and screenshots using the repo's HtmlRenderer and ScreenshotGenerator tools.
Its SKILL.md is about 700 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in DevOps & Cloud. The repository describes itself as: Convert terraform plans (json) into human readable markdown for easier review of changes in pull requests. The licence is MIT.
When your agent uses it
- DevOps & Cloud work in your project
Example prompts
- “/website-visual-assets”
Workflow steps
6 steps, taken from the first numbered list in SKILL.md.
- 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…
What it can do on your machine
Read from SKILL.md and the folder at commit 88d5240. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
dotnet
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Website Visual Assets loads about 700 tokens when it runs. Until then it costs about 32 tokens; SKILL.md has 163 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from oocx/tfplan2md at commit 88d5240, republished under its MIT licence (© oocx). 163 words, ~700 tokens.
Download SKILL.mdSave it as
.claude/skills/website-visual-assets/SKILL.md (or your agent's skills folder).- 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
- Use
src/tools/Oocx.TfPlan2Md.HtmlRendererto generate HTML from markdown reports. - Use
src/tools/Oocx.TfPlan2Md.ScreenshotGenerator(Playwright) to generate screenshots from those HTML exports. - Store website screenshots under
website/src/assets/screenshots/. - Update the consuming website source when screenshot assets change (for example the relevant page in
website/src/pages/or shared content data inwebsite/src/_data/).
Must Not
- Do not hand-edit screenshots or create “mock” screenshots that aren’t generated from real HTML exports.
Golden Example
# 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-pageActions
- 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.
© oocx, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in .agents/skills/website-visual-assets of oocx/tfplan2md.
Open the folder on GitHubat commit 88d5240
Compare with similar skills
Website Visual Assets next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Website Visual Assets this skilloocx/tfplan2md | 174 | — | ~700 | Automated safety check: Pass | MIT | |
| Monitor CInrwl/nx | 29k | 6 repos | ~4.7k | Automated safety check: Pass | MIT | |
| Terraform and OpenTofu Guideagentscope-ai/QwenPaw | 35k | 6 repos | ~4.2k | Automated safety check: Pass | Apache-2.0 | |
| Vercel Optimize Auditvercel-labs/agent-skills | 32k | 9 repos | ~4.3k | Automated safety check: Pass | None | |
| Openclaw Live Updateropenclaw/openclaw | 392k | — | ~3.7k | Automated safety check: Pass | MIT | |
| Analyze GitHub Action Logswithastro/astro | 63k | 1 repos | ~1.3k | Automated safety check: Pass | Custom licence |
Similar skills
Terraform and OpenTofu Guide
agentscope-ai/QwenPaw
Guidance for writing and testing Terraform and OpenTofu code: module structure, naming, test approaches, CI/CD workflows, state handling and security scanning.
- Official
Vercel Optimize Audit
vercel-labs/agent-skills
Runs a metrics-first audit of a deployed Vercel project, gating investigations on real signals to produce ranked, citation-backed cost and performance recommendations.
Openclaw Live Updater
openclaw/openclaw
Maintain the canonical live OpenClaw main checkout, macOS LaunchAgent-managed Gateway, local macOS app, exact-head main CI, and recurring full release validation.
- Official
Analyze GitHub Action Logs
withastro/astro
Analyze recent GitHub Actions workflow runs to identify patterns, mistakes, and improvements.
KubeSphere Multi-Tenant Management
kubesphere/kubesphere
Creates and queries KubeSphere users, workspaces and projects and assigns built-in roles, defaulting to least privilege and never deleting anything.
More from oocx/tfplan2md
All 28 skills in this repoCreate Agent Skill
oocx/tfplan2md
Create a new Agent Skill following project standards and templates.
Detect Diagram Crossings
oocx/tfplan2md
Detect and analyze edge crossings and overlaps in SVG workflow diagrams using geometric intersection algorithms and visual analysis.
Generate Release Screenshots
oocx/tfplan2md
Generate PNG screenshots for release notes using the repository's HtmlRenderer and ScreenshotGenerator tools.
Git Rebase Main
oocx/tfplan2md
Safely rebase the current feature branch on top of the latest origin/main.
Next Issue Number
oocx/tfplan2md
Determine the next available issue number across all change types (feature, fix, workflow, website) by checking both local docs and remote branches, then reserve it by pushing an empty branch.
Run Uat
oocx/tfplan2md
Run User Acceptance Testing by creating a PR with rendered markdown on GitHub or Azure DevOps.
Related
Categories
Questions about Website Visual Assets
What does Website Visual Assets do?
Generate website HTML exports and screenshots using the repo's HtmlRenderer and ScreenshotGenerator tools. Website Visual Assets is an agent skill from oocx/tfplan2md. Generate website HTML exports and screenshots using the repo's HtmlRenderer and ScreenshotGenerator tools.
When should I use Website Visual Assets?
Website Visual Assets fits situations like: devOps & Cloud work in your project.
How do I install Website Visual Assets in Claude Code?
Run `npx skills add oocx/tfplan2md --skill website-visual-assets -a claude-code`. Or copy the skill folder (.agents/skills/website-visual-assets in oocx/tfplan2md) into .claude/skills/website-visual-assets in your project. Claude Code loads it when a task matches its description.
How do I install Website Visual Assets in Codex?
Run `npx skills add oocx/tfplan2md --skill website-visual-assets -a codex`. Or copy the skill folder (.agents/skills/website-visual-assets in oocx/tfplan2md) into .agents/skills/website-visual-assets in your project. Codex loads it when a task matches its description.
Can I use Website Visual Assets in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add oocx/tfplan2md --skill website-visual-assets -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/website-visual-assets, .gemini/skills/website-visual-assets, .github/skills/website-visual-assets and .opencode/skills/website-visual-assets in your project.
What does Website Visual Assets need to run?
Going by SKILL.md and its folder, Website Visual Assets needs the command-line tools its instructions call (dotnet).
Does Website Visual Assets access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Website Visual Assets safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Website Visual Assets use?
Website Visual Assets is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Website Visual Assets use?
About 700 tokens (SKILL.md is roughly 2.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Website Visual Assets?
Skills that share tags, products or a category with Website Visual Assets: Monitor CI (nrwl/nx, 29k stars), Terraform and OpenTofu Guide (agentscope-ai/QwenPaw, 35k stars), Vercel Optimize Audit (vercel-labs/agent-skills, 32k stars) and Openclaw Live Updater (openclaw/openclaw, 392k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Website Visual Assets?
oocx (a GitHub user) maintains it in oocx/tfplan2md, which has 174 GitHub stars. The repository holds 28 skills in this directory. The repository was last updated on October 7, 2026.
Source: oocx/tfplan2md on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.