メニュー
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.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
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.
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.
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.
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.
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.
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.
| 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. |
The cursor tells users what will happen before they click. Wrong cursor = broken promise.
| 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 |
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 cursor images are acceptable for specialized tools (drawing apps, games). Rules:
cursor: url(custom.png), pointer| 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 |
cursor: pointercursor: grab (and grabbing on drag)cursor: not-allowedcursor: pointer on non-interactive content