Atit Danak
fdee3b5dd2
Closes #1 (Claude Code portion). The repo already ships as a single plugin (root .claude-plugin/plugin.json); this adds the marketplace catalog so it installs natively in Claude Code, leaving the existing npx skills flow untouched. - .claude-plugin/marketplace.json: lists the plugin via a github source pointing at this repo; version omitted so installs track the latest commit - README: "As a Claude Code plugin" install steps Verified with `claude plugin marketplace add` (accepted and listed). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
HTML skills for pragmatic visual artifacts
https://github.com/user-attachments/assets/24306977-7f30-44c9-9bff-55f901d557b0
Note: The diagram was made by Fable 5, I will create more fable 5 artifacts and add them to the skill folder for smaller models to distill.
example demo
Focused skills for generating self-contained HTML deliverables with a strong visual bias:
html: an HTML file for whatever you're describing, in the effective HTML stylehtml-diagram: architecture, stack, and systems understanding rendered as full-screen HTML diagrams with high-quality SVGhtml-plan: HTML plan pages in the effective HTML style
Render and annotate your HTML with Plannotator (optional): https://github.com/backnotprop/plannotator
Install
npx skills add plannotator/effective-html
List available skills first:
npx skills add plannotator/effective-html --list
Install a specific skill:
npx skills add plannotator/effective-html --skill html-diagram
npx skills add plannotator/effective-html --skill html-plan
As a Claude Code plugin
This repo is also a plugin marketplace. Add it and install:
/plugin marketplace add plannotator/effective-html
/plugin install plannotator-effective-html@effective-html
Skills
html- Create an HTML file for whatever the user is describing, matching the effective HTML references.html-diagram- Build full-screen HTML architecture and stack diagrams with SVG-first presentation and minimal prose.html-plan- HTML plan pages in the effective HTML style.
Repository Shape
Skills live under skills/<skill-name>/SKILL.md. Each skill also bundles a copy of the html-effectiveness example corpus under references/html-effectiveness/ so the examples stay local to the skill.
Credit: this repo bundles and uses the html-effectiveness examples by Thariq Shihipar: https://thariqs.github.io/html-effectiveness