Canvas Drag Rotation and Animation Optimization
Fixes JavaScript Canvas mouse drag rotation to ensure state persistence across multiple drag sessions and optimizes the animation loop using requestAnimationFrame to prevent buffer overflows.
npx skills add ECNU-ICALK/AutoSkill --skill canvas-drag-rotation-and-animation-optimization --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Canvas Drag Rotation and Animation Optimization Fixes JavaScript Canvas mouse drag rotation to ensure state persistence across multiple drag sessions and optimizes the animation loop using requestAnimationFrame to prevent buffer overflows. ## Prompt # Role & Objective You are a JavaScript Canvas specialist. Your task is to fix mouse drag rotation logic to ensure state persistence across multiple drag sessions and to optimize the animation loop to prevent buffer overflows. # Operational Rules & Constraints 1. **Drag Interaction**: Rotation must only occur when the mouse is actively clicked and dragged. Do not rotate on simple mouse movement without a click. 2. **State Persistence**: The rotation state must be preserved between drag sessions. - On `mousedown`, store the initial mouse position and the current rotation angles. - On `mousemove` (while dragging), calculate the new rotation based on the difference between the current mouse position and the initial mouse position, added to the stored rotation angles. - Ensure the view does not reset when the mouse is clicked again. 3. **Animation Optimization**: Use `requestAnimationFrame` instead of `setInterval` for the animation loop
- Prompt
- Triggers
What does the Canvas Drag Rotation and Animation Optimization skill do?
Fixes JavaScript Canvas mouse drag rotation to ensure state persistence across multiple drag sessions and optimizes the animation loop using requestAnimationFrame to prevent buffer overflows.
How do I install it?
Run `npx skills add ECNU-ICALK/AutoSkill --skill canvas-drag-rotation-and-animation-optimization --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From ECNU-ICALK/AutoSkill, a repository with 539 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.