html-canvas

Generates a self-contained HTML artifact from five archetypes with inlined CSS and JS.

2|Updated Apr 24, 2026
One-click install
npx skills add https://github.com/river-walras/virtus --skill html-canvas
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: html-canvas
Source: https://github.com/river-walras/virtus/tree/main/skills/html-canvas
Command: npx skills add https://github.com/river-walras/virtus --skill html-canvas

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Generate a self-contained HTML artifact tailored to a chosen archetype from five modes.

Core Features & Use Cases

  • Self-contained HTML output: a single file with all CSS and JS inline.
  • Five archetypes: spec, code-review, design, report, and editor templates.
  • Optional on-demand resources: access to scripts, references, and assets as directed by the entry file.
  • Design system integration: leverages a canonical design identity and examples to guide layout and styling.

Quick Start

Provide a topic and mode to generate a self-contained HTML artifact that runs offline.

Frequently Asked Questions about html-canvas

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

FAQPage Schema
How do I generate a self-contained HTML file with inlined CSS and JS for offline use?

To generate a self-contained HTML file with inlined CSS and JS, provide a topic and a chosen archetype mode. The tool outputs a single HTML artifact suitable for offline use, applying a canonical design system to ensure proper layout and styling.

What HTML artifact templates are available for frontend design and code review?

Available HTML artifact templates include five archetypes: spec, code-review, design, report, and editor templates. Each archetype applies a canonical design system to generate tailored, self-contained HTML files with inlined CSS and JS.

Does the generated HTML artifact require any external dependencies to run offline?

The generated HTML artifact requires no external dependencies to run offline. It is a single file with all CSS and JS inlined, though optional on-demand resources like scripts and references can be accessed if directed by the entry file.

How do I use frontmatter to configure HTML artifact generation from a markdown file?

Frontmatter in the SKILL.md markdown file configures generation by defining the name, description, and arguments. The markdown body provides operational instructions and optional resources to guide the self-contained HTML output.

What is the best way to create a shareable HTML document from a specific topic?

The best way to create a shareable HTML document is to ingest context from a provided topic and apply a canonical design system. This generates a self-contained, single HTML file with inlined CSS and JS tailored to your chosen archetype.

Can I use a custom design system when generating a self-contained HTML file?

The tool leverages a canonical design system to guide layout and styling when generating a self-contained HTML file. It applies this established design identity and examples to ensure consistency across the five available archetype modes.