Agent skill · posthog
composing-grid-canvases
Compose PostHog grid canvases — widget grids (including the user's home canvas) built from reusable component canvases. Use when a task asks to add, fill, move, resize, or remove a widget on a grid or home canvas, to compose a whole canvas of widgets from one ask, to build a reusable widget/component, or when a placement id or grid canvas id is the target. Covers the component store search → configure → fork → build ladder, the component placement contract (size, configSchema), the placement lifecycle (pending/generating/live/failed), the guarded layout patch loop, and reading the canvas's comment threads.
What it needs
About 5k tokens when loaded.
What this skill does
Composing grid canvases A grid canvas is a composition, not an app: a grid of placements, each rendering a component canvas (a reusable widget with its own source, build, and placement contract). The user's home canvas is an ordinary grid canvas in their personal channel. Layout is data — publishing or patching one is live immediately, with no build. Three canvas kinds share one lifecycle: freeform — a standalone app (the building-canvases skill owns these). component — a reusable widget. Same source/build pipeline as freeform, plus a placement contract. Visibility rides its channel: personal channel = private, team channel = shared. grid — a layout of placements referencing components. No file source; layout only. The resolution ladder: configure, fork, build When a grid placement needs content ("a weather widget here", "a kanban of my tasks"), resolve in this order — placing an existing component beats authoring a duplicate: 1. Search the store: canvas-list with kind=component and search=<what the widget shows>. A component is placeable when both componentmeta and publishedbuildid are set. If its configSchema can express the request ("weather for Lisbon" → existing weather component with config: {"location": "Lisbon"}), place and configure it — write no code. 2. Fork when a component is close but its config cannot express the ask: read its source (canvas-source-retrieve), create a new component (canvas-create with kind=component), adapt, publish. Name the difference in the new component's description. 3. Build new when nothing fits — see "Building a component" below. New components land in the channel you create them in. Create them in the same channel as the grid they serve unless the user asks to share them more widely. Building a component A component is authored exactly like a freeform canvas — load building-react-quill-canvases (or building-html-canvases) plus querying-canvas-data and validating-and-publishing-canvases — with three additions. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills posthog/composing-grid-canvases