@pixerate/editor 0.221.1 → 0.222.1

package/skills/pixerate-vector-icon-set/SKILL.md

@@ -0,0 +1,111 @@
+---
+name: pixerate-vector-icon-set
+description: The icon set workflow in the Pixerate vector editor - drawing line or solid icons on a consistent grid (24, 32 or 48 units) with padding and keylines, one stroke width, cap and join style and corner radius across the set, anchors on whole or half units so they render crisp, clean minimal paths, repeats as symbols, and checking and exporting each icon as SVG. Use when asked to draw, design, redraw, clean up or make consistent an icon or a set of icons, glyphs or pictograms, or to export icons as SVG, or when vector.addPath, vector.setStyle, vector.makeSymbol or vector.exportSvg are available. Load with pixerate-vector, which lists every command.
+metadata:
+  kind: workflow
+  reference: pixerate-vector
+---
+
+# Drawing an icon set
+
+An icon set reads as one family when every icon shares the same few decisions: the grid, the
+padding, the stroke width, the cap and join, the corner radius and the visual weight. Make
+those decisions once, write them down, and apply them to every icon; then check each icon
+against them in numbers (`vector.list` bounds, stroke widths and `d`) before looking.
+
+This skill is the method. `pixerate-vector` has the full command reference; run the commands
+with `run_command`, or several as one undo step with `run_commands` and `atomic: true`.
+
+## Goal and quality bar
+
+- One grid: a square artboard of 24 (UI), 32 or 48 units, the same for the whole set.
+- Padding kept: nothing, stroke included, closer than 2 units to the edge on a 24 grid (1/12 of
+  the side on others). Strokes count half their width outside the path.
+- One stroke width (2 on 24 is the common default; 1.5 for a lighter set), one cap and join
+  style (round for friendly sets, butt and miter for geometric ones), one corner radius.
+- Crisp: with an even stroke width (2) put the path's anchors on whole units, with an odd one
+  (1, 3) on half units, so the stroke's edges fall on pixel boundaries at 1×.
+- Clean paths: the fewest anchors that make the shape, no stray or zero-length segments, no
+  hidden overlapping shapes.
+- Visually balanced: icons look the same size (circles a little larger than squares), and are
+  optically centred.
+
+## Inputs to confirm
+
+- **Grid and stroke:** the size (24 by default) and stroke width (2 by default), or an existing
+  icon to match (read it first).
+- **Style:** outline (stroked) or solid (filled), and rounded or sharp.
+- **Output:** one SVG per icon, a sprite, or symbols in one document.
+
+## Working method
+
+1. **Read what exists.** `vector.list`: the artboard size and any icons already drawn, with their
+   `strokeWidth`, `bounds` and `d`; `vector.getAppearance` for caps, joins and alignment.
+   **Check:** you can state the set's grid, padding, stroke, caps, joins and radius.
+2. **Draw on the grid.** Prefer `vector.addShape` primitives (`rect` with `cornerRadius`,
+   `ellipse`, `line`, `polygon`) and `vector.addPath` with whole or half-unit coordinates; give
+   `fill: null`, `stroke`, `strokeWidth`, `strokeLinecap` and `strokeLinejoin` in the same call.
+   Batch one icon's parts in one `run_commands` with `atomic: true` and a `label`.
+   **Check:** `vector.list` bounds plus half the stroke stay inside the padding.
+3. **Combine.** Join parts that should be one shape with `vector.boolean` (`union`; `subtract`
+   for cut-outs); use `vector.outlineStroke` only for a solid set or when the export target needs
+   fills. Then `vector.removeRedundantPoints`.
+   **Check:** `d` has no more anchors than the shape needs; coordinates are still on the grid.
+4. **Match the set.** `vector.setStyle` on all the set's paths at once (`ids` from `vector.list`)
+   for stroke width, caps and joins; `vector.setCorners` for one radius.
+   **Check:** every path's `strokeWidth` is the set's; caps and joins in `vector.getAppearance`.
+5. **Balance.** Compare the icons' bounds: a circle about 10 % larger than a square of the same
+   weight looks the same size; centre shapes optically (a play triangle shifts right).
+   **Check:** each icon's bounds centre is within half a unit of the artboard centre (or its
+   intended optical centre).
+6. **Repeats become symbols.** The same element used several times (a star in a rating, a
+   chevron) is `vector.makeSymbol` once and `vector.placeSymbol` elsewhere.
+7. **Export.** `vector.exportSvg` (or `vector.exportFrameSvg` per artboard) with `precision` 2;
+   read the markup: no transforms where plain coordinates would do, no hidden nodes.
+
+## Decision table
+
+| Need | Approach |
+| --- | --- |
+| Outline icon | Stroked paths, `fill: null`, round caps and joins |
+| Solid icon | Filled shapes; `vector.outlineStroke` turns a stroked sketch into fills |
+| A rounded rectangle or badge | `vector.addShape` `rect` with `cornerRadius`, not drawn arcs |
+| A cut-out (a hole, a notch) | `vector.boolean` `subtract`, or `fillRule: "evenodd"` |
+| Several icons on one page | One frame per icon (`vector.addFrame`), exported with `vector.exportFrameSvg` |
+| One element repeated | `vector.makeSymbol` and `vector.placeSymbol` |
+| Odd stroke width (1, 3) | Put anchors on half units so the edges land on pixels |
+
+## Recipes
+
+**A line icon.** One `vector.addPath` with `d` on the grid (`M12 5L12 19M5 12L19 12` is a plus
+on 24), `fill: null`, `stroke`, `strokeWidth: 2`, `strokeLinecap: "round"`,
+`strokeLinejoin: "round"`; then `vector.list` to check bounds against the padding.
+
+**Make a set consistent.** `vector.list` → `vector.setStyle` with every path's id, the set's
+`strokeWidth`, `strokeLinecap` and `strokeLinejoin` in one call (one undo step) → `vector.list`
+to confirm nothing moved.
+
+**Copies into a symbol.** `vector.makeSymbol` on the first copy (it is replaced by an
+instance), `vector.delete` the other copies, `vector.placeSymbol` at their centres.
+
+## Pitfalls
+
+- **Bounds without the stroke.** `vector.list` bounds are the path's geometry; add half the
+  stroke width on each side when checking padding.
+- **Off-grid anchors** after a scale or rotate blur at 1×; check `d` and round coordinates.
+- **Default styles.** `vector.addShape` adds a grey fill and a dark 2-unit stroke unless you pass
+  `fill` and `stroke`; set them in the same call.
+- **Scaling strokes.** Scaling an icon scales its geometry, not its stroke width; reset
+  `strokeWidth` afterwards so the set stays consistent.
+- **Too many anchors** from booleans or traced input; `vector.removeRedundantPoints`.
+- **Mixed caps and joins** across a set are easy to miss by eye; read `vector.getAppearance`.
+
+## Tools used
+
+- `vector.list`, `vector.getAppearance`: bounds, stroke widths, `d`, caps and joins
+- `vector.addShape`, `vector.addPath`: draw on the grid
+- `vector.setStyle`, `vector.setCorners`: one stroke, cap, join and radius across the set
+- `vector.boolean`, `vector.outlineStroke`, `vector.removeRedundantPoints`: combine and clean paths
+- `vector.transform`, `vector.align`: position and centre
+- `vector.makeSymbol`, `vector.placeSymbol`, `vector.delete`: repeats as symbols
+- `vector.addFrame`, `vector.exportFrameSvg`, `vector.exportSvg`: one artboard per icon, export

package/skills/pixerate-vector-icon-set/evals/consistent-strokes.json

@@ -0,0 +1,22 @@
+{
+	"prompt": "These three icons are from one set but their stroke widths don't match (1, 2 and 3 units). Make them all 2 units with round caps and joins, without moving or resizing them.",
+	"fixture": {
+		"editor": "vector",
+		"width": 72,
+		"height": 24,
+		"setup": [
+			{ "id": "vector.addPath", "params": { "d": "M4 12L20 12", "name": "Minus", "fill": null, "stroke": "#000", "strokeWidth": 1 } },
+			{ "id": "vector.addPath", "params": { "d": "M28 6L44 18M44 6L28 18", "name": "Close", "fill": null, "stroke": "#000", "strokeWidth": 2 } },
+			{ "id": "vector.addPath", "params": { "d": "M52 12L58 18L68 6", "name": "Check", "fill": null, "stroke": "#000", "strokeWidth": 3 } }
+		]
+	},
+	"checks": [
+		{ "why": "every icon at 2 units", "tool": "run_command", "args": { "id": "vector.list" }, "expect": { "result": { "nodes": { "$length": 3, "$every": { "strokeWidth": 2 } } } } },
+		{ "why": "the icons have not moved or changed size", "tool": "run_command", "args": { "id": "vector.list" }, "expect": { "result": { "nodes": [{ "name": "Minus", "bounds": { "x": 4, "y": 12, "width": 16, "height": 0 } }, { "name": "Close", "bounds": { "x": 28, "y": 6, "width": 16, "height": 12 } }, { "name": "Check", "bounds": { "x": 52, "y": 6, "width": 16, "height": 12 } }] } } },
+		{ "why": "round caps on the minus too", "tool": "run_command", "args": { "id": "vector.getAppearance", "params": { "id": { "$read": "run_command", "args": { "id": "vector.list" }, "path": "result.nodes.0.id" } } }, "expect": { "result": { "strokes": { "$every": { "strokeLinecap": "round", "strokeLinejoin": "round" } } } } }
+	],
+	"solution": [
+		{ "tool": "run_command", "args": { "id": "vector.list" } },
+		{ "tool": "run_command", "args": { "id": "vector.setStyle", "params": { "ids": { "$read": "run_command", "args": { "id": "vector.list" }, "path": "result.nodes.*.id" }, "strokeWidth": 2, "strokeLinecap": "round", "strokeLinejoin": "round" } } }
+	]
+}

package/skills/pixerate-vector-icon-set/evals/plus-icon.json

@@ -0,0 +1,15 @@
+{
+	"prompt": "Draw a 'plus' line icon on this 24-unit icon grid: 2-unit strokes with round caps, no fill, centred, keeping a 2-unit padding around it.",
+	"fixture": { "editor": "vector", "width": 24, "height": 24 },
+	"checks": [
+		{ "why": "a stroked, unfilled path at the set's stroke width", "tool": "run_command", "args": { "id": "vector.list" }, "expect": { "result": { "nodes": { "$some": { "type": "path", "fill": null, "strokeWidth": 2 } } } } },
+		{ "why": "every stroke stays inside the 2-unit padding", "tool": "run_command", "args": { "id": "vector.list" }, "expect": { "result": { "nodes": { "$length": { "$min": 1 }, "$every": { "$expr": "!v.bounds || (v.bounds.x - (v.strokeWidth || 0) / 2 >= 1.99 && v.bounds.y - (v.strokeWidth || 0) / 2 >= 1.99 && v.bounds.x + v.bounds.width + (v.strokeWidth || 0) / 2 <= 22.01 && v.bounds.y + v.bounds.height + (v.strokeWidth || 0) / 2 <= 22.01)" } } } } },
+		{ "why": "centred on the grid", "tool": "run_command", "args": { "id": "vector.list" }, "expect": { "result": { "nodes": { "$some": { "type": "path", "bounds": { "$expr": "Math.abs(v.x + v.width / 2 - 12) <= 0.5 && Math.abs(v.y + v.height / 2 - 12) <= 0.5 && Math.abs(v.width - v.height) <= 0.5" } } } } } },
+		{ "why": "anchors on whole or half units, so strokes render crisp", "tool": "run_command", "args": { "id": "vector.list" }, "expect": { "result": { "nodes": { "$every": { "$expr": "!v.d || (v.d.match(/-?\\d*\\.?\\d+/g) || []).every((n) => Math.abs(n * 2 - Math.round(n * 2)) < 1e-6)" } } } } },
+		{ "why": "round caps", "tool": "run_command", "args": { "id": "vector.getAppearance", "params": { "id": { "$read": "run_command", "args": { "id": "vector.list" }, "path": "result.nodes.0.id" } } }, "expect": { "result": { "strokes": { "$some": { "strokeLinecap": "round" } } } } }
+	],
+	"solution": [
+		{ "tool": "run_command", "args": { "id": "vector.addPath", "params": { "d": "M12 5L12 19M5 12L19 12", "name": "Plus", "fill": null, "stroke": "#000000", "strokeWidth": 2, "strokeLinecap": "round", "strokeLinejoin": "round" } } },
+		{ "tool": "run_command", "args": { "id": "vector.list" } }
+	]
+}

package/skills/pixerate-vector-icon-set/evals/repeats-as-symbol.json

@@ -0,0 +1,192 @@
+{
+	"prompt": "The three stars are copies of the same rating icon. Make them one reusable symbol, so that editing it once updates all three, and keep them where they are.",
+	"fixture": {
+		"editor": "vector",
+		"width": 72,
+		"height": 24,
+		"setup": [
+			{
+				"id": "vector.addShape",
+				"params": {
+					"kind": "star",
+					"x": 2,
+					"y": 2,
+					"width": 20,
+					"height": 20,
+					"name": "Star",
+					"fill": "#f5b301",
+					"stroke": null
+				}
+			},
+			{
+				"id": "vector.addShape",
+				"params": {
+					"kind": "star",
+					"x": 26,
+					"y": 2,
+					"width": 20,
+					"height": 20,
+					"name": "Star",
+					"fill": "#f5b301",
+					"stroke": null
+				}
+			},
+			{
+				"id": "vector.addShape",
+				"params": {
+					"kind": "star",
+					"x": 50,
+					"y": 2,
+					"width": 20,
+					"height": 20,
+					"name": "Star",
+					"fill": "#f5b301",
+					"stroke": null
+				}
+			}
+		]
+	},
+	"checks": [
+		{
+			"why": "one symbol",
+			"tool": "run_command",
+			"args": {
+				"id": "vector.listSymbols"
+			},
+			"expect": {
+				"result": {
+					"symbols": {
+						"$length": 1
+					}
+				}
+			}
+		},
+		{
+			"why": "three instances of it and no loose copies",
+			"tool": "run_command",
+			"args": {
+				"id": "vector.list"
+			},
+			"expect": {
+				"result": {
+					"nodes": {
+						"$length": 3,
+						"$every": {
+							"type": "instance"
+						}
+					}
+				}
+			}
+		},
+		{
+			"why": "in their original places",
+			"tool": "run_command",
+			"args": {
+				"id": "vector.list"
+			},
+			"expect": {
+				"result": {
+					"nodes": {
+						"$expr": "[2, 26, 50].every((x) => v.some((n) => Math.abs(n.bounds.x + n.bounds.width / 2 - (x + 10)) <= 0.5))"
+					}
+				}
+			}
+		}
+	],
+	"solution": [
+		{
+			"tool": "run_command",
+			"args": {
+				"id": "vector.list"
+			}
+		},
+		{
+			"tool": "run_command",
+			"args": {
+				"id": "vector.makeSymbol",
+				"params": {
+					"ids": [
+						{
+							"$read": "run_command",
+							"args": {
+								"id": "vector.list"
+							},
+							"path": "result.nodes.0.id"
+						}
+					],
+					"name": "Rating star"
+				}
+			}
+		},
+		{
+			"tool": "run_command",
+			"args": {
+				"id": "vector.delete",
+				"params": {
+					"ids": [
+						{
+							"$read": "run_command",
+							"args": {
+								"id": "vector.list"
+							},
+							"path": "result.nodes.1.id"
+						},
+						{
+							"$read": "run_command",
+							"args": {
+								"id": "vector.list"
+							},
+							"path": "result.nodes.2.id"
+						}
+					]
+				}
+			}
+		},
+		{
+			"tool": "run_command",
+			"args": {
+				"id": "vector.placeSymbol",
+				"params": {
+					"symbolId": {
+						"$read": "run_command",
+						"args": {
+							"id": "vector.listSymbols"
+						},
+						"path": "result.symbols.0.id"
+					},
+					"x": 36,
+					"y": {
+						"$read": "run_command",
+						"args": {
+							"id": "vector.list"
+						},
+						"path": "result.nodes.0.transform.5"
+					}
+				}
+			}
+		},
+		{
+			"tool": "run_command",
+			"args": {
+				"id": "vector.placeSymbol",
+				"params": {
+					"symbolId": {
+						"$read": "run_command",
+						"args": {
+							"id": "vector.listSymbols"
+						},
+						"path": "result.symbols.0.id"
+					},
+					"x": 60,
+					"y": {
+						"$read": "run_command",
+						"args": {
+							"id": "vector.list"
+						},
+						"path": "result.nodes.0.transform.5"
+					}
+				}
+			}
+		}
+	]
+}

package/skills/pixerate-vector-illustration/SKILL.md

@@ -0,0 +1,112 @@
+---
+name: pixerate-vector-illustration
+description: The illustration workflow in the Pixerate vector editor - blocking in shapes back to front, grouping and naming parts, colour from a small palette, gradients (linear, radial, mesh and freeform) with even interpolation, stacked fills and strokes instead of duplicate shapes, clipping and opacity masks, blends, subtle shadows and glows with one light direction, and preparing artboards for export. Use when asked to draw, illustrate or paint a scene, character, object, spot illustration, poster or background in vector, add shading, gradients, highlights, shadows or texture, show art inside a shape, or when vector.setGradient, vector.addFill, vector.makeClippingMask, vector.addFilter or vector.blend are available. Load with pixerate-vector, which lists every command.
+metadata:
+  kind: workflow
+  reference: pixerate-vector
+---
+
+# Making an illustration
+
+An illustration is built like a painting: big shapes first, back to front, then form (light and
+shade), then detail, then finish. In vector, every stage should stay editable: shading lives in
+gradients and stacked fills rather than extra shapes, art shown inside a shape lives in masks,
+and effects stay live until the file is delivered.
+
+This skill is the method. `pixerate-vector` has the full command reference; run the commands
+with `run_command`, or several as one undo step with `run_commands` and `atomic: true`.
+
+## Goal and quality bar
+
+- A clear structure: parts grouped and named ("Sky", "Hill far", "Tree 1"), stacked back to
+  front, the tree shallow.
+- A small palette (5-8 colours plus tints), used consistently; gradients two to four stops.
+- One light direction for every highlight, shade and shadow.
+- Non-destructive: gradients, appearance stacks, masks, blends and filters are live; shapes are
+  not duplicated to fake shading.
+- Shadows and glows subtle: drop shadows black at 0.15-0.3 opacity, offset 2-8 units straight
+  away from the light, blur about twice the offset.
+
+## Inputs to confirm
+
+- **Subject and format:** what to draw, the artboard size or ratio.
+- **Style:** flat (solid fills), soft (gradients), or textured; outlined or not.
+- **Palette:** brand colours or free; the light direction if it matters.
+
+## Working method
+
+1. **Read and plan.** `vector.list` for the artboard and what exists. Plan the layers from back to
+   front (sky, far, middle, near, foreground details) and the palette.
+2. **Block in.** Big shapes with `vector.addShape` and `vector.addPath`, flat colours, one
+   `run_commands` per group with `atomic: true`; `vector.group` each object with a `name`.
+   **Check:** `vector.list` order is back to front; names say what each group is.
+3. **Form.** Shade with gradients rather than extra shapes: `vector.setStyle` `fill` with a
+   `linear` or `radial` gradient (`interpolation: "oklab"` for clean blends between saturated
+   colours), `vector.setGradient` to place it, `vector.setMeshGradient` or
+   `vector.setFreeformGradient` for organic shading. For a highlight or a texture over a fill,
+   `vector.addFill` on the same path with its own `opacity` and `blendMode` (screen to lighten,
+   multiply to darken).
+   **Check:** `vector.getAppearance` shows the stack; the shape count did not grow.
+4. **Masks for art inside shapes.** Put the shape that frames the art on top and
+   `vector.makeClippingMask` with the art below it (a pattern in a window, a scene in a circle);
+   `vector.makeOpacityMask` with a white-to-black gradient for fades and reflections.
+   **Check:** `vector.list` shows the mask group's `mask` with the right `contents`.
+5. **Transitions and repeats.** `vector.blend` between two shapes for smooth steps (a sunset of
+   bands, a row of fading circles); symbols for repeated objects (trees, stars).
+6. **Shadows and glows.** `vector.addFilter` `dropShadow` (`offsetX` 0 and `offsetY` positive for
+   light from above), `outerGlow` for light sources, `layerBlur` for depth of field.
+   **Check:** `vector.list` `filters` show one light direction across the design.
+7. **Finish and export.** Review the stack, then `vector.exportSvg` (or `vector.exportFrameSvg`
+   per artboard). Expand live effects (`vector.expandAppearance`, `vector.expandBlend`) only for
+   targets that need plain SVG.
+
+## Decision table
+
+| Want | Approach |
+| --- | --- |
+| Roundness on a ball, sun or face | Radial gradient, light stop toward the light |
+| Sky or ground fading | Linear gradient, two or three stops |
+| Organic shading (fabric, a face) | Mesh or freeform gradient |
+| A highlight or texture over a colour | `vector.addFill` stacked on the same path, screen or overlay |
+| An outline around an outline | `vector.addStroke` stacked, each with its own `strokeAlign` |
+| Art visible only inside a shape | `vector.makeClippingMask` (the frame on top) |
+| A fade-out or reflection | `vector.makeOpacityMask` with a white-to-black gradient |
+| Even steps between two shapes | `vector.blend` |
+| Card or object lifted off the page | `vector.addFilter` `dropShadow`, subtle |
+
+## Recipes
+
+**Radial shading.** `vector.setStyle` with `fill: { type: "radial", interpolation: "oklab",
+stops: [{ offset: 0, color: light }, { offset: 1, color: dark }] }`; move the centre toward the
+light with `vector.setGradient`.
+
+**Pattern in a window.** Draw the pattern, draw the window shape on top, then
+`vector.makeClippingMask` with all their ids: the window clips, its own fill is not drawn, and
+the pattern stays movable inside.
+
+**Subtle shadow.** `vector.addFilter` `{ type: "dropShadow", params: { color: "#000000",
+opacity: 0.2, offsetX: 0, offsetY: 4, blur: 8 } }` on the object.
+
+## Pitfalls
+
+- **Duplicates for shading.** A copied shape for a highlight drifts when the original is edited;
+  stack a fill instead.
+- **Muddy gradients.** sRGB interpolation between saturated hues passes through grey; use
+  `oklab`, or add a midpoint stop.
+- **Mixed light directions** make a scene look collaged; keep every shadow offset the same way.
+- **Heavy shadows.** Dark, hard, far shadows look pasted on.
+- **The mask on the wrong layer.** `vector.makeClippingMask` uses the topmost object as the mask
+  unless `maskId` says otherwise; put the frame on top first.
+- **Filters in exports.** SVG filters render differently in some tools; expand or rasterize where
+  the result must look identical everywhere.
+
+## Tools used
+
+- `vector.list`, `vector.getAppearance`: structure, order, fills, masks and filters
+- `vector.addShape`, `vector.addPath`, `vector.group`, `vector.moveLayer`: block in, group and order
+- `vector.setStyle`, `vector.setGradient`, `vector.setMeshGradient`, `vector.setFreeformGradient`: colour and gradients
+- `vector.addFill`, `vector.addStroke`, `vector.setBlendMode`: appearance stacks
+- `vector.makeClippingMask`, `vector.makeOpacityMask`, `vector.setMaskOptions`: masks
+- `vector.blend`, `vector.makeSymbol`, `vector.placeSymbol`: transitions and repeats
+- `vector.addFilter`, `vector.updateFilter`: shadows, glows and blur
+- `vector.expandAppearance`, `vector.expandBlend`, `vector.exportSvg`, `vector.exportFrameSvg`: finish and export

package/skills/pixerate-vector-illustration/evals/clip-stripes.json

@@ -0,0 +1,21 @@
+{
+	"prompt": "Show the stripes only inside the round window, and keep the stripes movable inside it.",
+	"fixture": {
+		"editor": "vector",
+		"width": 100,
+		"height": 100,
+		"setup": [
+			{ "id": "vector.addShape", "params": { "kind": "rect", "x": 10, "y": 10, "width": 16, "height": 80, "name": "Stripe", "fill": "#457b9d", "stroke": null } },
+			{ "id": "vector.addShape", "params": { "kind": "rect", "x": 42, "y": 10, "width": 16, "height": 80, "name": "Stripe", "fill": "#457b9d", "stroke": null } },
+			{ "id": "vector.addShape", "params": { "kind": "rect", "x": 74, "y": 10, "width": 16, "height": 80, "name": "Stripe", "fill": "#457b9d", "stroke": null } },
+			{ "id": "vector.addShape", "params": { "kind": "ellipse", "x": 20, "y": 20, "width": 60, "height": 60, "name": "Window", "fill": "#ffffff", "stroke": null } }
+		]
+	},
+	"checks": [
+		{ "why": "a clipping mask using the window, with all three stripes inside", "tool": "run_command", "args": { "id": "vector.list" }, "expect": { "result": { "nodes": { "$some": { "mask": { "type": "clip", "enabled": true, "contents": { "$length": 3 } } } } } } },
+		{ "why": "the stripes are still separate, editable paths", "tool": "run_command", "args": { "id": "vector.list" }, "expect": { "result": { "nodes": { "$expr": "v.filter((n) => n.name === 'Stripe' && n.type === 'path').length === 3" } } } }
+	],
+	"solution": [
+		{ "tool": "run_command", "args": { "id": "vector.makeClippingMask", "params": { "ids": { "$read": "run_command", "args": { "id": "vector.list" }, "path": "result.nodes.*.id" } } } }
+	]
+}

package/skills/pixerate-vector-illustration/evals/radial-sun.json

@@ -0,0 +1,16 @@
+{
+	"prompt": "Give the sun a soft radial gradient: yellow in the middle fading to orange at the edge.",
+	"fixture": {
+		"editor": "vector",
+		"width": 100,
+		"height": 100,
+		"setup": [{ "id": "vector.addShape", "params": { "kind": "ellipse", "x": 30, "y": 30, "width": 40, "height": 40, "name": "Sun", "fill": "#ffcc00", "stroke": null } }]
+	},
+	"checks": [
+		{ "why": "a radial gradient from yellow at the centre to orange at the edge", "tool": "run_command", "args": { "id": "vector.list" }, "expect": { "result": { "nodes": { "$some": { "name": "Sun", "fill": { "$expr": "v && v.type === 'radial' && v.stops.length >= 2 && v.stops[0].offset === 0 && v.stops[v.stops.length - 1].offset === 1" } } } } } },
+		{ "why": "the sun is still the same shape and place", "tool": "run_command", "args": { "id": "vector.list" }, "expect": { "result": { "nodes": { "$some": { "name": "Sun", "bounds": { "x": 30, "y": 30, "width": 40, "height": 40 } } } } } }
+	],
+	"solution": [
+		{ "tool": "run_command", "args": { "id": "vector.setStyle", "params": { "ids": { "$read": "run_command", "args": { "id": "vector.list" }, "path": "result.nodes.*.id" }, "fill": { "type": "radial", "interpolation": "oklab", "stops": [{ "offset": 0, "color": "#ffe14d" }, { "offset": 1, "color": "#ff8c1a" }] } } } }
+	]
+}

package/skills/pixerate-vector-illustration/evals/subtle-shadow.json

@@ -0,0 +1,16 @@
+{
+	"prompt": "Add a subtle drop shadow under the card, with the light coming from above.",
+	"fixture": {
+		"editor": "vector",
+		"width": 200,
+		"height": 140,
+		"setup": [{ "id": "vector.addShape", "params": { "kind": "rect", "x": 40, "y": 30, "width": 120, "height": 80, "cornerRadius": 8, "name": "Card", "fill": "#ffffff", "stroke": null } }]
+	},
+	"checks": [
+		{ "why": "a soft, faint shadow falling straight down", "tool": "run_command", "args": { "id": "vector.list" }, "expect": { "result": { "nodes": { "$some": { "name": "Card", "filters": { "$some": { "type": "dropShadow", "params": { "opacity": { "$min": 0.08, "$max": 0.35 }, "offsetX": { "$min": -1, "$max": 1 }, "offsetY": { "$min": 2, "$max": 10 }, "blur": { "$min": 3 } } } } } } } } },
+		{ "why": "drawn as an effect: still one card, no extra shadow shape", "tool": "run_command", "args": { "id": "vector.list" }, "expect": { "result": { "nodes": { "$length": 1 } } } }
+	],
+	"solution": [
+		{ "tool": "run_command", "args": { "id": "vector.addFilter", "params": { "ids": { "$read": "run_command", "args": { "id": "vector.list" }, "path": "result.nodes.*.id" }, "type": "dropShadow", "params": { "color": "#000000", "opacity": 0.2, "offsetX": 0, "offsetY": 4, "blur": 8 } } } }
+	]
+}

package/skills/pixerate-vector-logo/SKILL.md

@@ -0,0 +1,107 @@
+---
+name: pixerate-vector-logo
+description: The logo workflow in the Pixerate vector editor - building a mark from primitives with live booleans, Pathfinder and Shape Builder, optical corrections, a lockup of mark and wordmark aligned and spaced on the artboard, text converted to outlines for the final file, colour variants (full colour, one colour, reversed) through symbols, and clean single-path SVG export. Use when asked to design, draw, redraw, vectorise, clean up or export a logo, logomark, wordmark, monogram, emblem or brand mark, make a one-colour or reversed version, or prepare a logo file for print or the web, or when vector.boolean, vector.pathfinder, vector.createOutlines or vector.exportSvg are available. Load with pixerate-vector, which lists every command.
+metadata:
+  kind: workflow
+  reference: pixerate-vector
+---
+
+# Making a logo
+
+A logo has to survive every size and every background, so it is built from few, clean shapes,
+kept editable while it is being designed and flattened only for delivery. Design with live
+booleans and real text; deliver plain paths with text outlined, one file per variant.
+
+This skill is the method. `pixerate-vector` has the full command reference; run the commands
+with `run_command`, or several as one undo step with `run_commands` and `atomic: true`.
+
+## Goal and quality bar
+
+- The mark is built from simple geometry: primitives combined with booleans, with as few anchors
+  as the shape needs.
+- It reads at 16 px and at poster size: no hairlines thinner than about 1/30 of the mark's
+  height, no details that close up when small.
+- The lockup is aligned on the artboard: mark and wordmark centred (or aligned to a shared edge),
+  with a deliberate gap kept in every variant.
+- Delivery files are self-contained: text outlined (`vector.createOutlines`), live booleans and
+  effects expanded, one path per colour where possible, no hidden or stray nodes.
+- Variants match: full colour, one colour (black) and reversed (white on dark) are the same
+  geometry.
+
+## Inputs to confirm
+
+- **Name and wording** for the wordmark, and the typeface (`vector.listFonts`).
+- **Colours:** the brand palette as hex, and which variants are needed.
+- **Stage:** still designing (keep live) or delivering (flatten and outline).
+
+## Working method
+
+1. **Read.** `vector.list`: the artboard, existing shapes and text, their fills and bounds.
+   **Check:** you know which nodes are the mark and which the wordmark.
+2. **Build the mark from primitives.** `vector.addShape` (rect, ellipse, polygon, star) on round
+   numbers; combine with `vector.boolean` and `live: true` while designing (`union` for one
+   silhouette, `subtract` for cut-outs, `intersect`); `vector.pathfinder` when you need every
+   region (`divide`) or `vector.shapeBuilder` to merge chosen regions.
+   **Check:** `vector.list` shows the live group with its `liveBoolean` and the expected bounds.
+3. **Correct optically.** Round shapes overshoot flat ones by 2-3 % so they look the same height;
+   a horizontal bar looks thicker than a vertical one of equal width, so thin it slightly;
+   centre by eye mass (a triangle's centroid, not its box).
+4. **Set the wordmark** with `vector.addText` (point text) and `vector.setTextStyle` for tracking;
+   keep it as text while designing.
+   **Check:** the text result's `overflow` is empty and `missingFonts` lists nothing.
+5. **Lock it up.** Position mark and wordmark with `vector.transform` (`dx`, `dy`) or
+   `vector.align`, then group them (`vector.group` with a `name`).
+   **Check:** `vector.list` bounds: centres equal (or edges aligned), the gap what you intended.
+6. **Variants.** Make the lockup a symbol (`vector.makeSymbol`) and place it once per variant
+   (`vector.placeSymbol`), recolouring with `vector.setInstanceOptions` `fill`, so a geometry
+   change updates every variant. Check each against its background colour (contrast).
+7. **Deliver.** For each variant: `vector.createOutlines` on the text, `vector.expandAppearance`
+   on live booleans and effects (or `vector.boolean` without `live` for one path),
+   `vector.removeRedundantPoints`, then `vector.exportSvg` with `precision` 2.
+   **Check:** `vector.list` has only plain paths; the SVG has no `text` and no filters.
+
+## Decision table
+
+| Want | Command |
+| --- | --- |
+| One silhouette from overlapping shapes, still editable | `vector.boolean` `union`, `live: true` |
+| A hole or notch | `vector.boolean` `subtract` (top shape cuts the one below) |
+| Every overlap as its own piece | `vector.pathfinder` `divide` |
+| Merge or remove particular regions | `vector.shapeBuilder` |
+| A ring or donut for export | `vector.boolean` `subtract` without `live`: one path with two subpaths |
+| Same logo in several colours | A symbol, with `vector.setInstanceOptions` per variant |
+| Text that must not depend on fonts | `vector.createOutlines` (keep a text copy while designing) |
+
+## Recipes
+
+**Live union.** `vector.boolean` `{ operation: "union", live: true, ids }` with the parts'
+ids from `vector.list`; adjust a part later by its own id inside the group.
+
+**Knockout for export.** `vector.boolean` `{ operation: "subtract", ids: [outer, inner] }`: one
+path, the hole see-through (not painted white).
+
+**Centre a lockup.** For each part, `dx = artboard.width / 2 - (bounds.x + bounds.width / 2)`
+with `vector.transform`; leave `dy` at 0 to keep the vertical gap.
+
+## Pitfalls
+
+- **White shapes as holes.** A white circle over a red one is not a hole; it shows on a coloured
+  background. Subtract it.
+- **Flattening too early.** A destructive boolean or outlined text cannot be re-edited; keep live
+  versions until delivery.
+- **Live effects in delivered files.** Filters and live booleans export as SVG filters or
+  Pixerate attributes that other tools may not read; expand first.
+- **Missing fonts.** A family the shaper lacks draws in a fallback; check `missingFonts` before
+  outlining, since outlines bake whatever was drawn.
+- **Hairlines and tiny counters** disappear at favicon size; test the mark small.
+
+## Tools used
+
+- `vector.list`, `vector.getText`, `vector.listFonts`: read shapes, text and fonts
+- `vector.addShape`, `vector.addPath`, `vector.addText`, `vector.setTextStyle`: build the mark and wordmark
+- `vector.boolean`, `vector.pathfinder`, `vector.shapeBuilder`: combine shapes
+- `vector.transform`, `vector.align`, `vector.group`: lock up and space
+- `vector.makeSymbol`, `vector.placeSymbol`, `vector.setInstanceOptions`: colour variants
+- `vector.setStyle`: brand colours
+- `vector.createOutlines`, `vector.expandAppearance`, `vector.removeRedundantPoints`: prepare for delivery
+- `vector.exportSvg`: the delivered file

package/skills/pixerate-vector-logo/evals/centre-lockup.json

@@ -0,0 +1,20 @@
+{
+	"prompt": "Centre the logo mark and the wordmark bar under it horizontally on the artboard, keeping the gap between them.",
+	"fixture": {
+		"editor": "vector",
+		"width": 120,
+		"height": 80,
+		"setup": [
+			{ "id": "vector.addShape", "params": { "kind": "ellipse", "x": 14, "y": 8, "width": 32, "height": 32, "name": "Mark", "fill": "#1d3557", "stroke": null } },
+			{ "id": "vector.addShape", "params": { "kind": "rect", "x": 30, "y": 52, "width": 64, "height": 12, "name": "Wordmark", "fill": "#1d3557", "stroke": null } }
+		]
+	},
+	"checks": [
+		{ "why": "both centred on the artboard", "tool": "run_command", "args": { "id": "vector.list" }, "expect": { "result": { "nodes": { "$length": 2, "$every": { "bounds": { "$expr": "Math.abs(v.x + v.width / 2 - 60) <= 0.5" } } } } } },
+		{ "why": "the vertical layout and gap are unchanged", "tool": "run_command", "args": { "id": "vector.list" }, "expect": { "result": { "nodes": [{ "name": "Mark", "bounds": { "y": 8, "height": 32 } }, { "name": "Wordmark", "bounds": { "y": 52, "height": 12 } }] } } }
+	],
+	"solution": [
+		{ "tool": "run_command", "args": { "id": "vector.transform", "params": { "ids": [{ "$read": "run_command", "args": { "id": "vector.list" }, "path": "result.nodes.0.id" }], "dx": 30 } } },
+		{ "tool": "run_command", "args": { "id": "vector.transform", "params": { "ids": [{ "$read": "run_command", "args": { "id": "vector.list" }, "path": "result.nodes.1.id" }], "dx": -2 } } }
+	]
+}