design-artifact

plannotator/effective-html

SkillLoads cleanly

Design principles and creative direction for building HTML artifacts — pages, reports, plans, landing pages, demos, decks, and small tools. Use when creating…

Scores
out of 100 · grade A

2026-08-22

Works

40% of the score

100/100

Loads cleanly: valid frontmatter, required fields present, no dangling references.

Maintained

25% of the score

92/100

no commits in the last 12 weeks

Adopted

20% of the score

44/100

1,687 stars on the source repo.

Documented

15% of the score

73/100

1,688 words with worked examples.
Ships 1 bundled file.

Loads cleanly. Every structural check Claude Code needs to register this passed. Last commit 18 days ago.

Install

npx skills add plannotator/effective-html/design-artifact

What it says it does

Design principles and creative direction for building HTML artifacts — pages, reports, plans, landing pages, demos, decks, and small tools. Use when creating or restyling any visual HTML deliverable and deciding its palette, type pairing, layout, theming, or overall register, or when the output must not look generically AI-generated.

Every number above came out of reading the file and its repository. Nothing is a judgement call, nothing is a model’s opinion, and nothing can be paid for. The full method is published. Source last committed 2026-08-03.

Also in plannotator/effective-html

Other artifacts published from the same repository.
Artifact	What the check found	Type	Reach	Last commit
htmlplannotator/effective-html	clean	Skill	2,236 installs	18 days ago
html-diagramplannotator/effective-html	clean	Skill	2,511 installs	18 days ago
html-planplannotator/effective-html	clean	Skill	2,234 installs	18 days ago
html-prototypeplannotator/effective-html	clean	Skill	1.7k stars	18 days ago
html-wireframeplannotator/effective-html	clean	Skill	1.7k stars	18 days ago
effective-htmlplannotator/effective-html	clean	Marketplace	1.7k stars	18 days ago

Other ai & agents skills

Browse all

Same category, same type, ranked by score.
Artifact	What the check found	Category	Reach	Last commit
mcp-builderanthropics/skills	No license	AI & agents	104,949 installs	today
agent-developmentanthropics/claude-plugins-official	clean	AI & agents	5,901 installs	today
plugin-settingsanthropics/claude-plugins-official	clean	AI & agents	5,465 installs	today
skill-creatoranthropics/claude-plugins-official	clean	AI & agents	5,836 installs	today
microsoft-foundrymicrosoft/azure-skills	clean	AI & agents	544,819 installs	today
claude-apianthropics/skills	No license	AI & agents	59,236 installs	today

Put this measurement in your README

A badge carrying how many listings this index holds from the repository and how many pass every static structural check. It reads from this index every time somebody loads your page, so it changes when the measurement changes and there is nothing to keep up to date. Free, no account, and the value is not something you or we can set by hand.

[![SkillWorks](https://toolproof.kynth.studio/badge/skillworks/plannotator/effective-html.svg)](https://skillworks.kynth.studio/?q=plannotator%2Feffective-html)

Would rather not hotlink us? Every badge is also served in shields.io’s endpoint schema, so shields renders the image and your readers never talk to our domain:

Published by Toolproof, the masthead over this index and eight others. The method behind the number is at toolproof.kynth.studio/methodology, and the whole thing is readable as JSON with no key at /api.