Tooluck logoTooluck
SKILL.md

html

Agent skill fromplannotator/effective-html

Create 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.

How to install html

install html
# install the effective-html pack with the skills CLI
npx skills add plannotator/effective-html

# or add only this skill to Claude Code: copy the folder

skills/html/

# into

~/.claude/skills/html/ (all projects)

.claude/skills/html/ (one project)

skills/html/SKILL.md

MITFull file
1# HTML
2
3Build one self-contained HTML file that makes the subject clearer, easier to use, or easier to understand. The standard is consistent care, not a consistent look. Do not reproduce a house palette, typography stack, card system, or layout from prior runs.
4
5## Route the request first
6
7Use the narrowest skill that owns the main review question:
8
9- Read and compose [`design-artifact`](../design-artifact/SKILL.md) with the
10 chosen workflow when palette, type, composition, theming, or overall visual
11 register remain open. It provides creative direction; it does not replace the
12 specialist that owns fidelity, structure, or behavior.
13- Read and follow [`html-wireframe`](../html-wireframe/SKILL.md) when structure, information hierarchy, navigation, or task flow is still unsettled. It should remain visibly low fidelity and may compare two or three layout directions.
14- Read and follow [`html-prototype`](../html-prototype/SKILL.md) when the user needs a polished mockup or a working interactive flow. A mockup is the static fidelity mode inside that skill.
15- Read and follow [`html-plan`](../html-plan/SKILL.md) when the artifact is primarily a plan, roadmap, implementation sequence, or rollout document whose source commitments must remain easy to verify.
16- Read and follow [`html-diagram`](../html-diagram/SKILL.md) when relationships, sequence, topology, state, hierarchy, or system behavior are the main content.
17…

Excerpt shown under the repository's MIT license.

More skills in effective-html

Keep exploring

Similar skill repositories

thedotmack /

claude-mem
116k

Persistent Context Across Sessions for Every Agent – Captures everything your agent does during sessions, compresses it with AI, and injects relevant context back into future sessions. Works with Claude Code, OpenClaw, Codex, Gemini, Hermes, Copilot, OpenCode + More

CCCXGHGM+135 skills

Leonxlnx /

taste-skill
113k

Agent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages

CCCXCU1 skill

Newsletter

Join the Community

Subscribe to our newsletter for the latest news and updates