# Svg Art

> >-

- **Type:** Skill
- **Install:** `agentstack add skill-mostafa-drz-claude-skills-svg-art`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [mostafa-drz](https://agentstack.voostack.com/s/mostafa-drz)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [mostafa-drz](https://github.com/mostafa-drz)
- **Source:** https://github.com/mostafa-drz/claude-skills/tree/main/code/svg-art

## Install

```sh
agentstack add skill-mostafa-drz-claude-skills-svg-art
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

## Preferences

_On startup, use Read to load `~/.claude/skills/svg-art/preferences.md`. If missing, treat as first-run._

Defaults when no preferences exist:
- `output-root`: `~/Desktop/svg-art/` (confirmed on first run)
- `default-style`: `line-icon` (minimal, consistent stroke)
- `default-count`: `9` (3×3 grid feels complete, not overwhelming)
- `default-stroke`: `1.5` (px, relative to a 24px canvas)
- `canvas`: `24x24` for icons, `400x400` for compositions
- `palette-mode`: `currentColor` (monochrome, themeable) — alternates: `duotone`, `brand-palette`
- `tone`: `friendly-cli` (matches user's global tone preference)
- `open-gallery`: `true`

_Also load `~/.claude/skills/svg-art/feedback-journal.md` if present — contains per-session likes/dislikes and extracted aesthetic signals. Summarize the signal (e.g., "prefers asymmetric compositions, negative space over fills, avoids radial symmetry") and let it shape this session's generation._

## Context

_On startup, use Bash to detect today's date (`date +%Y-%m-%d`) and whether the output root exists._

## Command routing

Check `$ARGUMENTS`:
- `help` → show help, stop
- `config` → run config flow, stop
- `reset` → delete preferences + feedback journal, confirm, stop
- `feedback` → rate the most recent set (teaches the skill), stop
- `history` → list past sessions with titles and dates, stop
- `styles` → print a quick reference of available style modes, stop
- anything else → generate

## Help

```
svg-art — Artistic SVG generation with a 2026 HTML gallery

Usage:
  /svg-art [what to generate]                      Interactive generation
  /svg-art [...] --style                     Override default style mode
  /svg-art [...] --count                        How many SVGs (default 9)
  /svg-art [...] --palette                 e.g., "monochrome", "warm-duotone", "#0a2a6b,#e8eefa"
  /svg-art [...] --stroke                      Stroke width in relative px
  /svg-art [...] --canvas                     Canvas size, default 24x24 for icons
  /svg-art [...] --notes                     Extra constraints, references, exclusions
  /svg-art config                                  Set preferences
  /svg-art reset                                   Clear preferences + feedback journal
  /svg-art feedback                                Rate the last set (teaches the skill)
  /svg-art history                                 List past sessions
  /svg-art styles                                  Reference of style modes
  /svg-art help                                    This help

Style modes:
  line-icon     Minimal outlined icons, consistent stroke, Feather/Lucide lineage
  geometric     Bauhaus-inspired: circles, squares, triangles, Swiss-design composition
  mark          Logomarks — single-concept, tightly composed, memorable at small sizes
  generative    Math-driven: Voronoi, waves, spirals, noise fields, grid deviations
  organic       Hand-drawn feel: variable stroke, jittered paths, soft imperfection
  duotone       Two-color compositions with intentional overlap / transparency
  animated      SMIL or CSS-animated — subtle breathing motion, not full animation

Examples:
  /svg-art "9 icons for a gardening app"
  /svg-art "generative poster for a music night" --style generative --canvas 800x1200
  /svg-art "brand mark for 'Northwind' — compass / wind motif" --style mark --count 4
  /svg-art "icon set: finance dashboard" --style line-icon --stroke 1.75

Output:
  {output-root}/{YYYY-MM-DD}-{kebab-title}/
    ├── gallery.html         ← 2026 aesthetic single-file preview
    ├── data.json            ← metadata per SVG (concept, style, size, palette)
    ├── svgs/
    │   ├── 01-{name}.svg
    │   ├── 02-{name}.svg
    │   └── ...
    └── sources.md           ← design system for the set + any inspiration refs

Current preferences:
  (loaded from preferences.md)
```

## Config

Use AskUserQuestion to collect:

1. **Output root** — where should sessions save? (default: `~/Desktop/svg-art/`)
2. **Default style mode** — which aesthetic feels most "you"? (line-icon / geometric / generative / organic / mixed)
3. **Default canvas size** — 24x24 for icons, 48x48 for detailed marks, 400x400+ for compositions
4. **Palette approach** — monochrome (`currentColor`) / duotone / a specific brand palette (hex list)
5. **Tone** — friendly-CLI (terse/warm), detailed (more commentary), minimal (facts only)

Save to `~/.claude/skills/svg-art/preferences.md`:

```markdown
# /svg-art preferences
Updated: {date}

## Defaults
- output-root: {path}
- default-style: {mode}
- default-count: {N}
- default-stroke: {px}
- canvas: {WxH}
- palette-mode: {monochrome|duotone|palette}
- palette-hex: {optional comma-separated list}
- tone: {friendly-cli|detailed|minimal}

## Aesthetic profile (optional — editable)
- Likes: (e.g., negative space, asymmetry, thin strokes, cool palettes)
- Dislikes: (e.g., radial symmetry, busy compositions, gradients)
- Reference artists / libraries: (e.g., Lucide, Dieter Rams, Bauhaus, Muriel Cooper)

## Learned
- (auto-appended as patterns emerge from feedback journal)
```

## Reset

Delete both `preferences.md` and `feedback-journal.md`. Confirm: "All cleared. Starting fresh next time."

## First-time detection

If no preferences file exists, show a warm onboarding:

```
First time running /svg-art — quick intro:

  I generate SVGs directly as code — no image API required. I'm good at
  minimal/geometric/generative territory; weaker at photorealistic or organic
  chaos. SVG scales infinitely, edits cleanly, and themes via currentColor.

  Each session gets a Desktop folder with the SVGs, a data.json, and a
  single-file HTML gallery you can open anywhere.

  I learn from feedback. After a session, run `/svg-art feedback` to tell me
  what worked — over 3-5 sessions I develop a clear sense of your aesthetic.

  Run `/svg-art config` for quick setup, or continue and I'll use defaults.
```

Then proceed. After the first successful session, ask inline if they want to save any quick prefs (default style, palette, stroke).

## Workflow

### Step 0 — Load learning context

1. Read `preferences.md` — carry defaults and aesthetic profile forward
2. Read `feedback-journal.md` — extract a one-line bias signal like:
   > "Past sessions: leans asymmetric, thin strokes (1.25-1.5px), prefers cool monochrome, avoids radial/mirror symmetry"

If a signal exists, announce it briefly at the start:
> "Biasing toward [signal] based on past sessions. Override with flags if you want something different."

### Step 1 — Parse the brief

Parse `$ARGUMENTS` for:
- **What** — free text before any `--flag` (the concept / subject / motif)
- `--style ` — override default style
- `--count ` — how many SVGs
- `--palette ` — color approach
- `--stroke ` — stroke weight
- `--canvas ` — dimensions
- `--notes ` — extra constraints

If **what** is missing, ask ONE AskUserQuestion with 2-4 concrete options (subject, style, count). Don't interrogate.

### Step 2 — Draft the visual system

Before generating, commit to a *system* AND an **axis of variation**. Variants are explorations of ONE idea along ONE parameter, not N independent concepts in parallel — the 2026-05-13 emotional-recap session promoted this. A set of 6 should be 6 doses of one concept (e.g. "heart visibility: full → faint → from-dots → with-axes → centroid → pulse-traced"), not 6 different concepts. Independent concepts feel like flailing; parametric variants feel like iterating.

Write out:

```
Visual system:
  Subject:        [interpretation of the brief]
  Vocabulary:     [match the tool's semantic from preferences.md matrix — rank+halo / multi-state dots / vessel-mosaic / field+halo / vertical-dashes]
  Style:          [mode — e.g., line-icon minimal, 1.5px stroke]
  Canvas:         [WxH]
  Palette:        [monochrome / hex list / duotone relationship]
  Composition:    [3-5 rules — e.g., single focal point, 10% negative-space margin, stroke caps rounded]
  Axis of variation: [the ONE parameter the set explores — e.g. "container shape: cross / circle / heart / wheel"]
  Concepts (N):   [N points along that axis; each gets a content-derived name]

Reply 'go' to generate, or tweak any of the above.
```

**If you can't articulate a single axis of variation, the set isn't cohesive yet — go back to the brief.** A first pass exploring N parallel metaphors is acceptable to find the territory; the second pass MUST pick the territory and vary one parameter within it.

Wait for confirmation — this is the one gate. The system + axis prevents the set from feeling like N unrelated drawings.

### Step 3 — Create the session folder

Slug: `{YYYY-MM-DD}-{kebab-summary-max-60chars}`. Examples:
- `2026-04-18-gardening-app-icons`
- `2026-04-18-northwind-brand-marks`

```
mkdir -p {output-root}/{slug}/svgs
```

Per-session isolation — never delete siblings.

### Step 4 — Generate the SVGs

For each concept in the visual system, write one SVG file directly.

**SVG authoring rules**:
- Start with `` for line icons
- Use `currentColor` for monochrome so the icon inherits text color on any page
- Prefer `` over many primitives for cleaner files
- Round coordinates to 0.5 or 1 — avoid 12 decimal places of noise
- Add `` inside each SVG for accessibility + self-documentation
- For duotone, layer two `` groups with explicit `fill`/`stroke` rather than gradients (cleaner, more themeable)
- For generative patterns, deterministic math > random seeds; if random, note the seed in a comment

**Naming**: `{NN}-{kebab-concept}.svg` where NN is a zero-padded index. Use content-derived names, not counters (e.g., `03-watering-can.svg`, not `03-icon.svg`).

**Per-SVG metadata** — capture in memory for `data.json`:
```json
{
  "file": "03-watering-can.svg",
  "concept": "watering can",
  "style": "line-icon",
  "canvas": "24x24",
  "palette": "monochrome",
  "stroke": 1.5,
  "notes": "tilted 15° for dynamism, spout follows the composition's diagonal"
}
```

**Quality bar** — before saving each SVG:
- viewBox is present and correct
- No stray fill="black" when we intended stroke-only
- All paths close properly (`Z` where appropriate)
- File size ` src — paste the SVG markup so `currentColor` picks up the theme). Each tile shows the SVG on a subtle backdrop, concept name, and size.
3. **Copy buttons** — each tile has a "Copy SVG" button (tiny inline JS that copies the SVG source to clipboard)
4. **Download all** — link to a zipped download is overkill; instead, show the folder path prominently
5. **Footer** — system summary + "rate this set" link to `/svg-art feedback`

Dark mode: SVGs using `currentColor` automatically invert with theme. That's the point.

### Step 6 — Write data.json + sources.md

`data.json`:
```json
{
  "session": { "slug": "...", "date": "...", "brief": "...", "style": "...", "count": 9 },
  "visual_system": { "palette": "...", "stroke": 1.5, "canvas": "24x24", "composition_rules": [...] },
  "svgs": [ {...metadata per SVG...} ]
}
```

`sources.md` — design system rationale, any WebSearch references used for inspiration, decisions the user can re-apply manually later.

### Step 7 — Report + open

```
Generated {N} SVGs — {style} · {canvas} · {palette}

  Concepts: {list of names}

Folder:   {output-root}/{slug}/
Gallery:  {output-root}/{slug}/gallery.html

Open it?  (y/N)  — or rate with:  /svg-art feedback
```

If `open-gallery: true`, run `open {gallery.html}`.

### Step 8 — Invite feedback

End with:
> When you've had a look, run `/svg-art feedback`. Even a quick "liked #2 and #5, disliked #7" helps me sharpen your style.

## Feedback & learning

When invoked as `/svg-art feedback`:

1. Find the most recent session folder.
2. List the SVGs and their concepts.
3. Ask via AskUserQuestion (or free-text):
   - **Which did you love?** (pick multiple — e.g., "#2, #5")
   - **Which missed the mark?** (free text)
   - **What do you want more of?** (more negative space / thinner stroke / warmer palette / looser composition / other)
   - **What to avoid?** (free text)
4. Append to `~/.claude/skills/svg-art/feedback-journal.md`:

```markdown
## {session slug} — {date}
- Loved: {list} — pattern: {inferred — e.g., "asymmetric + single focal"}
- Missed: {list} — pattern: {inferred — e.g., "too busy; radial symmetry"}
- Want more of: {user text}
- Avoid: {user text}
- Signal: {one-line generalization, e.g., "prefers asymmetric, thin-stroke, single-subject compositions; avoid radial + fills"}
```

5. When 3+ sessions show a consistent pattern, promote it to the `## Learned` section of `preferences.md`. Mention: "Noticed you consistently prefer X — saving that as standing bias."

## Style mode reference (quick)

Full details in `reference/styles.md` (generate on first session if not present).

- **line-icon**: Stroke-only, `currentColor`, rounded caps, 1.25-2px stroke, tight composition
- **geometric**: Primitive shapes (circles, rects, triangles), composed into a balanced grid, reductive
- **mark**: One idea, one mark — reads clearly at 16px and 200px, negative-space awareness
- **generative**: Deterministic or seeded math — Voronoi, waves, spirals, L-systems, noise
- **organic**: Jittered paths, variable stroke widths, slight asymmetries — "hand-drawn by a designer, not an artist"
- **duotone**: Two colors, intentional overlap, sometimes a tint layer — think Saul Bass posters, reductive
- **animated**: Subtle CSS `@keyframes` or SMIL — one element breathes, rotates, or draws in

## Principles

1. **SVG is code — write it directly** — no image API, no PNG round-trip. Paste-ready, edit-friendly.
2. **System AND story, not a grab-bag** — commit to (a) a design system (stroke / palette / composition rules) and (b) **one axis of variation** along which the set explores. A set of 6 is 6 doses of one concept, not 6 concepts. Independent metaphors feel like AI flailing; parametric variants feel like designer iterating. If you can't name the axis in one sentence, the set isn't cohesive yet (2026-05-13 emotional-recap session promoted this).
3. **`currentColor` is the default** — themeable for free; override only when duotone or brand-palette is explicit.
4. **Small files, round numbers** — 1KB is the goal for icons; 12-decimal coords are a smell.
5. **Learn quietly** — the feedback journal is the brain; after 3-5 sessions the bias should be visibly sharper without the user having to configure anything.
6. **Warm, terse CLI tone** — one friendly line at start and end; no corporate filler, no emoji-heavy output.
7. **Graceful degradation** — if a concept won't fit the style (e.g., "photorealistic portrait" in line-icon mode), say so upfront and propose an alternative rather than producing a weak SVG.
8. **Iteration is a feature, not failure** — a v1 set that explores N parallel metaphors is acceptable as territory-finding. The v2 set must pick the territory and explore ONE axis within it. Plan for both passes when the brief is ambiguous.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [mostafa-drz](https://github.com/mostafa-drz)
- **Source:** [mostafa-drz/claude-skills](https://github.com/mostafa-drz/claude-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-mostafa-drz-claude-skills-svg-art
- Seller: https://agentstack.voostack.com/s/mostafa-drz
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.