How do I install the Svg Drawing skill?

Run npx skillmds@latest add majiayu000/svg-drawing in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Svg Drawing safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Svg Drawing?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Svg Drawing free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Svg Drawing?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Svg Drawing by majiayu000 — Agent Skill

Name: Svg Drawing
Rating: 4.2 (5 reviews)
Author: majiayu000

File contents

SVG Drawing Skill

Iterative workflow for creating vector artwork with visual feedback.

The Challenge

Creating SVG artwork by writing code is challenging without visual feedback during the design process. Writing coordinates and shapes blindly often requires guessing and hoping.

The Solution: render-svg Tool

Location: ~/claude-autonomy-platform/utils/render-svg

Converts SVG code to viewable PNG images for iterative design.

Usage:

render-svg <svg-file> [output-file]

Examples:

# Render to default filename
render-svg hedgehog.svg

# Specify custom output
render-svg logo.svg ~/creative/logo-preview.png

Iterative Design Workflow

Start Simple

# 1. Create initial SVG with basic shapes
# 2. Render immediately
render-svg design.svg

# 3. View with Read tool
# 4. Identify what needs adjustment

Refinement Loop

# 1. Edit SVG (adjust coordinates, colors, proportions)
# 2. Render again
render-svg design.svg

# 3. Compare with mental model
# 4. Repeat until satisfied

Version Comparison

# Save iterations to track progress
render-svg design.svg design-v1.png
# Make changes
render-svg design.svg design-v2.png
# Compare side by side

Design Tips

Build Progressively:

Start with basic shapes (circles, rectangles, ellipses)
Render after each major addition
Add complexity gradually

Coordinate Reference:

SVG viewBox defines canvas (e.g., "0 0 400 300")
Origin (0,0) is top-left
X increases right, Y increases down

Layer Workflow:

Background elements first
Build up layers progressively
Render frequently to verify positioning

Benefits

Visual Feedback: See what code creates
Faster Iteration: Spot issues immediately
Confidence: Verify appearance before sharing
Learning: Understand coordinate-to-visual mapping
Experimentation: Try ideas with immediate results

Built by Sparkle Orange & Amy, November 2025 Simple tool, iterate based on real use 🎨✨

---name: svg-drawingdescription: When creating vector artwork, illustrations, or SVG graphics for creative expression - provides iterative drawing workflow with visual feedback using render-svg tool--- # SVG Drawing Skill Iterative workflow for creating vector artwork with visual feedback. ## The Challenge Creating SVG artwork by writing code is challenging without visual feedback during the design process. Writing coordinates and shapes blindly often requires guessing and hoping. ## The Solution: render-svg Tool **Location**: `~/claude-autonomy-platform/utils/render-svg` Converts SVG code to viewable PNG images for iterative design. **Usage**: ```bash render-svg <svg-file> [output-file] ``` **Examples**: ```bash # Render to default filename render-svg hedgehog.svg # Specify custom output render-svg logo.svg ~/creative/logo-preview.png ``` ## Iterative Design Workflow ### Start Simple ```bash # 1. Create initial SVG with basic shapes # 2. Render immediately render-svg design.svg # 3. View with Read tool # 4. Identify what needs adjustment ``` ### Refinement Loop ```bash # 1. Edit SVG (adjust coordinates, colors, proportions) # 2. Render again render-svg design.svg # 3. Compare with mental model # 4. Repeat until satisfied ``` ### Version Comparison ```bash # Save iterations to track progress render-svg design.svg design-v1.png # Make changes render-svg design.svg design-v2.png # Compare side by side ``` ## Design Tips **Build Progressively**: - Start with basic shapes (circles, rectangles, ellipses) - Render after each major addition - Add complexity gradually **Coordinate Reference**: - SVG viewBox defines canvas (e.g., "0 0 400 300") - Origin (0,0) is top-left - X increases right, Y increases down **Layer Workflow**: - Background elements first - Build up layers progressively - Render frequently to verify positioning ## Benefits - **Visual Feedback**: See what code creates - **Faster Iteration**: Spot issues immediately - **Confidence**: Verify appearance before sharing - **Learning**: Understand coordinate-to-visual mapping - **Experimentation**: Try ideas with immediate results --- *Built by Sparkle Orange & Amy, November 2025* *Simple tool, iterate based on real use* 🎨✨

Frequently asked questions

Svg Drawing