This repository provides agent skills for generating elegant, simple, and visually-oriented HTML artifacts, such as architectural diagrams and plan pages. It targets developers and agents seeking to create self-contained, shareable visual documentation with a pragmatic approach, leveraging an "effective HTML style" and SVG-first design for clarity and quality.

How It Works

The project offers distinct skills (html, html-diagram, html-plan) that generate HTML deliverables. The html-diagram skill focuses on creating full-screen architecture, stack, and system diagrams using high-quality SVG, while html-plan produces plan pages in a specific "effective HTML style." The approach emphasizes pragmatic visual artifacts and bundles a local copy of the html-effectiveness example corpus for reference, enabling smaller models to distill complex information.

Quick Start & Requirements

Installation is primarily handled via npx or by integrating as a plugin within Claude Code or Codex environments.

• General Install: bash\nnpx skills add plannotator/effective-html
• Specific Skill Install: bash\nnpx skills add plannotator/effective-html --skill html-diagram
• Claude Code Plugin: /plugin marketplace add plannotator/effective-html followed by /plugin install plannotator-effective-html@effective-html
• Codex Plugin: codex plugin marketplace add plannotator/effective-html followed by codex plugin add plannotator-effective-html@effective-html
• Prerequisites: Node.js (for npx), bash shell, and either Claude Code or Codex environments. Optional integration with plannotator/plannotator and plannotator/tot is mentioned.

Highlighted Details

• Provides three core skills: html for general descriptions, html-diagram for visual system architecture, and html-plan for structured plan pages.
• html-diagram generates full-screen, SVG-first diagrams.
• Bundles the html-effectiveness example corpus locally, sourced from Thariq Shihipar.
• Skills are designed for distillation by smaller AI models.

Maintenance & Community

No specific details regarding maintainers, community channels (like Discord/Slack), or roadmap are provided in the README.

Licensing & Compatibility

The repository's license is not explicitly stated in the provided README text. Compatibility for commercial use or linking with closed-source projects is therefore undetermined.

Limitations & Caveats

The project appears to be an "agent skill" potentially reliant on specific agent frameworks (Claude Code, Codex) or external Plannotator tools for full functionality like rendering and sharing. The mention of "Fable 5" artifacts suggests a potential dependency or focus on specific underlying models or generation techniques.