← ClaudeAtlas

vectojs-ui-animationlisted

Use when creating polished VectoJS UI/UX with @vectojs/ui components, forms, overlays, hover/focus states, motion, transitions, microinteractions, or canvas-native interaction design.
vectojs/vectojs-skills · ★ 0 · Web & Frontend · score 72
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