Execute qualquer Skill no Manus
com um clique

Execute qualquer Skill no Manus com um clique

canon-cursors

Estrelas4

Forks0

Atualizado18 de abril de 2026 às 06:53

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.

Instalação

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Executar no Manus

Fonte

Dragoon0x

Dragoon0x/canon

Abrir repositório GitHub Ver repositórios do creator

Download

Executar no Manus

Ocupações relacionadasSOC

Baseado na classificação ocupacional SOC

Desenvolvedores webInformática e Matemática·SOC 15-1254

SKILL.md

readonly

name	canon-cursors
description	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 · 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)

Mais deste repositório

mesmo repositório

canon-brand-voice

Dragoon0x/canon

Use when defining or auditing a product's written voice — the consistent personality across all UI copy. Covers voice vs tone, voice attribute definition, do/don't tables, and how to keep AI-generated copy on-brand. Trigger when the user mentions brand voice, tone of voice, writing style guide, copy guidelines, or product personality.

2026-04-184

canon-bundle-size

Dragoon0x/canon

Use when auditing or reducing JavaScript and CSS bundle sizes, setting performance budgets, choosing lighter alternatives to heavy libraries, configuring tree shaking, code splitting, and lazy loading. Trigger when the user mentions bundle size, JavaScript size, tree shaking, code splitting, lazy loading, or performance budget.

2026-04-184

canon-color-blindness

Dragoon0x/canon

Use when designing or auditing for color vision deficiency — ensuring that color is never the only visual signal, checking charts and status indicators, picking colorblind-safe palettes, and testing against deuteranopia, protanopia, and tritanopia simulations. Trigger when the user mentions color blindness, color vision, CVD, deuteranopia, protanopia, accessibility color, or color-only signal.

2026-04-184

canon-content-strategy

Dragoon0x/canon

Use when planning content hierarchy, information density, content-first design, microcopy systems, or editorial patterns. Covers the content-before-design principle, content inventory, progressive disclosure, scannability, and content governance. Trigger when the user mentions content strategy, content hierarchy, information architecture, microcopy, or editorial design.

2026-04-184

canon-dark-mode

Dragoon0x/canon

Use when designing, auditing, or implementing dark mode. Covers lightness inversion (not hue shift), elevation via lightness not shadow, surface stacking, contrast rechecking, and the prefers-color-scheme media query. Trigger when the user mentions dark mode, dark theme, night mode, theme toggle, or color scheme.

2026-04-184

canon-data-viz

Dragoon0x/canon

Use when designing dashboards, metrics displays, KPI widgets, sparklines, progress indicators, or any data-dense UI that isn't a standard chart. Covers the big-number pattern, sparklines, progress bars, gauges, metric comparison, and dashboard composition. Trigger when the user mentions dashboard, KPI, metric, progress bar, gauge, sparkline, or data display.

2026-04-184

name	canon-cursors
description	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 · 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)