@pixerate/editor 0.222.0 → 0.222.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor",
-  "version": "0.222.0",
+  "version": "0.222.1",
   "description": "UI-agnostic rich text and media editing core library",
   "author": "Pixerate",
   "license": "MIT",

package/skills/README.md

@@ -44,6 +44,9 @@ request like "clean up this export" finds it.
 | [`pixerate-image-portrait-retouch`](pixerate-image-portrait-retouch/SKILL.md) | Image (`pixerate-image-editor`) | Blemishes, stray hairs and flaws healed on their own layer, dodge and burn, eyes and teeth, kept natural. |
 | [`pixerate-image-product-photo`](pixerate-image-product-photo/SKILL.md) | Image (`pixerate-image-editor`) | Product cutouts on pure white or a brand colour, a grounding shadow, accurate colour, centred marketplace crops. |
 | [`pixerate-spreadsheet-clean-import`](pixerate-spreadsheet-clean-import/SKILL.md) | Spreadsheet (`pixerate-spreadsheet`) | Imported or pasted data made tidy: structure, headers, types (currency, comma decimals, day-first dates, leading zeros, missing values), text, duplicates and validation. |
+| [`pixerate-vector-icon-set`](pixerate-vector-icon-set/SKILL.md) | Vector (`pixerate-vector`) | Icons on one grid with padding, one stroke, cap, join and radius, crisp coordinates, clean paths, symbols and SVG export. |
+| [`pixerate-vector-logo`](pixerate-vector-logo/SKILL.md) | Vector (`pixerate-vector`) | Marks from primitives with live booleans, optical corrections, an aligned lockup, colour variants as symbols, outlined delivery files. |
+| [`pixerate-vector-illustration`](pixerate-vector-illustration/SKILL.md) | Vector (`pixerate-vector`) | Block in back to front, gradients and stacked fills for form, masks, blends, subtle shadows with one light, export. |
 | [`pixerate-talking-head-edit`](pixerate-talking-head-edit/SKILL.md) | Video (`pixerate-video-editor`) | Talking-head cleanup by transcript: fillers, long pauses and stutters found in one pass and cut as one plan reviewed before it applies. Owns the dialogue tools. |
 | [`pixerate-bgm-alignment`](pixerate-bgm-alignment/SKILL.md) | Video (`pixerate-video-editor`) | Background music: beats and cuts on the beat, ducking under speech, loudness in LUFS. Owns the music tools. |
 
@@ -105,9 +108,10 @@ same change.
   it ships evals. Add its row to the workflow table above.
 - **Evals.** Each workflow skill ships at least three scenarios in `evals/*.json`, run by
   `packages/core/tests/agent-skill-evals.test.ts`. An eval has a `prompt` (the task, in the
-  user's words), a `fixture` (the starting document: `{ "editor": "spreadsheet", "rows" }` or
-  `{ "editor": "image", "width", "height", "background", "shapes" }`), `checks` (a read-only
-  tool, its `args`, what its result must match in `expect`, and `why`) and a `solution` (the
+  user's words), a `fixture` (the starting document: `{ "editor": "spreadsheet", "rows" }`,
+  `{ "editor": "image", "width", "height", "background", "shapes" }` or `{ "editor":
+  "vector", "width", "height", "setup" }` with commands that draw the starting art), `checks` (a read-only
+  tool, or `run_command` with a read-only command such as `vector.list`, its `args`, what its result must match in `expect`, and `why`) and a `solution` (the
   tool calls an expert would make). The test proves each eval: some check fails on the fixture,
   and all pass after the solution. A model harness runs the same file with the model in place
   of the solution. In `expect`, objects match key by key and arrays element by element, with

package/skills/pixerate-vector/SKILL.md

@@ -54,6 +54,15 @@ carry a live effect stack. Every command is a `vector.*` command run with `run_c
 Parameter details (gradient fields, effect parameters, width profiles, envelopes) are in
 [references/commands.md](references/commands.md).
 
+## Workflow skills
+
+For these jobs, load the workflow skill too: it has the method, the checks between steps and
+the pitfalls, and uses the commands below.
+
+- `pixerate-vector-icon-set`: icons on one grid, one stroke and style, crisp, as symbols and SVG.
+- `pixerate-vector-logo`: marks from booleans, a lockup, colour variants, outlined delivery files.
+- `pixerate-vector-illustration`: block in, gradients and stacked fills, masks, blends, shadows.
+
 ## Working method
 
 1. **Read.** `vector.list` gives the artboard size, every node depth first (id, type, name,
@@ -74,30 +83,16 @@ Parameter details (gradient fields, effect parameters, width profiles, envelopes
 
 ## Best practices
 
-- **Diagrams with connectors.** Lay the boxes out first, then `vector.connect` them (in one
-  `run_commands` batch) rather than drawing lines: connectors stay attached when boxes move, and
-  `route: "elbow"` with a small `radius` reads well in flowcharts. Leave sides `auto` unless a
-  connector must leave a particular side.
-
 - **Frames for anything that resizes.** Build screens, cards, buttons and banners inside a frame
   (`vector.addFrame` or `vector.frameSelection`), set each child's constraints with
   `vector.setResizing` (backgrounds and dividers `leftRight`, icons pinned to their corner, titles
   `center`), then resize with `vector.setFrame` to produce other sizes from one design. Export each
   artboard with `vector.exportFrameSvg`.
-
-- **Constraints for precise, editable geometry.** For technical drawings, diagrams, floor plans or
-  any shape that must keep exact relations, draw it roughly, run `vector.autoConstrain`, then add
-  the dimensions that matter (`vector.addConstraint` distance / angle / radius) and name them so
-  related sizes follow one another (`vector.setConstraintValue` with expressions like `w / 2`).
-  Check `vector.listConstraints` `dof`: aim for `fully` on parts that must not drift; `over`
-  means some constraints repeat others. Prefer few, meaningful constraints over many.
-
 - **Symbols for repeats.** When the same art appears several times (icons in a set, trees in a
   scene, bullets, a logo mark), make it once and place instances (`vector.makeSymbol`, then
   `vector.placeSymbol` with `x` / `y` or a `transform`), so one edit in isolation changes them all.
   Give each a clear name. Use `vector.setInstanceOptions` `fill` / `stroke` for colour variants and
   `hidden` to drop a part, rather than detaching; detach only when one copy must diverge for good.
-
 - **Text.** Use point text for labels and headlines, area text (`width`, `height`) for anything
   that should wrap, text on a path for badges and seals. Check `overflow` in the summary every
   text write returns: hidden lines or characters mean the box or path is too small. Keep one or
@@ -106,56 +101,11 @@ Parameter details (gradient fields, effect parameters, width profiles, envelopes
   than splitting text into separate nodes, so it still edits as one paragraph. Create Outlines
   only for final artwork or logos that must not depend on fonts; keep a copy as text if it may
   change.
-  For Japanese, Chinese or Korean set in columns (signage, book spines, posters), use vertical
-  text (`textOrientation: "vertical"` or `vector.setTextOrientation`): CJK stands upright, Latin
-  turns sideways; set a short Latin range `upright: true` to stack it letter by letter. In an
-  area, columns that do not fit past the left edge are `overflow`. Vertical text cannot follow a
-  path.
-
-- **Clean paths.** Use the fewest anchors that describe the shape: anchors at extrema (top,
-  bottom, left, right of a curve) and at true corners, handles horizontal or vertical at extrema,
-  each handle about a third of its segment. Run `vector.removeRedundantPoints` after
-  booleans, knife and pencil work; `vector.smooth` for lumpy curves; `vector.deleteAnchors`
-  keeps the outline by refitting neighbours.
-- **Live corners over drawn arcs.** Give rectangles, polygons and stars a `cornerRadius`
-  (`vector.addShape`) or set it with `vector.setCorners`; the anchors stay sharp and editable and
-  radii shrink to fit short sides. Keep one radius scale across a design. For app icons and UI
-  cards use `smoothing` (about 0.6) on `vector.setCorners` for continuous, squircle corners.
+- **Paths, strokes, booleans, gradients, stacks, masks, shadows, connectors, constraints and
+  vertical text:** read [references/best-practices.md](references/best-practices.md) first.
 - **Non-destructive first.** Live booleans (`vector.boolean` with `live: true`), path effects
   and envelopes keep the operands editable. A destructive boolean or Pathfinder replaces its
   inputs; do that last, and only when asked for flat output.
-- **Boolean vs Pathfinder vs Shape Builder.** `vector.boolean` for a single result shape (union
-  for silhouettes, subtract for cut-outs, intersect, exclude). `vector.pathfinder` when you need
-  every region separately (divide), hidden parts removed (trim, merge) or a crop. Shape Builder
-  when you want to merge or delete particular regions picked by point.
-- **Strokes.** Use `strokeAlign: "inside"` for icons and UI shapes so the outer size stays exact,
-  `outside` for outlines around artwork; open paths always stroke centred. Use round caps and
-  joins for friendly line icons, miter for geometric ones. Keep one stroke width across an icon
-  set (for example 1.5 or 2 units on a 24-unit grid).
-- **Icon grid.** Use a square artboard (24, 32 or 48 units), keep a padding margin, place
-  coordinates on whole or half units so strokes render crisp, and align optical centres.
-- **Gradients.** Two to four stops are usually enough. Use `interpolation: "oklab"` for
-  perceptually even blends without the grey or muddy midpoint sRGB gives between saturated hues;
-  `midpoint` to shift the half-way point instead of adding stops. Prefer linear or radial for
-  portability; conic and diamond export as SVG patterns.
-- **Appearance stacks over duplicate shapes.** For a gradient over a texture, a tinted overlay,
-  an outline around an outline or a stroke inside and another outside, stack layers on one path
-  (`vector.addFill`, `vector.addStroke`) instead of copying the shape: the copies would drift
-  apart when edited. Give each stroke its own `strokeAlign` (outside under, inside or center on
-  top) and widths that step down towards the top. Use per-layer `opacity` and `blendMode`
-  (multiply to darken, screen to lighten, overlay for texture) rather than node opacity when only
-  one paint should fade.
-- **Masks over cut-outs.** To show artwork inside a shape (a photo-like fill in a circle, a
-  pattern inside text-like outlines, a scene seen through a window), use
-  `vector.makeClippingMask` rather than a destructive intersect: the contents stay editable and
-  movable inside the frame. Draw the mask last (on top) and make the mask from it; edit the mask
-  later by its `maskId`. Use `vector.makeOpacityMask` with a white-to-black gradient for fades
-  and reflections (luminance: white shows). A clip's own paint is never drawn, so its fill
-  colour does not matter. Effects and shadows on the mask group follow the masked silhouette.
-- **Shadows and glows.** Keep drop shadows subtle: black at 0.15 to 0.3 opacity, `offsetY` 2 to 8,
-  `blur` about twice the offset. Use one light direction for every shadow in a design. Filters
-  export as SVG filters, which some tools (and older renderers) draw slightly differently or not
-  at all; a design that must look identical everywhere should avoid them or rasterize.
 - **Grouping and naming.** Group the parts of one object (`vector.group` with a `name`), name
   paths that matter (`name` on add), and keep the tree shallow.
 - **SVG hygiene.** Export with `precision` 2 or 3 (default 3); higher only for tiny artboards.

package/skills/pixerate-vector/references/best-practices.md

@@ -0,0 +1,62 @@
+# Drawing best practices
+
+Detail for `SKILL.md`'s best practices, by topic.
+
+- **Clean paths.** Use the fewest anchors that describe the shape: anchors at extrema (top,
+  bottom, left, right of a curve) and at true corners, handles horizontal or vertical at extrema,
+  each handle about a third of its segment. Run `vector.removeRedundantPoints` after
+  booleans, knife and pencil work; `vector.smooth` for lumpy curves; `vector.deleteAnchors`
+  keeps the outline by refitting neighbours.
+- **Live corners over drawn arcs.** Give rectangles, polygons and stars a `cornerRadius`
+  (`vector.addShape`) or set it with `vector.setCorners`; the anchors stay sharp and editable and
+  radii shrink to fit short sides. Keep one radius scale across a design. For app icons and UI
+  cards use `smoothing` (about 0.6) on `vector.setCorners` for continuous, squircle corners.
+- **Boolean vs Pathfinder vs Shape Builder.** `vector.boolean` for a single result shape (union
+  for silhouettes, subtract for cut-outs, intersect, exclude). `vector.pathfinder` when you need
+  every region separately (divide), hidden parts removed (trim, merge) or a crop. Shape Builder
+  when you want to merge or delete particular regions picked by point.
+- **Strokes.** Use `strokeAlign: "inside"` for icons and UI shapes so the outer size stays exact,
+  `outside` for outlines around artwork; open paths always stroke centred. Use round caps and
+  joins for friendly line icons, miter for geometric ones. Keep one stroke width across an icon
+  set (for example 1.5 or 2 units on a 24-unit grid).
+- **Icon grid.** Use a square artboard (24, 32 or 48 units), keep a padding margin, place
+  coordinates on whole or half units so strokes render crisp, and align optical centres.
+- **Gradients.** Two to four stops are usually enough. Use `interpolation: "oklab"` for
+  perceptually even blends without the grey or muddy midpoint sRGB gives between saturated hues;
+  `midpoint` to shift the half-way point instead of adding stops. Prefer linear or radial for
+  portability; conic and diamond export as SVG patterns.
+- **Appearance stacks over duplicate shapes.** For a gradient over a texture, a tinted overlay,
+  an outline around an outline or a stroke inside and another outside, stack layers on one path
+  (`vector.addFill`, `vector.addStroke`) instead of copying the shape: the copies would drift
+  apart when edited. Give each stroke its own `strokeAlign` (outside under, inside or center on
+  top) and widths that step down towards the top. Use per-layer `opacity` and `blendMode`
+  (multiply to darken, screen to lighten, overlay for texture) rather than node opacity when only
+  one paint should fade.
+- **Masks over cut-outs.** To show artwork inside a shape (a photo-like fill in a circle, a
+  pattern inside text-like outlines, a scene seen through a window), use
+  `vector.makeClippingMask` rather than a destructive intersect: the contents stay editable and
+  movable inside the frame. Draw the mask last (on top) and make the mask from it; edit the mask
+  later by its `maskId`. Use `vector.makeOpacityMask` with a white-to-black gradient for fades
+  and reflections (luminance: white shows). A clip's own paint is never drawn, so its fill
+  colour does not matter. Effects and shadows on the mask group follow the masked silhouette.
+- **Shadows and glows.** Keep drop shadows subtle: black at 0.15 to 0.3 opacity, `offsetY` 2 to 8,
+  `blur` about twice the offset. Use one light direction for every shadow in a design. Filters
+  export as SVG filters, which some tools (and older renderers) draw slightly differently or not
+  at all; a design that must look identical everywhere should avoid them or rasterize.
+- **Diagrams with connectors.** Lay the boxes out first, then `vector.connect` them (in one
+  `run_commands` batch) rather than drawing lines: connectors stay attached when boxes move, and
+  `route: "elbow"` with a small `radius` reads well in flowcharts. Leave sides `auto` unless a
+  connector must leave a particular side.
+
+- **Constraints for precise, editable geometry.** For technical drawings, diagrams, floor plans or
+  any shape that must keep exact relations, draw it roughly, run `vector.autoConstrain`, then add
+  the dimensions that matter (`vector.addConstraint` distance / angle / radius) and name them so
+  related sizes follow one another (`vector.setConstraintValue` with expressions like `w / 2`).
+  Check `vector.listConstraints` `dof`: aim for `fully` on parts that must not drift; `over`
+  means some constraints repeat others. Prefer few, meaningful constraints over many.
+
+- **Vertical text.** For Japanese, Chinese or Korean set in columns (signage, book spines, posters), use vertical
+  text (`textOrientation: "vertical"` or `vector.setTextOrientation`): CJK stands upright, Latin
+  turns sideways; set a short Latin range `upright: true` to stack it letter by letter. In an
+  area, columns that do not fit past the left edge are `overflow`. Vertical text cannot follow a
+  path.

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 } } }
+	]
+}

package/skills/pixerate-vector-logo/evals/knockout-ring.json

@@ -0,0 +1,21 @@
+{
+	"prompt": "Cut the small circle out of the big one so the mark becomes a ring you can see through. This is for the final export file, so make it a single plain path.",
+	"fixture": {
+		"editor": "vector",
+		"width": 64,
+		"height": 64,
+		"setup": [
+			{ "id": "vector.addShape", "params": { "kind": "ellipse", "x": 4, "y": 4, "width": 56, "height": 56, "name": "Outer", "fill": "#e63946", "stroke": null } },
+			{ "id": "vector.addShape", "params": { "kind": "ellipse", "x": 20, "y": 20, "width": 24, "height": 24, "name": "Inner", "fill": "#ffffff", "stroke": null } }
+		]
+	},
+	"checks": [
+		{ "why": "one plain path, no groups", "tool": "run_command", "args": { "id": "vector.list" }, "expect": { "result": { "nodes": { "$length": 1, "$every": { "type": "path" } } } } },
+		{ "why": "a ring: the outer outline and the hole (two subpaths)", "tool": "run_command", "args": { "id": "vector.list" }, "expect": { "result": { "nodes": { "$every": { "bounds": { "x": 4, "y": 4, "width": 56, "height": 56 }, "d": { "$expr": "(v.match(/M/g) || []).length === 2" } } } } } },
+		{ "why": "the hole is see-through: no white is painted", "tool": "run_command", "args": { "id": "vector.list" }, "expect": { "result": { "nodes": { "$every": { "fill": "#e63946" } } } } }
+	],
+	"solution": [
+		{ "tool": "run_command", "args": { "id": "vector.list" } },
+		{ "tool": "run_command", "args": { "id": "vector.boolean", "params": { "operation": "subtract", "ids": { "$read": "run_command", "args": { "id": "vector.list" }, "path": "result.nodes.*.id" } } } }
+	]
+}

package/skills/pixerate-vector-logo/evals/live-union.json

@@ -0,0 +1,19 @@
+{
+	"prompt": "Merge the circle and the square into one silhouette for the logo mark, but keep both shapes editable so I can still nudge them.",
+	"fixture": {
+		"editor": "vector",
+		"width": 64,
+		"height": 64,
+		"setup": [
+			{ "id": "vector.addShape", "params": { "kind": "ellipse", "x": 8, "y": 8, "width": 32, "height": 32, "name": "Circle", "fill": "#1d3557", "stroke": null } },
+			{ "id": "vector.addShape", "params": { "kind": "rect", "x": 24, "y": 24, "width": 32, "height": 32, "name": "Square", "fill": "#1d3557", "stroke": null } }
+		]
+	},
+	"checks": [
+		{ "why": "one top-level object: a live union of the two", "tool": "run_command", "args": { "id": "vector.list" }, "expect": { "result": { "nodes": { "$expr": "v.filter((n) => n.depth === 0).length === 1", "$some": { "depth": 0, "liveBoolean": "union", "children": 2 } } } } },
+		{ "why": "covering both shapes", "tool": "run_command", "args": { "id": "vector.list" }, "expect": { "result": { "nodes": { "$some": { "depth": 0, "bounds": { "x": 8, "y": 8, "width": 48, "height": 48 } } } } } }
+	],
+	"solution": [
+		{ "tool": "run_command", "args": { "id": "vector.boolean", "params": { "operation": "union", "live": true, "ids": { "$read": "run_command", "args": { "id": "vector.list" }, "path": "result.nodes.*.id" } } } }
+	]
+}