htmlify is a skill family for coding agents. Instead of answering in walls of markdown, your agent ships self-contained HTML — operator briefs, review packets, incident timelines, presentation decks with speaker notes — one file you can open, print, annotate, and keep.
/plugin marketplace add zakelfassi/htmlify /plugin install htmlify@htmlify
git clone https://github.com/zakelfassi/htmlify.git ~/.htmlify ln -sfn ~/.htmlify/skills/htmlify ~/.codex/skills/htmlify ln -sfn ~/.htmlify/skills/deckify ~/.codex/skills/deckify
git clone https://github.com/zakelfassi/htmlify.git ~/.agent-skills/htmlify # then point a project rule at: # ~/.agent-skills/htmlify/skills/htmlify/SKILL.md # ~/.agent-skills/htmlify/skills/deckify/SKILL.md
# pipe any long answer into a designed artifact printf '%s' "$LONG_ANSWER" | npx -y @zakelfassi/htmlify htmlify-answer --title "Review" # validate any artifact (rich, app, or deck profile) npx -y @zakelfassi/htmlify htmlify-answer --validate artifact.html --profile auto
pi install npm:@zakelfassi/htmlify # then: /htmlify · /html-last · /html-comments
The skill reads the repo, git state, PRs, CI, logs, and docs before designing anything. Uncertain claims get marked needs verification, not asserted.
Inline CSS and JS in the Hardcopy design language: plates, hairlines, stamps, carbon code wells. Document modes from htmlify, deck modes from deckify.
The bundled validator checks structure, script safety, external-asset bans, deck contracts, and size — then the artifact opens in your browser.
Scoreboard, shipped timeline, risks, and on-deck actions for this release. Look for: the plate, stamps, and index rail.
pr-review-packetA real merged PR as a review packet: motivation, diff tour, reviewer checklist. Look for: annotated file tour.
incident-reportA real bug, from discovery to fix: impact, timeline, root cause, follow-ups. Look for: the discovery→fix timeline.
decision-briefThe actual architecture decision behind this release, with options, tradeoffs, and the call. Look for: the decision panel.
implementation-mapCapture → render → validate → annotate, with the module graph and hot path. Look for: the inline SVG dependency map.
explainerThe principles behind the project as a learning artifact: TL;DR, comparison matrix, FAQ. Look for: the comparison matrix.
prototypeAn interactive triage board with status cycling and JSON export — the interactive ceiling of an artifact. Look for: export button.
talk-deckThe launch talk as a deck: speaker notes on every slide, run-of-show, keyboard nav. Press → to advance, N for notes.
workshop-deckA teaching deck with exercises, checkpoints, and a printable guide mode. Press G for the guide, then print to PDF.
--profile rich (or app for interactive artifacts)--profile deckHTML beats markdown when the work has shape. Comparison, architecture, timelines, ownership, review — these are spatial. A wall of markdown flattens them; a designed page restores them.
Self-containment is a security posture, not a style. One file, inline everything, no CDNs, no analytics, no external fonts. The validator enforces it: blocked script sources, no event-handler attributes, no remote assets. What you open is what you can read in view-source.
Evidence before design. Artifacts are built from repo state, git history, CI, and logs — and claims the agent can't verify are stamped needs verification instead of asserted.
The terminal stays primary. Your answer remains in the terminal; the artifact is an explicit export, never a replacement. Hooks only archive answers past a threshold you set.