amw-svg-creator

Generate polished technical SVG icons, logos, patterns, and animations via a render-verify-deliver loop.

Updated Jul 8, 2026
One-click install
npx skills add https://github.com/Emasoft/ai-maestro-webdesign --skill amw-svg-creator-emasoft
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: amw-svg-creator
Source: https://github.com/Emasoft/ai-maestro-webdesign/tree/main/skills/amw-svg-creator
Command: npx skills add https://github.com/Emasoft/ai-maestro-webdesign --skill amw-svg-creator-emasoft

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires cairosvg, and includes references (resource) components.

What problem does it solve? Hand-written SVG often ships unverified, producing misaligned icons, banded gradients, broken animations, and AI-slop illustrations. This Skill enforces a mandatory write-render-view-fix-finish loop so every SVG artifact is visually verified before delivery, while hard-gating out character, mascot, and scene illustration requests. ## Core Features & Use Cases - Gated technical SVG scope: Produces 24x24 stroke icons, geometric logos and badges, SVG patterns, data-visualization primitives, and CSS/SMIL animations; refuses character, scene, mascot, and avatar requests per the ai-slop-avoid policy. - Mandatory render-verify loop: Uses bin/amw-svg-render.py to rasterize drafts to PNG for visual assessment; the finish step refuses to deliver if render was never called. - Technique reference library: Ships a catalog of TECH-*.md references covering multi-stop gradients, colored shadows, drop-shadow filters, feTurbulence noise, glassmorphism, five-zone lighting, and reduced-motion accessibility. - Use Case: Ask for a 24x24 stroke icon set for a dashboard; the Skill writes grid-aligned SVG with currentColor strokes, renders each to PNG, checks legibility at small size, fixes issues, and delivers optimized final files. ## Quick Start Ask the AI to create a polished SVG icon or logo for your subject and let it run the render-verify loop until the preview passes review.

Frequently Asked Questions about amw-svg-creator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a 24x24 SVG icon with correct stroke settings?▼

Use a 24x24 viewBox with 2px stroke, fill="none", stroke="currentColor", round linecaps and linejoins, and keep coordinates within the 2-22 range. The currentColor stroke lets the icon inherit parent text color for light and dark themes.

Can this skill generate SVG characters, mascots, or scene illustrations?▼

No. The skill is gated and refuses all character, mascot, avatar, scene, and draw-me-X illustration requests per the ai-slop-avoid policy item 3. It offers a placeholder box or routes you to real stock or commissioned assets instead.

Why does the SVG finish step refuse to deliver my file?▼

The finish command aborts if render was never called, because visual verification is mandatory. Run bin/amw-svg-render.py render on your draft, view the generated PNG, fix any issues, then call finish.

What dependencies are required to render SVG to PNG?▼

You need python3 and the cairosvg package, installed manually via uv pip install cairosvg or pip install --user cairosvg. The render script does not auto-install it, and no npm or MCP dependencies are required.

How do I animate SVG so it works inside an img tag?▼

Use SMIL elements like animate, animateTransform, and animateMotion, which work in img-embedded SVG where CSS animations cannot run. Always set transform-box: fill-box on animated elements and ship a prefers-reduced-motion fallback.

Why do my SVG drop shadows look dirty or banded?▼

Shadows look muddy when the filter lacks color-interpolation-filters="linearRGB", and gradients band when they use only two stops. Add the linearRGB attribute to the filter and rewrite gradients with 4-8 stops using small hue shifts.