skills.rest
mikalv
mikalvCOMMUNITY
Explore all skills by this author →
Website𝕏@mikalvGitHub

html-artifact

Generate standalone HTML artifacts from plans, reports, reviews, and prototypes.

Updated Aug 2, 2026
Search Tags:#templates#html#prototype#browser#generate#report#artifact
One-click install
npx skills add https://github.com/mikalv/pi-extensions --skill html-artifact-mikalv
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: html-artifact
Source: https://github.com/mikalv/pi-extensions/tree/main/packages/vstack/skills/html-artifact
Command: npx skills add https://github.com/mikalv/pi-extensions --skill html-artifact-mikalv

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Long chat replies and Markdown files are poor formats for content meant to be read, compared, or presented by humans. This Skill converts conversations, plans, reports, reviews, and prototypes into polished standalone HTML pages that open directly in a browser. ## Core Features & Use Cases - Standalone HTML Output: Produces a single .html file with inline CSS/JS, no build step, saved to artifacts/<slug>.html and opened in the default browser with a file:// link. - Twenty Ready Templates: Covers code approach comparisons, PR reviews, design systems, slide decks, status and incident reports, flowcharts, explainers, implementation plans, and interactive editors (triage boards, feature flags, prompt tuners). - Use Case: After reviewing a pull request, ask for a review artifact and receive an annotated HTML page with a risk map, per-file diffs, inline comments, and a next-steps checklist instead of a wall of chat text. ## Quick Start Ask the agent to turn the current plan or report into an HTML artifact, for example: create an HTML artifact comparing these three implementation approaches.

Frequently Asked Questions about html-artifact

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

FAQPage Schema
How do I turn a plan or report into an HTML page?▼

Ask for an HTML artifact of the content. The skill picks the closest template from its templates directory, replaces the demo content with yours, writes a single .html file under artifacts/, and opens it in your default browser with a file:// link.

What templates are available for HTML artifacts?▼

Twenty templates cover code approach comparisons, visual design explorations, PR reviews, code walkthroughs, design systems, component variants, animation and interaction prototypes, slide decks, SVG diagrams, status and incident reports, flowcharts, explainers, implementation plans, PR writeups, and three editor styles.

Does the generated HTML need a build step or dependencies?▼

No. Every artifact is one standalone .html file with inline CSS and JavaScript. There is no bundler, framework, or external dependency, so the file opens directly in any browser.

Where are HTML artifacts saved and how do I view them?▼

By default files are written to artifacts/<short-slug>.html, creating parent directories as needed, unless you specify a path. After writing, the skill opens the file in your default browser and replies with the file:// link.

When should I use an HTML artifact instead of Markdown?▼

Use it when the output is meant to be read, compared, or presented by humans rather than edited as source. Visual comparisons, annotated reviews, slide decks, and interactive editors benefit from HTML; plain documentation or code-adjacent notes are better left as Markdown.

Related Skills

Explore More Content & Communication Skills→
aimskraimskr

learning-research

Coordinate parallel sub-agents to collect learning resources and generate structured Obsidian notes.

Official
Advanced
orqesaorqesa

product_review

Design product review cadences with meeting structures and stakeholder alignment templates.

Official
Intermediate
poko8nadapoko8nada

investigator

Detect website technologies, architecture, and integrations via Playwright browser automation.

Community
Intermediate
claude-office-skillsclaude-office-skills
3

ask-mode

Analyzes documents in read-only mode to reveal structure, key points, and writing style.

Official
Basic