Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Direct-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.
.claude/skills/plannotator-html-diagram/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-01 | ✗→✓ | ▲ Improved | 7% | 0% |
| case-02 | ✗→✓ | ▲ Improved | 74% | 0% |
| case-09 | ✗→✓ | ▲ Improved | 8% | 0% |
| case-17 | ✗→✓ | ▲ Improved | 8% | 0% |
| case-06 | ✓→✗ | ▼ Worse | 163% | 0% |
Build the smallest visual model that makes the relationship easier to understand than prose alone. Match the notation and visual language to the user's project and subject. Do not force every topic into the same SVG boxes and arrows.
Identify the question the reader should answer, then select the form:
Decide what must remain visible together and what can be revealed on demand. Use a simpler form when it carries the same meaning.
Use HTML and CSS, SVG, Canvas, or WebGL according to the information and scale. Do not use SVG merely because the output is a diagram.
Add sequencing, filtering, path tracing, pan and zoom, or animation only when it helps answer the stated question. Keep overlays dismissible, controls keyboard-accessible, and motion compatible with prefers-reduced-motion.
When design-artifact is available, read it for the diagram's surrounding composition and visual register. Keep the chosen diagram grammar, label legibility, and relationships authoritative over decorative treatment.
Deliver one self-contained HTML file with essential CSS and JavaScript inline. Require no build step or external service. Use accessible text alternatives and keep important meaning available without animation or color alone.
Inspect the result at wide and narrow widths. Check label collisions, clipped nodes, edge routing, reading order, keyboard operation, overflow, and every interactive state.
Return the absolute path, the diagram form chosen, and the main simplifications or assumptions.
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | fail→pass | 28,512 | 27,701 | -3% | 1 | 1 | 0% | 6,226 | 6,692 | +7% | 0 | 0 | — |
case-02 | fail→pass | 21,236 | 33,390 | +57% | 1 | 1 | 0% | 3,840 | 6,692 | +74% | 0 | 0 | — |
case-03 | fail→fail | 26,374 | 24,716 | -6% | 1 | 1 | 0% | 6,216 | 6,682 | +7% | 0 | 0 | — |
case-04 | pass→pass | 11,133 | 25,606 | +130% | 1 | 1 | 0% | 2,419 | 6,199 | +156% | 0 | 0 | — |
case-05 | pass→pass | 11,857 | 32,422 | +173% | 1 | 1 | 0% | 2,100 | 5,814 | +177% | 0 | 0 | — |
case-06 | pass→fail | 11,818 | 25,877 | +119% | 1 | 1 | 0% | 2,528 | 6,645 | +163% | 0 | 0 | — |
case-07 | fail→fail | 25,274 | 16,008 | -37% | 1 | 1 | 0% | 6,198 | 3,300 | -47% | 0 | 0 | — |
case-08 | fail→fail | 26,690 | 24,395 | -9% | 1 | 1 | 0% | 6,200 | 6,666 | +8% | 0 | 0 | — |
case-09 | fail→pass | 26,277 | 30,572 | +16% | 1 | 1 | 0% | 6,200 | 6,666 | +8% | 0 | 0 | — |
case-10 | fail→fail | 25,005 | 29,948 | +20% | 1 | 1 | 0% | 6,203 | 6,669 | +8% | 0 | 0 | — |
case-11 | fail→fail | 26,864 | 29,559 | +10% | 1 | 1 | 0% | 6,188 | 6,653 | +8% | 0 | 0 | — |
case-12 | fail→fail | 26,192 | 9,865 | -62% | 1 | 1 | 0% | 6,185 | 2,219 | -64% | 0 | 0 | — |
case-13 | fail→fail | 25,184 | 26,166 | +4% | 1 | 1 | 0% | 6,189 | 6,655 | +8% | 0 | 0 | — |
case-14 | fail→fail | 24,402 | 25,138 | +3% | 1 | 1 | 0% | 6,191 | 6,657 | +8% | 0 | 0 | — |
case-15 | fail→fail | 29,910 | 29,583 | -1% | 1 | 1 | 0% | 6,200 | 6,666 | +8% | 0 | 0 | — |
case-16 | fail→fail | 27,004 | 28,525 | +6% | 1 | 1 | 0% | 6,186 | 6,652 | +8% | 0 | 0 | — |
case-17 | fail→pass | 27,953 | 27,645 | -1% | 1 | 1 | 0% | 6,179 | 6,645 | +8% | 0 | 0 | — |
case-18 | fail→fail | 25,254 | 25,362 | +0% | 1 | 1 | 0% | 6,188 | 6,654 | +8% | 0 | 0 | — |
case-19 | fail→fail | 27,361 | 29,610 | +8% | 1 | 1 | 0% | 6,194 | 6,660 | +8% | 0 | 0 | — |
case-20 | fail→fail | 26,011 | 28,499 | +10% | 1 | 1 | 0% | 6,182 | 6,648 | +8% | 0 | 0 | — |
case-21 | fail→fail | 30,933 | 25,242 | -18% | 1 | 1 | 0% | 6,181 | 5,109 | -17% | 0 | 0 | — |
case-22 | fail→fail | 26,547 | 50,647 | +91% | 1 | 1 | 0% | 6,189 | 10,144 | +64% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +7 percentage points is the difference between those two pass rates over the 22 comparable cases. 6 cases got worse with the skill loaded, and they are included in that figure.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.