← ClaudeAtlas

vectojs-core-runtimelisted

Use when building or reviewing VectoJS apps with @vectojs/core, Scene/Entity, canvas rendering, semantic DOM projection, accessibility, automation, framework mounting, or lifecycle cleanup.
vectojs/vectojs-skills · ★ 0 · AI & Automation · score 72
Install: claude install-skill vectojs/vectojs-skills
# VectoJS Core Runtime Use this skill to build canvas-native VectoJS scenes that remain accessible, automatable, and cleanly disposable. ## Core workflow 1. Confirm installed package versions and inspect local source/docs when exact API behavior matters. 2. Start from `@vectojs/core` primitives: one `Scene` per canvas, `Entity` subclasses for custom drawing, and the built-in `Rect`/`Circle`/`Group` shape primitives (1.9.0+) for plain boxes, dots, and transform containers — no subclass needed. 3. Use world/local coordinate conversion in hit tests. Do not subtract only `this.x` once nested transforms, scale, or rotation are possible. 4. Expose semantics for interactive entities with `getA11yAttributes()`. 5. Prefer `scene.renderMode = 'onDemand'` for static or event-driven UI; call `scene.markDirty()` after external mutations. 6. Always call `scene.destroy()` when the host framework unmounts. For copyable examples, read `references/scene-recipes.md`. ## Architecture rules - Treat VectoJS as a retained scene runtime, not a DOM component library. - Let canvas own pixels and let the semantic layer own role/name/state and native input. - Use `getContentProjection()` for searchable/copyable static text; never hand-author a sibling DOM text layer. - Keep application state outside the scene when possible; update entities from state and mark the scene dirty. - Use `Scene.step(dt)` for deterministic tests, simulations, and video export. - Keep custom entities small: render, hit-te