@pixerate/editor 0.222.0 → 0.222.2

package/skills/pixerate-paint-watercolour/SKILL.md

@@ -0,0 +1,106 @@
+---
+name: pixerate-paint-watercolour
+description: The watercolour workflow in the Pixerate paint editor - choosing the paper, planning light to dark and keeping the paper's white for highlights, wet-in-wet and wet-on-dry washes, letting water flow and drying before glazing, steering water with the wet tools, granulation, blooms and edge darkening, and finishing detail with a small brush. Use when asked to paint in watercolour or gouache, lay a wash, paint a sky, glaze, paint wet-in-wet, make blooms or granulation, or paint a loose or botanical watercolour, or when wet_paper, advance_wet_paint, dry_paint or set_wet_settings are available. Load with pixerate-paint-editor, which lists every tool.
+metadata:
+  kind: workflow
+  reference: pixerate-paint-editor
+---
+
+# Painting in watercolour
+
+Watercolour is transparent and it moves. Each wash lays water and pigment that keep flowing
+until they dry: edges darken, pigment settles into the paper's valleys, wet colours bleed into
+each other. Light comes from the paper, so you work light to dark and keep the white of the paper
+where you want highlights. A dried wash is fixed; the next one glazes over it. For an agent,
+time only passes when you call `advance_wet_paint` or `dry_paint`.
+
+This skill is the method. `pixerate-paint-editor` has the full tool reference and
+`references/wet-media.md` the engine's detail.
+
+## Goal and quality bar
+
+- The paper suits the piece: cold pressed for most work, rough for texture and granulation, hot
+  pressed for fine detail (`get_canvas_info` `paper.preset`).
+- Washes are even where they should be and soft where they should be; colours glow because
+  they are layered, not mixed to mud.
+- Highlights are the paper itself, not white paint (unless the user asks for gouache).
+- Every wash is dry before the next glaze over it (`get_wet_paint` `wet: false`), and the
+  painting is dry before export.
+
+## Inputs to confirm
+
+- **Subject and look:** loose and atmospheric (wet-in-wet) or crisp and detailed (wet-on-dry).
+- **Palette:** a few colours; `color_harmony` or `mix_colors` to plan.
+- **Highlights to keep white**, and where they are.
+
+## Working method
+
+1. **Ground.** `set_paper` with a watercolour preset (`cold-pressed`, `rough-watercolor`,
+   `hot-pressed`). Keep each pass on its own layer when you may want to change it (`add_layer`).
+   **Check:** `get_canvas_info` shows the paper.
+2. **Plan values light to dark** and where the paper stays white. Mix colours first
+   (`mix_colors` predicts the pigment mix; `add_swatch` keeps them).
+3. **First wash, lightest colour.** For soft skies and backgrounds, `wet_paper` the area first
+   (wet-in-wet); for crisp edges paint on dry paper. `set_brush` `watercolor-wash`, `set_color`,
+   then a few long `paint_stroke`s across the area, overlapping, avoiding the highlights.
+   **Check:** `get_wet_paint` shows the layer wet; `pick_color` inside is the colour you meant.
+4. **Let it move, then dry.** `advance_wet_paint` (`seconds` 1-5) to let it spread, bloom and
+   granulate; drop a second colour in while it is wet for soft blends. Then `dry_paint`.
+   **Check:** `get_wet_paint` `wet: false`.
+5. **Glaze.** Each further wash goes over a dry one, a little darker or another hue (blue over
+   yellow makes green). Paint only where it should deepen.
+   **Check:** `pick_color` where you glazed is darker; where you did not, unchanged.
+6. **Shapes, then details.** `watercolor-round` for shapes, `watercolor-detail` for lines and
+   details on dry paper, last.
+7. **Steer and fix while wet**: `blot` lifts paint (clouds, a highlight you lost), the
+   `add-water` tool softens an edge, `hair-dryer` stops a spread, `set_canvas_tilt` makes a wash
+   run, `set_wet_settings` tunes `granulation`, `edgeDarkening` and `bloom` for the layer.
+8. **Finish.** `dry_paint` everything; `render_preview` to look; export.
+
+## Decision table
+
+| Want | Approach |
+| --- | --- |
+| Soft sky, misty background | `wet_paper`, then `watercolor-wash`; drop colours in while wet |
+| Crisp shapes, hard edges with a dark rim | Paint on dry paper |
+| Deeper colour without mud | Dry, then glaze a second wash |
+| A white highlight | Leave the paper; or `blot` while wet to lift |
+| Light over dark | `gouache` (body 1) |
+| Grainy, textured washes | `rough-watercolor` paper and `granulation` up in `set_wet_settings` |
+| Fine lines and detail | `hot-pressed` paper, `watercolor-detail`, on dry paper |
+| Cauliflower blooms | Add water into a drying wash; `bloom` up |
+
+## Recipes
+
+**Flat wash.** `set_brush` `watercolor-wash` → `set_color` → one `paint_stroke` zigzagging
+across the area (rows about half the brush size apart) → `advance_wet_paint` `seconds` 2-5 →
+`dry_paint`.
+
+**Glaze.** On the dried wash, the same or a darker colour, painted only where it should deepen
+→ `dry_paint`. Repeat for more depth; three glazes are usually plenty.
+
+**Wet-in-wet sky.** `wet_paper` over the sky → blue wash along the top → while wet, a little
+warm colour near the horizon → `advance_wet_paint` → `blot` a few clouds → `dry_paint`.
+
+## Pitfalls
+
+- **Glazing on wet paint** mixes the two washes instead of layering them; dry first.
+- **Painting light over dark** does not work in transparent watercolour; plan the whites.
+- **Overworking**: many strokes over a wet wash lift and muddy it; lay it and leave it.
+- **Drawing-paper presets** (cartridge, smooth) do not behave like watercolour paper.
+- **Oil and watercolour on one layer**: a layer keeps the first medium's wet settings; use
+  separate layers.
+- **Nothing moves by itself** for an agent: without `advance_wet_paint` there is no flow, and
+  without `dry_paint` the next stroke paints into wet paint.
+
+## Tools used
+
+- `get_canvas_info`, `list_layers`, `render_preview`, `pick_color`: read the canvas and check colours
+- `list_papers`, `set_paper`: the watercolour ground
+- `add_layer`, `update_layer`: a layer per pass
+- `set_brush`, `set_color`, `mix_colors`, `color_harmony`, `add_swatch`: brush and palette
+- `paint_stroke`: washes, shapes and details, and the wet tools (water, dryer, blot)
+- `wet_paper`, `advance_wet_paint`, `dry_paint`, `get_wet_paint`: wet-in-wet, flow, drying and checking
+- `set_wet_settings`, `set_canvas_tilt`, `set_flow_map`: tune and steer the water
+- `undo_paint`: take back a step
+- `export_image`: deliver

package/skills/pixerate-paint-watercolour/evals/glaze-over-dry.json

@@ -0,0 +1,24 @@
+{
+	"prompt": "The blue wash on this sheet is dry. Glaze a second wash of the same blue over the left half to deepen it, without lifting or muddying the first one.",
+	"fixture": {
+		"editor": "paint",
+		"width": 64,
+		"height": 64,
+		"setup": [
+			{ "tool": "set_brush", "args": { "id": "watercolor-wash" } },
+			{ "tool": "set_color", "args": { "color": "#6fa8dc" } },
+			{ "tool": "paint_stroke", "args": { "points": [{ "x": 0, "y": 10 }, { "x": 64, "y": 10 }, { "x": 64, "y": 32 }, { "x": 0, "y": 32 }, { "x": 0, "y": 54 }, { "x": 64, "y": 54 }] } },
+			{ "tool": "dry_paint" }
+		]
+	},
+	"checks": [
+		{ "why": "a second watercolour wash", "tool": "list_strokes", "expect": { "total": 2, "strokes": { "$every": { "brushId": { "$in": ["watercolor-round", "watercolor-wash", "gradient-wash", "watercolor-detail"] } } } } },
+		{ "why": "the left half is deeper (darker) than the paper-side right", "tool": "pick_color", "args": { "x": 10, "y": 32 }, "expect": { "color": { "$expr": "(([r, g, b]) => 0.3 * r + 0.59 * g + 0.11 * b < 170 && b > r + 15)([1, 3, 5].map((i) => parseInt(v.slice(i, i + 2), 16)))" } } },
+		{ "why": "the glaze is dry, so it stays put", "tool": "get_wet_paint", "expect": { "wet": false } }
+	],
+	"solution": [
+		{ "tool": "get_wet_paint" },
+		{ "tool": "paint_stroke", "args": { "points": [{ "x": 2, "y": 12 }, { "x": 26, "y": 12 }, { "x": 26, "y": 32 }, { "x": 2, "y": 32 }, { "x": 2, "y": 52 }, { "x": 26, "y": 52 }] } },
+		{ "tool": "dry_paint" }
+	]
+}

package/skills/pixerate-paint-watercolour/evals/paper-and-brush-for-detail.json

@@ -0,0 +1,16 @@
+{
+	"prompt": "I want a detailed botanical study in watercolour with crisp, fine lines. Set up the paper for that and paint the thin stem with a small detail brush, a green line from (32, 60) up to (32, 20).",
+	"fixture": { "editor": "paint", "width": 64, "height": 64 },
+	"checks": [
+		{ "why": "smooth hot-pressed paper for fine detail", "tool": "get_canvas_info", "expect": { "paper": { "preset": "hot-pressed" } } },
+		{ "why": "a fine watercolour detail brush", "tool": "list_strokes", "expect": { "strokes": { "$some": { "brushId": "watercolor-detail" } } } },
+		{ "why": "a green stem", "tool": "pick_color", "args": { "x": 32, "y": 40 }, "expect": { "color": { "$expr": "(([r, g, b]) => g > r + 10 && g > b)([1, 3, 5].map((i) => parseInt(v.slice(i, i + 2), 16)))" } } }
+	],
+	"solution": [
+		{ "tool": "set_paper", "args": { "preset": "hot-pressed" } },
+		{ "tool": "set_brush", "args": { "id": "watercolor-detail" } },
+		{ "tool": "set_color", "args": { "color": "#3f7d3a" } },
+		{ "tool": "paint_stroke", "args": { "points": [{ "x": 32, "y": 60 }, { "x": 32, "y": 40 }, { "x": 32, "y": 20 }] } },
+		{ "tool": "dry_paint" }
+	]
+}

package/skills/pixerate-paint-watercolour/evals/sky-wash.json

@@ -0,0 +1,19 @@
+{
+	"prompt": "Paint a flat light-blue sky wash across the top third of the sheet in watercolour, and let it dry before anything else goes on.",
+	"fixture": { "editor": "paint", "width": 64, "height": 64, "setup": [{ "tool": "set_paper", "args": { "preset": "cartridge" } }] },
+	"checks": [
+		{ "why": "on watercolour paper", "tool": "get_canvas_info", "expect": { "paper": { "preset": { "$in": ["cold-pressed", "hot-pressed", "rough-watercolor"] } } } },
+		{ "why": "painted with a watercolour brush", "tool": "list_strokes", "expect": { "strokes": { "$length": { "$min": 1 }, "$every": { "brushId": { "$in": ["watercolor-round", "watercolor-wash", "gradient-wash", "watercolor-detail"] } } } } },
+		{ "why": "the sky is blue", "tool": "pick_color", "args": { "x": 32, "y": 6 }, "expect": { "color": { "$expr": "(([r, g, b]) => b > r + 15)([1, 3, 5].map((i) => parseInt(v.slice(i, i + 2), 16)))" } } },
+		{ "why": "the wash is dry", "tool": "get_wet_paint", "expect": { "wet": false } }
+	],
+	"solution": [
+		{ "tool": "set_paper", "args": { "preset": "cold-pressed" } },
+		{ "tool": "set_brush", "args": { "id": "watercolor-wash" } },
+		{ "tool": "set_color", "args": { "color": "#6fa8dc" } },
+		{ "tool": "paint_stroke", "args": { "points": [{ "x": 0, "y": 6 }, { "x": 64, "y": 6 }, { "x": 64, "y": 14 }, { "x": 0, "y": 14 }] } },
+		{ "tool": "advance_wet_paint", "args": { "seconds": 30 } },
+		{ "tool": "dry_paint" },
+		{ "tool": "get_wet_paint" }
+	]
+}

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