plannotator/effective-html

Agent skills for useful HTML artifacts, wireframes, interactive prototypes, plans, and diagrams.

8 skills listed · MIT · 3.8k stars · last pushed 31 Oct 2026

plannotator/effective-html on GitHub

Across these 8 skills

Pattern check

Nothing flagged in 8

What it can touch

2 name web addresses
1 runs shell commands
1 reaches the network

Checked at commit 5ce160a on 3 Nov 2026.

Install the collection

Claude Code plugin

Installs the latest version, not the one we checked. Installs everything in the plugin, including any hooks, MCP servers and scripts our check doesn't cover.

claude plugin marketplace add plannotator/effective-html --scope user &&claude plugin install plannotator-effective-html@effective-html --scope user

Any agent

Installs the latest version, not the one we checked. The skills CLI reports installs to skills.sh unless you set DISABLE_TELEMETRY=1.

npx skills@1.7.4 add plannotator/effective-html

Skills

Skills in plannotator/effective-html
Skill	What it can touch	Pattern check	Licence	Updated
Effective HTML
htmlCreate or redesign self-contained single-file HTML artifacts with a visual direction shaped by the user's brief, project, and subject. Use when HTML is the deliverable for a report, explainer, landing page, presentation, tool, mixed artifact, or broad request. This is the collection's only implicit router. Route clear wireframe, prototype, mockup, plan, or diagram requests to the matching direct-invocation specialist when available. Do not use for ordinary application implementation when a standalone HTML file is not the deliverable. Instructions only Pattern check: Nothing flaggedMITUpdated 2 Aug 2026	Instructions only	Pattern check: Nothing flagged	MIT	2 Aug 2026
big-pics-little-wordsExplain the current subject in HTML with large visuals and minimal text while preserving key details. Instructions only Pattern check: Nothing flaggedMITUpdated 15 Oct 2026	Instructions only	Pattern check: Nothing flagged	MIT	15 Oct 2026
one-pagerMake a one-pager: one HTML page that shares an idea with teammates early, or recaps work for them, with big pictures and little words. Instructions only Pattern check: Nothing flaggedMITUpdated 31 Oct 2026	Instructions only	Pattern check: Nothing flagged	MIT	31 Oct 2026
design-artifactDesign 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. Runs shell commands +1 more Pattern check: Nothing flaggedMITUpdated 3 Aug 2026	Runs shell commands Reaches the network	Pattern check: Nothing flagged	MIT	3 Aug 2026
html-wireframeDirect-invocation specialist for low-fidelity, self-contained HTML wireframes that test information hierarchy, content, navigation, task flow, and responsive structure before visual design. Use when the user explicitly invokes html-wireframe or the broad html skill routes a wireframe request here. Do not activate independently from a general request. Do not use for polished mockups or production-like interaction; use html-prototype for those. Names web addresses Pattern check: Nothing flaggedMITUpdated 2 Aug 2026	Names web addresses	Pattern check: Nothing flagged	MIT	2 Aug 2026
html-prototypeDirect-invocation specialist for polished, responsive, self-contained HTML mockups and interactive prototypes grounded in the user's conversation, product context, and design language. Use when the user explicitly invokes html-prototype or the broad html skill routes a mockup or prototype request here. Do not activate independently from a general request. Treat a mockup as a noninteractive fidelity mode within this skill, not as a separate skill. Names web addresses Pattern check: Nothing flaggedMITUpdated 2 Aug 2026	Names web addresses	Pattern check: Nothing flagged	MIT	2 Aug 2026
html-diagramDirect-invocation specialist for self-contained HTML diagrams whose layout, notation, and interaction clarify relationships, sequence, topology, state, hierarchy, or quantitative structure. Use when the user explicitly invokes html-diagram or the broad html skill routes a diagram request here. Do not activate independently from a general request. Instructions only Pattern check: Nothing flaggedMITUpdated 2 Aug 2026	Instructions only	Pattern check: Nothing flagged	MIT	2 Aug 2026
html-planDirect-invocation specialist for clear, self-contained HTML plans that preserve source material while improving hierarchy, sequence, ownership, dependencies, and reviewability. Use when the user explicitly invokes html-plan or the broad html skill routes a plan request here. Do not activate independently from a general request. Instructions only Pattern check: Nothing flaggedMITUpdated 2 Aug 2026	Instructions only	Pattern check: Nothing flagged	MIT	2 Aug 2026