메뉴
When creating vector artwork, illustrations, or SVG graphics for creative expression - provides iterative drawing workflow with visual feedback using render-svg tool
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Use when writing new skills, creating skill directories, confused about skill creation, unsure about naming conventions, need help with activation descriptions, want to avoid common mistakes, skill not triggering when expected, wondering why skill didn't activate, debugging skill loading issues, understanding skill frontmatter format, checking YAML syntax for skills, confused about folder structure, need guidance on problem-focused descriptions, wondering about core vs personal skill naming with underscores
Watch and understand video files by converting them to viewable image storyboards for enjoyment, analysis, species identification, behavior tracking, and comprehension
| name | _svg-drawing |
| description | When creating vector artwork, illustrations, or SVG graphics for creative expression - provides iterative drawing workflow with visual feedback using render-svg tool |
Iterative workflow for creating vector artwork with visual feedback.
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.
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
# 1. Create initial SVG with basic shapes
# 2. Render immediately
render-svg design.svg
# 3. View with Read tool
# 4. Identify what needs adjustment
# 1. Edit SVG (adjust coordinates, colors, proportions)
# 2. Render again
render-svg design.svg
# 3. Compare with mental model
# 4. Repeat until satisfied
# 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
Build Progressively:
Coordinate Reference:
Layer Workflow:
Built by Sparkle Orange & Amy, November 2025 Simple tool, iterate based on real use 🎨✨