plannotator/effective-html

This repository is a collection of skills for AI coding assistants that help them produce clean, self-contained HTML files. HTML is the language web pages are written in, and a self-contained file means everything needed to view it lives in that one file. The focus is on output that looks good visually, so the project is aimed at people who want diagrams, plans, and other documents rather than full websites. There are three skills in the set. The first, called html, makes a single HTML file for whatever you describe, following a particular clean style the author refers to as effective HTML. The second, html-diagram, builds full-screen diagrams that show how a system or technology stack fits together, using high-quality vector graphics and very little text. The third, html-plan, creates HTML pages laid out as plans, again in the same visual style. Installing the skills is done through a command line tool. You can list what is available first, then add all of them or just one specific skill. The repository also works as a plugin marketplace for two coding assistants, Claude Code and Codex, with short commands shown for registering the marketplace and installing the plugin in each. The README explains how the project is organized. Each skill lives in its own folder with an instruction file, and each one bundles a local copy of a set of example HTML documents so the references stay close to the skill that uses them. The author credits those examples, called html-effectiveness, to another person named Thariq Shihipar. The README is short and points to outside material, including a demo video and an optional companion tool called Plannotator for rendering and annotating the HTML you create. The author also mentions that one of the sample diagrams was generated by a model named Fable 5, and that more such examples will be added so smaller models can learn from them. This is a focused helper for generating visual documents, not a large application on its own.