paperclip-api
Use when managing Paperclip AI agent companies - creating tasks, managing agents, approving hires, running heartbeats, or any…
@serejarisInstall 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
Claude Code
$ npx -y skills add serejaris/personal-corp-os --skill html-draft --agent claude-code
Codex
$ npx skills add serejaris/personal-corp-os --skill html-draft -a codex -y
Cursor
$ npx skills add serejaris/personal-corp-os --skill html-draft -a cursor -y
Gemini CLI
$ npx skills add serejaris/personal-corp-os --skill html-draft -a gemini-cli -y
GitHub Copilot
$ npx skills add serejaris/personal-corp-os --skill html-draft -a github-copilot -y
OpenCode
$ npx skills add serejaris/personal-corp-os --skill html-draft -a opencode -y
Windsurf
$ npx skills add serejaris/personal-corp-os --skill html-draft -a windsurf -y
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
Manager uses your local Manager Config for repositories and boards; the distributed skill contains no personal workspace logs.
24033 skills
Stars on GitHub
Momentum
- stars in total
- 240
Other skills on personal-corp-os.
@serejarisInstall Skilldaily-retro
Experimental. Daily retro from your agents' own logs: reads today's Claude Code and Codex sessions on this machine, groups them…
@serejarisInstall Skillart-director
Orchestrate iterative visual style searches with branch prompts, decision graphs, feedback loops, and final direction selection.
@serejarisInstall Skillaudit-agent-rules
Audits the agent rules in the current folder (AGENTS.md, nested AGENTS.md files) and the skill descriptions the agent sees at…
@serejarisInstall Skillavatar
Робот агента Personal Corp. Агент делает себе голову робота из набора деталей, хранит её в штабе в stack/avatars.json и кладёт в…
@serejarisInstall Skillbenchmark
Use when choosing between engines or models for an agent pipeline and the answer must come from measurement on your own data, not…
@serejarisInstall SkillMore skills from other plugins.
i-have-adhd
Shape output for a reader with ADHD: lead with the next action, number multi-step work, restate state across turns, suppress…
@ayghriInstall Skill
distilly
Set up the owner profile so a personal agent knows who it works for (first-run setup, \"get to know me\"), or distill colleague,…
@titanwingsInstall SkillQuestions about html-draft.
- Which coding agents can use html-draft?
- html-draft installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.