Skills

Reusable capabilities for AI agents

Surface skills

Skills that teach Claude how to set up and wire different types of creative surfaces into the Substrate chrome.

2D canvas

Shape editors, diagrams, whiteboards, and Figma-like design surfaces.

Substrate's default surface. Covers the full rendering pipeline, coordinate systems, element CRUD, hit-testing, and how to extend with custom element types and rendering logic.

3D scene

Interactive 3D viewports with orbit cameras, materials, and lighting.

3d-scene.md

Build 3D tools using Three.js via React Three Fiber. Covers scene graph stores, transform gizmos, raycasting for selection, and wiring material/lighting properties to Substrate panels.

Animation

Timeline-based motion tools with keyframe editing and playback.

animation.md

Build animation editors using GSAP. Covers timeline interaction, keyframe stores, easing curve editors, playback loops, and how to scrub a GSAP timeline from Substrate state.

Image generation

Prompt-driven image creation with parameter tuning and galleries.

image-generation.md

Build AI image tools using fal.ai or similar providers. Covers generation stores, server actions, prompt editing, seed management, image comparison, and inpainting extensions.

Data visualisation

Charts, dashboards, and interactive data exploration.

data-visualisation.md

Build data tools using Recharts and D3. Covers data loading, column type inference, chart configuration stores, axis assignment, brushing and linking, and dashboard grid layouts.

Workflow skills

Skills that guide common Substrate development patterns, regardless of surface type.

Scaffold playground

Bootstrap a new playground with surface, chrome, and stores.

scaffold-playground.md

The starting point for any new Substrate app. Walks through choosing a surface, installing chrome primitives, composing the layout, and links to all other skills.

Create custom tool

Add a new canvas tool end-to-end.

create-custom-tool.md

Guides you through the full 8-step pipeline: type definition, element factory, renderer, hit-test, interaction hook, keyboard shortcut, cursor mapping, and toolbar entry. Also covers tools that don't create elements.

Theming

Customise the visual appearance of Substrate components and canvas.

theming.md

Covers CSS variable tokens for UI chrome, canvas renderer colour constants, per-component className overrides, cursor customisation, and dark mode support.

Wire interactions

Connect pointer events, drag state, and keyboard shortcuts.

wire-interactions.md

Documents the full interaction architecture — the state machine, coordinate system, drag tracking, and how to add custom interaction patterns. Includes the pointer event lifecycle and keyboard shortcut conventions.

Composing panels

Build property panels, layers lists, and inspector UIs.

composing-panels.md

Shows how to compose Panel, Pane, Action, and Slider into property inspectors and layer panels. Covers store wiring, undo/redo integration, conditional panes by element type, and multi-selection patterns.