# Modular Svg Illustration

> >-

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

## Install

```sh
agentstack add skill-lulu0119-skills-modular-svg-illustration
```

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

## About

# Modular SVG illustration

Reusable style — pale fills, hairline strokes, isometric 2.5D, **modular parts assembled into scenes**. Not tied to one subject.

Style details below. Alignment loop (mockup → approve → implement): [workflow.md](workflow.md). Composition + code excerpts: [reference.md](reference.md).

## Style definition

| Trait | Rule |
|-------|------|
| Medium | SVG vector illustration (not raster, not 3D render) |
| Line weight | ~0.45–0.5; `vector-effect: non-scaling-stroke` on scaled scenes (`iso-scene`) |
| Color | Semantic tokens (`--color-primary`, `--color-card`, `color-mix`) — avoid ad-hoc hex in art |
| Projection | `isoProject(x,y,z) → [(x-z)*0.866, (x+z)*0.5 - y]` |
| 2.5D forms | Circles become **ellipses** via per-face `matrix()` (top / left / right planes) |
| Composition | Atoms → assemblies → scene; **depth-sorted** layers for occlusion |
| Motion (optional) | CSS keyframes (`iso-led-pulse`, `iso-fan-spin`, `iso-cable-flow`); respect `prefers-reduced-motion` |
| Highlights (optional) | Soft flow along paths — gentle, not glowing dots |

## Reference proportions

Use as rulers, not as the only valid topics.

| Example | Viewport | What to match |
|---------|----------|---------------|
| Spatial isometric scene (nodes + links) | 640×200 | Rack solids, ground pads, cable lanes, depth sort, fit transform |
| Stacked front-panel carousel | 421×200 | Framed face zones (mesh, vents, bays, controls), hairline inset panels |

Code excerpts + composition rules: [reference.md](reference.md)

## Workflow: align first, draw last

**Do not implement until the user approves a mockup.**

```
0. Explore host   → sibling illustration, real viewport, existing CSS/motion hooks
1. Clarify        → 2–3 options with trade-offs; get direction approval
2. Mockup loop    → versioned HTML; screenshot self-verify before showing
3. User approves  → or user edits mockup; read their version before coding
4. Modules        → primitives → assemblies → scene (see phases below)
5. Integrate      → *-parts + demo component + CSS; dev-server screenshot vs mockup
```

Detail: [workflow.md](workflow.md)

### Phase A — Primitives

One concern per mockup file (`module-vent-v1.html`, `module-indicator-v1.html`, …):

- Stroke weight and corner radius
- Token fills vs strokes
- Ellipse distortion on each face plane
- Optional pulse / spin / flow classes

**Do not advance until each primitive is approved.**

### Phase B — Assemblies

Reuse approved primitives only — stacked slices, rotated blocks (`facing L/R`), paired accessories, framed front faces. Show 2–3 orientation variants before scene work.

If a detailed front-panel module exists in the host app, **simplify it** into a stackable iso slice — do not invent a new vocabulary.

### Phase C — Scene

Placements, ground connectors, pads/carpets, depth sort, bake viewBox fit. Follow [composition rules](reference.md#composition-rules).

### Phase D — Integration

Port `*-parts` (geometry) + scene wrapper into the target app; register CSS; gate motion; run **deslop** before done.

## Verification

1. Mockup approved at the correct host viewport size  
2. Dev-server screenshot matches approved mockup (layout, cables, occlusion)  
3. Cables: sensible endpoints, distinct lanes, no meaningless crossings  
4. `prefers-reduced-motion` stops optional animation  
5. Tokens work in light and dark themes

## Source & license

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

- **Author:** [lulu0119](https://github.com/lulu0119)
- **Source:** [lulu0119/skills](https://github.com/lulu0119/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-lulu0119-skills-modular-svg-illustration
- Seller: https://agentstack.voostack.com/s/lulu0119
- 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%.