cheack pls

.claude-plugin/marketplace.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://anthropic.com/claude-code/marketplace.schema.json",
+  "name": "effective-html",
+  "description": "Skills for generating self-contained HTML artifacts — html, html-diagram, html-plan — in the effective-HTML style with dark mode support.",
+  "owner": {
+    "name": "Andrey Zagreev",
+    "url": "https://github.com/azagreev"
+  },
+  "plugins": [
+    {
+      "name": "effective-html",
+      "source": ".",
+      "description": "Skills for generating self-contained HTML artifacts — html, html-diagram, html-plan — in the effective-HTML style with dark mode support.",
+      "category": "design"
+    }
+  ]
+}

.claude-plugin/plugin.json

@@ -1,8 +1,26 @@
 {
-  "name": "plannotator-effective-html",
+  "name": "effective-html",
+  "version": "0.1.1",
+  "description": "Skills for generating self-contained HTML artifacts — html, html-diagram, html-plan — in the effective-HTML style with dark mode support.",
+  "author": {
+    "name": "Andrey Zagreev",
+    "url": "https://github.com/azagreev"
+  },
+  "keywords": [
+    "html",
+    "diagram",
+    "plan",
+    "dark-mode",
+    "artifacts",
+    "visualization",
+    "svg"
+  ],
+  "homepage": "https://github.com/azagreev/effective-html",
+  "repository": "https://github.com/azagreev/effective-html",
+  "license": "MIT",
   "skills": [
     "./skills/html",
     "./skills/html-diagram",
     "./skills/html-plan"
   ]
-}
+}

.gitattributes

@@ -0,0 +1,11 @@
+# Normalize line endings: store and check out LF everywhere.
+# Prevents Windows CRLF normalization from dirtying marketplace clones,
+# which can block in-place git pulls / updates.
+* text=auto eol=lf
+
+*.md   text eol=lf
+*.json text eol=lf
+*.js   text eol=lf
+*.yml  text eol=lf
+*.yaml text eol=lf
+*.sh   text eol=lf

.gitignore

@@ -0,0 +1,26 @@
+# OS / editor
+.DS_Store
+Thumbs.db
+desktop.ini
+*~
+.vscode/
+.idea/
+
+# Logs / temp
+*.log
+*.tmp
+
+# Secrets / local env
+.env
+.env.local
+*.key
+
+# Python (engine/)
+__pycache__/
+*.py[cod]
+*.egg-info/
+.pytest_cache/
+
+# Node (if tooling is added later)
+node_modules/
+npm-debug.log*

CHANGELOG.md

@@ -0,0 +1,27 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.1.1] - 2026-06-13
+
+### Fixed
+- Light-theme accent contrast: darkened `--clay` (#C25E3C → #B45738) and `--gold` (#9A6B1F → #98691F) in both exemplars so all accent text meets WCAG AA (≥4.5:1) for normal text on both backgrounds, not only large text. Dark theme already AAA; unchanged.
+
+## [0.1.0] - 2026-06-13
+
+### Added
+- Claude Code marketplace distribution: root `.claude-plugin/marketplace.json` (install via `/plugin marketplace add azagreev/effective-html`).
+- Enriched `.claude-plugin/plugin.json` (version, description, author, keywords, homepage, repository, license); plugin renamed to `effective-html`.
+- `docs/installation.md` covering both channels (Claude Code marketplace + skills.sh) and manual install.
+- New dark-mode exemplars: `skills/html/references/effective-html-example.html` and `skills/html-plan/references/plan-example.html`; all three SKILL.md now point at a canonical exemplar and carry an explicit Quality-contract checklist (dark mode, reduced-motion, focus-visible, aria-labels, contrast).
+- Dependency-free structural test suite `tests/test_structure.py` (manifest integrity, name consistency, dark-mode contract, attribution).
+- Repo hygiene: `.gitattributes` (LF normalization), `.gitignore`, `NOTICE` (upstream attribution: backnotprop/plannotator, thariqs/html-effectiveness).
+
+### Changed
+- README install instructions corrected to the fork `azagreev/effective-html` npx slug (previously pointed at the upstream org); added marketplace section and upstream attribution.
+
+[0.1.1]: https://github.com/azagreev/effective-html/releases/tag/v0.1.1
+[0.1.0]: https://github.com/azagreev/effective-html/releases/tag/v0.1.0

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026 plannotator
+Copyright (c) 2026 Andrey Zagreev
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

NOTICE

@@ -0,0 +1,19 @@
+effective-html
+Copyright (c) 2026 Andrey Zagreev
+Licensed under the MIT License (see LICENSE).
+
+------------------------------------------------------------------------
+Upstream attributions
+------------------------------------------------------------------------
+
+Fork origin — backnotprop/plannotator
+  This repository is forked from https://github.com/backnotprop/plannotator,
+  which provides the skills layout and structure this project builds on.
+
+Bundled example corpus — thariqs/html-effectiveness
+  The html-effectiveness example corpus by Thariq Shihipar is bundled under
+  each skill's references/html-effectiveness/ directory.
+  Source: https://thariqs.github.io/html-effectiveness
+          https://github.com/thariqs/html-effectiveness
+  Licensed under the Apache License, Version 2.0 (see the LICENSE file
+  inside those reference folders).

README.md

@@ -25,23 +25,34 @@ Render and annotate your HTML with Plannotator (optional): https://github.com/ba
 
 --- 
 
-## Install
+## Install via Claude Code marketplace
 
 ```bash
-npx skills add plannotator/effective-html
+/plugin marketplace add azagreev/effective-html
+/plugin install effective-html@effective-html
+```
+
+In Cowork: **Customize → Browse plugins → Personal → + → Add marketplace from GitHub → `azagreev/effective-html`**, then install the **effective-html** plugin.
+
+See [docs/installation.md](docs/installation.md) for all install channels (Claude Code / Cowork, skills.sh, and manual copy), plus verify and uninstall steps.
+
+## Install via skills.sh
+
+```bash
+npx skills add azagreev/effective-html
 ```
 
 List available skills first:
 
 ```bash
-npx skills add plannotator/effective-html --list
+npx skills add azagreev/effective-html --list
 ```
 
 Install a specific skill:
 
 ```bash
-npx skills add plannotator/effective-html --skill html-diagram
-npx skills add plannotator/effective-html --skill html-plan
+npx skills add azagreev/effective-html --skill html-diagram
+npx skills add azagreev/effective-html --skill html-plan
 ```
 
 ## Skills
@@ -54,4 +65,7 @@ npx skills add plannotator/effective-html --skill html-plan
 
 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
+## Attribution
+
+- Fork origin: [backnotprop/plannotator](https://github.com/backnotprop/plannotator).
+- Bundled example corpus: this repo bundles and uses the `html-effectiveness` examples by Thariq Shihipar — https://thariqs.github.io/html-effectiveness ([thariqs/html-effectiveness](https://github.com/thariqs/html-effectiveness)).

docs/installation.md

@@ -0,0 +1,141 @@
+# Installation — effective-html
+
+These skills ship two ways: as a **Claude Code plugin** (a GitHub marketplace) and as **skills.sh skills** you can pull into any project. The bundle contains three skills: `html`, `html-diagram`, and `html-plan`.
+
+Both channels stay prominent — pick whichever fits your setup.
+
+---
+
+## Channel 1: Claude Code / Cowork — plugin marketplace (recommended)
+
+### Cowork (GUI, no files)
+
+1. Open **Customize** (bottom-left).
+2. **Browse plugins → Personal → +**.
+3. **Add marketplace from GitHub**.
+4. Enter: `azagreev/effective-html`.
+5. Install the plugin **effective-html** — the three skills connect automatically.
+
+### Claude Code (CLI)
+
+```bash
+# 1. Add the marketplace from GitHub
+/plugin marketplace add azagreev/effective-html
+
+# 2. Install the plugin (format: <plugin>@<marketplace>)
+/plugin install effective-html@effective-html
+```
+
+Once installed, `html`, `html-diagram`, and `html-plan` activate automatically when you ask for HTML artifacts, diagrams, or plan pages.
+
+### Local pre-publish check (from a clone)
+
+You can add the marketplace from a local folder — handy before pushing, or to test changes:
+
+```bash
+git clone https://github.com/azagreev/effective-html.git
+cd effective-html
+/plugin marketplace add ./           # path to the folder containing .claude-plugin/marketplace.json
+/plugin install effective-html@effective-html
+```
+
+> The plugin `source` is `.` (the repo root), so adding the marketplace locally resolves exactly the same way as adding it from GitHub.
+
+---
+
+## Channel 2: skills.sh
+
+Install all three skills into the current project with one command:
+
+```bash
+npx skills add azagreev/effective-html
+```
+
+List available skills before installing:
+
+```bash
+npx skills add azagreev/effective-html --list
+```
+
+Install a specific skill only:
+
+```bash
+npx skills add azagreev/effective-html --skill html-diagram
+npx skills add azagreev/effective-html --skill html-plan
+```
+
+---
+
+## Channel 3: Manual copy into the Claude skills dir
+
+Each skill is self-contained under `skills/<skill-name>/`, so you can copy the folders straight into Claude's skills directory:
+
+- **macOS**: `~/Library/Application Support/Claude/skills/`
+- **Windows**: `%APPDATA%/Claude/skills/`
+- **Linux**: `~/.config/Claude/skills/`
+
+```bash
+git clone https://github.com/azagreev/effective-html.git
+cd effective-html
+
+# copy each skill folder (Linux path shown; swap for your OS dir above)
+cp -r skills/html         ~/.config/Claude/skills/html
+cp -r skills/html-diagram ~/.config/Claude/skills/html-diagram
+cp -r skills/html-plan    ~/.config/Claude/skills/html-plan
+```
+
+On Windows (PowerShell):
+
+```powershell
+Copy-Item -Recurse skills\html         "$env:APPDATA\Claude\skills\html"
+Copy-Item -Recurse skills\html-diagram "$env:APPDATA\Claude\skills\html-diagram"
+Copy-Item -Recurse skills\html-plan    "$env:APPDATA\Claude\skills\html-plan"
+```
+
+Each `skills/<name>/` folder bundles its own copy of the `html-effectiveness` example corpus under `references/html-effectiveness/`, so the examples travel with the skill — no extra steps.
+
+Restart Claude after copying.
+
+---
+
+## Verify
+
+Ask in any chat:
+
+```
+Make an HTML diagram of a three-tier web app architecture
+```
+
+`html-diagram` should activate and produce a full-screen SVG-first HTML diagram. Try `html` for a general artifact and `html-plan` for a plan page.
+
+### If a skill doesn't activate
+
+1. **Claude Code:** run `/plugin` → confirm `effective-html` is installed and enabled; `/reload-plugins` if needed.
+2. In `/plugin` → Marketplaces, check the marketplace version matches the latest release (third-party marketplaces do not auto-update).
+3. **Manual / skills.sh:** confirm the skill folder exists in your skills dir and contains `SKILL.md`, then restart Claude.
+
+---
+
+## Uninstall
+
+```bash
+# Claude Code plugin
+/plugin uninstall effective-html@effective-html
+/plugin marketplace remove effective-html
+
+# Manual install (Linux path; swap for your OS)
+rm -rf ~/.config/Claude/skills/html \
+       ~/.config/Claude/skills/html-diagram \
+       ~/.config/Claude/skills/html-plan
+```
+
+For skills.sh installs, remove the skill folders that `npx skills add` placed in your project's skills directory.
+
+---
+
+## Attribution
+
+- Fork origin: [backnotprop/plannotator](https://github.com/backnotprop/plannotator).
+- Bundled example corpus: `html-effectiveness` by Thariq Shihipar — https://thariqs.github.io/html-effectiveness ([thariqs/html-effectiveness](https://github.com/thariqs/html-effectiveness)).
+</content>
+</invoke>

skills/html-diagram/SKILL.md

@@ -21,3 +21,17 @@ If it makes sense, make the diagram interactive and able to visualize and animat
 Also review `references/architecture-example.html` — a finished example of this skill done well (full-screen SVG stage, clickable nodes, flow chips that light up and animate request paths).
 
 Always 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`). Style the SVG through CSS classes using those variables — never hard-coded hex inside the SVG — so the diagram follows the theme.
+
+The canonical exemplar to match is `references/architecture-example.html`.
+
+## Quality contract
+
+Every artifact must satisfy all of these — `references/architecture-example.html` shows each one in place:
+
+- **Dark mode** — hand-rolled CSS variables on `:root` and `html.dark`, a small theme toggle button, `localStorage` persistence of the choice, and an apply-before-paint inline script in `<head>` that reads `localStorage` else `prefers-color-scheme` and sets the class before first paint (no flash). Style the SVG through those variables, never hard-coded hex.
+- **`@media (prefers-reduced-motion: reduce)`** that disables or limits transitions and animations.
+- **Visible `:focus-visible`** rings on every interactive element.
+- **`aria-label`** on any icon-only control (e.g. the theme toggle) and on the diagram `<svg>` itself.
+- **`<html lang="…">`** and a `<meta name="viewport">`.
+- **No emoji as structural icons** — use inline SVG or text.
+- **Body and heading contrast ≥ 4.5:1 in both themes.**

skills/html-plan/SKILL.md

@@ -12,4 +12,18 @@ After reviewing them, create an HTML file for the plan in a similar style.
 
 Keep it pragmatic and simple.
 
+Also review `references/plan-example.html` — a finished example of this skill done well (phased implementation plan with tasks, owners, and status that implements the full quality contract below). Match it.
+
 Always 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`).
+
+## Quality contract
+
+Every artifact must satisfy all of these — `references/plan-example.html` shows each one in place:
+
+- **Dark mode** — hand-rolled CSS variables on `:root` and `html.dark`, a small theme toggle button, `localStorage` persistence of the choice, and an apply-before-paint inline script in `<head>` that reads `localStorage` else `prefers-color-scheme` and sets the class before first paint (no flash).
+- **`@media (prefers-reduced-motion: reduce)`** that disables or limits transitions and animations.
+- **Visible `:focus-visible`** rings on every interactive element.
+- **`aria-label`** on any icon-only control (e.g. the theme toggle).
+- **`<html lang="…">`** and a `<meta name="viewport">`.
+- **No emoji as structural icons** — use inline SVG or text.
+- **Body and heading contrast ≥ 4.5:1 in both themes.**