@pixerate/editor 0.223.7 → 0.223.9

package/skills/pixerate-canvas-design-system-components/evals/combine-variants.json

@@ -0,0 +1,172 @@
+{
+	"prompt": "These two buttons are versions of one button. Combine them into a single component with a 'Style' property whose values are Primary and Secondary.",
+	"fixture": {
+		"editor": "canvas",
+		"nodes": [
+			{
+				"id": "primary",
+				"type": "group",
+				"position": {
+					"x": 0,
+					"y": 0
+				},
+				"width": 120,
+				"height": 40,
+				"data": {
+					"label": "Button / Primary"
+				}
+			},
+			{
+				"id": "pbg",
+				"type": "shape",
+				"position": {
+					"x": 0,
+					"y": 0
+				},
+				"width": 120,
+				"height": 40,
+				"data": {
+					"label": "Bg",
+					"shape": {
+						"kind": "rect",
+						"fill": "#1d3557"
+					}
+				},
+				"parentId": "primary"
+			},
+			{
+				"id": "secondary",
+				"type": "group",
+				"position": {
+					"x": 0,
+					"y": 60
+				},
+				"width": 120,
+				"height": 40,
+				"data": {
+					"label": "Button / Secondary"
+				}
+			},
+			{
+				"id": "sbg",
+				"type": "shape",
+				"position": {
+					"x": 0,
+					"y": 0
+				},
+				"width": 120,
+				"height": 40,
+				"data": {
+					"label": "Bg",
+					"shape": {
+						"kind": "rect",
+						"fill": "#ffffff"
+					}
+				},
+				"parentId": "secondary"
+			}
+		],
+		"setup": [
+			{
+				"tool": "create_component",
+				"args": {
+					"ids": [
+						"primary"
+					]
+				}
+			},
+			{
+				"tool": "create_component",
+				"args": {
+					"ids": [
+						"secondary"
+					]
+				}
+			}
+		]
+	},
+	"checks": [
+		{
+			"why": "one component set with a Style property whose values are Primary and Secondary",
+			"tool": "list_components",
+			"expect": {
+				"sets": {
+					"$length": 1,
+					"$some": {
+						"options": [
+							{
+								"name": "Style",
+								"values": {
+									"$expr": "[...v].sort().join() === 'Primary,Secondary'"
+								}
+							}
+						]
+					}
+				}
+			}
+		},
+		{
+			"why": "the primary button is the Primary variant",
+			"tool": "list_components",
+			"expect": {
+				"components": {
+					"$some": {
+						"id": "primary",
+						"variant": {
+							"Style": "Primary"
+						}
+					}
+				}
+			}
+		}
+	],
+	"solution": [
+		{
+			"tool": "combine_as_variants",
+			"args": {
+				"ids": [
+					"primary",
+					"secondary"
+				]
+			}
+		},
+		{
+			"tool": "list_components"
+		},
+		{
+			"tool": "rename_variant_property",
+			"args": {
+				"name": "Property 1",
+				"newName": "Style",
+				"setId": {
+					"$read": "list_components",
+					"path": "sets.0.id"
+				}
+			}
+		},
+		{
+			"tool": "rename_variant_value",
+			"args": {
+				"property": "Style",
+				"value": "Default",
+				"newValue": "Primary",
+				"setId": {
+					"$read": "list_components",
+					"path": "sets.0.id"
+				}
+			}
+		},
+		{
+			"tool": "rename_variant_value",
+			"args": {
+				"property": "Style",
+				"value": "Variant2",
+				"newValue": "Secondary",
+				"setId": {
+					"$read": "list_components",
+					"path": "sets.0.id"
+				}
+			}
+		}
+	]
+}

package/skills/pixerate-canvas-design-system-components/evals/make-component.json

@@ -0,0 +1,103 @@
+{
+	"prompt": "Turn the card into a reusable component and place two instances of it below the original, side by side.",
+	"fixture": {
+		"editor": "canvas",
+		"nodes": [
+			{
+				"id": "card",
+				"type": "group",
+				"position": {
+					"x": 0,
+					"y": 0
+				},
+				"width": 200,
+				"height": 100,
+				"data": {
+					"label": "Card"
+				}
+			},
+			{
+				"id": "bg",
+				"type": "shape",
+				"position": {
+					"x": 0,
+					"y": 0
+				},
+				"width": 200,
+				"height": 100,
+				"data": {
+					"label": "Bg",
+					"shape": {
+						"kind": "rect",
+						"fill": "#eeeeee"
+					}
+				},
+				"parentId": "card"
+			},
+			{
+				"id": "title",
+				"type": "text",
+				"parentId": "card",
+				"position": {
+					"x": 10,
+					"y": 10
+				},
+				"data": {
+					"label": "Hello",
+					"name": "Title"
+				}
+			}
+		]
+	},
+	"checks": [
+		{
+			"why": "one component, made from the card",
+			"tool": "list_components",
+			"expect": {
+				"components": {
+					"$length": 1,
+					"$some": {
+						"id": "card"
+					}
+				}
+			}
+		},
+		{
+			"why": "two instances below the card",
+			"tool": "get_canvas_document",
+			"expect": {
+				"document": {
+					"nodes": {
+						"$expr": "v.filter((n) => n.data && n.data.instance && n.position.y >= 100).length === 2"
+					}
+				}
+			}
+		}
+	],
+	"solution": [
+		{
+			"tool": "create_component",
+			"args": {
+				"ids": [
+					"card"
+				]
+			}
+		},
+		{
+			"tool": "create_instance",
+			"args": {
+				"componentId": "card",
+				"x": 0,
+				"y": 150
+			}
+		},
+		{
+			"tool": "create_instance",
+			"args": {
+				"componentId": "card",
+				"x": 240,
+				"y": 150
+			}
+		}
+	]
+}

package/skills/pixerate-canvas-layout/SKILL.md

@@ -0,0 +1,95 @@
+---
+name: pixerate-canvas-layout
+description: The layout workflow in the Pixerate canvas - tidying a board or screen by aligning edges and centres, distributing elements evenly, keeping consistent spacing on a grid, ordering layers so the right things are on top, grouping related elements, locking backgrounds and guides, and checking the result. Use when asked to align, line up, centre, distribute, space evenly, tidy, clean up or lay out elements on a canvas, board, screen, slide or wireframe, bring something to the front or send it back, or lock a layer, or when canvas.alignLeft, canvas.distributeHorizontal, canvas.bringToFront or canvas.lock are available. Load with pixerate-canvas, which lists every tool.
+metadata:
+  kind: workflow
+  reference: pixerate-canvas
+---
+
+# Laying out a canvas
+
+A tidy layout comes from a few relations applied deliberately: shared edges and centres,
+equal gaps, a consistent spacing scale, and a stacking order where what matters is on top.
+Use the arrange commands rather than moving nodes by hand: they act on exact geometry, keep
+other axes untouched, and are one undo step each.
+
+This skill is the method. `pixerate-canvas` has the full tool reference; run the `canvas.*`
+commands with `run_command` (`params: { ids }`) or several in one `run_commands` batch.
+
+## Goal and quality bar
+
+- Elements in a row share a top, centre or bottom; elements in a column share a left, centre or
+  right edge.
+- Gaps between repeated elements are equal, on the spacing scale (multiples of 4 or 8).
+- The stacking order matches meaning: backgrounds at the back, content above, badges, overlays
+  and annotations on top.
+- Backgrounds, guides and finished areas are locked so they cannot be moved by accident.
+- Only the intended axis changes: aligning tops does not move anything sideways.
+
+## Inputs to confirm
+
+- **Which elements** belong together (a row of cards, a form column) and the anchor (the first
+  element, the container, the canvas).
+- **Spacing:** equal distribution between fixed ends, or a set gap.
+- **What must stay put**, and what to lock.
+
+## Working method
+
+1. **Read.** `get_canvas_document` for node ids, positions, sizes, parents and z-order.
+   **Check:** you know the rows, columns and stacking you want.
+2. **Align** rows and columns: `canvas.alignTop`, `canvas.alignMiddle`, `canvas.alignBottom`,
+   `canvas.alignLeft`, `canvas.alignCenter`, `canvas.alignRight` with the group's `ids`.
+   **Check:** the shared coordinate is equal; the other axis is unchanged.
+3. **Distribute** repeated elements: `canvas.distributeHorizontal` or `canvas.distributeVertical`
+   (the outer elements stay, the gaps between them become equal).
+   **Check:** the gaps are equal within a pixel.
+4. **Order layers.** `canvas.bringToFront`, `canvas.bringForward`, `canvas.sendBackward`,
+   `canvas.sendToBack`; order is by `zIndex`, then document order.
+   **Check:** what must be on top has the highest effective order.
+5. **Lock** backgrounds and finished parts: `canvas.lock` (`canvas.unlock` to edit again).
+   **Check:** locked nodes are no longer draggable in `get_canvas_document`.
+6. **Look** with the host's view (`capture_view`, `view_editor`) when available.
+
+## Decision table
+
+| Want | Command |
+| --- | --- |
+| A row lined up | `canvas.alignTop` (or `canvas.alignMiddle` for mixed heights) |
+| A column lined up | `canvas.alignLeft` (or `canvas.alignCenter`) |
+| Even gaps between fixed ends | `canvas.distributeHorizontal` / `canvas.distributeVertical` |
+| Something hidden behind | `canvas.bringToFront` |
+| A background covering content | `canvas.sendToBack` |
+| One step up or down | `canvas.bringForward` / `canvas.sendBackward` |
+| Protect a background or guide | `canvas.lock` |
+
+## Recipes
+
+**Line up a row of cards.** `run_command` `{ id: "canvas.alignTop", params: { ids: ["a", "b",
+"c"] } }`.
+
+**Even spacing.** `run_command` `{ id: "canvas.distributeHorizontal", params: { ids } }`; the
+leftmost and rightmost stay where they are.
+
+**Badge on top, background locked.** `run_commands` with `canvas.bringToFront` `{ ids: ["badge"]
+}` and `canvas.lock` `{ ids: ["backdrop"] }`.
+
+## Pitfalls
+
+- **Moving by hand** with rounded numbers drifts; align and distribute act on exact geometry.
+- **Distributing two elements** does nothing; it needs at least three.
+- **Aligning across different parents** aligns in each parent's own space; group or reparent
+  first.
+- **Stacking by array order only**: `zIndex` wins over order; read the effective order.
+- **Locked nodes** refuse moves; unlock, change, lock again.
+- **Aligning everything to one edge** of the canvas when the group should align to itself.
+
+## Tools used
+
+- `get_canvas_document`: node positions, sizes, parents, z-order and locks
+- `canvas.alignLeft`, `canvas.alignCenter`, `canvas.alignRight`: column alignment
+- `canvas.alignTop`, `canvas.alignMiddle`, `canvas.alignBottom`: row alignment
+- `canvas.distributeHorizontal`, `canvas.distributeVertical`: even gaps
+- `canvas.bringToFront`, `canvas.bringForward`, `canvas.sendBackward`, `canvas.sendToBack`: stacking order
+- `canvas.lock`, `canvas.unlock`: protect backgrounds and finished parts
+- `capture_view`, `view_editor`: look at the result
+- `undo_canvas`: take back a step

package/skills/pixerate-canvas-layout/evals/align-tops.json

@@ -0,0 +1,98 @@
+{
+	"prompt": "Line up the tops of the three cards.",
+	"fixture": {
+		"editor": "canvas",
+		"nodes": [
+			{
+				"id": "a",
+				"type": "shape",
+				"position": {
+					"x": 0,
+					"y": 10
+				},
+				"width": 100,
+				"height": 80,
+				"data": {
+					"label": "Card A",
+					"shape": {
+						"kind": "rect",
+						"fill": "#eeeeee"
+					}
+				}
+			},
+			{
+				"id": "b",
+				"type": "shape",
+				"position": {
+					"x": 130,
+					"y": 30
+				},
+				"width": 100,
+				"height": 80,
+				"data": {
+					"label": "Card B",
+					"shape": {
+						"kind": "rect",
+						"fill": "#eeeeee"
+					}
+				}
+			},
+			{
+				"id": "c",
+				"type": "shape",
+				"position": {
+					"x": 300,
+					"y": 0
+				},
+				"width": 100,
+				"height": 80,
+				"data": {
+					"label": "Card C",
+					"shape": {
+						"kind": "rect",
+						"fill": "#eeeeee"
+					}
+				}
+			}
+		]
+	},
+	"checks": [
+		{
+			"why": "all three tops at the same y",
+			"tool": "get_canvas_document",
+			"expect": {
+				"document": {
+					"nodes": {
+						"$expr": "new Set(v.map((n) => n.position.y)).size === 1"
+					}
+				}
+			}
+		},
+		{
+			"why": "the horizontal positions are unchanged",
+			"tool": "get_canvas_document",
+			"expect": {
+				"document": {
+					"nodes": {
+						"$expr": "v.map((n) => n.position.x).join() === '0,130,300'"
+					}
+				}
+			}
+		}
+	],
+	"solution": [
+		{
+			"tool": "run_command",
+			"args": {
+				"id": "canvas.alignTop",
+				"params": {
+					"ids": [
+						"a",
+						"b",
+						"c"
+					]
+				}
+			}
+		}
+	]
+}

package/skills/pixerate-canvas-layout/evals/distribute-evenly.json

@@ -0,0 +1,98 @@
+{
+	"prompt": "Space the three cards evenly across, keeping the first and last where they are.",
+	"fixture": {
+		"editor": "canvas",
+		"nodes": [
+			{
+				"id": "a",
+				"type": "shape",
+				"position": {
+					"x": 0,
+					"y": 0
+				},
+				"width": 100,
+				"height": 80,
+				"data": {
+					"label": "Card A",
+					"shape": {
+						"kind": "rect",
+						"fill": "#eeeeee"
+					}
+				}
+			},
+			{
+				"id": "b",
+				"type": "shape",
+				"position": {
+					"x": 120,
+					"y": 0
+				},
+				"width": 100,
+				"height": 80,
+				"data": {
+					"label": "Card B",
+					"shape": {
+						"kind": "rect",
+						"fill": "#eeeeee"
+					}
+				}
+			},
+			{
+				"id": "c",
+				"type": "shape",
+				"position": {
+					"x": 300,
+					"y": 0
+				},
+				"width": 100,
+				"height": 80,
+				"data": {
+					"label": "Card C",
+					"shape": {
+						"kind": "rect",
+						"fill": "#eeeeee"
+					}
+				}
+			}
+		]
+	},
+	"checks": [
+		{
+			"why": "equal gaps between the cards",
+			"tool": "get_canvas_document",
+			"expect": {
+				"document": {
+					"nodes": {
+						"$expr": "(() => { const xs = v.map((n) => n.position.x).sort((p, q) => p - q); return Math.abs((xs[1] - xs[0]) - (xs[2] - xs[1])) <= 1; })()"
+					}
+				}
+			}
+		},
+		{
+			"why": "the outer cards stay put",
+			"tool": "get_canvas_document",
+			"expect": {
+				"document": {
+					"nodes": {
+						"$expr": "v.find((n) => n.id === 'a').position.x === 0 && v.find((n) => n.id === 'c').position.x === 300"
+					}
+				}
+			}
+		}
+	],
+	"solution": [
+		{
+			"tool": "run_command",
+			"args": {
+				"id": "canvas.distributeHorizontal",
+				"params": {
+					"ids": [
+						"a",
+						"b",
+						"c"
+					]
+				}
+			}
+		}
+	]
+}

package/skills/pixerate-canvas-layout/evals/order-and-lock.json

@@ -0,0 +1,110 @@
+{
+	"prompt": "The badge is hidden behind the card: bring it to the front, and lock the background so it can't be moved by accident.",
+	"fixture": {
+		"editor": "canvas",
+		"nodes": [
+			{
+				"id": "backdrop",
+				"type": "shape",
+				"position": {
+					"x": 0,
+					"y": 0
+				},
+				"width": 400,
+				"height": 300,
+				"data": {
+					"label": "Background",
+					"shape": {
+						"kind": "rect",
+						"fill": "#f1faee"
+					}
+				}
+			},
+			{
+				"id": "badge",
+				"type": "shape",
+				"position": {
+					"x": 280,
+					"y": 20
+				},
+				"width": 40,
+				"height": 40,
+				"data": {
+					"label": "Badge",
+					"shape": {
+						"kind": "rect",
+						"fill": "#e63946"
+					}
+				}
+			},
+			{
+				"id": "card",
+				"type": "shape",
+				"position": {
+					"x": 40,
+					"y": 20
+				},
+				"width": 300,
+				"height": 200,
+				"data": {
+					"label": "Card",
+					"shape": {
+						"kind": "rect",
+						"fill": "#ffffff"
+					}
+				}
+			}
+		]
+	},
+	"checks": [
+		{
+			"why": "the badge is drawn last (on top)",
+			"tool": "get_canvas_document",
+			"expect": {
+				"document": {
+					"nodes": {
+						"$expr": "(() => { const z = (n) => (typeof n.zIndex === 'number' ? n.zIndex : 0); const order = v.map((n, i) => ({ id: n.id, z: z(n), i })).sort((a, b) => a.z - b.z || a.i - b.i); return order[order.length - 1].id === 'badge'; })()"
+					}
+				}
+			}
+		},
+		{
+			"why": "the background is locked",
+			"tool": "get_canvas_document",
+			"expect": {
+				"document": {
+					"nodes": {
+						"$some": {
+							"id": "backdrop",
+							"$expr": "v.draggable === false || (v.data && v.data.locked === true) || v.locked === true"
+						}
+					}
+				}
+			}
+		}
+	],
+	"solution": [
+		{
+			"tool": "run_command",
+			"args": {
+				"id": "canvas.bringToFront",
+				"params": {
+					"ids": [
+						"badge"
+					]
+				}
+			}
+		},
+		{
+			"tool": "run_command",
+			"args": {
+				"id": "canvas.lock",
+				"params": {
+					"ids": [
+						"backdrop"
+					]
+				}
+			}
+		}
+	]
+}

package/skills/pixerate-color/SKILL.md

@@ -7,6 +7,14 @@ description: How to inspect colours, check and optimize WCAG contrast and access
 
 The colour module provides DOM-free colour tools for inspection, WCAG accessibility validation, colour-vision deficiency simulation, palette audits, colour harmony suggestions, and perceptual blending.
 
+## Workflow skills
+
+For these jobs, load the workflow skill too: it has the method, the checks between steps and
+the pitfalls, and uses the tools below.
+
+- `pixerate-accessibility-audit`: contrast, colour-blind-safe meaning, both modes, fixes and a report.
+- `pixerate-brand-application`: brand roles, exact palette values, readable text, derivatives.
+
 ## Working method
 
 1. **Inspect and convert.** Run `inspect_color` to parse any hex, `rgb()`, `hsl()`, `oklch()`, or CSS named colour into standard formats (hex, rgb, hsl, oklch) and relative luminance, and to check if it fits within the sRGB gamut.