danielmackay

Generate brand-consistent HTML-based diagram images (light + dark variants) for Dan Does Code blog posts. Use this whenever a blog post would benefit from an inline diagram, illustration, flowchart, sequence, comparison stack, or any custom visual that isn't a screenshot or photo. Trigger on phrases like 'add a diagram', 'visualize this', 'illustrate the flow', 'add a chart', 'add an image showing X', 'create a figure for', 'render that as a diagram', 'make this a visual', or any request to add a visual artefact to an .mdx post in data/blog/. Also use proactively when drafting a blog post that explains a multi-step process, a hierarchy, a comparison, or a flow — those are exactly the moments a diagram lifts comprehension. The output is a pair of transparent PNGs (light + dark) plus the MDX figure markup that swaps them via Tailwind dark mode classes. Do NOT use for mermaid blocks the user wants to keep as code, for screenshots of running apps, or for photos / banner images.