Documentation
Custom HTML plans
Give coding agents a safe, composable HTML and CSS canvas for visual implementation plans without scripts or external assets.
Agent workflow
- 1
Fetch the contract
Run hsp guide custom-html so the agent sees the current profile, components, tokens, and response rules.
- 2
Compose the document
Use semantic HTML and Hostplan primitives, then add one inline style block for plan-specific art direction.
- 3
Validate before storage
Run hsp validate plan.html for actionable structural, security, accessibility, and component diagnostics.
- 4
Store and share
Run hsp add plan.html and give the reader the normal Hostplan link.
hsp guide custom-html > /tmp/hostplan-html-contract.txt
hsp validate plan.html
hsp add plan.htmlComposable primitives
The custom-html-v1 profile supplies a versioned, scriptless CSS kit. Agents can combine these primitives or add their own non-hp- classes.
layout
Responsive page, flow, inline, grid, split, and section composition.
.hp-page · .hp-stack · .hp-cluster · .hp-grid · .hp-split · .hp-section
card
A restrained surface for one decision, group, or supporting detail.
.hp-card · .hp-card-header · .hp-card-title · .hp-card-body
stat
Compact summary metrics with stable tabular numerals.
.hp-stat-grid · .hp-stat · .hp-stat-value · .hp-stat-label
list
Dense ranked or status-oriented rows that collapse cleanly on mobile.
.hp-list · .hp-list-item · .hp-list-main · .hp-list-meta · .hp-list-status
status
Status labels and explanatory callouts; set data-tone to neutral, info, success, warning, or danger.
.hp-badge · .hp-callout
process and data
Ordered work, comparison tables, and static progress summaries.
.hp-steps · .hp-step · .hp-table · .hp-progress
supporting text
Document hierarchy, code fragments, separators, and captions.
.hp-kicker · .hp-lede · .hp-divider · .hp-code · .hp-caption
Starter document
The CLI guide contains the same skeleton. The profile is pinned so a future component version cannot silently redesign an old shared plan.
<!doctype html>
<html lang="en" data-hp-mode="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="hostplan-profile" content="custom-html-v1">
<title>Implementation plan</title>
<style>
:root { --hp-accent: #77a7ff; }
@media print { .screen-only { display: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
</style>
</head>
<body>
<main class="hp-page hp-stack">
<header class="hp-stack">
<p class="hp-kicker">Implementation plan</p>
<h1>Plan title</h1>
<p class="hp-lede">A concise description of the outcome.</p>
</header>
<section class="hp-grid">
<article class="hp-card">
<header class="hp-card-header"><h2 class="hp-card-title">First workstream</h2></header>
<div class="hp-card-body"><p>Decision-complete implementation detail.</p></div>
</article>
</section>
</main>
</body>
</html>Security boundary
Custom documents render in a unique-origin sandbox. Scripts, network requests, remote assets, frames, form submission, and top-level navigation remain blocked even if an authoring check misses something. Raw and curl responses still return the exact stored source; Hostplan injects component CSS only into the rendered copy.