html-draft
html-draft renders technical diagrams as single-page HTML artifacts styled like printed engineering specifications. It combines Tailwind v4 for layout with D3 v7 for SVG-based architecture diagrams, system flows, and component maps—ideal for slides and reports.
html-draft generates a standalone HTML page with flat engineering blueprint diagrams using Tailwind and D3.
AI-generated summary based on this skill's SKILL.md
Install
serejaris/personal-corp-skills/html-draft · repository language: HTML
git clone https://github.com/serejaris/personal-corp-skills
cp -r personal-corp-skills/skills/html-draft ~/.claude/skills/html-draftFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
Can html-draft generate architecture diagram as standalone HTML?
Yes. html-draft renders technical diagrams as single-page HTML artifacts styled like printed engineering specifications. It combines Tailwind v4 for layout with D3 v7 for SVG-based architecture diagrams, system flows, and component maps—ideal for slides and reports.
What design style does html-draft use for diagrams?
html-draft uses flat engineering blueprint style with monochrome rendering. The flat design approach keeps technical specification sheets clean and print-ready, matching traditional engineering schematic aesthetics while remaining modern and accessible.
How does html-draft create system flow diagrams?
html-draft leverages D3 v7 for SVG-based rendering of system flows and architecture diagrams. Combined with Tailwind v4 styling, it produces hierarchical structure diagrams and component maps that visualize technical relationships and data flow in flat design format.
Can I export html-draft diagrams for printing?
Yes. html-draft generates print-ready HTML artifacts designed for both digital and printed output. The monochrome flat design and engineering blueprint styling ensure diagrams render consistently across media, making them suitable for technical reports and presentations.
What types of technical diagrams can html-draft build?
html-draft builds component maps, hierarchical structure diagrams, architecture diagrams, system flows, and technical specification sheets. Each diagram type uses the same flat engineering blueprint aesthetic, allowing you to create comprehensive technical documentation as standalone HTML pages.
SKILL.md
rendered from the published skill — quoted content, verbatim
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
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 4 files
skills/html-draft/README.md
skills/html-draft/README.ru.md
skills/html-draft/SKILL.md
skills/html-draft/assets/illustration.png