Stats
Actions
Tags
From htmlify
Creates self-contained HTML artifacts from code, plans, or repo context: operator briefs, build plans, implementation maps, PR/release packets, incident timelines, decision briefs, reports, and more.
How this skill is triggered — by the user, by Claude, or both
Slash command
/htmlify:htmlifyThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Use HTML when the answer needs shape, scanning, comparison, annotation, print/PDF sharing, or browser-native interaction. Produce a single `.html` file by default.
Use HTML when the answer needs shape, scanning, comparison, annotation, print/PDF sharing, or browser-native interaction. Produce a single .html file by default.
needs verification.operator-brief: what happened, what is next, blockers, risks, attention.build-plan: problem, target shape, phases, owners, validation, rollback.implementation-map: modules, files, data flow, hot path, edit sequence.pr-review-packet: motivation, before/after, diff tour, reviewer checklist.release-brief: PRs, checks, deploy state, proof, rollback.incident-report: impact, timeline, root cause, mitigations, follow-ups.decision-brief: options, tradeoffs, recommendation, decision needed.status-report: shipped, slipped, carryover, blockers, next period.explainer: concept, request path, examples, glossary, FAQs.prototype or editor: clickable flow, tuning panel, triage board, or exportable UI.deckify skill instead.Source: <a href="...">Exact source title</a> or weave the linked title into the caption. Do not leave source URLs only in hidden metadata.<html>/<body>, no missing local assets, expected sections, source-linked captions for referenced images, and no obvious layout overlap.Default to the Hardcopy design system — the document language of engineering plates and datasheets: warm paper field, ink hairlines, serif display headings, mono-uppercase metadata, one international-orange accent, carbon code wells, stamps for status, crop marks, and a plate-style title block. Load references/hardcopy.md for the token block, the seven devices, and print rules before styling any artifact.
When the project supplies DESIGN.md, brand tokens, or an established design system, those are authoritative over Hardcopy.
Before the final response, run the bundled validator on the written file:
npx -y @zakelfassi/htmlify htmlify-answer --validate path/to/artifact.html --profile rich
Use --profile app for artifacts that legitimately carry inline interactivity (editors, prototypes, boards). From a repo or plugin checkout, use node <checkout>/bin/htmlify-answer.js (in Claude Code plugin context: node "${CLAUDE_PLUGIN_ROOT}/bin/htmlify-answer.js"). Fix every reported error before responding; report any remaining warnings in the final response. If the validator cannot run in the environment, perform rule 11 manually and say so.
Use semantic structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Exact Artifact Title</title>
<style>
/* Inline, responsive, print-aware CSS. */
</style>
</head>
<body>
<main>
<section aria-labelledby="title">
<p class="eyebrow">Mode / repo / date</p>
<h1 id="title">Exact subject</h1>
</section>
</main>
</body>
</html>
Use restrained, purposeful UI. Avoid generic purple gradients, decorative blobs, nested cards, huge marketing heroes for operational work, and filler copy that restates headings.
For most operator/build artifacts:
Load references/htmlify-principles.md when the artifact needs deeper mode selection, design guidance, or examples inspired by the HTML effectiveness catalogue.
Load references/agent-integrations.md when the user asks how to install htmlify into Codex, Claude Code, Cursor, Windsurf, Aider, Pi/OMP, or other coding agents, or asks for hook-based automatic long-answer export.
Use these modules when useful:
Report the HTML file path, artifact mode, evidence sources checked, and validation performed (including the validator command and result). State any verification not run.
If using the bundled Pi/OMP runtime, see the repository README for /htmlify commands and install paths.
npx claudepluginhub zakelfassi/htmlify --plugin htmlifyCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.