From webcpu-agent-skill
Precise, source-grounded guide for AI agents building CPU-rendered Canvas2D 3D scenes with @xsyetopz/easel (EASEL.js), including browser, Deno, Bun/Node bundler setup, renderer setup, scene graph, cameras, geometry buffers, materials, textures, lighting, fog, animation, picking, voxel worlds, performance, and migration from THREE.js/CreateJS/WebGPU assumptions. Use when working with @xsyetopz/easel, easeljs.org, EASEL.js CPU rasterizer, software rendering, Canvas2D 3D, retro 3D, Deno browser apps, or browser CPU graphics.
How this skill is triggered — by the user, by Claude, or both
Slash command
/webcpu-agent-skill:webcpu-easelThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Use this skill for `@xsyetopz/easel` EASEL.js: a CPU software renderer and Canvas2D rasterizer with a THREE.js-style scene graph API.
REFERENCE.mdexamples/animated-cube.tsexamples/basic-setup.tsexamples/data-texture-from-canvas.tsexamples/fog-and-lighting.tsexamples/frame-profiling.tsexamples/manual-geometry.tsexamples/orbit-camera.tsexamples/responsive-canvas.tsexamples/skinned-voxel-animation.tsexamples/texture-atlas.tsexamples/voxel-chunk-mesher.tsexamples/voxel-picking.tsreference/animation.mdreference/api-index.mdreference/cameras-controls.mdreference/chunked-voxel-terrain.mdreference/class-signatures.mdreference/core-concepts.mdreference/cpu-rasterizer-constraints.mdUse this skill for @xsyetopz/easel EASEL.js: a CPU software renderer and Canvas2D rasterizer with a THREE.js-style scene graph API.
This skill is written for LLMs and AI coding agents. Treat it as an execution contract, not background prose. Prefer verified references over memory.
Before writing code:
@xsyetopz/easel version. If absent, use bundled baseline @xsyetopz/[email protected].REFERENCE.md.reference/api-index.md and shapes in reference/class-signatures.md.node_modules/@xsyetopz/easel/dist/ or Deno cache/types.UNKNOWN with exact missing symbol or behavior. Do not invent.Do not work around these rules.
navigator.gpu for EASEL.js rendering.createjs.Stage, Ticker, Bitmap, or display-list code.reference/module-imports.md or installed package exports prove the path.| Runtime/task | Use first | Verify |
|---|---|---|
| npm/Bun/browser setup | reference/setup.md | EASEL.REVISION |
| Deno-managed browser app | reference/deno-runtime.md | deno check, browser canvas |
| Imports/install | reference/module-imports.md | package version and import mode |
| Renderer loop | reference/renderer-framebuffer.md | renderer.render(scene, camera) |
| Manual geometry | reference/geometry-manual.md | positions, normals, UVs, indices |
| Texture atlas | reference/texture-atlas-pipeline.md | DataTexture, needsUpdate |
| Picking/input | reference/input-picking.md | canvas pixel scaling |
| Voxel chunks | reference/chunked-voxel-terrain.md | chunk replacement disposal |
| Animation | reference/animation.md | Animator, AnimationClip, Track |
| Performance | reference/performance.md | CPU budget and object reuse |
| Area | Verified EASEL.js surface |
|---|---|
| Renderer | Renderer, RenderTimings, setSize, setPixelRatio, setClearColor, render, dispose |
| Scene graph | Scene, Node, Group, Mesh, Line, LineSegments, Points, Sprite, Bone, SkinnedMesh |
| Cameras | PerspectiveCamera, OrthographicCamera, Camera base via concrete subclasses |
| Geometry | Geometry, Attribute, built-in primitives, manual buffers: positions, normals, UVs, colors, index |
| Materials | Material, BasicMaterial, LambertMaterial, ToonMaterial, LineMaterial, PointsMaterial, DashedLineMaterial |
| Textures | Texture, DataTexture, CanvasTexture, FramebufferTexture, VideoTexture, loaders |
| Lighting/fog | AmbientLight, DirectionalLight, PointLight, SpotLight, HemisphereLight, Fog |
| Animation | AnimationClip, Animator, Track, typed tracks, LoopOnce, LoopRepeat, LoopPingPong |
| Picking | Raycaster, custom ray/voxel DDA recipes |
| Pipeline | SceneTraversal, FogCuller, PainterSort, LightBaker, Rasterizer, FramebufferUpload |
reference/setup.md, reference/module-imports.md, reference/deno-runtime.mdreference/renderer-framebuffer.md, reference/render-loop-recipes.mdreference/core-concepts.mdreference/cameras-controls.mdreference/geometry-builtins.mdreference/geometry-manual.mdreference/materials.mdreference/textures-assets.md, reference/texture-atlas-pipeline.mdreference/lights-fog.mdreference/animation.md, reference/hierarchical-voxel-rigging.mdreference/input-picking.md, reference/pointer-input-and-grid-picking.mdreference/voxel-worlds.md, reference/chunked-voxel-terrain.mdreference/performance.md, reference/cpu-rasterizer-constraints.mdreference/threejs-migration.md, reference/createjs-easeljs-comparison.md, reference/webgl-webgpu-comparison.mdimport * as EASEL from "@xsyetopz/easel";
const renderer = new EASEL.Renderer({ width: 320, height: 180, canvas });
const scene = new EASEL.Scene();
const camera = new EASEL.PerspectiveCamera({ fov: 60, aspect: 320 / 180, near: 0.1, far: 100 });
camera.position.set(2, 2, 4);
camera.lookAt(0, 0, 0);
scene.add(new EASEL.AmbientLight(0xffffff, 0.35));
const mesh = new EASEL.Mesh(
new EASEL.BoxGeometry(1, 1, 1),
new EASEL.LambertMaterial({ color: 0xff5533 }),
);
scene.add(mesh);
function frame() {
mesh.rotation.y += 0.02;
scene.updateMatrixWorld();
renderer.render(scene, camera);
requestAnimationFrame(frame);
}
frame();
reference/api-index.md and reference/class-signatures.md.node_modules/@xsyetopz/easel/dist/ or Deno type cache.node_modules/@xsyetopz/easel/src/ when available.reference/version-provenance.md.Keep implementations close to these references. Prefer verified recipes over improvised APIs.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub xsyetopz/webcpu-agent-skill --plugin webcpu-agent-skill