Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add serejaris/personal-corp-os --skill html-draftgit clone --depth 1 https://github.com/serejaris/personal-corp-osWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/serejaris/personal-corp-os/html-draft)<a href="https://agentmods.dev/skills/serejaris/personal-corp-os/html-draft"><img src="https://agentmods.dev/badge/skills/serejaris/personal-corp-os/html-draft/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/serejaris/personal-corp-os/html-draft"><img src="https://agentmods.dev/badge/skills/serejaris/personal-corp-os/html-draft.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00130 | $0.03161 |
| Opus 5.5 | $0.00052 | $0.01264 |
| Sonnet 5.5 | $0.00026 | $0.00632 |
| Haiku 4.5 | $0.00013 | $0.00316 |
Grade A, and why
html-draft scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 280 lines — stays where its author put it; the contents beside it link to each section on GitHub.
html-draft — Flat Engineering Blueprint Diagrams
Generate one HTML page that renders a technical diagram in a strict flat-blueprint aesthetic — the look of a printed engineering specification sheet, not a marketing landing.
Stack: Tailwind v4 via @tailwindcss/browser CDN for layout + utilities, D3 v7 via jsDelivr CDN for SVG-based diagrams (nodes, connectors, layouts, animations).
Use this when the user wants an architecture diagram, system flow, technical spec sheet, or component map as a standalone HTML artifact (suitable for slides, reports, exports).
Don't use this for:
- Inline schemas inside markdown documents — use a mermaid renderer instead
- Newspaper / reading-first single-column pages with monospace ink-on-cream feel
- Multi-section interactive explainers with pill navigation
Design philosophy
Precise. Objective. High data-ink ratio (Tufte). Every pixel earns its place; nothing decorative. The stack is modern (Tailwind + D3) but the output looks like a printed engineering doc.
Visual rules
Flat, outlined, monochrome
- No drop shadows, gradients, glassmorphism, blur, rounded buttons
- 1px or 2px solid borders define structure
- White content blocks on a light-gray canvas
- Accent: black, or a single semantic color (red for error, etc.) used sparingly
- Do not import a Tailwind component library — pure utility classes only
Design tokens (declared once via @theme)
@theme {
--color-c-bg: #f8fafc; /* page background — slate-50 */
--color-c-canvas: #ffffff; /* diagram canvas */
--color-c-border: #cbd5e1; /* slate-300 */
--color-c-text-main: #0f172a; /* slate-900 */
--color-c-text-sub: #64748b; /* slate-500 */
--color-c-accent: #b91c1c; /* red-700 — semantic only */
--font-ui: system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: 'SF Mono', Monaco, Consolas, monospace;
}
Tokens become Tailwind utilities automatically: bg-c-canvas, border-c-border, text-c-text-sub, font-mono.
What ships with it
3 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 1mo ago First seen · 280 lines · 130 tokens per session scan A ab7e85e8a7b6
html-draft is a skill published in the GitHub repository serejaris/personal-corp-os (232 stars, last pushed 2d ago), licensed MIT. It adds 130 tokens to every session and 3,161 once invoked, about $0.0005 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
architecture-diagram
Generate architecture diagrams as fully editable SVG with native AWS, Azure, and GCP icons for cloud diagrams, or hand-drawn generic icons for everything else. Optionally deliver a self-contained editable draw.io mxGraph companion. Deterministic layout computes zone nesting and orthogonal routing instead of…
concept-to-image
Turn concepts into static HTML visuals exported as PNG or SVG files via HTML/CSS/SVG. Triggers on: "create an image of", "export as PNG", "save as SVG", "concept to image", "screenshot this HTML". NOT for interactive HTML, use static-web-artifacts-builder.
tldraw
Generate hand-drawn whiteboard-style diagrams (.tldr) from natural language and export to PNG/SVG via tldraw-cli, with vision-based self-check and an iterative review loop. Covers flowcharts, sequence diagrams, ERDs, UML sketches, and ML model diagrams. Triggers on: "whiteboard diagram", "sketch this out", "tldraw…
ux-expert
UX design expert for auditing and redesigning pages, dashboards, and data-dense interfaces via 4-phase collaborative reviews across 8 UX dimensions. Triggers on: "review UX", "audit this page", "redesign the dashboard", "UX review", "improve the layout", "dashboard UX audit", "component recommendations".
static-web-artifacts-builder
Build self-contained static HTML artifacts opened in a browser: interactive diagrams, dashboards, infographics. Pure HTML5+CSS3+inline SVG, zero toolchain. Triggers on: "interactive HTML", "open in browser", "HTML artifact", "visual dashboard", "HTML infographic". NOT for PNG/SVG output, use concept-to-image.
chart-clarity
Create, review, and restyle data visualizations using Edward Tufte principles: high data-ink ratio, direct labels, range-frame axes, small multiples, accessible color, responsive charts, and honest comparisons. Triggers on: "create a chart", "style this chart", "review this graph", "Tufte chart", "data visualization"…