← 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 70
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. **Develop with `@vectojs/devtools` attached.** Add the dep and gate `attachDevtools(scene, …)` behind a `?debug` query flag so it never ships; the headless layer (`pickInScene`, `inspectEntity`, `auditScene`, `auditSceneSelection`, `diagnoseDirty`, `inspectText`) is the fast path for verifying geometry/state in tests and agent loops without the panel. One devtools instance per inspected Scene; detach on unmount. 4. Use world/local coordinate conversion in hit tests. Do not subtract only `this.x` once nested transforms, scale, or rotation are possible. 5. Expose semantics for interactive entities with `getA11yAttributes()`. 6. Prefer `scene.renderMode = 'onDemand'` for static or event-driven UI; call `scene.markDirty()` after external mutations. 7. Always call `scene.destroy()` when the host framework unmounts. For copyable examples, read `references/scene-recipes.md`. ## Package layout `@vectojs/core` owns the `Scene`/`Entity` runtime, renderers (Canvas/SVG/WebGL/WebGPU), a11y p