serejaris/html-draft
Use when user wants a standalone HTML diagram in flat engineering blueprint style — architecture diagrams, system flows, technical spec sheets, component maps. Generates one HTML file using Tailwind v4 (browser CDN) for layout and D3 v7 (CDN) for SVG diagrams. User-invoked only — do NOT auto-trigger. Triggers on "/html-draft", "сделай blueprint", "технический чертёж", "архитектурная схема", "инженерная схема", "blueprint diagram", "engineering blueprint", "technical spec sheet", "architecture diagram", "system flow diagram".
npx skills add https://github.com/serejaris/personal-corp-skills --skill html-draftGenerate 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:
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.
@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.
font-ui)font-mono.diagram-canvas — bordered box with generous padding (p-8 or more)grid / flex utilities; no eyeballingborder-t / border-l for orthogonal CSS connectors<svg>https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4https://cdn.jsdelivr.net/npm/d3@7<!DOCTYPE html> through </html><style type="text/tailwindcss"> @theme block — no scattered custom CSS<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>[Diagram Title]</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@theme {
--color-c-bg: #f8fafc;
--color-c-canvas: #ffffff;
--color-c-border: #cbd5e1;
--color-c-border-strong: #94a3b8;
--color-c-text-main: #0f172a;
--color-c-text-sub: #64748b;
--color-c-accent: #b91c1c;
--font-ui: system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: 'SF Mono', Monaco, Consolas, monospace;
}
body {
font-family: var(--font-ui);
}
.mono {
font-family: var(--font-mono);
}
</style>
</head>
<body class="bg-c-bg text-c-text-main p-10">
<div class="max-w-[1200px] mx-auto bg-c-canvas border-2 border-c-border-strong p-8">
<header class="border-b border-c-border pb-4 mb-6 flex items-end justify-between">
<div>
<h1 class="text-2xl font-semibold">[Title]</h1>
<p class="mono text-[11px] uppercase tracking-widest text-c-text-sub mt-1">
[SUBTITLE]
</p>
</div>
<div class="mono text-[11px] text-c-text-sub text-right">
DOC-[ID]<br/>REV A
</div>
</header>
<!-- Diagram content: Tailwind grid for spec sheets, D3 SVG for flows -->
<section class="grid grid-cols-2 border border-c-border">
<!-- spec cells, see snippets below -->
</section>
<!-- D3 mount point for SVG diagrams -->
<svg id="d3-diagram" class="w-full border border-c-border mt-6" height="400"></svg>
</div>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script>
// D3 diagram rendering — see "D3 patterns" section below
</script>
</body>
</html>
<div class="bg-c-canvas border border-c-border p-3">
<div class="text-[10px] uppercase tracking-wide text-c-text-sub">label</div>
<div class="mono text-sm">value</div>
</div>
<span class="inline-block mono text-[10px] uppercase px-1.5 py-0.5 border border-c-text-main">
ACTIVE
</span>
<span class="inline-block mono text-[10px] uppercase px-1.5 py-0.5 bg-c-text-main text-c-canvas">
SCHEDULED
</span>
<span class="inline-block mono text-[10px] uppercase px-1.5 py-0.5 bg-c-accent text-c-canvas">
OVERDUE
</span>
<div class="border-t border-c-border"></div>
<div class="border-t border-dashed border-c-border"></div>
<div class="p-4 border-r border-b border-c-border last:border-r-0">
<div class="text-[10px] uppercase tracking-wide text-c-text-sub mb-1">label</div>
<div class="mono text-sm">value</div>
</div>
Use D3 when geometry is non-orthogonal, computed, or large enough that hand-placing nodes is unmaintainable.
const svg = d3.select('#d3-diagram');
const nodes = [
{ id: 'api', x: 100, y: 100, label: 'API' },
{ id: 'worker', x: 400, y: 100, label: 'Worker' },
{ id: 'db', x: 250, y: 280, label: 'DB' },
];
const links = [
{ source: 'api', target: 'worker', style: 'solid' },
{ source: 'api', target: 'db', style: 'solid' },
{ source: 'worker', target: 'db', style: 'dashed' },
];
const byId = Object.fromEntries(nodes.map(n => [n.id, n]));
// arrow marker
svg.append('defs').append('marker')
.attr('id', 'arrow').attr('viewBox', '0 -5 10 10')
.attr('refX', 8).attr('refY', 0).attr('markerWidth', 6).attr('markerHeight', 6)
.attr('orient', 'auto')
.append('path').attr('d', 'M0,-4L8,0L0,4').attr('fill', '#0f172a');
// links
svg.selectAll('line').data(links).enter().append('line')
.attr('x1', d => byId[d.source].x).attr('y1', d => byId[d.source].y)
.attr('x2', d => byId[d.target].x).attr('y2', d => byId[d.target].y)
.attr('stroke', '#0f172a').attr('stroke-width', 1)
.attr('stroke-dasharray', d => d.style === 'dashed' ? '4 3' : null)
.attr('marker-end', 'url(#arrow)');
// nodes
const g = svg.selectAll('g.node').data(nodes).enter().append('g')
.attr('transform', d => `translate(${d.x - 50}, ${d.y - 18})`);
g.append('rect').attr('width', 100).attr('height', 36)
.attr('fill', '#fff').attr('stroke', '#0f172a').attr('stroke-width', 1);
g.append('text').attr('x', 50).attr('y', 22)
.attr('text-anchor', 'middle').attr('font-size', 12)
.attr('font-family', 'system-ui').text(d => d.label);
d3.hierarchy() + d3.tree() for parent/child trees (component maps, org charts). Render with the same flat node style; never use the default rounded D3 examples.
d3-dag (optional) or manual topological layout. For < 15 nodes, hand-place coordinates — it's faster and tighter than a layout algorithm.
d3-sankey plugin (https://cdn.jsdelivr.net/npm/[email protected]) when volumes matter. Keep ribbons grayscale; one accent only for the watched flow.
@tailwindcss/browser@4, d3@7)mermaid-diagrams skill if the user wants MermaidMethodology adapted from QoderWork's drafter-diagram skill (flat-engineering-blueprint visual system), restacked on Tailwind v4 + D3 v7.
Take serejaris/html-draft from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.