New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

HTML Draft

by serejaris in serejaris/personal-corp-os

A skill your agent uses when user wants a standalone HTML diagram in flat engineering blueprint style — architecture diagrams, system flows, technical spec sheets, component maps.

MITAuto-check passedDevelopment

Install HTML Draft

skills CLI
$ npx skills add serejaris/personal-corp-os --skill html-draft -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install serejaris/personal-corp-os html-draft --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/serejaris/personal-corp-os.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/html-draft .claude/skills/html-draft && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
html-draft
GitHub stars
229
Token cost
~2.9k tokens
SKILL.md length
813 words
Files
4 (incl. assets)
Skills in repo
36
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when user wants a standalone HTML diagram in flat engineering blueprint style — architecture diagrams, system flows, technical spec sheets, component maps.

  • Works in 7 steps: Tailwind v4 via browser CDN —… → D3 v7 via jsDelivr CDN — version-pinned… → Return only the HTML — no markdown… → …
  • User wants a standalone HTML diagram in flat engineering blueprint style — architecture diagrams
  • SKILL.md covers Design philosophy, Visual rules, Hard requirements and Output template, plus 6 more sections
  • Reaches cdn.jsdelivr.net

What it does

HTML Draft is an agent skill from serejaris/personal-corp-os. 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…

Its SKILL.md is about 2.9k tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including assets (for example `README.md` and `README.ru.md`).

It sits in Development, covering Diagrams. It works with Tailwind CSS. The repository describes itself as: Personal Corp OS — управление личной компанией через AI-агентов: задачи вне головы, отделы вместо памяти, недельное ретро. Открытые скиллы для Claude Code и Codex. The licence is MIT.

When your agent uses it

  • User wants a standalone HTML diagram in flat engineering blueprint style — architecture diagrams
  • Technical spec sheets
  • Сделай blueprint
  • Технический чертёж

Example prompts

  • “/html-draft”
  • “сделай blueprint”
  • “blueprint diagram”
  • “/html-draft”

Workflow steps

7 steps, taken from the first numbered list in SKILL.md.

  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
  5. Design tokens declared in a single @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

What it can do on your machine

Read from SKILL.md and the folder at commit 95e36c3. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are html, css and javascript).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • cdn.jsdelivr.net

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

HTML Draft loads about 2.9k tokens when it runs. Until then it costs about 135 tokens; SKILL.md has 813 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~135
When it runs · the whole SKILL.md, loaded when a task matches
~2.9k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from serejaris/personal-corp-os at commit 95e36c3, republished under its MIT licence (© serejaris). 813 words, ~2,886 tokens.

Download SKILL.mdSave it as .claude/skills/html-draft/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.
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)
css
@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

html
<!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>

Reusable component snippets

Node / box
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>
Badge
html
<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>
Connector (orthogonal, CSS)
html
<div class="border-t border-c-border"></div>
<div class="border-t border-dashed border-c-border"></div>
Spec grid cell
html
<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>

D3 patterns

Use D3 when geometry is non-orthogonal, computed, or large enough that hand-placing nodes is unmaintainable.

javascript
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);
Pattern 2 — tree layout (hierarchical structures)

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.

Pattern 3 — DAG / flow

d3-dag (optional) or manual topological layout. For < 15 nodes, hand-place coordinates — it's faster and tighter than a layout algorithm.

Show full SKILL.md (324 more words)Show less
Pattern 4 — sankey / flow volumes

d3-sankey plugin (https://cdn.jsdelivr.net/npm/d3-sankey@0.12) when volumes matter. Keep ribbons grayscale; one accent only for the watched flow.

What D3 must not do here
  • No force-directed simulations bouncing around — diagrams are static engineering docs
  • No smooth zoom/pan unless the user asks — extra interactivity adds noise
  • No tooltips / hover popups unless the user asks
  • No colorful palettes — the visual rules above still bind

Composition guide

  • Architecture diagram: services as D3 rect nodes, data flow as solid SVG lines with arrow markers, dependencies as dashed
  • System flow: linear stages left-to-right or top-to-bottom; decision points as outlined diamonds (D3 polygons); use Tailwind grid for non-flow sections of the same page
  • Spec sheet: Tailwind grid of labeled cells, each with a mono value and a sans-serif label; status badge top-right of each cell
  • Component map: nested boxes in HTML (Tailwind) for top level; D3 hierarchy for deep trees; badges on each node

Quality bar

  1. Every text item earns its space — no decorative copy
  2. Alignment is strict — no off-grid placement
  3. Mono and sans roles never bleed (don't put labels in mono or data in sans)
  4. Color usage stays monochrome unless one semantic accent is justified
  5. CDN scripts pinned to specific major versions (@tailwindcss/browser@4, d3@7)
  6. D3 code is readable — named variables, no one-letter chaining beyond what's idiomatic
  7. The page renders correctly on first paint even before D3 mounts (no layout jump)

When input is incomplete

  • No content → ask for the diagram type (architecture / flow / spec sheet / component map) and the items to render
  • Vague subject → propose a node list and ask for confirmation before rendering
  • User asks for a different library (Mermaid inside, Recharts, Chart.js) → push back: this skill is Tailwind + D3 only; suggest mermaid-diagrams skill if the user wants Mermaid
  • User asks for interactivity (tooltips, drag, zoom) → confirm explicitly; default is static print-style

Source

Methodology adapted from QoderWork's drafter-diagram skill (flat-engineering-blueprint visual system), restacked on Tailwind v4 + D3 v7.

© serejaris, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 3 other files (assets) in skills/html-draft of serejaris/personal-corp-os.

  • SKILL.md
  • README.md
  • README.ru.md
  • assets/illustration.png

Open the folder on GitHubat commit 95e36c3

Compare with similar skills

HTML Draft next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

HTML Draft compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
HTML Draft this skillserejaris/personal-corp-os229—~2.9kAutomated safety check: PassMIT
Update Web Assetsgarfiec/Librechat-Mobile112—~1.8kAutomated safety check: NotesMIT
Dark Architecture Diagram BuilderCocoon-AI/architecture-diagram-generator7.4k1 repos~2.1kAutomated safety check: PassMIT
Bug Finder for daisyUIsaadeghi/daisyui43k—~2.3kAutomated safety check: PassMIT
Archify Diagram BuilderUnclecheng-li/AI_Animation1.5k2 repos~4.1kAutomated safety check: PassMIT
Architecture Diagramsmallnest/pigo4751 repos~1.6kAutomated safety check: PassMIT

Similar skills

  • Update Web Assets

    garfiec/Librechat-Mobile

    Update the third-party JavaScript vendored into the app for the artifact, diagram, and math WebViews (KaTeX, mermaid, marked, highlight.js, Tailwind, Babel, React).

    112 GitHub stars~1.8k tokensUpdated today
    Frontend & DesignAuto-check: notes

  • Dark Architecture Diagram Builder

    Cocoon-AI/architecture-diagram-generator

    Creates dark-themed system, cloud, security and network architecture diagrams as self-contained HTML files with inline SVG and CSS.

    7.4k GitHub starsUsed in 1 repo~2.1k tokens
    DevelopmentAuto-check passed

  • Bug Finder for daisyUI

    saadeghi/daisyui

    Investigates suspected bugs in the daisyUI monorepo through read-only analysis, then writes a decision-ready fix plan in tmp/bugs without changing any product code.

    43k GitHub stars~2.3k tokensUpdated 8 days ago
    DevelopmentAuto-check passed

  • Archify Diagram Builder

    Unclecheng-li/AI_Animation

    Builds validated architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone interactive HTML from a small JSON spec, with optional motion and image export.

    1.5k GitHub starsUsed in 2 repos~4.1k tokens
    DevelopmentAuto-check passed

  • Architecture Diagram

    smallnest/pigo

    Create professional, dark-themed architecture diagrams as standalone HTML files with SVG graphics.

    475 GitHub starsUsed in 1 repo~1.6k tokens
    DevelopmentAuto-check passed

  • HTML Diagram

    plannotator/effective-html

    Direct-invocation specialist for self-contained HTML diagrams whose layout, notation, and interaction clarify relationships, sequence, topology, state, hierarchy, or quantitative structure.

    3.6k GitHub stars~678 tokensUpdated 23 days ago
    DevelopmentAuto-check passed

More from serejaris/personal-corp-os

All 36 skills in this repo

  • Weekly Planning

    serejaris/personal-corp-os

    A skill your agent uses when the user is transitioning from a completed retro into a weekly plan, choosing weekly outcomes, scheduling a full ISO week, or asking for "план на неделю", "weekly…

    229 GitHub stars~2.4k tokensUpdated today
    Auto-check passed

  • Gh Issues

    serejaris/personal-corp-os

    A skill your agent uses when creating, searching, updating, or managing GitHub issues via CLI.

    229 GitHub stars~1.8k tokensUpdated today
    Auto-check passed

  • Product Data Audit

    serejaris/personal-corp-os

    A skill your agent uses when auditing a product, business, or project ecosystem — analyzing data sources, decision loops, bottlenecks, and implementation contours.

    229 GitHub stars~1.3k tokensUpdated today
    Auto-check passed

  • Tg Bot Ops

    serejaris/personal-corp-os

    A skill your agent uses when operating, debugging, deploying, or monitoring a Telegram bot or Telegram-to-agent gateway.

    229 GitHub stars~1.6k tokensUpdated today
    Auto-check: notes

  • Audit Agent Rules

    serejaris/personal-corp-os

    Audits the agent rules in the current folder (AGENTS.md, nested AGENTS.md files) and the skill descriptions the agent sees at start, then reports what to cut, move or rewrite and edits only after…

    229 GitHub stars~2.3k tokensUpdated today
    Auto-check passed

  • Make Landing

    serejaris/personal-corp-os

    Создаёт несколько вариантов дизайна 2D-поверхности (лендинг, герой, обложка, слайды): свой визуальный референс и автор на вариант, полный design.md с UTC/SHA-256 до кода, проверка в браузере…

    229 GitHub stars~2.1k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about HTML Draft

What does HTML Draft do?

A skill your agent uses when user wants a standalone HTML diagram in flat engineering blueprint style — architecture diagrams, system flows, technical spec sheets, component maps. HTML Draft is an agent skill from serejaris/personal-corp-os. Use when user wants a standalone HTML diagram in flat engineering blueprint style — architecture diagrams, system flows, technical spec sheets, component maps.

When should I use HTML Draft?

HTML Draft fits situations like: user wants a standalone HTML diagram in flat engineering blueprint style — architecture diagrams; technical spec sheets; Сделай blueprint; Технический чертёж.

How do I install HTML Draft in Claude Code?

Run `npx skills add serejaris/personal-corp-os --skill html-draft -a claude-code`. Or copy the skill folder (skills/html-draft in serejaris/personal-corp-os) into .claude/skills/html-draft in your project. Claude Code loads it when a task matches its description.

How do I install HTML Draft in Codex?

Run `npx skills add serejaris/personal-corp-os --skill html-draft -a codex`. Or copy the skill folder (skills/html-draft in serejaris/personal-corp-os) into .agents/skills/html-draft in your project. Codex loads it when a task matches its description.

Can I use HTML Draft in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add serejaris/personal-corp-os --skill html-draft -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/html-draft, .gemini/skills/html-draft, .github/skills/html-draft and .opencode/skills/html-draft in your project.

What does HTML Draft need to run?

SKILL.md names no scripts, command-line tools or credentials: HTML Draft is instructions for the agent only.

Does HTML Draft access the network?

SKILL.md names 1 domain. In commands or code: cdn.jsdelivr.net; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is HTML Draft safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does HTML Draft use?

HTML Draft is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does HTML Draft use?

About 2.9k tokens (SKILL.md is roughly 12k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to HTML Draft?

Skills that share tags, products or a category with HTML Draft: Update Web Assets (garfiec/Librechat-Mobile, 112 stars), Dark Architecture Diagram Builder (Cocoon-AI/architecture-diagram-generator, 7.4k stars), Bug Finder for daisyUI (saadeghi/daisyui, 43k stars) and Archify Diagram Builder (Unclecheng-li/AI_Animation, 1.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains HTML Draft?

serejaris (a GitHub user) maintains it in serejaris/personal-corp-os, which has 229 GitHub stars. The repository holds 36 skills in this directory. The repository was last updated on October 7, 2026.

Source: serejaris/personal-corp-os on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.