How do I install the Canon Cursors skill?

Run npx skillmds@latest add dragoon0x/canon-cursors in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Canon Cursors safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Canon Cursors?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Canon Cursors free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Canon Cursors?

dragoon0x (@dragoon0x) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Canon Cursors by dragoon0x — Agent Skill

Name: Canon Cursors
Author: dragoon0x

Canon Cursors

Use when designing or auditing cursor behavior — matching cursor shape to affordance, custom cursors, drag cursors, resize cursors, and the hover+cursor pairing rule. Trigger when the user mentions cursor, pointer, mouse cursor, drag cursor, or resize handle.

dragoon0x 2b4d69f 2.6 KB Updated Sep 17, 2026

File contents

CANON · Cursors

The cursor tells users what will happen before they click. Wrong cursor = broken promise.

Cursor-affordance pairing

Affordance	Cursor	CSS
Clickable button/link	Pointer	`cursor: pointer`
Text content (selectable)	Text	`cursor: text`
Draggable element	Grab / grabbing	`cursor: grab` / `cursor: grabbing`
Resizable edge/corner	Resize	`cursor: ew-resize`, `ns-resize`, `nwse-resize`
Disabled element	Not-allowed	`cursor: not-allowed`
Loading (system-level)	Wait	`cursor: wait`
Loading (element-level)	Progress	`cursor: progress`
Default (non-interactive)	Default	`cursor: default`
Crosshair (precision)	Crosshair	`cursor: crosshair`
Help (tooltip-ish)	Help	`cursor: help`
Zoom in/out	Zoom-in / zoom-out	`cursor: zoom-in`

The hover+cursor rule

From canon-interaction: if the element changes on hover, the cursor must match the action. Hover effect without cursor change is ambiguous. Cursor change without hover effect is invisible.

Custom cursors

Custom cursor images are acceptable for specialized tools (drawing apps, games). Rules:

Provide a fallback: cursor: url(custom.png), pointer
Keep the hotspot correct (the click point).
Size: 32×32px maximum (OS recommendation).
Don't use custom cursors for standard web interactions.

Anti-patterns

Anti-pattern	Why it fails
`cursor: pointer` on non-interactive elements	False promise
No cursor change on interactive elements	Hidden affordance
`cursor: pointer` on text inputs	Confusing — text cursor expected
Custom cursor on every element	Disorienting
`cursor: not-allowed` on elements that are actually clickable	Lying to the user
Grab cursor on non-draggable element	Broken promise

Audit checklist

Every interactive element uses cursor: pointer
Draggable elements use cursor: grab (and grabbing on drag)
Disabled elements use cursor: not-allowed
Resizable edges use the correct resize cursor
No cursor: pointer on non-interactive content
Custom cursors have a standard fallback
Text-selectable areas use default or text cursor

Sources

MDN · cursor CSS property
WCAG 2.2 · 1.4.1 Use of Color (cursor is a signal)
Apple HIG · Pointer (cursor guidance)

---name: canon-cursorsdescription: Use when designing or auditing cursor behavior — matching cursor shape to affordance, custom cursors, drag cursors, resize cursors, and the hover+cursor pairing rule. Trigger when the user mentions cursor, pointer, mouse cursor, drag cursor, or resize handle.---# CANON · CursorsThe cursor tells users what will happen before they click. Wrong cursor = broken promise.## Cursor-affordance pairing| Affordance | Cursor | CSS ||---|---|---|| Clickable button/link | Pointer | `cursor: pointer` || Text content (selectable) | Text | `cursor: text` || Draggable element | Grab / grabbing | `cursor: grab` / `cursor: grabbing` || Resizable edge/corner | Resize | `cursor: ew-resize`, `ns-resize`, `nwse-resize` || Disabled element | Not-allowed | `cursor: not-allowed` || Loading (system-level) | Wait | `cursor: wait` || Loading (element-level) | Progress | `cursor: progress` || Default (non-interactive) | Default | `cursor: default` || Crosshair (precision) | Crosshair | `cursor: crosshair` || Help (tooltip-ish) | Help | `cursor: help` || Zoom in/out | Zoom-in / zoom-out | `cursor: zoom-in` |## The hover+cursor ruleFrom `canon-interaction`: if the element changes on hover, the cursor must match the action. Hover effect without cursor change is ambiguous. Cursor change without hover effect is invisible.## Custom cursorsCustom cursor images are acceptable for specialized tools (drawing apps, games). Rules:- Provide a fallback: `cursor: url(custom.png), pointer`- Keep the hotspot correct (the click point).- Size: 32×32px maximum (OS recommendation).- Don't use custom cursors for standard web interactions.## Anti-patterns| Anti-pattern | Why it fails ||---|---|| `cursor: pointer` on non-interactive elements | False promise || No cursor change on interactive elements | Hidden affordance || `cursor: pointer` on text inputs | Confusing — text cursor expected || Custom cursor on every element | Disorienting || `cursor: not-allowed` on elements that are actually clickable | Lying to the user || Grab cursor on non-draggable element | Broken promise |## Audit checklist- [ ] Every interactive element uses `cursor: pointer`- [ ] Draggable elements use `cursor: grab` (and `grabbing` on drag)- [ ] Disabled elements use `cursor: not-allowed`- [ ] Resizable edges use the correct resize cursor- [ ] No `cursor: pointer` on non-interactive content- [ ] Custom cursors have a standard fallback- [ ] Text-selectable areas use default or text cursor## Sources- MDN · cursor CSS property- WCAG 2.2 · 1.4.1 Use of Color (cursor is a signal)- Apple HIG · Pointer (cursor guidance)

Frequently asked questions