html-artifacts

Generate self-contained HTML artifacts when output is too dense for markdown chat. Curated library based on Thariq Shihipar's "Unreasonable Effectiveness of HTML" (Anthropic Claude Code team).

Trading-domain renderers also included: backtest-comparison, risk-dashboard, signal-audit, market-regime.

/plugin marketplace add fernandoxavier02/FX-studio-AI

/plugin install html-artifacts

The skill html-artifacts should now appear in your skills list. The slash command /gen-html should be available. The PostToolUse hook fires automatically when you edit a .md file under .claude/skills/, .claude/rules/, project CLAUDE.md, */knowledge_base/**, or .kiro/specs/**.

• Python 3.10+ with markdown, PyYAML, Jinja2, pydantic installed (pip install markdown PyYAML Jinja2 pydantic)
• Node 18+ (for the PostToolUse hook)
• Output dir: .claude/_html/ (gitignored — add to your .gitignore)

Edit any of these files and the hook regenerates the corresponding .claude/_html/<same-path>.html:

• .claude/skills/**/*.md
• .claude/rules/*.md
• CLAUDE.md (and */CLAUDE.md under subprojects)
• */knowledge_base/**/*.md
• .kiro/specs/**/*.md

Open with your OS's default browser:

• Windows: start .claude\_html\CLAUDE.html
• macOS: open .claude/_html/CLAUDE.html
• Linux: xdg-open .claude/_html/CLAUDE.html

/gen-html              # full regen (5 categories)
/gen-html --skills     # only skills
/gen-html --specs      # only .kiro/specs
/gen-html --kb         # only knowledge_base
/gen-html --claude     # only CLAUDE.md files
/gen-html --rules      # only .claude/rules
/gen-html <path>       # single file

from html_artifacts.src.artifact_engine import ArtifactEngine
from pathlib import Path

engine = ArtifactEngine()

# Tabular artifact
path = engine.render("table", {
    "title": "Backtest comparison",
    "columns": [{"key": "tf", "label": "Timeframe", "type": "str"},
                {"key": "pnl", "label": "PnL ($)", "type": "num"}],
    "rows": [{"tf": "H1", "pnl": 1620.5}, {"tf": "M30", "pnl": 1180.3}],
})

# Spec renderer (auto-detects requirements/design/tasks from filename)
path = engine.render_from_spec(Path(".kiro/specs/feat/requirements.md"))

# Output: .claude/_html/artifacts/<type>-YYYYMMDD-HHMMSS.html
print(path)

Full schema in skills/html-artifacts/src/artifact_schemas.py. Visual templates in skills/html-artifacts/examples/INDEX.md.

When you need item-by-item validation (5+ items), generate an interactive artifact. The user marks decisions in the browser, clicks Confirm response, copies a JSON block delimited by === ARTIFACT RESPONSE === ... === END RESPONSE ===, and pastes it back into the chat. Your agent parses the block and continues.

Schema:

{
  "title": "Validate plan v3",
  "subtitle": "5 fixes to approve",
  "context": "Markdown context paragraph...",
  "items": [
    {
      "id": "fix_1",
      "label": "Approve fix X",
      "details_md": "**Why:** ...\n**Risk:** ...",
      "type": "decision",
      "allow_note": true
    },
    {"id": "model", "label": "Model", "type": "select",
     "options": [{"value": "haiku", "label": "Haiku 4.5"},
                 {"value": "sonnet", "label": "Sonnet 4.6"}]}
  ]
}

type per item: decision (approve/reject/skip, default), checkbox, select, text.

.claude/_html/
├── CLAUDE.html                              # companion of project CLAUDE.md
├── skills/<name>/SKILL.html                 # companion of skill SKILL.md
├── rules/<NN>-*.html                        # companion of rules
├── .kiro/specs/<feat>/*.html                # companion of specs
├── <subproject>/knowledge_base/*.html       # companion of KB cards
└── artifacts/
    ├── index.html                           # filterable feed of all artifacts
    ├── base.css                             # canonical CSS (inherited)
    ├── compare-YYYYMMDD-HHMMSS.html
    ├── plan-YYYYMMDD-HHMMSS.html
    ├── interactive-YYYYMMDD-HHMMSS.html
    └── ...

Add to your .gitignore:

.claude/_html/

• Simple questions answerable in 1-3 paragraphs of markdown
• Debug / quick status
• User explicitly asks "send in chat, no html"

The thesis (Thariq) applies to output (artifacts in files). Context files (CLAUDE.md, skills, agents, rules) stay markdown.

• HTML templates 02-20 are from https://thariqs.github.io/html-effectiveness/ by Thariq Shihipar (@trq212, Anthropic Claude Code team). Reproduced under fair use as reference templates; please cite if redistributed.
• Spec renderer and trading-domain renderers are project-specific additions.

MIT — see LICENSE.

https://github.com/fernandoxavier02/html-artifacts