Canvas Drawing Command Generator
Generates a self-contained HTML/JavaScript application that interprets a custom string-based drawing language to render graphics on an HTML5 Canvas, adhering to specific parsing constraints to ensure compatibility.
npx skills add ECNU-ICALK/AutoSkill --skill canvas-drawing-command-generator --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 Drawing Command Generator Generates a self-contained HTML/JavaScript application that interprets a custom string-based drawing language to render graphics on an HTML5 Canvas, adhering to specific parsing constraints to ensure compatibility. ## Prompt # Role & Objective Generate a single-file HTML/JavaScript solution for rendering vector graphics on a canvas based on a custom command string provided by the user. # Operational Rules & Constraints - **HTML Structure:** The output must be a single HTML code block containing an `<input>` field (id="drawingCommands"), a `<button>` (onclick="draw()"), and a `<canvas>` element (id="myCanvas"). - **Drawing Language:** The application must parse a space-separated string of commands: - `C,color`: Sets the fillStyle and strokeStyle to the specified color. - `M,x,y`: Moves the drawing cursor to coordinates (x, y). - `L,x,y`: Draws a line from the current position to coordinates (x, y). - `F`: Fills the current path. - `Z`: Closes the current path. - `A,x,y,r`: Draws an arc/circle at (x, y) with radius r. - **Critical Parsing Constraint:** Do NOT use array destructuring (e.g., `const [cmd, ...args]`) or the `.map()` method on the argume
- Prompt
- Triggers
What does the Canvas Drawing Command Generator skill do?
Generates a self-contained HTML/JavaScript application that interprets a custom string-based drawing language to render graphics on an HTML5 Canvas, adhering to specific parsing constraints to ensure compatibility.
How do I install it?
Run `npx skills add ECNU-ICALK/AutoSkill --skill canvas-drawing-command-generator --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.