TastefulKit 2 views · 24h
← AI skills

SVG Creator — Render and Refine

Builds SVG interface illustrations, patterns and visual assets through a render-to-PNG, inspect, correct and deliver loop, with recipes for gradients, lighting and animation.

svgillustrationvisual-assetsmotion
View skill source ↗ Repository ↗

39 GitHub stars (repository-wide; checked Oct 29, 2026)

skills.sh installs: not checked

When to use it

Use for empty-state illustrations, patterned UI backgrounds or layered vector scenes rather than logo-selection interviews. Requires Python 3.8+ and CairoSVG or Chromium; upstream says rendering dependencies may be installed automatically on first run, so review them before use. Hard-coded Claude filesystem paths and view/present_files tools need adaptation outside that environment. Rendering is not proof of browser animation, accessibility or output security. Lighting and gradient rules are opinionated defaults. Not installed, executed or runtime-tested during discovery. GitHub stars are repository-wide, not a rating of this skill.

Compatible agents

Claude.aiClaude CodeCodex CLICursorWindsurfClineRoo Code

Installation

Download or clone https://github.com/upbrew-tech/svg-creator-skill. As documented upstream, copy the complete repository folder to ~/.claude/skills/svg-creator or a project .claude/skills/svg-creator directory; other agents should use their documented skill directory. Keep SKILL.md, scripts/ and references/ together. Requires Python 3.8+ and CairoSVG or Chromium. Do not use the README’s unconfigured YOUR_USERNAME marketplace placeholder.

Review the source and instructions before installing in your agent.

License

Apache-2.0

Last checked Oct 27, 2026.

Pair this skill with a visual reference

A skill guides how your agent works; a design reference shows the direction you want. Choose an example for a specific job, such as the headline hierarchy or form layout, and keep your project's existing design rules explicit.

Start with design references you can inspect, then use our guide to briefing an AI coding agent to turn observations into requirements. If you need implementation components, compare UI libraries for your stack.

Reviewing motion? Use the worked animated-list review brief to separate selection from activation and specify interruption and reduced-motion checks. Bring your component code and expected states to the review; the example is not a certification of this skill.

These pages are public. Browsing a skill does not install it, and TastefulKit's design-reference MCP tools do not search the AI-skill directory.