visual-html-renderer

visual-html-renderer is a skill for Claude Code, Codex from u-ichi/reviewable-html-workbench. It costs 268 tokens per session (13,364 once invoked), scanned A, original, MIT.

A shared workflow for turning requested content into a final HTML document that can be checked and previewed in a browser. It chooses a document structure, renders it, validates the result, and returns a temporary preview link.

In plain words
What is it for?
It helps create reports and reviewable documents containing tables, lists, code, notes, diagrams, and generated images, then validate and preview them.
Why use it?
It replaces one-off HTML generation with a defined process that checks the document model and final bundle before handing it over.

Skill for Claude CodeCodex

Written for Claude Code and Codex: argument-hint in frontmatter, but also agents/openai.yaml present. Also seen: mentions Codex.

Part of the reviewable-html-workbench plugin — 3 skills, 1 hook shipped together

Good fit It helps create reports and reviewable documents containing tables, lists, code, notes, diagrams, and generated images, then validate and preview them.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/u-ichi/reviewable-html-workbench/visual-html-renderer
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add u-ichi/reviewable-html-workbench --skill visual-html-renderer
Clone the repo
git clone --depth 1 https://github.com/u-ichi/reviewable-html-workbench

Made for: Claude Code, Codex.

Or install reviewable-html-workbench, the plugin that ships this one along with the rest of its 3 skills, 1 hook.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for visual-html-renderer

README.md
[![agentmods](https://agentmods.dev/badge/skills/u-ichi/reviewable-html-workbench/visual-html-renderer/github.svg)](https://agentmods.dev/skills/u-ichi/reviewable-html-workbench/visual-html-renderer)
Your own site
<a href="https://agentmods.dev/skills/u-ichi/reviewable-html-workbench/visual-html-renderer"><img src="https://agentmods.dev/badge/skills/u-ichi/reviewable-html-workbench/visual-html-renderer/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for visual-html-renderer

Your own site · 80×15
<a href="https://agentmods.dev/skills/u-ichi/reviewable-html-workbench/visual-html-renderer"><img src="https://agentmods.dev/badge/skills/u-ichi/reviewable-html-workbench/visual-html-renderer.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 268 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 13,364 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector warn 7 Sept 2026
SkillSpector: 5 findings, up to high

These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →

  • high Prompt Injection · line 74
    Hidden instructions were detected in comments or invisible text. These could contain malicious directives. Manual review is recommended.
    Fix: Audit all comments and invisible characters. Remove any instructions that direct the agent to perform unauthorized actions. Use plain, reviewable content.
  • high Prompt Injection · line 159
    Hidden instructions were detected in comments or invisible text. These could contain malicious directives. Manual review is recommended.
    Fix: Audit all comments and invisible characters. Remove any instructions that direct the agent to perform unauthorized actions. Use plain, reviewable content.
  • high Prompt Injection · line 268
    Hidden instructions were detected in comments or invisible text. These could contain malicious directives. Manual review is recommended.
    Fix: Audit all comments and invisible characters. Remove any instructions that direct the agent to perform unauthorized actions. Use plain, reviewable content.
  • medium Agent Snooping · line 453
    Skill enumerates or reads other installed skills. Access to other skills' SKILL.md files or the skills directory reveals prompt instructions, capabilities, and secrets that should be invisible to peer skills.
    Fix: Remove all code or instructions that list or read other skills' files or directories. Skills should operate independently; cross-skill access is a privilege escalation.
  • medium Agent Snooping · line 516
    Skill enumerates or reads other installed skills. Access to other skills' SKILL.md files or the skills directory reveals prompt instructions, capabilities, and secrets that should be invisible to peer skills.
    Fix: Remove all code or instructions that list or read other skills' files or directories. Skills should operate independently; cross-skill access is a privilege escalation.
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00268 $0.13364
Opus 5.5 $0.00107 $0.05346
Sonnet 5.5 $0.00054 $0.02673
Haiku 4.5 $0.00027 $0.01336

Measured 1mo ago against content hash 180dbddd0aa5, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

visual-html-renderer scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/visual-html-renderer/SKILL.md · 573 lines

How it starts

The opening of the file, as written. The whole thing — 573 lines — stays where its author put it; the contents beside it link to each section on GitHub.

visual-html-renderer

役割

HTML出力系skillの共通レンダラーとして、個別HTML生成ロジックを置き換える。

重い処理は scripts/html_review_workbench/ のPython実装に委譲し、このskillは入力確認、呼び出し順、ガード、検証を担当する。

Role

Use this skill as the shared renderer for HTML-output workflows. It replaces one-off HTML generation logic with a fixed flow: understand the requested content, design the document model, run the shared CLI, validate the bundle, and return a preview URL. Heavy implementation stays in scripts/html_review_workbench/; this skill owns input handling, workflow order, gates, and verification.

Plan Mode 中の計画確認プレビューには、このskillを使わない。その場合は plan-preview を使い、一時HTML previewとして扱う。visual-html-renderer は通常の最終HTML成果物、レポート、レビュー可能な文書のbundle生成だけを担当する。

Do not use this skill for Plan Mode proposal previews. Route those requests to plan-preview; this skill is only for final HTML artifacts, reports, and reviewable document bundles.

Strict procedure profile

  • Strictness: strict-procedure。HTML表現設計、文書モデルread-back、render、validate、preview URL提示までがこのskillの成果。
  • Hard gates: 外部サービス送信、画像生成、外部アップロード、shared state変更は該当する承認ゲートに従う。
  • Forcing function: rendererブロック対応表、render前自己レビュー、check-model CLI、Completion receipt。
  • Completion receipt: HTML表現設計、生成物、検証、preview、未実施層を最終応答に必ず含める。

言語方針 / Language behavior

Follow the language of the latest user request for progress updates, final responses, preview handoff text, and user-facing summaries. 日本語の依頼には日本語で、英語の依頼には英語で返す。入力本文や引用内容は、ユーザーが翻訳を求めない限り勝手に翻訳しない。HTML内の見出しや本文は、元資料の言語、ユーザーの指定、レビュー対象読者に合わせる。

基本手順

  1. Plan Mode 中の計画確認プレビュー、<proposed_plan> の視覚確認、計画URLの追加が目的なら、このskillではなく plan-preview を使う。
  2. 文書モデルとレンダリングオプションを確認する。
  3. 文書モデルが未指定の場合は、直前の成果物またはユーザー指定内容を読み、HTML表現設計フェーズで構成を決める。
  4. 現行rendererのブロック型に合わせて、agentが document-model.json を直接作る。
  5. 一時的な入力退避が必要な場合だけ build-model で source-capture draft を作ってよい。ただし draft は最終モデルではないため、そのまま render へ渡さない。
  6. render前に document-model.json を読み返し、未再構成テキストの流し込みやrenderer非対応型の使用がないことを確認する。
  7. image.generation_status=requested のブロックがある場合は、imagegen skillで画像を生成し、attach-image CLIで文書モデルへ添付する。
  8. check-model CLIで最終render前の文書モデル品質を検査する。
  9. render CLIでHTML bundleを生成する。
  10. validate CLIでHTML、asset、comment schema、図・画像の非空を検証する。
  11. ユーザー向け最終HTMLでは既定で preview CLIを --mode auto で起動し、返却JSONの url と stop_command を最終応答に必ず書く。
  12. preview 起動直後に、Monitor ツールで watch-comments を開始する。これによりブラウザからのコメントを自動検知できるようになる。Monitor 起動コマンド: python3 -m scripts.html_review_workbench.cli watch-comments --root <output-dir>。自前の polling スクリプトではなく、この CLI を使うこと。イベント受信後の処理は reviewable-design-doc skill の「コメント自動回答と解決待ちゲート」セクションに従う。

Read the full file on GitHub · 573 lines

Files

What ships with it

1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 1mo ago First seen · 573 lines · 268 tokens per session scan A 180dbddd0aa5

Subscribe to this mod's changes

visual-html-renderer is a skill published in the GitHub repository u-ichi/reviewable-html-workbench (301 stars, last pushed 1mo ago), licensed MIT. It adds 268 tokens to every session and 13,364 once invoked, about $0.0011 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

pdf-parse

Extract text and structure from PDF files into Markdown or plain text. Selects the right tool automatically: xberg for machine-readable PDFs (fast, Rust core, no ML overhead), marker-pdf for scanned or image-heavy PDFs (OCR + layout detection). Includes tool installation, update, and cleanup. Use before any task that…

geronimo-iia/agent-skills · 74 tokens

research-paper

Process an academic paper (PDF or URL) into the agent-knowledge repository. Extracts text, produces a confidence-annotated structured analysis, and integrates findings into the appropriate topic. Use when asked to read, analyse, or integrate a research paper into the knowledge base. Do NOT use for general web pages or…

geronimo-iia/agent-skills · 81 tokens

paper-retriever

Retrieve a scientific paper PDF given an arxiv URL, DOI, or paper title. Downloads to papers/ directory. Handles open-access retrieval (arxiv direct, Chrome print-to-pdf for publisher-direct HTML, Unpaywall, title-based open-repository search); for paywalled papers it hands off to whichever paper-retriever- access…

ctoth/research-papers-plugin · 88 tokens

process-new-papers

Process all unprocessed PDF files in the papers/ root directory. If subagents are available, parallelize across papers immediately after listing them; otherwise process sequentially. Any PDF in papers/ root is unprocessed by convention (processed papers live in subdirectories). Invokes paper-reader on each PDF.

ctoth/research-papers-plugin · 65 tokens

paper-retriever-bookshare

Credentialed-source backend for retrieving books from Bookshare (bookshare.org) into the papers/ collection. Given a book title or ISBN and a target directory name, it searches Bookshare and downloads the EPUB via the published bookshare CLI. Download-only (produces book.epub). Enable only if you have a Bookshare…

ctoth/research-papers-plugin · 89 tokens

paper-retriever-institutional

Paywalled-access backend for paper-retriever. Retrieves a paywalled paper's PDF through an institutional / library subscription (a library proxy such as EZproxy or OpenAthens, or an institutional login), given an identifier (DOI/URL) and the target paper directory name. Invoked by paper-retriever when open-access…

ctoth/research-papers-plugin · 92 tokens