Agent skill · design visual · plannotator
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.
Why this skill is useful
Provides specific guidelines for creating self-contained HTML artifacts, enhancing the AI's ability to generate tailored HTML outputs based on user requirements.
What it needs
About 4k tokens when loaded. Last updated 2026-08-03. 1,607 stars on the source repository.
What this skill does
HTML Build 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. Route the request first Use the narrowest skill that owns the main review question: Read and compose design-artifact with the chosen workflow when palette, type, composition, theming, or overall visual register remain open. It provides creative direction; it does not replace the specialist that owns fidelity, structure, or behavior. Read and follow html-wireframe 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. Read and follow html-prototype when the user needs a polished mockup or a working interactive flow. A mockup is the static fidelity mode inside that skill. Read and follow html-plan when the artifact is primarily a plan, roadmap, implementation sequence, or rollout document whose source commitments must remain easy to verify. Read and follow html-diagram when relationships, sequence, topology, state, hierarchy, or system behavior are the main content. Continue with html for reports, explainers, presentations, landing pages, data stories, tools, and mixed artifacts that do not have a clearer owner. These sibling links are the nesting mechanism when the collection is installed together. If a specialized skill is unavailable, continue here and load the closest reference below. Do not make the user install another skill before completing the request. Read the room before designing Inspect the user's request and any material they supplied. When working in a repository, look for its design language in AGENTS.md, CLAUDE.md, design-system documentation, tokens, existing components, and nearby artifacts. Authority runs in this order: 1. The user's explicit visual and functional instructions. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills plannotator/html