vectojs-ui-animationlisted
Install: claude install-skill vectojs/vectojs-skills
# VectoJS UI Animation
Use this skill to turn VectoJS components into usable, accessible, and polished UI rather than just canvas drawings.
## Interaction workflow
1. Start with semantic components from `@vectojs/ui` before writing custom controls.
2. Model each interaction state: idle, hover, active, focus, loading, disabled, error, and success.
3. Use canvas motion for feedback, but preserve semantic state through the projected DOM.
4. Respect reduced motion. Suppress transform-heavy movement and keep essential opacity/state feedback.
5. Keep overlays in the Scene overlay root; dispose or hide transient UI when its target leaves the tree.
6. Test with keyboard and role-based automation, not only pointer clicks.
Read `references/ui-recipes.md` for patterns and snippets.
## Component guidance
- Use `Input` and `TextArea` for text entry so IME, selection, clipboard, and undo stay native.
- Use `Button`, `Toggle`, `Checkbox`, `Slider`, `Dropdown`, `RadioGroup`, and `Tabs` for controls with roles.
- Use `Tooltip`, `Popover`, `ContextMenu`, and `Modal` for transient UI; keep dismissal behavior explicit.
- On `@vectojs/ui@1.9.2+`, focused editor surfaces import `ContextMenu` from
`@vectojs/ui/context-menu` so they do not pull Markdown and MathJax into the
application entry. Open it from VectoJS `pointerdown` when the native pointer
button is `2`, using `sceneX`/`sceneY`; Core does not emit a `contextmenu`
event and does not expose legacy `globalX`/`globalY` coordinat