Agent skill

Pier Canvas

by runloom in runloom/pier

Create or update a Pier Canvas under .pier/canvases using pier/canvas, pier/host, and project components.

AGPL-3.0Auto-check passed

Install Pier Canvas

skills CLI
$ npx skills add runloom/pier --skill pier-canvas -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install runloom/pier pier-canvas --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ 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-src

Use ~/.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/

Facts

Skill name
pier-canvas
GitHub stars
105
Token cost
~2.4k tokens
SKILL.md length
1,008 words
Files
40 (incl. references)
Skills in repo
4
Repo updated
First seen
Licence
AGPL-3.0

At a glance

Create or update a Pier Canvas under .pier/canvases using pier/canvas, pier/host, and project components.

  • Works in 3 steps: locale= (Pier injects UI language). → Else the language of the current request. → Never keep template English because the…
  • SKILL.md covers Invocation parameters, Audience language, Auto-resolve (do this first) and Stage selection (flow vs world…, plus 5 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

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.

Example prompts

  • “/pier-canvas”

Requirements

  • Compatibility (from SKILL.md): Requires Pier with the pier/canvas React runtime.

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. locale= (Pier injects UI language).
  2. Else the language of the current request.
  3. Never keep template English because the starter used it.

What it can do on your machine

Read from SKILL.md and the folder at commit 32403c0. It shows what the files ask for, not the result of running them.

  • Tool permissions

    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.

  • Runs code

    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.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    Requires Pier with the pier/canvas React runtime.

    From compatibility in the SKILL.md frontmatter.

Context cost

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.

Always · name and description, kept in context so the agent knows when to use it
~76
When it runs · the whole SKILL.md, loaded when a task matches
~2.4k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~9.8k

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.

Safety

Auto-check passed

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.

SKILL.md

The full file from runloom/pier at commit 32403c0, republished under its AGPL-3.0 licence (© runloom). 1,008 words, ~2,439 tokens.

Download SKILL.mdSave it as .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.
name
pier-canvas
description
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.
compatibility
Requires Pier with the pier/canvas React runtime.
disable-model-invocation
true

Create a Pier Canvas

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.

FileOwns
authoring.mdAPIs, fonts, geometry, Mermaid, WorkflowDiagram, ScreenFlow
methodology.mdAxes, expression, tab IA
verification.mdDelivery checks
host-data.mdPlugin snapshots, applets, settings.open
packs/*/pack.jsonFields, gates, anti-patterns, template

Invocation parameters

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.

ParamDefaultMeaning
modeyou infermethodology or freeform. Fallback after infer: methodology.
contentyou inferpacks/content/ id. Methodology only. Fallback: design-doc.
presentationresolvedPack selection below. Do not default every overview to five tabs.
uipier-defaultpacks/ui/ id
recipeyou inferdesign, workflow, task-list, or task-dag. Ignored in methodology. Daily tracking is the plugin panel (⌘N), not a canvas kanban.
slugfrom title.pier/canvases/<slug>/
localeinjectedBCP-47 (en, zh-CN, …).

Pack selection (omitted presentation → from content; explicit id wins):

contentpresentationUse when
design-docdecision_nav_4RFC / architecture. Overview → Problem → Design → Landing. No Day-1 tab.
closed-loopprimary_nav_5Runtime with a copyable Day-1 recipe. Overview → Problem → Design → Day 1 → Landing.
eitherone_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.

Audience language

Skill files and pack ids are English. Every user-visible string must match the user.

  1. locale= (Pier injects UI language).
  2. Else the language of the current request.
  3. Never keep template English because the starter used it.

Tab labels: i18n/nav.json → labels[<viewId>][<locale>] ?? labels[<viewId>].en ?? view.label. View ids stay English (overview, problem, design, path, landing).

Auto-resolve (do this first)

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 artifactInferRootPack / start from
Product screensmode=freeform recipe=designWorldStagepacks/recipes/design/ · templates/design-mockup.canvas.tsx
Approval / recover flowchartmode=freeform recipe=workflowWorkflowDiagrampacks/recipes/workflow/ · templates/workflow.canvas.tsx
One-screen board that owns scrollmode=freeform<Stack fill>compose; no starter
Named task list islandmode=freeform recipe=task-listFramepacks/recipes/task-list/ · templates/task-list.canvas.tsx
Named task DAG islandmode=freeform recipe=task-dagFramepacks/recipes/task-dag/ · templates/task-dag.canvas.tsx
Manual / handbookmode=freeformDocsShelltemplates/docs.canvas.tsx
Component catalogmode=freeformFrame.pier/canvases/canvas-kit/ (no skill starter)
Control plane with Day-1 recipemode=methodology content=closed-loopFrametemplates/closed-loop.canvas.tsx
Decision / RFC, or a bare invokemode=methodology content=design-docFrametemplates/decision.canvas.tsx
Short single-scroll BLUFpresentation=one_pagerFrametemplates/one-pager.canvas.tsx

Mixed intent → pick the primary artifact. Architecture “design” is a document. App-screen “design” is a world mockup.

  • A mockup is not a design-doc with Artboards inside a Design tab.
  • Do not wrap a reading doc in WorldStage.
  • Do not stack phone/desktop frames as a document inside Frame.
  • Explicit args win. Omitted mode is not a synonym for methodology.
  • Do not scaffold a tracker-board canvas. Daily tracking is ⌘N → Task tracker.

Unknown recipe ids are hard failures. When recipe= is set, use Workflow B.

Stage selection (flow vs world vs fill)

The files preview is one shell. Pick the shell from the user's ask — do not ask the user. Geometry: authoring.md.

Root shellWhenPreview chrome
Frame (flow)Article, decision overview, scrolling dashboardReading measure (max-w-5xl comfortable / full-bleed wide); no zoom
DocsShell (flow)Manual with sidebarDocument font + reading size; no floating font-scale control
<Stack fill>One-screen board that owns scrollFull-bleed; measure dropped
WorldStageMulti-device mockups, whiteboardViewport zoom/pan; fit / 100%
  • Full-bleed boards use fill, not world.
  • ArtboardStage is a fit-all card in flow (same as Mermaid). Wheel zoom is world only.
Show full SKILL.md (391 more words)Show less

Hard boundaries

  • Look at .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.
  • Write under .pier/canvases/** unless the user asks otherwise.
  • Never cursor/canvas, window.pier, Electron, Node, IPC, eval, dynamic import, or host component source.
  • Do not register extra system skills per pack.

Workflow A — methodology

Use when you inferred an overview or mode=methodology. Not for a UI mockup.

  1. Resolve packs (project then built-in). Hard fail if missing.
  2. kind: "composition" unless the user needs docs or kit.
  3. Write .pier/canvases/<slug>/{instance.json,data.json,<slug>.canvas.tsx}.
  4. Content pack → data.json from required / gates / agentPrompt. No layout.
  5. Run gates; stop on failure.
  6. Presentation pack → views / antiPatterns / template. BLUF first; one primary; ≤5 tabs. static product design (methodology Expression selection). No Play/Step unless a mechanism explainer.
  7. UI pack rules / forbidden (default pier-default).
  8. instance.json: content, presentation, ui, status: "draft", role: "overview".
  9. Read sdk/index.d.ts. Run verification.md.

Restyle: keep data.json, change packs, regenerate the Canvas.

Workflow B — freeform

Use when mode=freeform, recipe= is set, or you inferred a freeform shell.

  1. Update in place when a matching Canvas exists.
  2. Read relevant project code and sdk/index.d.ts.
  3. Kind: composition | docs | kit. File: .pier/canvases/<slug>/<slug>.canvas.tsx.
  4. Start from the Auto-resolve template (or canvas-kit for kit). Pack agentPrompt + authoring.md own details. Do not copy applet source. Do not import @pier-applet/pier.tasks/tracker-board.
  5. Export canvas metadata. No methodology instance.json.
  6. Run verification.md.

Content requirements

  • User-visible copy in the user's language.
  • Hierarchy before decoration. No fabricated data or empty decorative cards.
  • Charts: metrics, units, time ranges, sources.
  • Mermaid chrome: flowchart / architecture use 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.
  • Approval / recover: WorkflowDiagram, not Mermaid. Details: authoring.md Workflow diagrams.
  • Multi-screen user path: 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.
  • Every user action needs a recognizable UI change or error.

Delivery

  • Project-relative path; created vs updated; kind.
  • Methodology: content, presentation, ui used.
  • Compilation, mount, interaction checks actually completed — and any that were not.

© 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

Files

SKILL.md and 39 other files (references) in resources/system-skills/pier-canvas of runloom/pier.

  • SKILL.md
  • i18n/nav.json
  • packs/content/closed-loop/pack.json
  • packs/content/design-doc/pack.json
  • packs/presentation/decision_nav_4/pack.json
  • packs/presentation/one_pager/pack.json
  • packs/presentation/primary_nav_5/pack.json
  • packs/recipes/design/pack.json
  • packs/recipes/task-dag/pack.json
  • … and 31 more

Open the folder on GitHubat commit 32403c0

Compare with similar skills

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.

Pier Canvas compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Pier Canvas this skillrunloom/pier105—~2.4kAutomated safety check: PassAGPL-3.0
Canvasopenclaw/openclaw392k—~263Automated safety check: PassMIT
Canva Designerasgeirtj/system_prompts_leaks69k—~2.1kAutomated safety check: PassCC0-1.0
Plan Canvasaffaan-m/ECC276k1 repos~2.2kAutomated safety check: PassMIT
Canvas Designanthropics/skills180k52 repos~3kAutomated safety check: PassApache-2.0
Composing Grid CanvasesPostHog/posthog40k—~2.1kAutomated safety check: PassCustom licence

Similar skills

  • Canvas

    openclaw/openclaw

    Present hosted widget documents on a connected macOS panel and control panel visibility or navigation.

    392k GitHub stars~263 tokensUpdated today
    Auto-check passed
  • Canva Designer

    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.

    69k GitHub stars~2.1k tokensUpdated yesterday
    Media & CreativeAuto-check passed
  • Plan Canvas

    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.

    276k GitHub starsUsed in 1 repo~2.2k tokens
    Frontend & DesignAuto-check passed
  • Canvas Design

    anthropics/skills

    Official

    Creates original posters and static art as PNG or PDF by first writing a short design philosophy, then expressing it visually on a canvas.

    180k GitHub starsUsed in 52 repos~3k tokens
    Media & CreativeAuto-check passed
  • Official

    Compose PostHog grid canvases — widget grids (including the user's home canvas) built from reusable component canvases.

    40k GitHub stars~2.1k tokensUpdated today
    Auto-check passed
  • Canvas Automation

    ComposioHQ/awesome-claude-skills

    Automate Canvas tasks via Rube MCP (Composio). An agent skill from ComposioHQ/awesome-claude-skills.

    77k GitHub starsUsed in 3 repos~727 tokens
    Productivity & AutomationAuto-check passed

More from runloom/pier

  • Delegate work to sub-agents as visible Pier terminal panels.

    105 GitHub stars~626 tokensUpdated 7 days ago
    Auto-check passed
  • Publish Project

    runloom/pier

    发布 Pier:合入 main 后先插件后宿主。宿主默认发候选版(vX.Y.Z-rc.N prerelease), 「晋升正式版」打稳定 tag;「直接发布」显式跳过候选直达正式版。触发:/publish-project、 发版、晋升正式版、直接发布。默认全自动,不中途询问版本号 / 合并 / 打 tag。

    105 GitHub stars~1.1k tokensUpdated 7 days ago
    Auto-check passed
  • Deslop

    runloom/pier

    (no description)

    105 GitHub stars~201 tokensUpdated 7 days ago
    Auto-check passed

Questions about Pier Canvas

What does Pier Canvas do?

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.

How do I install Pier Canvas in Claude Code?

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.

How do I install Pier Canvas in Codex?

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.

Can I use Pier Canvas in Cursor, Gemini CLI or GitHub Copilot?

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.

What does Pier Canvas need to run?

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..

Does Pier Canvas access the network?

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.

Is Pier Canvas safe to install?

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.

What licence does Pier Canvas use?

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.

How many tokens does Pier Canvas use?

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.

What are the alternatives to Pier Canvas?

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.

Who maintains Pier Canvas?

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.