plannotator-effective-html-22d18f — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited plannotator-effective-html-22d18f (Plugin) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
<p align="center"> <img src="./assets/effective-html-banner.png" width="1280" alt="Effective HTML by Plannotator — HTML wireframes, mockups, prototypes, charts, and diagrams"> </p>
Focused agent skills for creating useful, self-contained HTML artifacts, from low-fidelity wireframes to working interactive prototypes.
Modern models can do a lot. Give them plenty of useful references and use artifacts to show what you mean. HTML can visualize almost anything, often more clearly than a wall of text. Your prompt can simply point to the artifacts, repositories, and folders that carry the context.
[!NOTE] You can use this repo without installing anything. Treat it as a reference first and an installable skill collection second. See the Effective HTML guide.
https://github.com/user-attachments/assets/24306977-7f30-44c9-9bff-55f901d557b0
<p align="center"> <a href="https://github.com/backnotprop/plannotator"> <img src="./star-plannotator.svg" width="340" alt="Star Plannotator on GitHub"> </a> </p> <p align="center"> Render and annotate local HTML with <a href="https://github.com/backnotprop/plannotator">Plannotator</a>. </p>
The repo includes seven optional skills for pragmatic visual artifacts.
| Skill | Use it for |
|---|---|
html | Broad HTML requests, mixed artifacts, reports, explainers, presentations, landing pages, tools, and routing to a specialist |
big-pics-little-words | Explain the current subject in HTML with large visuals and minimal text while preserving key details; copied from bro |
design-artifact | Subject-specific creative direction for any HTML artifact without imposing a reusable house style |
html-wireframe | Low-fidelity layout directions that test content, hierarchy, navigation, flows, and responsive structure |
html-prototype | Working prototypes with realistic states, interaction, keyboard support, and responsive behavior |
html-plan | Plans, roadmaps, rollouts, and implementation sequences that preserve source commitments |
html-diagram | Architecture, sequence, process, state, hierarchy, timeline, and system diagrams |
Practical guide: HTML Wireframes and Prototypes for Coding Agents.
Install the collection when you want these references available to your agent as reusable workflows:
npx skills add plannotator/effective-htmlList or install individual skills:
npx skills add plannotator/effective-html --list
npx skills add plannotator/effective-html --skill big-pics-little-words
npx skills add plannotator/effective-html --skill design-artifact
npx skills add plannotator/effective-html --skill html-wireframe
npx skills add plannotator/effective-html --skill html-prototype/plugin marketplace add plannotator/effective-html
/plugin install plannotator-effective-html@effective-htmlcodex plugin marketplace add plannotator/effective-html
codex plugin add plannotator-effective-html@effective-htmlThe skills separate creative freedom from reliability:
design-artifact provides a reusable design process without prescribing a reusable look.Detailed guidance lives only where it is needed. The broad html skill routes the work, design-artifact supplies optional creative direction, and specialist skills own fidelity and behavior. Each skill remains independently usable.
This project was inspired by Thariq Shihipar's The unreasonable effectiveness of HTML.
<p align="center"> <a href="https://github.com/plannotator/tot"> <img src="./use-tot.svg" width="300" alt="Share HTML with tot"> </a> </p> <p align="center"> Create a shareable link for an HTML file with <a href="https://github.com/plannotator/tot">tot</a>. </p>
~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.