Install any skill in seconds. Free to start, no credit card required.
Get Started Free →plannotator/html
Create or redesign self-contained single-file HTML artifacts with a visual direction shaped by the user's brief, project, and subject.
Passed 5 of 22 test cases with the skill, and 17 of 22 without it.
2 fixed6 passed either way7 still failing7 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 2 test cases the skill fixed. Same model, same prompt, with and without the skill.
Build an HTML interactive log parser utility for analyzing Nginx access logs.
| Checked | Without skill | With skill |
|---|---|---|
| The HTML document contains zero `<script>` tags referencing external transpilers or external JS files. | Missed | Passed |
The instructions your model reads when the skill loads.
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.
Use the narrowest skill that owns the main review question:
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.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.html-prototype when the user needs a polished mockup or a working interactive flow. A mockup is the static fidelity mode inside that skill.html-plan when the artifact is primarily a plan, roadmap, implementation sequence, or rollout document whose source commitments must remain easy to verify.html-diagram when relationships, sequence, topology, state, hierarchy, or system behavior are the main content.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.
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:
Before coding, settle five things in working notes:
If the project already answers the visual questions, follow it. Otherwise read
test cases passed, vs 17 / 22 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.