{"enrichment":{"faq":[{"a":"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\u2014ideal for slides and reports.","q":"Can html-draft generate architecture diagram as standalone HTML?"},{"a":"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.","q":"What design style does html-draft use for diagrams?"},{"a":"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.","q":"How does html-draft create system flow diagrams?"},{"a":"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.","q":"Can I export html-draft diagrams for printing?"},{"a":"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.","q":"What types of technical diagrams can html-draft build?"}],"shadow_tags":["technical-visualization","blueprint-rendering","engineering-diagrams","d3-powered","flat-design-aesthetic","static-documentation","system-architecture","svg-diagrams","monochrome-output","print-ready-format"],"summary_rewrite":"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\u2014ideal for slides and reports."},"files":[{"bytes":11666,"path":"skills/html-draft/SKILL.md","sha256":"ab7e85e8a7b67b322dbdce0f7574a1188de7452c0d3cfcf612cc4fc38a29f84b","url":"https://skillfed.io/files/serejaris/personal-corp-skills/html-draft/8d118a68/SKILL.md"}],"id":"serejaris/personal-corp-skills/html-draft","links":{"html":"https://skillfed.io/serejaris/personal-corp-skills/html-draft","md":"https://skillfed.io/serejaris/personal-corp-skills/html-draft.md","repo":"https://github.com/serejaris/personal-corp-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":26,"language":"HTML","last_updated":"2026-07-19","license":"MIT","name":"html-draft","publisher":"serejaris","stars":208},"relations":{"similar":[{"id":"yofine/skills/blueprinter"},{"id":"serejaris/personal-corp-skills/design-minimal"},{"id":"guanyang/open-agent-hub/baoyu-diagram"},{"id":"JimLiu/baoyu-skills/baoyu-diagram"},{"id":"calesthio/OpenMontage/d3-viz"},{"id":"chrisvoncsefalvay/claude-d3js-skill/claude-d3js-skill"},{"id":"joneqian/claude-skills-suite/d3js"},{"id":"modu-ai/cowork-plugins/html-report"},{"id":"gooseworks-ai/goose-skills/visual-brand-extractor"},{"id":"besoeasy/open-skills/d3js-data-visualization"}]},"slug":{"owner":"serejaris","repo":"personal-corp-skills","skill":"html-draft"},"version":"8d118a68"}