Skills for Real Engineers. Straight from my .agents directory.
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
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)
1# HTML23Build 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.45## Route the request first67Use the narrowest skill that owns the main review question:89- Read and compose [`design-artifact`](../design-artifact/SKILL.md) with the10 chosen workflow when palette, type, composition, theming, or overall visual11 register remain open. It provides creative direction; it does not replace the12 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
Similar skill repositories
Public repository for Agent Skills
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
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
Production-grade engineering skills for AI coding agents.
Agent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages
