With Drag Drop
Expert guidance for implementing drag-and-drop in JavaScript from scratch — free-dragging elements, sortable lists, resizable panels, drop zones. Use when making an element draggable, adding pointer-based dragging, building a sortable or reorderable list, or implementing resize handles, without reaching for a third-party dependency. Covers a single reusable drag engine (activators, modifiers, bas…
With Svg Animation
Expert guidance on performant SVG animation techniques. Use when animating SVGs, stroke draw effects, path morphing, clip-path animations, SVG motion, hover effects, or choosing between CSS/GSAP/anime.js for SVG animation. Not for raster/canvas animation or non-SVG DOM transitions — see with-canvas for those.
With Canvas
Canvas implementation and review guidance for vanilla JavaScript, TypeScript, Web APIs, OffscreenCanvas, Web Workers, CanvasRenderingContext2D, WebGL-backed canvas, and canvas libraries including p5.js, Paper.js, Pencil.js, Konva, ZIM, Three.js, and Babylon.js. Use when creating, editing, optimizing, debugging, or reviewing canvas animations, generative art, games, charts, particle systems, inter…
With Svelte
Modern Svelte 5 + SvelteKit guidance and routing. Use whenever creating, editing, reviewing, or debugging a Svelte component (.svelte) or module (.svelte.ts/.svelte.js), or any SvelteKit project. Covers runes ($state, $derived, $effect, $props, $bindable), template directives ({@attach}, {@render}, {@html}, snippets, keyed each), components (Bits UI, web components, forms), SvelteKit routing/layo…