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

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

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.

agentmods
npx agentmods add skills/u-ichi/reviewable-html-workbench/visual-html-renderer
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.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.svg" alt="Measured on agentmods" 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. Scan, not verified.
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 $0.00268 $0.13364
Opus 5 $0.00134 $0.06682
Sonnet 5 $0.00054 $0.02673
Haiku 4.5 $0.00027 $0.01336

Measured 5d ago against content hash 180dbddd0aa5, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, 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 5d 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の urlstop_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. 5d 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 (295 stars, last pushed 26d ago), licensed MIT. It adds 268 tokens to every session and 13,364 once invoked, about $0.0013 per session on Opus 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

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

ingest-new-papers

Process all unprocessed PDFs in papers/ through the full paper-process workflow.

ctoth/research-papers-plugin · 21 tokens

paper-reader

Read scientific papers and extract implementation-focused notes. Converts PDFs to page images, then reads them. Papers at most 300pp are read directly by the assigned worker; papers greater than 300pp use a chapter-aligned chunk protocol (preferred) or 50-page chunks (fallback) and synthesize a master notes.md that…

ctoth/research-papers-plugin · 83 tokens