arlinamid

Draw Better SVG — Development skill for Claude Code

Development community

Agent skill for planning, drawing, animating, render-checking, and repairing editable SVG graphics - with an interactive review loop.

How to install Draw Better SVG

This entry records only its repository, not the path inside it, so there is no exact command to give. Open arlinamid/draw-better-svg and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Draw Better SVG does

Agent skill for planning, drawing, animating, render-checking, and repairing editable SVG graphics - with an interactive review loop. Installs with npx skills and as a Claude Code, Codex, and Cursor plugin.

Alternatives in Development

Contributors — Thank you to everyone who has contributed to making planning-with-files better 16.8k ★
Portaljs Add Map — Render a GeoJSON dataset on an interactive Leaflet map in the Views section of a dataset's showcase 2.3k ★
Beautiful Feishu Whiteboard — 35 curated colour palette styles for building beautiful, editable Feishu / Lark (飞书) whiteboards 687 ★

README

Draw Better SVG

[![Version](https://img.shields.io/badge/version-1.2.1-blue?style=flat-square)](CHANGELOG.md) [![Install](https://img.shields.io/badge/npx-skills%20add-black?style=flat-square)](https://github.com/vercel-labs/skills) [![License](https://img.shields.io/badge/license-MIT-lightgrey?style=flat-square)](LICENSE)

An agent skill for planning, drawing, render-checking, animating, and repairing editable SVG graphics: icons, logos, illustrations, diagrams, charts, patterns, maps, and logo motion.

npx skills add arlinamid/draw-better-svg

An animated SVG made with the skill: a boy riding a bicycle

The skill treats valid XML, correct geometry, and visual quality as three separate requirements. It classifies the task, draws in passes (composition → structure → geometry → style), renders the result at the sizes it will be shown at, and fixes the most visible defect before adding detail. Before delivery it builds a review page for the user: a construction reveal, the motion timeline, the artwork at its target sizes on transparent, light, and dark backgrounds, and the structural, geometry, and contrast checks. The user pins comments and draws on it, and Send hands the round to the agent through a small local server — element names, coordinates, animation frame times, and annotated images included.

Examples


A boy riding his bicycle	Animated character: IK limbs, one 16 s clock, character-motion principles, and four review rounds with the user shown next to their fixes
Orbit	Logo reveal: artifact-free draw-on, overshoot, wipe, a pixel-exact end state, and a dark-background fix
Gallery	Icon, boolean mark, illustration, sketch, chart, diagram, pressure ink, and pattern from the built-in study set