Skill
paperclip-api
Use when managing Paperclip AI agent companies - creating tasks, managing agents, approving hires, running heartbeats, or any Paperclip control-plane…
@serejarisView SkillProductivity
Skill
/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
Install
$ npx -y skills add serejaris/personal-corp-os --skill html-draft --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/html-draft
Context preview
The summary Claude sees to decide when to auto-load this skill.
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
SKILL.md
html-draft.SKILL.mdname: html-draft
description: 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".
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`.
Typography
- Headings, labels: sans-serif (`font-ui`)
- Data, paths, code, IDs, version strings: `font-mono`
- Never link Google Fonts — the system stack already covers both roles
Layout
- Whole diagram lives in a `.diagram-canvas` — bordered box with generous padding (`p-8` or more)
- Header: title + UPPERCASE subtitle, separated from body by a 1px bottom border
- Strict alignment via `grid` / `flex` utilities; no eyeballing
Connectors
- Thin straight or orthogonal lines (1px solid)
- Dashed lines for abstract / logical relationships, never structural ones
- D3-rendered SVG for non-orthogonal arrows; Tailwind `border-t` / `border-l` for orthogonal CSS connectors
Icons & badges
- Icons: simple stroke SVG (no fills, no detail) drawn via D3 or inline `<svg>`
- Badges: outlined or solid black/gray block, small uppercase mono text
Hard requirements
1. **Tailwind v4 via browser CDN** — version-pinned `https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4` 2. **D3 v7 via jsDelivr CDN** — version-pinned `https://cdn.jsdelivr.net/npm/d3@7` 3. **Return only** the HTML — no markdown wrapper, no commentary outside the file 4. **Complete document** — `<!DOCTYPE html>` through `</html>` 5. **Design tokens** declared in a single `<style type="text/tailwindcss">` `@theme` block — no scattered custom CSS 6. **Custom CSS minimal** — only what Tailwind utilities cannot express (e.g. SVG marker definitions, complex pseudo-elements) 7. **No external fonts** (no Google Fonts, no Adobe Fonts) — only Tailwind + D3 CDNs
Output template
<!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/npRead more
name: html-draft description: 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".
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`.
Typography
- Headings, labels: sans-serif (`font-ui`)
- Data, paths, code, IDs, version strings: `font-mono`
- Never link Google Fonts — the system stack already covers both roles
Layout
- Whole diagram lives in a `.diagram-canvas` — bordered box with generous padding (`p-8` or more)
- Header: title + UPPERCASE subtitle, separated from body by a 1px bottom border
- Strict alignment via `grid` / `flex` utilities; no eyeballing
Connectors
- Thin straight or orthogonal lines (1px solid)
- Dashed lines for abstract / logical relationships, never structural ones
- D3-rendered SVG for non-orthogonal arrows; Tailwind `border-t` / `border-l` for orthogonal CSS connectors
Icons & badges
- Icons: simple stroke SVG (no fills, no detail) drawn via D3 or inline `<svg>`
- Badges: outlined or solid black/gray block, small uppercase mono text
Hard requirements
1. **Tailwind v4 via browser CDN** — version-pinned `https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4` 2. **D3 v7 via jsDelivr CDN** — version-pinned `https://cdn.jsdelivr.net/npm/d3@7` 3. **Return only** the HTML — no markdown wrapper, no commentary outside the file 4. **Complete document** — `<!DOCTYPE html>` through `</html>` 5. **Design tokens** declared in a single `<style type="text/tailwindcss">` `@theme` block — no scattered custom CSS 6. **Custom CSS minimal** — only what Tailwind utilities cannot express (e.g. SVG marker definitions, complex pseudo-elements) 7. **No external fonts** (no Google Fonts, no Adobe Fonts) — only Tailwind + D3 CDNs
Output template
<!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/np Ships withpersonal-corp-os
Personal Corp is a way to run a one-person company through AI agents: tasks out of your head, departments instead of one person's memory, a weekly retro instead of "I'll sort it out someday".
Get the whole plugin
Other skills on personal-corp-os.
@serejarisView SkillSkill
art-director
Orchestrate iterative visual style searches with branch prompts, decision graphs, feedback loops, and final direction selection.
@serejarisView SkillSkill
cc-analytics
Use when user asks for Claude Code usage stats, weekly analytics, project activity summary, or wants to see what projects were worked on. Triggers on…
@serejarisView SkillSkill
ceo-council
Use when needing strategic project analysis from multiple independent expert perspectives. Triggers on business decisions, growth strategy, product direction,…
@serejarisView SkillSkill
claude-md-writer
Use when creating or refactoring CLAUDE.md files - enforces best practices for size, structure, and content organization
@serejarisView SkillSkill
corp-doctor
Use when a Personal Corp operating loop needs setup, repair, a new department, or task routing: HQ files and agent rules, GitHub issue workflow, corp-* owner…
@serejarisView Skill