If you've ever wrestled with diagram tools that require a PhD in their proprietary format, there's a fresh option worth testing. Developer plannotator dropped "Show HN: agent skill to generate aesthetic and interactive diagrams" on Hacker News this week, introducing the effective-html project—a collection of AI agent skills focused on producing self-contained HTML deliverables with strong visual presentation.

What This Actually Does

The repository ships three distinct skills through the npx skills interface. The html-diagram skill is the star here: it generates full-screen architecture, stack, and systems diagrams using SVG-first rendering with minimal prose overhead. Think Mermaid diagrams done right—except output as standalone HTML files that open in any browser without dependencies. The html skill creates general-purpose HTML matching Thariq Shihipar's html-effectiveness style guide, while html-plan generates planning documents in the same visual language.

Installation Is Dead Simple

You can pull down the full package with a single command: npx skills add plannotator/effective-html. If you only want specific capabilities, use --list to see what's available or target individual skills like html-diagram or html-plan. The repo structure follows standard conventions—each skill lives in its own SKILL.md file under the skills directory, and everything bundles a local copy of the html-effectiveness reference corpus so examples stay tightly coupled to the tooling.

The SVG-First Philosophy

What separates this from typical diagram generators is the commitment to pure SVG output rather than canvas or CSS hacks. That means diagrams are resolution-independent, accessible via screen readers where appropriate, and won't degrade when you resize your viewport. The author notes they're building "fable 5" artifacts specifically for smaller models to distill patterns from—suggesting this skill set was designed with model training pipelines in mind, not just end-user consumption.

Key Takeaways

  • Installs via npx skills add plannotator/effective-html with granular skill selection available
  • html-diagram generates full-screen SVG diagrams optimized for architecture and systems visualization
  • Self-contained HTML output means zero runtime dependencies beyond a browser
  • Bundles Thariq Shihipar's html-effectiveness examples as local reference material

The Bottom Line

This is exactly the kind of boring infrastructure that makes agent tooling actually useful in practice. Rather than another proprietary diagram format, effective-html bets on web standards—SVG and HTML—that developers already know. If you're building AI workflows that need to produce shareable visual artifacts without spinning up render servers or wrestling with export formats, this skill is worth bookmarking.