create-substrate 0.1.3 → 0.1.5

package/dist/surfaces/node-editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"node-editor.js","sourceRoot":"","sources":["../../src/surfaces/node-editor.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,UAAU,GAAkB;IACvC,UAAU,EAAE;QACV,SAAS;QACT,OAAO;QACP,MAAM;QACN,MAAM;QACN,cAAc;QACd,eAAe;QACf,YAAY;QACZ,eAAe;QACf,iBAAiB;KAClB;IACD,OAAO,EAAE;;;;;;;mCAOwB;IACjC,GAAG,EAAE,GAAG,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgMZ;CACA,CAAA"}
+{"version":3,"file":"node-editor.js","sourceRoot":"","sources":["../../src/surfaces/node-editor.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,UAAU,GAAkB;IACvC,UAAU,EAAE;QACV,SAAS;QACT,OAAO;QACP,MAAM;QACN,MAAM;QACN,cAAc;QACd,eAAe;QACf,YAAY;QACZ,eAAe;KAChB;IACD,OAAO,EAAE;;;;;;;mCAOwB;IACjC,GAAG,EAAE,GAAG,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8nBZ;CACA,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-substrate",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Scaffold a Substrate creative tool playground",
   "type": "module",
   "bin": {
@@ -8,7 +8,9 @@
   },
   "scripts": {
     "build": "tsc",
-    "dev": "tsx src/index.ts"
+    "dev": "tsx src/index.ts",
+    "prepack": "node ../../scripts/sync-skills.mjs && npm run build",
+    "prepublishOnly": "npm --prefix ../.. run release:check"
   },
   "dependencies": {
     "chalk": "^5.4.0",

package/skills/3d-scene/SKILL.md

@@ -1,3 +1,9 @@
+---
+name: 3d-scene
+description: "Build interactive 3D viewports with Substrate — scene graphs, orbit cameras, object placement, materials, and lighting. Use when the app involves spatial objects in three dimensions. Triggers on: 3D, scene, viewport, three.js, react-three-fiber, r3f, orbit camera, material editor, lighting, shader playground, product viewer, scene graph."
+user-invocable: true
+---
+
 # 3D scene
 
 Guide to building interactive 3D viewports with Substrate — object placement, orbit cameras, material editors, and lighting controls.

package/skills/animation/SKILL.md

@@ -1,3 +1,9 @@
+---
+name: animation
+description: "Build timeline-based motion tools with Substrate — keyframes, easing curves, playback controls, and animated previews. Use when the app involves motion over time. Triggers on: animation, timeline, keyframe, easing, tween, playback, motion, GSAP, sprite animation, motion graphics, ease curve."
+user-invocable: true
+---
+
 # Animation
 
 Guide to building timeline-based motion tools with Substrate — keyframe editing, easing controls, playback, and animated previews.

package/skills/canvas-2d/SKILL.md

@@ -1,3 +1,9 @@
+---
+name: canvas-2d
+description: "Build spatial 2D tools with Substrate — shape editors, diagram builders, whiteboards, and Figma-like design surfaces using the DesignCanvas component. Use when the app involves objects on an infinite pannable/zoomable plane. Triggers on: canvas, 2D, design canvas, shape editor, diagram, whiteboard, map builder, pan, zoom, infinite canvas, Figma-like, flat shapes."
+user-invocable: true
+---
+
 # 2D canvas
 
 Guide to building spatial 2D tools with Substrate — shape editors, diagram builders, whiteboard apps, and Figma-like design surfaces.
@@ -21,7 +27,7 @@ This pulls in the canvas renderer, hit-test system, interaction hooks, transform
 ### Mount
 
 ```tsx
-import { DesignCanvas } from "@/registry/substrate/canvas/design-canvas"
+import { DesignCanvas } from "@/components/substrate/design-canvas"
 
 export default function PlaygroundPage() {
 	return (

package/skills/composing-panels/SKILL.md

@@ -1,3 +1,9 @@
+---
+name: composing-panels
+description: "Compose Substrate panel UIs — how Panel, Pane, PaneHeader, Action, and ActionControls nest together to build property inspectors, layer panels, and parameter forms. Use when laying out the side panels of a playground. Triggers on: panel, pane, sidebar, inspector, property panel, layer panel, form row, action row, compose panels, nest components."
+user-invocable: true
+---
+
 # Composing panels
 
 Guide to building property panels, layer lists, and inspector UIs using Substrate's panel component system.
@@ -30,7 +36,7 @@ npx shadcn@latest add https://substrate.georgedrury.co.uk/r/slider
 ## Panel positioning
 
 ```tsx
-import { Panel } from "@/registry/substrate/components/panel"
+import { Panel } from "@/components/substrate/panel"
 
 {
 	/* Left panel — layers, tool options */
@@ -52,19 +58,19 @@ A typical properties panel reads from `useDocumentStore` and writes back via `up
 ```tsx
 "use client"
 
-import { useDocumentStore } from "@/registry/substrate/stores/document-store"
+import { useDocumentStore } from "@/stores/substrate/document-store"
 import {
 	Pane,
 	PaneHeader,
 	PaneLabel,
 	PaneAction,
-} from "@/registry/substrate/components/pane"
+} from "@/components/substrate/pane"
 import {
 	Action,
 	ActionLabel,
 	ActionControls,
-} from "@/registry/substrate/components/action"
-import { Slider } from "@/registry/substrate/components/slider"
+} from "@/components/substrate/action"
+import { Slider } from "@/components/substrate/slider"
 
 export function PropertiesPanel() {
 	const selectedIds = useDocumentStore((s) => s.selectedIds)
@@ -164,12 +170,12 @@ A layers panel lists elements in render order (bottom to top) and lets users sel
 ```tsx
 "use client"
 
-import { useDocumentStore } from "@/registry/substrate/stores/document-store"
+import { useDocumentStore } from "@/stores/substrate/document-store"
 import {
 	Pane,
 	PaneHeader,
 	PaneLabel,
-} from "@/registry/substrate/components/pane"
+} from "@/components/substrate/pane"
 
 export function LayersPanel() {
 	const elements = useDocumentStore((s) => s.elements)
@@ -218,7 +224,7 @@ export function LayersPanel() {
 Use `usePanelStore` to control panel visibility:
 
 ```tsx
-import { usePanelStore } from "@/registry/substrate/stores/panel-store"
+import { usePanelStore } from "@/stores/substrate/panel-store"
 
 const leftPanel = usePanelStore((s) => s.leftPanel)
 const rightPanel = usePanelStore((s) => s.rightPanel)

package/skills/create-custom-tool/SKILL.md

@@ -1,3 +1,9 @@
+---
+name: create-custom-tool
+description: "End-to-end guide for adding a new canvas tool to Substrate — ToolType union, element factory, renderer, hit-test, interaction handler, keyboard shortcut, and toolbar entry. Use when extending the 2D canvas with a custom drawing or editing tool. Triggers on: custom tool, new tool, tool type, element factory, toolbar toggle, canvas tool, drawing tool, add tool."
+user-invocable: true
+---
+
 # Create a custom tool
 
 End-to-end guide for adding a new canvas tool to Substrate — from type definition through to toolbar entry and keyboard shortcut.

package/skills/data-visualisation/SKILL.md

@@ -1,3 +1,9 @@
+---
+name: data-visualisation
+description: "Build interactive data exploration tools with Substrate — charts, graphs, dashboards, and visual analytics surfaces. Use when the app explores, filters, and presents data visually. Triggers on: data visualisation, dataviz, chart, graph, dashboard, analytics, D3, Observable Plot, filters, axis, aggregation, data explorer."
+user-invocable: true
+---
+
 # Data visualisation
 
 Guide to building interactive data exploration tools with Substrate — charts, graphs, dashboards, and visual analytics playgrounds.

package/skills/image-generation/SKILL.md

@@ -1,3 +1,9 @@
+---
+name: image-generation
+description: "Build prompt-driven image creation tools with Substrate — generation controls, preview surfaces, galleries, and parameter tuning. Use when the app produces AI-generated visuals via an API. Triggers on: image generation, text-to-image, Stable Diffusion, fal.ai, Replicate, inpainting, outpainting, style transfer, texture generator, prompt, gallery, generation controls."
+user-invocable: true
+---
+
 # Image generation
 
 Guide to building prompt-driven image creation tools with Substrate — generation controls, preview surfaces, galleries, and parameter tuning.

package/skills/install-components/SKILL.md

@@ -0,0 +1,199 @@
+---
+name: install-components
+description: "Catalogue of every Substrate component, hook, utility, and store — with the exact `substrate-kit add` command to install each. Use this BEFORE writing any custom slider, input, toggle, picker, toolbar, panel, or other UI primitive — Substrate almost certainly already has one. Triggers on: slider, input, toggle, select, picker, swatch, toolbar, panel, pane, modal, popover, context menu, command palette, progress bar, badge, tabs, tree, layer list, resizer, status bar, zoom, gallery, timeline, easing, node, port, custom component, build my own, write a slider, from scratch, install, substrate-kit add."
+user-invocable: true
+---
+
+# Install Substrate components
+
+**Before you write any UI primitive from scratch, check this catalogue.** Substrate ships a slider, number input, colour picker, toggle, select, context menu, command palette, toolbar, panel, timeline, easing editor, node graph, and many more — installable with a single command.
+
+## How to install
+
+All Substrate components install through the Substrate CLI, **not** by hand-rolling them or copying from other registries:
+
+```bash
+npx substrate-kit add <component-name>
+```
+
+Install several at once:
+
+```bash
+npx substrate-kit add slider number-input toggle colour-picker
+```
+
+Install every component in a category:
+
+```bash
+npx substrate-kit add --category substrate/ui/form
+npx substrate-kit add --category substrate/ui/control
+```
+
+Open an interactive picker (no arguments):
+
+```bash
+npx substrate-kit add
+```
+
+List all categories and their components:
+
+```bash
+npx substrate-kit add --list-categories
+```
+
+### Requirements
+
+- Run from a project created with `npx create-substrate` or initialised with `npx @substrate-kit/cli init`. Both add `@substrate-kit/cli` as a dev dependency, which is what makes `npx substrate-kit` resolve. The CLI looks for `components.json` — it will error if it's missing.
+- Components land in `registry/substrate/...` and related aliases defined in `components.json`.
+- Under the hood the CLI delegates to `npx shadcn@latest add` against `https://substrate.georgedrury.co.uk/r/<name>`. Do **not** use the shadcn CLI directly — always go through `substrate-kit add` so the CLI can print theme-override hints and keep the workflow uniform.
+
+### Related CLI commands
+
+| Command | What it does |
+| --- | --- |
+| `substrate-kit add <name>` | Install one or more components |
+| `substrate-kit docs <name>` | Read component docs in the terminal |
+| `substrate-kit browse <name>` | Open component docs in the browser |
+| `substrate-kit variables <name>` | Print the theme-override CSS variables for a component |
+
+---
+
+## Don't build these — install them
+
+When you catch yourself about to write a custom version of any of these, stop and run `substrate-kit add <name>` instead.
+
+### Form controls — `substrate/ui/form`
+
+| Component | Command | Use for |
+| --- | --- | --- |
+| Slider | `substrate-kit add slider` | Any range input — opacity, volume, zoom, numeric sliders |
+| Number Input | `substrate-kit add number-input` | Numeric property fields with drag-to-scrub on the label |
+| Number Slider | `substrate-kit add number-slider` | Combined slider + numeric input on one row |
+| Select | `substrate-kit add select` | Dropdown pickers (blend mode, font family, alignment) |
+| Toggle | `substrate-kit add toggle` | Binary on/off switches (snap, visibility, lock) |
+| Text Area | `substrate-kit add text-area` | Auto-resizing multi-line text input |
+
+### Higher-level controls — `substrate/ui/control`
+
+| Component | Command | Use for |
+| --- | --- | --- |
+| Colour Picker | `substrate-kit add colour-picker` | HSV picker with hex/RGB + opacity |
+| Swatch Palette | `substrate-kit add swatch-palette` | Grid of preset colours |
+| Alignment Controls | `substrate-kit add alignment-controls` | Horizontal/vertical align + distribute |
+| Collapsible Pane | `substrate-kit add collapsible-pane` | Expandable section inside a panel |
+| Layer List | `substrate-kit add layer-list` | Sortable list with visibility/lock toggles |
+| Tree List | `substrate-kit add tree-list` | Hierarchical tree with expand/collapse and drag reorder |
+| Node | `substrate-kit add node` | Card-based node with typed input/output ports |
+
+### Chrome (app shell) — `substrate/ui/chrome`
+
+| Component | Command | Use for |
+| --- | --- | --- |
+| Surface | `substrate-kit add surface` | Consistent mount point for a creative surface |
+| History Controls | `substrate-kit add history-controls` | Undo/redo buttons wired to the document store |
+| Breadcrumbs | `substrate-kit add breadcrumbs` | Document/frame hierarchy navigation |
+| Command Palette | `substrate-kit add command-palette` | Cmd-K searchable command launcher |
+| Document Tabs | `substrate-kit add document-tabs` | Tab bar for open documents |
+| Resizer | `substrate-kit add resizer` | Draggable split-pane handle |
+| Shortcut Overlay | `substrate-kit add shortcut-overlay` | `?`-triggered keyboard shortcuts overlay |
+| Status Bar | `substrate-kit add status-bar` | Bottom bar for tool/selection/zoom info |
+| Zoom Controls | `substrate-kit add zoom-controls` | Zoom in/out/reset with percentage display |
+
+### Core UI — `substrate/ui`
+
+| Component | Command | Use for |
+| --- | --- | --- |
+| Toolbar | `substrate-kit add toolbar` | Floating toolbar with toggle groups and tooltips |
+| Panel | `substrate-kit add panel` | Left/right side panel container |
+| Pane | `substrate-kit add pane` | Content section (header + label + actions) inside a panel |
+| Action | `substrate-kit add action` | Labelled form-row container |
+| Badge | `substrate-kit add badge` | Small status indicator |
+| Context Menu | `substrate-kit add context-menu` | Right-click menu with items, separators, submenus |
+| Empty State | `substrate-kit add empty-state` | Placeholder for empty panels/lists |
+| Popover | `substrate-kit add popover` | Floating content anchored to a trigger |
+| Progress Bar | `substrate-kit add progress-bar` | Horizontal progress indicator |
+| Toast | `substrate-kit add toast` | Notifications with undo, powered by Sonner |
+
+### Animation — `substrate/ui/animation`
+
+| Component | Command | Use for |
+| --- | --- | --- |
+| Timeline | `substrate-kit add timeline` | Ruler + playhead + tracks + keyframe diamonds |
+| Easing Curve Editor | `substrate-kit add easing-curve-editor` | Draggable cubic-bezier editor |
+
+### Visualisation — `substrate/ui/visualization`
+
+| Component | Command | Use for |
+| --- | --- | --- |
+| Gallery | `substrate-kit add gallery` | Responsive thumbnail grid with selection and actions |
+
+### 2D canvas — `substrate/canvas`
+
+| Component | Command | Use for |
+| --- | --- | --- |
+| Design Canvas | `substrate-kit add design-canvas` | The main HTML5 canvas component (pulls in renderer/hit-test/interaction) |
+| Renderer | `substrate-kit add renderer` | Pure Canvas 2D draw functions |
+| Hit Test | `substrate-kit add hit-test` | Point-in-element geometry |
+| Element Factory | `substrate-kit add element-factory` | Factories for rectangle/ellipse/text/etc |
+
+### Canvas hooks — `substrate/canvas` & `substrate/hook`
+
+| Hook | Command | Use for |
+| --- | --- | --- |
+| useCanvasRenderer | `substrate-kit add use-canvas-renderer` | rAF render loop with dirty-flag optimisation |
+| useCanvasInteraction | `substrate-kit add use-canvas-interaction` | Pointer-event state machine (idle/pan/create/drag) |
+| useCanvasDrag | `substrate-kit add use-canvas-drag` | Drag tracking (create/move/resize) |
+| useCanvasTransform | `substrate-kit add use-canvas-transform` | Screen↔world coordinate conversion, pan, zoom |
+| useHitTest | `substrate-kit add use-hit-test` | Hit-testing wrapper around canvas state |
+| useKeyboardShortcuts | `substrate-kit add use-keyboard-shortcuts` | Global keyboard shortcut binding |
+| useSelection | `substrate-kit add use-selection` | Multi-select with cmd/shift modifiers |
+| useDragReorder | `substrate-kit add use-drag-reorder` | Pointer-based list reordering |
+| useClipboard | `substrate-kit add use-clipboard` | Copy/cut/paste with system clipboard |
+| useViewport | `substrate-kit add use-viewport` | Pan/zoom state for canvas surfaces |
+| useUndoable | `substrate-kit add use-undoable` | Lightweight undo/redo stack |
+
+### Stores — `substrate/store`
+
+| Store | Command | Use for |
+| --- | --- | --- |
+| document-store | `substrate-kit add document-store` | Elements, camera, selection, history |
+| tool-store | `substrate-kit add tool-store` | Active tool + temporary tool support |
+| panel-store | `substrate-kit add panel-store` | Left/right panel visibility, open panes |
+| animation-store | `substrate-kit add animation-store` | Playback: duration, time, play/pause |
+
+### Libraries — `substrate/lib`
+
+| Lib | Command | Use for |
+| --- | --- | --- |
+| types | `substrate-kit add types` | Core canvas type definitions |
+| math | `substrate-kit add math` | Geometry helpers (rotate, clamp, hit, distance) |
+| id | `substrate-kit add id` | `crypto.randomUUID` wrapper |
+| color | `substrate-kit add color` | OKLCh parsing and manipulation |
+| keyboard-shortcuts | `substrate-kit add keyboard-shortcuts` | Declarative shortcut registration + formatting |
+| snap | `substrate-kit add snap` | Grid + smart edge snapping |
+| bounding-box | `substrate-kit add bounding-box` | AABB union/intersect/contain/expand |
+| easing | `substrate-kit add easing` | Cubic bezier easing presets and evaluation |
+
+---
+
+## Rules of thumb
+
+1. **If you're about to write a form control, stop.** `slider`, `number-input`, `number-slider`, `select`, `toggle`, `text-area` already exist. Writing a custom one means throwing away the `data-slot` composition that makes `ActionControls` style children automatically.
+2. **If you're about to write a colour picker, stop.** `colour-picker` and `swatch-palette` exist.
+3. **If you're about to write a context menu, command palette, toast, or popover, stop.** All four are in the registry.
+4. **If you're about to write a panel/pane/toolbar/status bar, stop.** The entire app shell is packaged — see `substrate-scaffold` for composition patterns.
+5. **If you're about to write a canvas renderer or hit-test from scratch, stop.** `design-canvas` bundles the renderer, hit-test, interaction state machine, and keyboard shortcuts.
+6. **Never use `npx shadcn@latest add` directly** for Substrate components — go through `substrate-kit add` so theme hints and workflow stay consistent.
+
+## Cross-references
+
+| Want a domain overview? | Skill |
+| --- | --- |
+| Form controls and property editors | **substrate-controls** |
+| App shell (toolbar, panels, tabs, status bar) | **substrate-scaffold** |
+| Spatial hooks (viewport, selection, snapping) | **substrate-canvas** |
+| Node graph (nodes, ports, wires) | **substrate-nodes** |
+| Status/notification/discovery UI | **substrate-feedback** |
+| Selection/undo/clipboard/shortcuts wiring | **substrate-interaction** |
+| Building a new playground | **scaffold-playground** |
+| Composing a property panel | **composing-panels** |

package/skills/scaffold-playground/SKILL.md

@@ -1,3 +1,9 @@
+---
+name: scaffold-playground
+description: "Bootstrap a new Substrate playground from scratch — choose a surface type, install chrome primitives, and compose the surface + panels + toolbar layout. Use when starting a new interactive app or initialising Substrate in an existing project. Triggers on: new playground, scaffold, bootstrap, start project, substrate create, substrate init, set up Substrate, new app, starter."
+user-invocable: true
+---
+
 # Scaffold a Substrate playground
 
 Step-by-step guide to bootstrapping a new interactive playground from Substrate primitives.
@@ -11,7 +17,7 @@ A Substrate playground is a creative app built from composable primitives: a **s
 A Next.js 14+ project with Tailwind CSS and the shadcn CLI configured. If you don't have one, run:
 
 ```bash
-npx substrate create my-playground
+npx create-substrate my-playground
 ```
 
 This scaffolds a full project with dependencies, globals.css with Substrate tokens, and a starter playground page.
@@ -19,7 +25,7 @@ This scaffolds a full project with dependencies, globals.css with Substrate toke
 To add Substrate to an existing project instead:
 
 ```bash
-npx substrate-kit init
+npx @substrate-kit/cli init
 ```
 
 This installs skills, CLAUDE.md, components.json, and registers the MCP server.
@@ -64,15 +70,15 @@ Every playground follows the same layout pattern — surface in the centre, opti
 ```tsx
 "use client"
 
-import { Panel } from "@/registry/substrate/components/panel"
+import { Panel } from "@/components/substrate/panel"
 import {
 	Toolbar,
 	ToolbarToggleGroup,
 	ToolbarToggle,
 	ToolbarSeparator,
-} from "@/registry/substrate/components/toolbar"
-import { usePanelStore } from "@/registry/substrate/stores/panel-store"
-import { useToolStore } from "@/registry/substrate/stores/tool-store"
+} from "@/components/substrate/toolbar"
+import { usePanelStore } from "@/stores/substrate/panel-store"
+import { useToolStore } from "@/stores/substrate/tool-store"
 
 export default function PlaygroundPage() {
 	const leftPanel = usePanelStore((s) => s.leftPanel)

package/skills/substrate-controls/SKILL.md

@@ -40,7 +40,7 @@ A horizontal row that auto-styles its children:
 | `colour-swatch`  | `size-4`, removes border             |
 | `slider`         | Removes border                       |
 
-**Exports**: `ActionControls`, `ActionLabel`, `ActionSeparator`
+**Exports**: `Action`, `ActionLabel`, `ActionControls`
 
 **Typical use**: Group a label + one or more controls on a single row inside a pane.
 
@@ -173,14 +173,12 @@ Cubic bezier editor with draggable control points and real-time preview.
 		<ActionControls>
 			<ActionLabel>X</ActionLabel>
 			<NumberInput value={x} onChange={setX} onStart={pushSnapshot} />
-			<ActionSeparator />
 			<ActionLabel>Y</ActionLabel>
 			<NumberInput value={y} onChange={setY} onStart={pushSnapshot} />
 		</ActionControls>
 		<ActionControls>
 			<ActionLabel>W</ActionLabel>
 			<NumberInput value={w} onChange={setW} min={0} onStart={pushSnapshot} />
-			<ActionSeparator />
 			<ActionLabel>H</ActionLabel>
 			<NumberInput value={h} onChange={setH} min={0} onStart={pushSnapshot} />
 		</ActionControls>

package/skills/theming/SKILL.md

@@ -1,3 +1,9 @@
+---
+name: theming
+description: "Customise the visual appearance of Substrate — CSS variable fallback chains (Tailwind v4), canvas background, chrome tokens, element colours, and per-component overrides exposed by the registry. Use when restyling, rebranding, or matching a design system. Triggers on: theme, theming, colors, palette, CSS variables, design tokens, rebrand, dark mode, Tailwind v4, canvas colour, chrome styling, override tokens."
+user-invocable: true
+---
+
 # Theming Substrate
 
 Guide to customising the visual appearance of Substrate's canvas, UI chrome, and elements.

package/skills/wire-interactions/SKILL.md

@@ -1,3 +1,9 @@
+---
+name: wire-interactions
+description: "Wire up Substrate's interaction pipeline — pointer events, drag state machine, hit testing, coordinate transforms, mutations, and keyboard shortcuts. Use when connecting a canvas surface to the document store or debugging interaction flows. Triggers on: pointer events, drag, interaction state machine, hit test, useCanvasInteraction, useCanvasDrag, useCanvasTransform, keyboard shortcut, wire up, connect canvas."
+user-invocable: true
+---
+
 # Wire interactions
 
 Guide to connecting canvas pointer events, drag state, keyboard shortcuts, and the interaction state machine in Substrate.