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
Decision gist · record as of 2026-07-19
html-draft generates a standalone HTML page with flat engineering blueprint diagrams using Tailwind and D3. 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.
Use it when
- html-draft uses flat engineering blueprint style with monochrome rendering.
- html-draft leverages D3 v7 for SVG-based rendering of system flows and architecture diagrams.
Verify before relying
Read SKILL.md below before installing (4 files). Open directory: indexed for reading, not audited.
Install
serejaris/personal-corp-skills/html-draft · repository language: HTML
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Generate a standalone HTML page with flat engineering blueprint style diagrams”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Blueprinter creates clean, technical diagrams styled as engineering blueprints using HTML and CSS. It's built for architecture diagrams, system layouts, and flowcharts that prioritize clarity and data over decoration—no shadows, gradients, or rounded elements. Use it whenever you need a precise, specification-sheet aesthetic for technical visualizations.
Build charts and process diagrams that match OpenAI's design system, complete with their typeface and color palette. The skill provides a zero-dependency renderer for bar charts and hand-assembled flow diagram primitives, both emitted as standalone HTML/SVG suitable for blogs, research pages, and decks.
Transform workflow steps into professional PNG diagrams with connected nodes and directional arrows. Describe your process in plain text, choose a layout direction and visual style, and get a ready-to-share diagram in landscape, square, or social card formats.
Design Minimal creates a single self-contained HTML file with a restrained visual system—clear hierarchy, strong spacing, and limited palette—ideal for reading-focused dashboards, briefs, handouts, and internal reports. It uses Tailwind CDN for layout and design tokens as CSS variables, with no decorative effects, responsive prefixes, or external dependencies.
Baoyu Diagram generates standalone SVG diagrams with a dark design system and semantic color palette. It supports architecture diagrams, flowcharts, sequence diagrams, mind maps, timelines, and other technical visualizations, each with purpose-built layout rules and component patterns.
Html Report transforms markdown content into single-file HTML documents across six professional formats: status updates, incident reports, business plans, explainers, financial statements, and pull request summaries. Each mode auto-selects the appropriate layout and renders charts as inline SVG without external dependencies.
More skills Diagram Design (NOASSERTION) · diagram-design (MIT) · architecture-diagram-creator (Apache-2.0)