create-substrate 0.1.2 → 0.1.4

package/README.md

@@ -0,0 +1,53 @@
+# create-substrate
+
+Scaffold a [Substrate](https://substrate.georgedrury.co.uk) playground: a Vite + React project with a creative surface, the toolbar and panels around it, and agent skills pre-installed.
+
+```bash
+npx create-substrate
+```
+
+You are asked for a project name, a surface type and a package manager. Pass flags to skip the prompts:
+
+```bash
+npx create-substrate my-editor --surface canvas-2d --pm pnpm
+```
+
+## Surfaces
+
+| `--surface` | For |
+| --- | --- |
+| `canvas-2d` | Shape editors, whiteboards, diagram tools |
+| `3d-scene` | Product viewers, architectural tools, shader playgrounds |
+| `animation` | Keyframe editors, motion graphics, easing explorers |
+| `node-editor` | Visual programming, shader graphs, data pipelines |
+| `data-vis` | Charts, dashboards, analytics explorers |
+| `image-gen` | AI image tools, prompt-driven workflows |
+| `blank` | Scaffold only; bring your own surface |
+
+## Options
+
+| Flag | Description |
+| --- | --- |
+| `--surface <type>` | Surface type from the table above |
+| `--pm <manager>` | Package manager: `npm`, `pnpm` or `bun` |
+| `--skip-install` | Skip dependency installation |
+| `--skip-git` | Don't initialise a git repository |
+
+## What you get
+
+- A starter page for the chosen surface, built from Substrate components copied into `src/components/substrate/`
+- `CLAUDE.md` and `.claude/skills/` so coding agents know which components exist and how to compose them
+- `.mcp.json` registering the Substrate MCP server
+- [`@substrate-kit/cli`](https://www.npmjs.com/package/@substrate-kit/cli) as a dev dependency, for adding more components later:
+
+```bash
+npx substrate-kit add colour-picker timeline
+```
+
+To add Substrate to an existing project instead, run `npx @substrate-kit/cli init`.
+
+Docs: [substrate.georgedrury.co.uk/docs/create-substrate](https://substrate.georgedrury.co.uk/docs/create-substrate)
+
+## Licence
+
+MIT

package/dist/index.js

@@ -6,7 +6,7 @@ const program = new Command();
 program
     .name("create-substrate")
     .description("Scaffold a Substrate creative tool playground")
-    .version("0.1.0")
+    .version("0.1.4")
     .argument("[project-name]", "Name for the new project")
     .option("--surface <type>", "Surface type (canvas-2d, 3d-scene, animation, node-editor, data-vis, image-gen, blank)")
     .option("--pm <manager>", "Package manager (npm, pnpm, bun)")

package/dist/scaffold.js

@@ -88,7 +88,7 @@ export async function scaffold(projectName, options) {
         log.success(`Installed ${skillNames.length} skills`);
     }
     catch {
-        log.warn("Could not install skills — run 'npx substrate-kit init' to add them later");
+        log.warn("Could not install skills — run 'npx @substrate-kit/cli init' to add them later");
     }
     // 5. Write CLAUDE.md
     writeFile(join(projectDir, "CLAUDE.md"), claudeMd());
@@ -132,6 +132,7 @@ function packageJson(name, config, options) {
         "@types/react-dom": "^19",
         vite: "^6.3.0",
         "@vitejs/plugin-react": "^4.4.0",
+        "@substrate-kit/cli": "^0.1.1",
         tailwindcss: "^4",
         "@tailwindcss/vite": "^4",
         ...config.extraDevDeps,
@@ -375,6 +376,7 @@ Substrate skills are installed in \`.claude/skills/\`. They are organised into t
 - **scaffold-playground** — bootstrapping a new playground
 - **canvas-2d** / **3d-scene** / **animation** / **image-generation** / **data-visualisation** — surface-specific architecture
 - **composing-panels** / **wire-interactions** / **create-custom-tool** / **theming** — workflow guides
+- **install-components** — full catalogue of available components + how to install via \`substrate-kit add\`
 
 ### Component reference (what to use)
 
@@ -387,17 +389,24 @@ Substrate skills are installed in \`.claude/skills/\`. They are organised into t
 
 ## Install components
 
+**Always prefer existing Substrate components over writing custom ones.** Substrate ships sliders, number inputs, toggles, colour pickers, context menus, command palettes, toolbars, panels, timelines, and more — see the \`install-components\` skill for the full catalogue.
+
 \`\`\`bash
 # Core scaffold
 npx substrate-kit add design-canvas toolbar panel pane action slider
 
 # Surface components
 npx substrate-kit add surface timeline gallery colour-picker easing-curve-editor
+
+# Interactive picker (no args)
+npx substrate-kit add
 \`\`\`
 
+Do **not** run \`npx shadcn@latest add\` directly for Substrate components — always go through \`substrate-kit add\`.
+
 ## Registry
 
-Components are installed from \`substrate.georgedrury.co.uk/r/\` via the shadcn CLI.
+Components are installed from \`substrate.georgedrury.co.uk/r/\` via the Substrate CLI, which wraps shadcn under the hood.
 `;
 }
 //# sourceMappingURL=scaffold.js.map

package/dist/scaffold.js.map

@@ -1 +1 @@
-{"version":3,"file":"scaffold.js","sourceRoot":"","sources":["../src/scaffold.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"scaffold.js","sourceRoot":"","sources":["../src/scaffold.ts"],"names":[],"mappings":"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"}

package/dist/surfaces/3d-scene.js

@@ -172,8 +172,8 @@ export default function App() {
 
       <StatusBar>
         <StatusBarSection>
-          <StatusBarItem label="Mode" value={mode} />
-          {selected && <StatusBarItem label="Selected" value={selected.id} />}
+          <StatusBarItem>Mode: {mode}</StatusBarItem>
+          {selected && <StatusBarItem>Selected: {selected.id}</StatusBarItem>}
         </StatusBarSection>
       </StatusBar>
     </div>

package/dist/surfaces/animation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"animation.d.ts","sourceRoot":"","sources":["../../src/surfaces/animation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE/C,eAAO,MAAM,SAAS,EAAE,aAiNvB,CAAA"}
+{"version":3,"file":"animation.d.ts","sourceRoot":"","sources":["../../src/surfaces/animation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE/C,eAAO,MAAM,SAAS,EAAE,aAoNvB,CAAA"}

package/dist/surfaces/animation.js

@@ -135,7 +135,10 @@ export default function App() {
             <PaneContent>
               <div className="grid grid-cols-2 gap-2">
                 <NumberInput label="Frame" value={currentFrame} onChange={setCurrentFrame} min={0} max={totalFrames} />
-                <NumberInput label="Value" defaultValue={0} />
+                <div>
+                  <label className="text-xs font-medium">Value</label>
+                  <NumberInput value={0} onChange={() => {}} />
+                </div>
               </div>
             </PaneContent>
           </Pane>
@@ -180,11 +183,11 @@ export default function App() {
 
       <StatusBar>
         <StatusBarSection>
-          <StatusBarItem label="Frame" value={\`\${currentFrame} / \${totalFrames}\`} />
-          <StatusBarItem label="State" value={playing ? "Playing" : "Stopped"} />
+          <StatusBarItem>Frame: {currentFrame} / {totalFrames}</StatusBarItem>
+          <StatusBarItem>State: {playing ? "Playing" : "Stopped"}</StatusBarItem>
         </StatusBarSection>
         <StatusBarSection>
-          <HistoryControls canUndo={false} canRedo={false} onUndo={() => {}} onRedo={() => {}} />
+          <HistoryControls size="sm" />
         </StatusBarSection>
       </StatusBar>
     </div>

package/dist/surfaces/animation.js.map

@@ -1 +1 @@
-{"version":3,"file":"animation.js","sourceRoot":"","sources":["../../src/surfaces/animation.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,SAAS,GAAkB;IACtC,UAAU,EAAE;QACV,SAAS;QACT,OAAO;QACP,MAAM;QACN,UAAU;QACV,qBAAqB;QACrB,QAAQ;QACR,cAAc;QACd,kBAAkB;QAClB,YAAY;KACb;IACD,SAAS,EAAE;QACT,IAAI,EAAE,SAAS;KAChB;IACD,GAAG,EAAE,GAAG,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiMZ;CACA,CAAA"}
+{"version":3,"file":"animation.js","sourceRoot":"","sources":["../../src/surfaces/animation.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,SAAS,GAAkB;IACtC,UAAU,EAAE;QACV,SAAS;QACT,OAAO;QACP,MAAM;QACN,UAAU;QACV,qBAAqB;QACrB,QAAQ;QACR,cAAc;QACd,kBAAkB;QAClB,YAAY;KACb;IACD,SAAS,EAAE;QACT,IAAI,EAAE,SAAS;KAChB;IACD,GAAG,EAAE,GAAG,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoMZ;CACA,CAAA"}

package/dist/surfaces/blank.js

@@ -61,7 +61,7 @@ export default function App() {
 
       <StatusBar>
         <StatusBarSection>
-          <StatusBarItem label="Tool" value={tool} />
+          <StatusBarItem>Tool: {tool}</StatusBarItem>
         </StatusBarSection>
       </StatusBar>
     </div>

package/dist/surfaces/canvas-2d.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"canvas-2d.d.ts","sourceRoot":"","sources":["../../src/surfaces/canvas-2d.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE/C,eAAO,MAAM,QAAQ,EAAE,aAyItB,CAAA"}
+{"version":3,"file":"canvas-2d.d.ts","sourceRoot":"","sources":["../../src/surfaces/canvas-2d.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE/C,eAAO,MAAM,QAAQ,EAAE,aA8ItB,CAAA"}

package/dist/surfaces/canvas-2d.js

@@ -57,6 +57,11 @@ const TOOLS = [
 export default function App() {
   const [tool, setTool] = useState("select")
   const [zoom, setZoom] = useState(1)
+  const [x, setX] = useState(0)
+  const [y, setY] = useState(0)
+  const [w, setW] = useState(100)
+  const [h, setH] = useState(100)
+  const [fill, setFill] = useState("#6366f1")
 
   return (
     <div className="flex h-screen flex-col bg-background text-foreground">
@@ -90,10 +95,10 @@ export default function App() {
             </PaneHeader>
             <PaneContent>
               <div className="grid grid-cols-2 gap-2">
-                <NumberInput label="X" defaultValue={0} />
-                <NumberInput label="Y" defaultValue={0} />
-                <NumberInput label="W" defaultValue={100} />
-                <NumberInput label="H" defaultValue={100} />
+                <NumberInput label="X" value={x} onChange={setX} />
+                <NumberInput label="Y" value={y} onChange={setY} />
+                <NumberInput label="W" value={w} onChange={setW} />
+                <NumberInput label="H" value={h} onChange={setH} />
               </div>
             </PaneContent>
           </Pane>
@@ -102,7 +107,7 @@ export default function App() {
               <PaneLabel>Fill</PaneLabel>
             </PaneHeader>
             <PaneContent>
-              <ColourPicker />
+              <ColourPicker value={fill} onChange={setFill} />
             </PaneContent>
           </Pane>
         </Panel>
@@ -124,11 +129,11 @@ export default function App() {
 
       <StatusBar>
         <StatusBarSection>
-          <StatusBarItem label="Tool" value={tool} />
+          <StatusBarItem>Tool: {tool}</StatusBarItem>
         </StatusBarSection>
         <StatusBarSection>
-          <HistoryControls canUndo={false} canRedo={false} onUndo={() => {}} onRedo={() => {}} />
-          <ZoomControls zoom={zoom} onZoomIn={() => setZoom((z) => Math.min(z * 1.25, 10))} onZoomOut={() => setZoom((z) => Math.max(z / 1.25, 0.1))} onReset={() => setZoom(1)} />
+          <HistoryControls size="sm" />
+          <ZoomControls zoom={zoom} onZoomChange={setZoom} />
         </StatusBarSection>
       </StatusBar>
     </div>

package/dist/surfaces/canvas-2d.js.map

@@ -1 +1 @@
-{"version":3,"file":"canvas-2d.js","sourceRoot":"","sources":["../../src/surfaces/canvas-2d.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,QAAQ,GAAkB;IACrC,UAAU,EAAE;QACV,eAAe;QACf,SAAS;QACT,OAAO;QACP,MAAM;QACN,QAAQ;QACR,YAAY;QACZ,cAAc;QACd,eAAe;QACf,kBAAkB;QAClB,YAAY;QACZ,eAAe;KAChB;IACD,GAAG,EAAE,GAAG,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0HZ;CACA,CAAA"}
+{"version":3,"file":"canvas-2d.js","sourceRoot":"","sources":["../../src/surfaces/canvas-2d.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,QAAQ,GAAkB;IACrC,UAAU,EAAE;QACV,eAAe;QACf,SAAS;QACT,OAAO;QACP,MAAM;QACN,QAAQ;QACR,YAAY;QACZ,cAAc;QACd,eAAe;QACf,kBAAkB;QAClB,YAAY;QACZ,eAAe;KAChB;IACD,GAAG,EAAE,GAAG,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+HZ;CACA,CAAA"}

package/dist/surfaces/data-vis.js

@@ -162,9 +162,9 @@ export default function App() {
 
       <StatusBar>
         <StatusBarSection>
-          <StatusBarItem label="Chart" value={chartType} />
-          <StatusBarItem label="Metric" value={metric} />
-          <StatusBarItem label="Points" value={String(SAMPLE_DATA.length)} />
+          <StatusBarItem>Chart: {chartType}</StatusBarItem>
+          <StatusBarItem>Metric: {metric}</StatusBarItem>
+          <StatusBarItem>Points: {SAMPLE_DATA.length}</StatusBarItem>
         </StatusBarSection>
       </StatusBar>
     </div>

package/dist/surfaces/image-gen.js

@@ -177,12 +177,12 @@ export default function App() {
 
       <StatusBar>
         <StatusBarSection>
-          <StatusBarItem label="Generations" value={String(generations.length)} />
-          {generating && <StatusBarItem label="Progress" value={\`\${progress}%\`} />}
+          <StatusBarItem>Generations: {generations.length}</StatusBarItem>
+          {generating && <StatusBarItem>Progress: {progress}%</StatusBarItem>}
         </StatusBarSection>
         <StatusBarSection>
-          <StatusBarItem label="Steps" value={String(steps)} />
-          <StatusBarItem label="CFG" value={String(cfg)} />
+          <StatusBarItem>Steps: {steps}</StatusBarItem>
+          <StatusBarItem>CFG: {cfg}</StatusBarItem>
         </StatusBarSection>
       </StatusBar>
     </div>

package/dist/surfaces/node-editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"node-editor.d.ts","sourceRoot":"","sources":["../../src/surfaces/node-editor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE/C,eAAO,MAAM,UAAU,EAAE,aAiNxB,CAAA"}
+{"version":3,"file":"node-editor.d.ts","sourceRoot":"","sources":["../../src/surfaces/node-editor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE/C,eAAO,MAAM,UAAU,EAAE,aAqNxB,CAAA"}

package/dist/surfaces/node-editor.js

@@ -163,8 +163,14 @@ export default function App() {
               </PaneHeader>
               <PaneContent>
                 <div className="grid grid-cols-2 gap-2">
-                  <NumberInput label="X" value={selected.x} />
-                  <NumberInput label="Y" value={selected.y} />
+                  <div>
+                    <label className="text-xs font-medium">X</label>
+                    <NumberInput value={selected.x} onChange={() => {}} />
+                  </div>
+                  <div>
+                    <label className="text-xs font-medium">Y</label>
+                    <NumberInput value={selected.y} onChange={() => {}} />
+                  </div>
                 </div>
               </PaneContent>
             </Pane>
@@ -191,15 +197,13 @@ export default function App() {
 
       <StatusBar>
         <StatusBarSection>
-          <StatusBarItem label="Tool" value={tool} />
-          {selected && <StatusBarItem label="Node" value={selected.label} />}
+          <StatusBarItem>Tool: {tool}</StatusBarItem>
+          {selected && <StatusBarItem>Node: {selected.label}</StatusBarItem>}
         </StatusBarSection>
         <StatusBarSection>
           <ZoomControls
             zoom={zoom}
-            onZoomIn={() => setZoom((z) => Math.min(z * 1.25, 5))}
-            onZoomOut={() => setZoom((z) => Math.max(z / 1.25, 0.2))}
-            onReset={() => setZoom(1)}
+            onZoomChange={setZoom}
           />
         </StatusBarSection>
       </StatusBar>

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4LZ;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;QACf,iBAAiB;KAClB;IACD,OAAO,EAAE;;;;;;;mCAOwB;IACjC,GAAG,EAAE,GAAG,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgMZ;CACA,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-substrate",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Scaffold a Substrate creative tool playground",
   "type": "module",
   "bin": {
@@ -8,7 +8,8 @@
   },
   "scripts": {
     "build": "tsc",
-    "dev": "tsx src/index.ts"
+    "dev": "tsx src/index.ts",
+    "prepack": "node ../../scripts/sync-skills.mjs && npm run build"
   },
   "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.

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.

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.

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.