html-artifact

Generate self-contained, accessible HTML artifacts for complex work outputs.

16|1|Updated Jan 2, 2026

Search Tags:#architecture #documentation #html #reporting #visualization #artifact

Ready to run

npx skills add https://github.com/bahayonghang/my-ai-cli-toolkit --skill html-artifact-bahayonghang

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: html-artifact
Source: https://github.com/bahayonghang/my-ai-cli-toolkit/tree/main/skills/development-workflows/html-artifact
Command: npx skills add https://github.com/bahayonghang/my-ai-cli-toolkit --skill html-artifact-bahayonghang

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires python, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This skill solves the limitation of Markdown for complex, visual, or data-heavy outputs by generating self-contained, accessible, and professional HTML artifacts.

Core Features & Use Cases

Rich Visual Output: Create dashboards, decision matrices, architecture atlases, and interactive reports that exceed the capabilities of standard text.
Design Escalation: Apply professional design principles like visual hierarchy, density strategies, and semantic structure to ensure your output is review-ready.
Use Case: When performing a deep codebase architecture audit, use this skill to generate a multi-page, navigable report containing evidence summaries, call graphs, and risk matrices instead of a wall of text.

Quick Start

Use the html-artifact skill to generate a strategy blueprint for the current project architecture.

Frequently Asked Questions about html-artifact

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

FAQPage Schema

How do I generate a browser-viewable HTML report for a codebase architecture audit?▼

To generate a browser-viewable HTML report for an architecture audit, you can use the html-artifact skill to create self-contained, navigable documents containing evidence summaries, call graphs, and risk matrices instead of plain text.

What is the best way to create interactive decision matrices and dashboards without external dependencies?▼

Creating interactive decision matrices and dashboards without external dependencies is achieved by generating self-contained HTML artifacts that adhere to strict offline-first constraints and semantic HTML standards.

When should I use self-contained HTML artifacts instead of Markdown for complex reporting?▼

You should use self-contained HTML artifacts instead of Markdown when you need rich visual output, professional design principles like visual hierarchy, or data-heavy reports requiring semantic structure that standard text cannot handle.

Do I need Python to generate offline-first HTML artifacts for data-heavy reports?▼

Yes, you need Python installed to generate offline-first HTML artifacts for data-heavy reports, as the skill relies on Python to apply design escalation, density strategies, and pre-build size planning.

What are the limitations of offline-first HTML artifacts for implementation plans?▼

The limitations of offline-first HTML artifacts for implementation plans include strict adherence to offline-first constraints and pre-build size planning, requiring careful management of visual hierarchy and semantic structure to avoid overly dense outputs.