# Cursor Design

> Custom cursor design, cursor states, and pointer interaction feedback.

- Skill: `dragoon0x/cursor-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/cursor-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/cursor-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/cursor-design

---


# Cursor Design

## Cursor States

| Cursor | When |
|--------|------|
| default (arrow) | Normal interaction |
| pointer (hand) | Clickable elements (links, buttons) |
| text (I-beam) | Text content, input fields |
| grab / grabbing | Draggable elements |
| not-allowed | Disabled or unavailable actions |
| wait / progress | Loading (avoid — prefer inline indicators) |
| zoom-in / zoom-out | Zoomable images |
| crosshair | Precise selection (drawing, cropping) |
| col-resize / row-resize | Resizable borders |

## Custom Cursors
- Use sparingly. Custom cursors can confuse users.
- Maximum size: 32x32px (128x128 on high-DPI).
- Maintain the hotspot in the expected position.
- Portfolio/creative sites: custom cursors can be a signature element.
- Apps/tools: stick with system cursors.

## Rules
- Every interactive element should have cursor: pointer.
- Never hide the cursor (except in fullscreen media/games).
- Disabled elements: cursor: not-allowed + reduced opacity.