visual-html-renderer

Render HTML bundles from document models with validation and preview.

276|13|Updated May 17, 2026
One-click install
npx skills add https://github.com/u-ichi/reviewable-html-workbench --skill visual-html-renderer
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: visual-html-renderer
Source: https://github.com/u-ichi/reviewable-html-workbench/tree/main/skills/visual-html-renderer
Command: npx skills add https://github.com/u-ichi/reviewable-html-workbench --skill visual-html-renderer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Generating consistent, preview-ready HTML from agent-designed document models can be error-prone without a unified renderer. This skill provides a common HTML renderer that translates a document model into a verifiable HTML bundle, validates structure, and presents a session-scoped preview URL.

Core Features & Use Cases

  • Common HTML rendering surface for outputs derived from document models, including diagrams, code blocks, and images.
  • Offloads heavy work to scripts/html_review_workbench while this skill manages input checks, call order, and safety gates.
  • End-to-end preview lifecycle via the renderer CLI (build-model, attach-image, check-model, render, validate, preview), returning a usable preview URL.
  • Supports diagram blocks (Mermaid) and image attachments with semantic HTML blocks and validation.
  • Ensures final HTML integrity by validating HTML, assets, and schemas before presenting to users.

Quick Start

Provide a document-model.json and instruct the renderer to generate an HTML bundle and start a preview.

Frequently Asked Questions about visual-html-renderer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render and preview HTML from a structured document model?

To render and preview HTML from a structured document model, provide a document-model.json input to trigger the renderer CLI, which builds the model, validates structure, and returns a session-scoped preview URL.

Can I validate HTML structure and assets before generating a preview?

Yes, you can validate HTML structure, assets, and schemas before generating a preview; the renderer CLI executes a validation step to ensure final HTML integrity and verify diagram blocks and image attachments.

How do I include Mermaid diagrams and images when generating HTML bundles?

To include Mermaid diagrams and images when generating HTML bundles, the renderer processes semantic HTML blocks and attaches images via the CLI, validating the assets before presenting the final preview URL.

What is the best way to automate HTML generation from agent-generated documents?

The best way to automate HTML generation from agent-generated documents is to use a unified renderer that translates document models into verifiable HTML bundles, offloading heavy processing to scripts while managing safety gates.

Do I need a specific document-model.json format to start the HTML rendering CLI?

Yes, you need a structured document-model.json format to start the HTML rendering CLI, which uses this input to execute the build-model, attach-image, check-model, render, validate, and preview lifecycle steps.

Why does my HTML rendering pipeline fail during the validation step?

Your HTML rendering pipeline may fail during the validation step if the document model contains invalid schemas, missing image attachments, or malformed diagram blocks, which the strict HTML representation design actively rejects.