Canvas
openclaw/openclaw
Present hosted widget documents on a connected macOS panel and control panel visibility or navigation.
Create or update a Pier Canvas under .pier/canvases using pier/canvas, pier/host, and project components.
$ npx skills add runloom/pier --skill pier-canvas -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install runloom/pier pier-canvas --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/runloom/pier.git skills-src && mkdir -p .claude/skills && cp -r skills-src/resources/system-skills/pier-canvas .claude/skills/pier-canvas && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "pier-canvas" agent skill from https://github.com/runloom/pier/tree/main/resources/system-skills/pier-canvas into .claude/skills/pier-canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pier-canvas", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/runloom/pier/tree/main/resources/system-skills/pier-canvasType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add runloom/pier --skill pier-canvas -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install runloom/pier pier-canvas --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/runloom/pier.git skills-src && mkdir -p .agents/skills && cp -r skills-src/resources/system-skills/pier-canvas .agents/skills/pier-canvas && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "pier-canvas" agent skill from https://github.com/runloom/pier/tree/main/resources/system-skills/pier-canvas into .agents/skills/pier-canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pier-canvas", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add runloom/pier --skill pier-canvas -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install runloom/pier pier-canvas --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/runloom/pier.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/resources/system-skills/pier-canvas .cursor/skills/pier-canvas && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "pier-canvas" agent skill from https://github.com/runloom/pier/tree/main/resources/system-skills/pier-canvas into .cursor/skills/pier-canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pier-canvas", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/runloom/pier.git --path resources/system-skills/pier-canvas--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add runloom/pier --skill pier-canvas -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install runloom/pier pier-canvas --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/runloom/pier.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/resources/system-skills/pier-canvas .gemini/skills/pier-canvas && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "pier-canvas" agent skill from https://github.com/runloom/pier/tree/main/resources/system-skills/pier-canvas into .gemini/skills/pier-canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pier-canvas", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install runloom/pier pier-canvasInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add runloom/pier --skill pier-canvas -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/runloom/pier.git skills-src && mkdir -p .github/skills && cp -r skills-src/resources/system-skills/pier-canvas .github/skills/pier-canvas && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "pier-canvas" agent skill from https://github.com/runloom/pier/tree/main/resources/system-skills/pier-canvas into .github/skills/pier-canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pier-canvas", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add runloom/pier --skill pier-canvas -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install runloom/pier pier-canvas --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/runloom/pier.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/resources/system-skills/pier-canvas .opencode/skills/pier-canvas && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "pier-canvas" agent skill from https://github.com/runloom/pier/tree/main/resources/system-skills/pier-canvas into .opencode/skills/pier-canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pier-canvas", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
pier-canvasCreate or update a Pier Canvas under .pier/canvases using pier/canvas, pier/host, and project components.
Pier Canvas is an agent skill from runloom/pier. Create or update a Pier Canvas under .pier/canvases using pier/canvas, pier/host, and project components. When mode / recipe / content are omitted, you infer the preview shell from intent (world mockup, fill board, docs, or methodology overview). Use only when explicitly invoked from Pier.
Its SKILL.md is about 2.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 51 other files, including reference files (for example `i18n/nav.json`, `packs/content/closed-loop/pack.json` and `packs/content/design-doc/pack.json`). Compatibility notes: Requires Pier with the pier/canvas React runtime.
The repository describes itself as: 几个 AI 终端开着,谁在等你一眼能看见。Claude Code、Codex 还在原来的终端里,旁边就能改文件、看 Git。macOS 本地工作台。 The licence is AGPL-3.0.
3 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit 32403c0. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Requires Pier with the pier/canvas React runtime.
From compatibility in the SKILL.md frontmatter.
Pier Canvas loads about 2.4k tokens when it runs, and up to ~9.8k if it reads all its reference files. Until then it costs about 76 tokens; SKILL.md has 1,008 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
The full file from runloom/pier at commit 32403c0, republished under its AGPL-3.0 licence (© runloom). 1,008 words, ~2,439 tokens.
.claude/skills/pier-canvas/SKILL.md (or your agent's skills folder). This skill also uses 39 other files; get the full folder from GitHub.Canonical id: pier-canvas. In Pier, type /canvas and select it. Codex:
$pier-canvas. Cursor / Claude Code: /pier-canvas.
disable-model-invocation is a Cursor hint; Pier still sends the explicit
invocation. If Cursor's canvas skill is present, follow this file.
Canvas is a product-core overview, not a CLI side effect. Parameters are skill invocation args, not shell flags.
| File | Owns |
|---|---|
| authoring.md | APIs, fonts, geometry, Mermaid, WorkflowDiagram, ScreenFlow |
| methodology.md | Axes, expression, tab IA |
| verification.md | Delivery checks |
| host-data.md | Plugin snapshots, applets, settings.open |
packs/*/pack.json | Fields, gates, anti-patterns, template |
Parse from the user message. You infer omitted route args (see
Auto-resolve). The host only injects locale=. Unknown pack ids are hard
failures. Explicit mode= / recipe= / content= / presentation= always
win.
| Param | Default | Meaning |
|---|---|---|
mode | you infer | methodology or freeform. Fallback after infer: methodology. |
content | you infer | packs/content/ id. Methodology only. Fallback: design-doc. |
presentation | resolved | Pack selection below. Do not default every overview to five tabs. |
ui | pier-default | packs/ui/ id |
recipe | you infer | design, workflow, task-list, or task-dag. Ignored in methodology. Daily tracking is the plugin panel (⌘N), not a canvas kanban. |
slug | from title | .pier/canvases/<slug>/ |
locale | injected | BCP-47 (en, zh-CN, …). |
Pack selection (omitted presentation → from content; explicit id wins):
| content | presentation | Use when |
|---|---|---|
design-doc | decision_nav_4 | RFC / architecture. Overview → Problem → Design → Landing. No Day-1 tab. |
closed-loop | primary_nav_5 | Runtime with a copyable Day-1 recipe. Overview → Problem → Design → Day 1 → Landing. |
| either | one_pager (explicit) | Single-scroll BLUF |
Do not invent a Day-1 tab for design-doc unless the user has a real ≤4-step
recipe and passes presentation=primary_nav_5. Project override:
.pier/canvas-packs/{content,presentation,ui}/<id>/pack.json.
Skill files and pack ids are English. Every user-visible string must match the user.
locale= (Pier injects UI language).Tab labels: i18n/nav.json →
labels[<viewId>][<locale>] ?? labels[<viewId>].en ?? view.label.
View ids stay English (overview, problem, design, path, landing).
You choose the preview shell. The host does not infer the shell and does
not rewrite the invoke. Do not start Workflow A just because /pier-canvas
was typed. Do not ask which shell to use.
| Intended artifact | Infer | Root | Pack / start from |
|---|---|---|---|
| Product screens | mode=freeform recipe=design | WorldStage | packs/recipes/design/ · templates/design-mockup.canvas.tsx |
| Approval / recover flowchart | mode=freeform recipe=workflow | WorkflowDiagram | packs/recipes/workflow/ · templates/workflow.canvas.tsx |
| One-screen board that owns scroll | mode=freeform | <Stack fill> | compose; no starter |
| Named task list island | mode=freeform recipe=task-list | Frame | packs/recipes/task-list/ · templates/task-list.canvas.tsx |
| Named task DAG island | mode=freeform recipe=task-dag | Frame | packs/recipes/task-dag/ · templates/task-dag.canvas.tsx |
| Manual / handbook | mode=freeform | DocsShell | templates/docs.canvas.tsx |
| Component catalog | mode=freeform | Frame | .pier/canvases/canvas-kit/ (no skill starter) |
| Control plane with Day-1 recipe | mode=methodology content=closed-loop | Frame | templates/closed-loop.canvas.tsx |
| Decision / RFC, or a bare invoke | mode=methodology content=design-doc | Frame | templates/decision.canvas.tsx |
| Short single-scroll BLUF | presentation=one_pager | Frame | templates/one-pager.canvas.tsx |
Mixed intent → pick the primary artifact. Architecture “design” is a document. App-screen “design” is a world mockup.
WorldStage.Frame.mode is not a synonym for methodology.Unknown recipe ids are hard failures. When recipe= is set, use
Workflow B.
The files preview is one shell. Pick the shell from the user's ask — do not ask the user. Geometry: authoring.md.
| Root shell | When | Preview chrome |
|---|---|---|
Frame (flow) | Article, decision overview, scrolling dashboard | Reading measure (max-w-5xl comfortable / full-bleed wide); no zoom |
DocsShell (flow) | Manual with sidebar | Document font + reading size; no floating font-scale control |
<Stack fill> | One-screen board that owns scroll | Full-bleed; measure dropped |
WorldStage | Multi-device mockups, whiteboard | Viewport zoom/pan; fit / 100% |
ArtboardStage is a fit-all card in flow (same as Mermaid). Wheel
zoom is world only..pier/canvases/canvas-kit/canvas-kit.canvas.tsx and sdk/*.d.ts.
Only import named exports from pier/canvas. Commands from
pier/host. Plugin data: plugin.list / inspect →
useHostSnapshot("plugin:<id>/<key>") → declared pluginAction.invoke.
CRUD/OAuth via settings.open. See host-data.md.
Never ship AccountsCard / canvasWidgets..pier/canvases/** unless the user asks otherwise.cursor/canvas, window.pier, Electron, Node, IPC, eval, dynamic
import, or host component source.Use when you inferred an overview or mode=methodology. Not for a UI mockup.
kind: "composition" unless the user needs docs or kit..pier/canvases/<slug>/{instance.json,data.json,<slug>.canvas.tsx}.data.json from required / gates / agentPrompt. No
layout.views / antiPatterns / template. BLUF first; one
primary; ≤5 tabs. static product design (methodology
Expression selection). No Play/Step unless a mechanism explainer.rules / forbidden (default pier-default).instance.json: content, presentation, ui, status: "draft",
role: "overview".sdk/index.d.ts. Run verification.md.Restyle: keep data.json, change packs, regenerate the Canvas.
Use when mode=freeform, recipe= is set, or you inferred a freeform shell.
sdk/index.d.ts.composition | docs | kit. File:
.pier/canvases/<slug>/<slug>.canvas.tsx.kit). Pack
agentPrompt + authoring.md own details. Do
not copy applet source. Do not import
@pier-applet/pier.tasks/tracker-board.canvas metadata. No methodology instance.json.nodes / edges with
kind (actor | agent | tool | artifact | external). Status uses
tone. Sequence (sequence / sequenceDiagram), state, class, ER,
mindmap use native mermaid source. Card wash matches WorkflowDiagram
(color-mix of status-fg into --card, theme ink). No left color rail.
Mermaid is static. Details: authoring.md
Mermaid.WorkflowDiagram, not Mermaid. Details:
authoring.md Workflow diagrams.recipe=design + ScreenFlow on WorldStage.
Details: authoring.md Screen flows. Call
validateScreenFlowPaint({ spec, frames }) after placing Layers; if it
fails, apply only the first supportedFixes entry and re-run. Do not
use WorkflowDiagram for artboards.kind.content, presentation, ui used.© runloom, AGPL-3.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 39 other files (references) in resources/system-skills/pier-canvas of runloom/pier.
Open the folder on GitHubat commit 32403c0
Pier Canvas next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Pier Canvas this skillrunloom/pier | 105 | — | ~2.4k | Automated safety check: Pass | AGPL-3.0 | |
| Canvasopenclaw/openclaw | 392k | — | ~263 | Automated safety check: Pass | MIT | |
| Canva Designerasgeirtj/system_prompts_leaks | 69k | — | ~2.1k | Automated safety check: Pass | CC0-1.0 | |
| Plan Canvasaffaan-m/ECC | 276k | 1 repos | ~2.2k | Automated safety check: Pass | MIT | |
| Canvas Designanthropics/skills | 180k | 52 repos | ~3k | Automated safety check: Pass | Apache-2.0 | |
| Composing Grid CanvasesPostHog/posthog | 40k | — | ~2.1k | Automated safety check: Pass | Custom licence |
openclaw/openclaw
Present hosted widget documents on a connected macOS panel and control panel visibility or navigation.
asgeirtj/system_prompts_leaks
Creates and edits Canva designs, generates images and works with brand kits through the canva CLI and Canva's official MCP server, from decks to social posts.
affaan-m/ECC
Open plans and HTML artifacts in a local browser canvas where the human annotates elements, chats, and approves or requests changes without leaving the page.
anthropics/skills
Creates original posters and static art as PNG or PDF by first writing a short design philosophy, then expressing it visually on a canvas.
PostHog/posthog
Compose PostHog grid canvases — widget grids (including the user's home canvas) built from reusable component canvases.
ComposioHQ/awesome-claude-skills
Automate Canvas tasks via Rube MCP (Composio). An agent skill from ComposioHQ/awesome-claude-skills.
runloom/pier
Delegate work to sub-agents as visible Pier terminal panels.
runloom/pier
发布 Pier:合入 main 后先插件后宿主。宿主默认发候选版(vX.Y.Z-rc.N prerelease), 「晋升正式版」打稳定 tag;「直接发布」显式跳过候选直达正式版。触发:/publish-project、 发版、晋升正式版、直接发布。默认全自动,不中途询问版本号 / 合并 / 打 tag。
runloom/pier
(no description)
Create or update a Pier Canvas under .pier/canvases using pier/canvas, pier/host, and project components. Pier Canvas is an agent skill from runloom/pier.pier/canvases using pier/canvas, pier/host, and project components.
Run `npx skills add runloom/pier --skill pier-canvas -a claude-code`. Or copy the skill folder (resources/system-skills/pier-canvas in runloom/pier) into .claude/skills/pier-canvas in your project. Claude Code loads it when a task matches its description.
Run `npx skills add runloom/pier --skill pier-canvas -a codex`. Or copy the skill folder (resources/system-skills/pier-canvas in runloom/pier) into .agents/skills/pier-canvas in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add runloom/pier --skill pier-canvas -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/pier-canvas, .gemini/skills/pier-canvas, .github/skills/pier-canvas and .opencode/skills/pier-canvas in your project.
SKILL.md names no scripts, command-line tools or credentials: Pier Canvas is instructions for the agent only. Compatibility (from SKILL.md): Requires Pier with the pier/canvas React runtime..
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
Pier Canvas is published under the AGPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 2.4k tokens (SKILL.md is roughly 9.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 7.3k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Pier Canvas: Canvas (openclaw/openclaw, 392k stars), Canva Designer (asgeirtj/system_prompts_leaks, 69k stars), Plan Canvas (affaan-m/ECC, 276k stars) and Canvas Design (anthropics/skills, 180k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
runloom (a GitHub organization) maintains it in runloom/pier, which has 105 GitHub stars. The repository holds 4 skills in this directory. The repository was last updated on October 2, 2026.
Source: runloom/pier on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.