SVG Creator

Create high-quality SVG graphics including icons, illustrations, logos, diagrams, infographics, patterns, animations, and abstract art. Use this skill whenever the user asks to create, draw, design, or generate any SVG image, vector graphic, icon, logo, badge, diagram, flowchart, infographic, pattern, or animated graphic. Also trigger when the user says "draw me", "make an SVG", "create a graphic", "design an icon", "vector illustration", or requests any visual output that would be best served as an SVG file. This skill covers both simple single-element graphics and complex multi-layered compo

39 stars 1 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add upbrew-tech/svg-creator-skill --skill svg-creator

Manual install

git clone --depth 1 https://github.com/upbrew-tech/svg-creator-skill.git /tmp/svg-creator-skill
mkdir -p ~/.claude/skills
cp -r /tmp/svg-creator-skill/. ~/.claude/skills/svg-creator

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# SVG Creator Skill

## THE MANDATORY WORKFLOW

Every SVG goes through the feedback loop script. No exceptions. You cannot deliver an SVG you haven't rendered and visually verified.

### The Loop

```
WRITE SVG → RENDER → VIEW PNG → ASSESS → FIX → RENDER → VIEW → ... → DELIVER
```

### Step-by-Step

**1. Write SVG to a working file:**
```bash
cat > /home/claude/draft.svg << 'SVGEOF'
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
  ...
</svg>
SVGEOF
```

**2. Render it (MANDATORY — the script tracks this):**
```bash
python3 /path/to/skill/scripts/svg_loop.py render /home/claude/draft.svg
```
This creates `/home/claude/svg_preview.png`.

**3. View the rendered PNG (MANDATORY — you must actually look):**
Use the `view` tool on `/home/claude/svg_preview.png`. Study what you see.

**4. Assess the result. Ask yourself:**
- Are elements positioned correctly?
- Any gaps, overlaps, or misalignment?
- Do proportions look right?
- Are colors and gradients working?
- For characters: are body parts connected naturally?

**5. If anything is wrong, fix the SVG and go back to step 2.**
Edit `/home/claude/draft.svg` with str_replace or rewrite, then render and view again.

**6. When it looks good, deliver:**
```bash
python3 /path/to/skill/scripts/svg_loop.py finish /home/claude/draft.svg output-name.svg
```
This copies the SVG + preview PNG to `/mnt/user-data/outputs/`. The script REFUSES to deliver if you never rendered.

Read the full skill on GitHub

Details

Skill name: svg-creator
Repository: upbrew-tech/svg-creator-skill
License: Apache-2.0
Repo updated: 29 July 2026

FAQ

What does the SVG Creator skill do?

How do I install the SVG Creator skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add upbrew-tech/svg-creator-skill --skill svg-creator. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is SVG Creator popular?

It lives in upbrew-tech/svg-creator-skill, which has 39 GitHub stars and 1 forks.

Related skills

Flow Preview

tanishqkancharla/flow-preview

Generates interactive Maui user-flow canvases using a bundled CLI, with linked states and persistent review checkboxes. Use when previewing, comparing, or reviewing a user journey across multiple UI states.

Frontend & Design

Behavioral Design

rastian/behavioral-design-skills

Applies behavioral psychology and behavioral economics to product and UX design. Use when a designer, PM, researcher, or design manager wants to diagnose why users aren't completing a flow, adopting a feature, or changing behavior; design nudges or behavior-change interventions; reduce friction or cognitive load; run a behavioral design workshop or sprint; audit a design for psychological effectiveness; or apply principles like loss aversion, social proof, choice architecture, habit formation, or implementation intentions. Also triggers for: onboarding drop-off, feature adoption, engagement de

Frontend & Design

Cardstock Diorama Myth Animation

sadekxD/cardstock-diorama-myth

Produce a complete narrated MYTHIC SHORT FILM end-to-end on Unsora MCP in the layered cut-paper diorama style — stacked matte cardstock worlds, a strict three-colour palette, exposure that swings, paper wipes hiding every seam, landing on a face. Animation-movie storytelling, not an explainer: gods, monsters, heroes, folklore, origin myths and transformations, told in ten-second story beats with a mythic narrator, native paper foley, and one assembled MP4. Use whenever the user wants a myth, legend, fable, folktale or fairy-tale short, a cut-paper or papercraft animated story, "tell the story

Frontend & Design

Social Cards

DennisWei9898/social-cards-engine

品牌無關的 IG/Threads/X/FB 圖卡引擎——把任何主題（idea / 文章 / 教學）變成輪播圖卡 + 4 平台文案。HTML+CSS 模板 → Chrome headless 渲染 PNG。風格由 brand pack 決定（brands/），接哪個 pack 出哪個風格，引擎不綁死品牌。觸發詞：做圖卡、生 carousel、social card、IG 圖卡、Threads 卡片、貼文文案、教學圖卡、infographic、輪播圖、carousel post。

Frontend & Design

Wiggle

talknerdytome-labs/wiggle-claude-skill

Create animated logo files (Lottie JSON, GIF, MP4) from static logo images. This skill should be used when users provide a logo image (PNG/SVG/JPG) and request any kind of logo animation, motion graphics, animated logo effect, waveform animation, bouncing logo, rotating logo, pulsing logo, wiggling logo, or ask to "animate my logo" or "make my logo move". Outputs standalone animation files (not React/HTML artifacts). Generates Lottie JSON with automatic GIF/MP4 rendering, perfect loop validation, and professional motion design patterns.

Frontend & Design

Clone Team

Varalix-Digitech-Solutions/clone-team

Clone any website with a coordinated team of AI agents — a Manager (you), a Frontend Developer, a Backend Architect, and a Tester — that iteratively and autonomously build a pixel-perfect UI clone AND produce thorough architecture documentation of how the site works. Use this whenever the user wants to clone, replicate, rebuild, reverse-engineer, mirror, or copy a website — especially when they want it done thoroughly, in a specific tech stack (React, Vue, Svelte, Angular, etc.), behind a login, or with proper documentation. Triggers on "clone this site", "rebuild this app", "make a copy of <u

Frontend & DesignIn 1 list

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.