refactor: collapse the three HTML skills into one effective-html router

.claude-plugin/marketplace.json

@@ -11,7 +11,7 @@
         "source": "github",
         "repo": "plannotator/effective-html"
       },
-      "description": "HTML skills for pragmatic visual artifacts — html, html-diagram, and html-plan.",
+      "description": "One effective-html skill that routes between artifact, diagram, and plan modes for pragmatic, self-contained HTML.",
       "homepage": "https://github.com/plannotator/effective-html",
       "repository": "https://github.com/plannotator/effective-html",
       "license": "MIT",

.claude-plugin/plugin.json

@@ -1,8 +1,6 @@
 {
   "name": "plannotator-effective-html",
   "skills": [
-    "./skills/html",
-    "./skills/html-diagram",
-    "./skills/html-plan"
+    "./skills/effective-html"
   ]
 }

.codex-plugin/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "plannotator-effective-html",
   "version": "0.1.0",
-  "description": "HTML skills for pragmatic visual artifacts — html, html-diagram, and html-plan.",
+  "description": "One effective-html skill that routes between artifact, diagram, and plan modes for pragmatic, self-contained HTML.",
   "author": {
     "name": "plannotator",
     "url": "https://github.com/plannotator"

README.md

@@ -8,11 +8,11 @@ _**Note:** The diagram was made by `Fable 5`, I will create more fable 5 artifac
 [example demo](https://x.com/backnotprop/status/2065479594023829619?s=20)
 
 
-Focused skills for generating self-contained HTML deliverables with a strong visual bias:
+One skill for generating self-contained HTML deliverables with a strong visual bias. It routes to the mode that fits the request:
 
-- `html`: an HTML file for whatever you're describing, in the effective HTML style
-- `html-diagram`: architecture, stack, and systems understanding rendered as full-screen HTML diagrams with high-quality SVG
-- `html-plan`: HTML plan pages in the effective HTML style
+- **Artifact**: an HTML file for whatever you're describing, in the effective HTML style
+- **Diagram**: architecture, stack, and systems understanding rendered as a full-screen HTML diagram with high-quality SVG
+- **Plan**: an HTML plan page in the effective HTML style, kept close to what you wrote
 
 <p align="center">
   <a href="https://github.com/backnotprop/plannotator">
@@ -37,11 +37,10 @@ List available skills first:
 npx skills add plannotator/effective-html --list
 ```
 
-Install a specific skill:
+Install the skill by name:
 
 ```bash
-npx skills add plannotator/effective-html --skill html-diagram
-npx skills add plannotator/effective-html --skill html-plan
+npx skills add plannotator/effective-html --skill effective-html
 ```
 
 ### As a Claude Code plugin
@@ -60,14 +59,16 @@ codex plugin marketplace add plannotator/effective-html
 codex plugin add plannotator-effective-html@effective-html
 ```
 
-## Skills
+## Skill
 
-- `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.
+`effective-html` reads the request and picks a mode:
+
+- **Artifact** - an HTML file for whatever the user is describing, matching the effective HTML references.
+- **Diagram** - a full-screen HTML architecture or stack diagram, SVG-first, minimal prose. Also draws on `references/architecture-example.html`.
+- **Plan** - an HTML plan page 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.
+The skill lives at `skills/effective-html/SKILL.md` and bundles 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

skills.sh.json

@@ -6,9 +6,7 @@
       "title": "Effective HTML",
       "description": "Skills for generating pragmatic HTML diagrams and plans.",
       "skills": [
-        "html",
-        "html-diagram",
-        "html-plan"
+        "effective-html"
       ]
     }
   ]

skills/effective-html/SKILL.md

@@ -0,0 +1,26 @@
+---
+name: effective-html
+description: Create elegant, self-contained HTML artifacts in the effective-HTML style. This skill should be used whenever the user wants something delivered as a single HTML file — a general artifact (report, explainer, comparison, slide deck, prototype), a full-screen architecture/system diagram (low-prose, high-quality interactive SVG), or a pragmatic plan page. Routes the request to the matching mode and follows the bundled reference examples for style, density, and tone.
+---
+
+# Effective HTML
+
+One entry point for producing self-contained HTML artifacts in the effective-HTML style. This file is a router: pick the mode that matches the request, follow its notes, and apply the shared requirement below to every mode.
+
+## Read first
+
+Review the example files throughout [`references/html-effectiveness/`](references/html-effectiveness/). Match their alignment — style, density, and tone — as closely as the request allows. Every mode below assumes these examples are in mind.
+
+## Mode routing
+
+| The user wants… | Mode | Mode-specific guidance |
+|---|---|---|
+| A general artifact — report, explainer, comparison, slide deck, prototype, or anything else best delivered as one HTML file | **Artifact** | Build the HTML for whatever is being described, leaning on the references to match style, density, and tone. |
+| A full-screen architecture or system diagram, light on prose, that makes the stack click fast | **Diagram** | Build a high-quality SVG and iterate on the diagram more than anything else. Keep prose minimal — simplify toward a full-screen diagram. Where it helps, make the diagram interactive and animate different sequences of system behavior. Also review [`references/architecture-example.html`](references/architecture-example.html) — a finished example (full-screen SVG stage, clickable nodes, flow chips that light up and animate request paths). Style the SVG through CSS classes that use the theme variables — never hard-coded hex inside the SVG — so the diagram follows the theme. |
+| A plan page that stays pragmatic and close to what they gave you | **Plan** | Keep it pragmatic and simple. Keep the writing close to the user's input; clean up the grammar without turning it into something bigger. |
+
+When a request spans modes, pick the dominant one and borrow from the others as needed.
+
+## Always (every mode)
+
+Include dark mode: hand-rolled CSS variables on `:root` / `html.dark`, a small theme toggle button, `localStorage` persistence, and an apply-before-paint script in `<head>` (default to `prefers-color-scheme`).

skills/effective-html/agents/openai.yaml

@@ -0,0 +1,7 @@
+interface:
+  display_name: "Effective HTML"
+  short_description: "Create effective standalone HTML artifacts, diagrams, and plans"
+  default_prompt: "Use $effective-html to create a polished standalone HTML artifact, diagram, or plan."
+
+policy:
+  allow_implicit_invocation: true