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.svg" alt="Measured on agentmods" 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 | $0.00065 | $0.01580 |
| Sonnet 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 8d 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.
- 8d 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 (224 stars, last pushed 12d ago), licensed MIT. It adds 130 tokens to every session and 3,161 once invoked, about $0.0006 per session on Opus 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
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.
overwatch-slidedeck
Build interactive live slide decks with Vite + React 19, TanStack Router, WebGPU shaders, Framer Motion orchestration, 1920x1080, access-gated SPA. 39 components (layout, interaction, graphics, chrome, navigation), direction-aware slide transitions, presenter mode with speaker notes and BroadcastChannel sync…
grainient
Recreate grainient.supply's 16 dark-mode visual effects as single-file HTML pages: WebGL shader gradients, vignette overlays, 9-layer box shadows, smooth scroll, spring animations, hover-zoom, ticker marquees, glassmorphism, 3D card flips, bento grids, gradient CTAs. Dark-mode-first with lime green (#C2F13C) accent.…
figma-mcp
Convert Figma designs into production-ready code using MCP server tools. Use this skill when users provide Figma URLs, request design-to-code conversion, ask to implement Figma mockups, or need to extract design tokens and system values from Figma files. Works with frames, components, and entire design files to…
mindnode-ui
Build MindNode-inspired mind mapping interfaces — 8 node shapes, 27+ themes, layout algorithms (horizontal, vertical, radial with D3), keyboard shortcuts, focus mode, dual view. React + xyflow/react v12 + Zustand + Tailwind. Triggers on mind map, visual thinking tool, node-based diagram, brainstorm canvas, MindNode.
shadcn
Install, customize, and compose shadcn/ui components with design-system awareness. Covers CLI v4, custom registries, Tailwind v4 OKLCH theming, components.json, presets, and monorepo setup. Pairs with minoan-frontend-design for creative direction. Triggers on shadcn, install component, shadcn theme, OKLCH colors…