SVG Artist

Generate SVG images using text LLM instead of image generation APIs. Use when user wants to create illustrations, icons, cartoons, diagrams, or any visual co...

Security Scan

The skill's functionality matches its description, but there are a few coherence and safety issues (undeclared runtime dependencies and shell execution patterns that can lead to command injection) that warrant caution.

Purpose & Capability

The name/description (generate SVG via LLM) aligns with the included instructions and helper script. However the skill fails to declare necessary runtime binaries: SKILL.md and the script assume Node.js plus an SVG-to-PNG converter (rsvg-convert or ImageMagick 'convert'), but the registry metadata lists no required binaries. This is a modest incoherence (missing dependency declaration) but consistent with the stated purpose.

Instruction Scope

Instructions tell the agent to generate SVG, write files under /tmp, run Node commands and call rsvg-convert/convert. That's within the purpose, but the helper script uses child_process.execSync with interpolated file paths (execSync(`rsvg-convert "${svgPath}" -o "${output}"`)). Combined with the SKILL.md examples that use node -e inline, this creates a practical risk: unvalidated user/LLM-controlled strings could lead to shell/command injection or accidental execution. The SKILL.md also instructs the agent to send file paths (<qqimg>/tmp/image.png), which is platform-specific but not inherently malicious.

Install Mechanism

There is no install spec (instruction-only plus a small helper script). This minimizes supply-chain risk (no remote downloads), but the lack of declared runtime requirements (Node, rsvg-convert/ImageMagick) is an omission. The script writes files to disk and executes local conversion binaries when run.

Credentials

The skill does not request environment variables, credentials, or configuration paths. The script does not access network endpoints or secret-bearing env vars. There is no evidence of disproportionate credential/secret access.

Persistence & Privilege

always is false and the skill is user-invocable. It does not modify other skills or system-wide configs and does not request permanent presence or elevated privileges.

What to consider before installing

This skill appears to do what it says (have the LLM produce SVG and convert it to PNG), but take these precautions before installing or using it: - Runtime requirements: Ensure Node.js and an SVG-to-PNG tool (rsvg-convert or ImageMagick's convert) are available — the skill does not declare these but its code and docs require them. - Review the script: The helper uses execSync with string-interpolated commands. If the agent, user, or LLM can control filenames or injected content, that could be exploited (command injection). If you plan to run this in a multi-user or untrusted-input context, request the maintainer to sanitize inputs and use safer APIs (child_process.execFile/spawn with arg arrays, or avoid shell interpolation). - File handling: The script writes to /tmp and creates .svg/.png files. Confirm that this behavior is acceptable in your environment and that sensitive data won’t be written there. - If you are the developer or operator: add required-binaries to metadata (node, rsvg-convert/convert), validate/sanitize filenames, avoid node -e with untrusted content, and prefer safe temporary-file APIs. Given these issues the skill is not evidently malicious, but the missing dependency declarations and the shell-exec patterns make it worth extra caution (hence 'suspicious'). If the author provides updated metadata and safer exec usage, this could be re-classified as benign.

Generate images by writing SVG code with the text model. No image generation API needed.

How It Works

1. User describes the image → "画一只可爱的小猫" / "create a cartoon cat"
2. LLM writes SVG code → Calculates coordinates, shapes, colors
3. Convert to PNG → Using rsvg-convert or convert

Quick Start

User: 给我画一只小狗
You: [Generate SVG code] → Send the PNG

SVG Drawing Guide

Canvas Setup

Default size: 400x400 pixels. Origin (0,0) is top-left.

<svg width='400' height='400' xmlns='http://www.w3.org/2000/svg'>
  <!-- Background -->
  <rect width='400' height='400' fill='#87CEEB'/>
  <!-- Your shapes here -->
</svg>

Basic Shapes

Circle

<circle cx='200' cy='200' r='50' fill='#FF6B6B' stroke='#333' stroke-width='2'/>

Ellipse (great for bodies, heads)

<ellipse cx='200' cy='200' rx='80' ry='50' fill='#D2691E' stroke='#8B4513' stroke-width='3'/>

Rectangle (legs, buildings)

<rect x='100' y='300' width='50' height='80' rx='10' fill='#666'/>

Polygon (ears, stars)

<polygon points='150,50 130,100 170,100' fill='#8B4513'/>

Path (curves, tails, mouths)

<!-- Arc -->
<path d='M 100 200 A 50 50 0 0 1 200 200' stroke='#333' stroke-width='3' fill='none'/>
<!-- Bezier curve -->
<path d='M 100 200 Q 150 150 200 200' stroke='#333' stroke-width='3' fill='none'/>

Proportional Design Tips

Use percentages of canvas size (400px):

• Head: rx='70' ry='60' (about 15-20% of width)
• Body: rx='100' ry='70' (about 25% of width)
• Eyes: r='15' (about 4% of width)

Position using fractions:

• Center X: 200 (50%)
• Head Y: 140 (35%)
• Body Y: 250 (62%)

Color Palette

Warm colors: #D2691E (chocolate), #FF6B6B (coral), #FFB347 (orange) Cool colors: #87CEEB (sky blue), #98FB98 (pale green), #DDA0DD (plum) Neutrals: #8B4513 (saddle brown), #808080 (gray), #F5F5DC (beige)

Common Patterns

Eyes (cute style)

<!-- Eye white -->
<ellipse cx='180' cy='130' rx='15' ry='15' fill='white' stroke='black' stroke-width='2'/>
<!-- Pupil -->
<ellipse cx='183' cy='132' rx='7' ry='7' fill='black'/>
<!-- Highlight -->
<ellipse cx='186' cy='130' rx='3' ry='3' fill='white'/>

Blush/cheeks

<ellipse cx='150' cy='160' rx='15' ry='10' fill='#FFB6C1' opacity='0.6'/>

Smile

<path d='M 180 170 A 25 25 0 0 0 220 170' stroke='#8B4513' stroke-width='3' fill='none'/>

Tongue

<ellipse cx='200' cy='190' rx='10' ry='15' fill='#FF69B4'/>

Step-by-Step Workflow

When user asks for an image:

Step 1: Understand the Subject

• What animal/object? → dog, cat, house, car, etc.
• What style? → cute, realistic, minimalist, cartoon
• What pose? → sitting, standing, happy, sad

Step 2: Plan the Composition

Head position: cy = 35% (140)
Body position: cy = 62% (250)
Legs: cy = 78% (310)
Background: soft gradient or solid color

Step 3: Write SVG Code

Use Node.js inline to generate:

node -e "
const fs = require('fs');
const svg = \`<svg>...</svg>\`;
fs.writeFileSync('/tmp/image.svg', svg);
"

Step 4: Convert to PNG

rsvg-convert /tmp/image.svg -o /tmp/image.png
# or: convert /tmp/image.svg /tmp/image.png

Step 5: Send the Image

<qqimg>/tmp/image.png</qqimg>

Example: Drawing a Cat

<svg width='400' height='400' xmlns='http://www.w3.org/2000/svg'>
  <rect width='400' height='400' fill='#E6E6FA'/>

  <!-- Body -->
  <ellipse cx='200' cy='250' rx='100' ry='70' fill='#FFB347' stroke='#FF8C00' stroke-width='3'/>

  <!-- Head -->
  <ellipse cx='200' cy='140' rx='70' ry='60' fill='#FFB347' stroke='#FF8C00' stroke-width='3'/>

  <!-- Ears -->
  <polygon points='130,110 110,50 160,90' fill='#FF8C00'/>
  <polygon points='270,110 290,50 240,90' fill='#FF8C00'/>

  <!-- Eyes -->
  <ellipse cx='170' cy='130' rx='15' ry='20' fill='#90EE90' stroke='black' stroke-width='2'/>
  <ellipse cx='230' cy='130' rx='15' ry='20' fill='#90EE90' stroke='black' stroke-width='2'/>

  <!-- Pupils (vertical slits) -->
  <ellipse cx='170' cy='130' rx='4' ry='12' fill='black'/>
  <ellipse cx='230' cy='130' rx='4' ry='12' fill='black'/>

  <!-- Nose -->
  <ellipse cx='200' cy='160' rx='8' ry='5' fill='#FF69B4'/>

  <!-- Whiskers -->
  <line x1='120' y1='155' x2='165' y2='160' stroke='#666' stroke-width='1.5'/>
  <line x1='120' y1='165' x2='165' y2='165' stroke='#666' stroke-width='1.5'/>
  <line x1='235' y1='160' x2='280' y2='155' stroke='#666' stroke-width='1.5'/>
  <line x1='235' y1='165' x2='280' y2='165' stroke='#666' stroke-width='1.5'/>

  <!-- Mouth -->
  <path d='M 190 170 Q 200 180 210 170' stroke='#FF8C00' stroke-width='2' fill='none'/>

  <!-- Legs -->
  <ellipse cx='150' cy='310' rx='20' ry='30' fill='#FFB347' stroke='#FF8C00' stroke-width='2'/>
  <ellipse cx='250' cy='310' rx='20' ry='30' fill='#FFB347' stroke='#FF8C00' stroke-width='2'/>

  <!-- Tail -->
  <path d='M 300 250 Q 340 200 320 150' stroke='#FFB347' stroke-width='20' fill='none' stroke-linecap='round'/>
</svg>

Script: generate_svg.js

Use the helper script for common subjects:

node scripts/generate_svg.js "cute puppy with big eyes" /tmp/puppy.png

The script provides templates and the LLM fills in details.

Limitations

• Best for: cartoons, icons, simple illustrations, stylized art
• Not ideal for: photorealistic images, complex scenes, detailed textures
• Works well with: animals, characters, objects, simple backgrounds

Tips for Better Results

1. Start simple - Basic shapes first, add details after
2. Use layers - Background → body → head → features → highlights
3. Add character - Big eyes, blush, expressive features
4. Keep proportions - Cute style = big head, small body
5. Test incrementally - Generate, check, adjust