ReddRadar
Agent skill
boardkit-canvas-input-model
Canvas input model: pan/zoom, pointer events, keyboard shortcuts, selection, gestures. Use when working on canvas interactions, navigation, or input handling.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/development/boardkit-canvas-input-model
SKILL.md
Boardkit Canvas Input Model
Tools
| Tool | Shortcut | Behavior |
|---|---|---|
| Select | V |
Click to select, drag to move/resize |
| Hand | H |
Drag to pan canvas |
| Rectangle | R |
Click+drag to draw |
| Ellipse | O |
Click+drag to draw |
| Line | L |
Click+drag to draw |
| Arrow | A |
Click+drag to draw |
| Pencil | P |
Freehand drawing |
| Text | T |
Click to place text block |
Navigation
Pan
| Input | Behavior |
|---|---|
| Hand tool + drag | Pan canvas |
| Middle mouse + drag | Pan canvas |
| Space + drag | Temporary hand tool |
| Trackpad two-finger | Pan canvas |
Zoom
| Input | Behavior |
|---|---|
| Scroll wheel | Zoom at cursor |
| Trackpad pinch | Zoom at center |
Cmd/Ctrl + + |
Zoom in |
Cmd/Ctrl + - |
Zoom out |
Cmd/Ctrl + 0 |
Reset zoom (100%) |
Zoom range: 10% — 500%
Selection
| Input | Behavior |
|---|---|
| Click widget/element | Select single |
Shift + click |
Add to selection (future) |
| Click empty space | Deselect all |
Escape |
Deselect all |
| Drag on empty | Marquee selection (future) |
Widget Interactions
| Input | Behavior |
|---|---|
| Drag widget | Move |
| Corner handles | Resize |
Shift + resize |
Maintain aspect ratio |
| Double-click | Enter edit mode |
Delete / Backspace |
Delete selected |
Cmd/Ctrl + D |
Duplicate |
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
Cmd/Ctrl + K |
Command palette |
Cmd/Ctrl + Z |
Undo |
Cmd/Ctrl + Shift + Z |
Redo |
Cmd/Ctrl + D |
Duplicate |
Cmd/Ctrl + A |
Select all |
Escape |
Deselect / Cancel |
Delete |
Delete selected |
V, H, R, O, L, A, P, T |
Tool shortcuts |
Focus Model
┌─────────────────────────────────────┐
│ Canvas Focus (shortcuts work) │
│ │
│ ┌─────────────────────────────┐ │
│ │ Widget Focus │ │
│ │ (widget captures input) │ │
│ │ │ │
│ │ ┌─────────────────────┐ │ │
│ │ │ Input Focus │ │ │
│ │ │ (text input active) │ │ │
│ │ └─────────────────────┘ │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────────┘
- Canvas focus: Tool shortcuts work (V, H, R, etc.)
- Widget focus: Widget captures input, canvas shortcuts disabled
- Input focus: Text input captures all keyboard
Drawing Elements
| Action | Behavior |
|---|---|
| Click + drag | Create shape |
Shift + drag |
Constrain (square, straight) |
Enter |
Commit text element |
Escape |
Cancel drawing |
Performance Rules
- Use CSS transforms for drag (no re-render)
- Throttle pointer events with
requestAnimationFrame - Lazy render elements outside viewport (future)
Key Files
| Purpose | Path |
|---|---|
| Canvas (web) | apps/web/src/components/BoardCanvas.vue |
| Canvas (desktop) | apps/desktop/src/components/BoardCanvas.vue |
| Widget frame | packages/ui/src/components/WidgetFrame.vue |
| Selection handles | packages/ui/src/components/SelectionHandles.vue |
| Tool store | packages/core/src/stores/toolStore.ts |
| Keyboard shortcuts | packages/core/src/composables/useKeyboardShortcuts.ts |
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?