bp-canvas

Build a canvas HTML file.

IndexedMIT

Install

Works with Claude Code, Claude apps, Codex, Cursor, Gemini CLI, GitHub Copilot, VS Code, OpenCode, Goose, Windsurf. Read the repository before you give any tool access to your data.

npx agentmarket install skill/bpicori-bp-canvas

Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.

Get the weekly diff

The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.

About

Build a canvas HTML file. Compute the numbers, compose cv-* tags in a drag-and-drop cv-dashboard, load the published canvas runtime, write one HTML file. Use when the user wants a dashboard, canvas, panes, charts, diffs, or visual report.

Use cases: documents, design, frontend, data

Reviews

Write a review

No reviews yet. Installed it? Reviews come from verified installers only. How reviews work

Permissions

What this skill can do and what it asks for, from its SKILL.md. Checked Oct 25, 2026.

Tools: No tools found
Secrets: None asked for
Install scripts: None found

Network hosts it talks to 1

codeload.github.com · found in install command

Files it touches

~/.claude/skills/bp-canvas

What's inside

Skill name: bp-canvas
Description: Build a canvas HTML file. Compute the numbers, compose cv-* tags in a drag-and-drop cv-dashboard, load the published canvas runtime, write one HTML file. Use when the user wants a dashboard, canvas, panes, charts, diffs, or visual report.
License: MIT
Instructions: 61 lines in SKILL.md · view on GitHub

Files (2)

SKILL.md
catalog.md · references/

SKILL.md (first lines)

# bp-canvas

The library does not query. You read the user’s data, aggregate, and put results in attributes or JSON script children.

Tag catalog: [references/catalog.md](references/catalog.md).

## Runtime

Load the published runtime from **canvas** (`github.com/bpicori/canvas`). Do not invent tags. Do not import React. Do not `fetch` from the page. Do not inline the bundle.

```html
<script src="https://cdn.jsdelivr.net/gh/bpicori/canvas@main/runtime/canvas.js"></script>
```

If that 404s, use `https://raw.githubusercontent.com/bpicori/canvas/main/runtime/canvas.js`.

Put that tag **after** `</cv-dashboard>`. Not in `<head>`, not above the dashboard. `cv-dashboard` reads only direct children (`:scope > cv-pane`) in `connectedCallback`. If the custom element upgrades before those panes exist — or if they sit inside a wrapper — it paints "No panes. Add cv-pane children to this dashboard." and does not look again.

## Workflow

1. Read the user’s data. Compute KPIs, series, tables, and other pane bodies.
2. Write **one** HTML file (template below). Point at the runtime URL. No extra JS files.
3. Hand the user that file.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TITLE</title>
    <style>html, body, cv-dashboard { margin: 0; height: 100%; display: block; }</style>
  </head>
  <body>
    <cv-dashboard name="Sales">
      <cv-pane id="rev" title="Revenue" x="0" y="0" w="3" h="3">
        <cv-stat value="12450" label="8 orders" format="currency" currency="EUR"></cv-stat>
      </cv-pane>
      <cv-pane id="by-region" title="By region" x="3" y="0" w="5" h="5">
        <cv-bar>
          <script type="application/json">
            {
              "categories": ["EU", "US"],
              "series": [{ "name": "Revenue", "data": [8000, 4450] }]
            }
          </script>
        </cv-bar>
      </cv-pane>
    </cv-dashboard>
    <script src="https://cdn.jsdelivr.net/gh/bpicori/canvas@main/runtime/canvas.js"></script>
  </body>
</html>
```

Grid is 12 columns. Default pane `w: 4, h: 3`. Drag the header to move; resize from either bottom corner. Layout is stored in `localStorage`.

Prefer `<cv-dashboard>` + `<cv-pane>` for data work. A docs-only page may omit the dashboard and use `cv-stack` at the root.

Scalars go on attributes. Structured data goes in a child `<script type="application/json">`.

From bpicori/skills, MIT.

Signals

Stars: 0
Forks: 0
Open issues: 0
Last commit (this folder): Aug 14, 2026 (2 months ago)

From GitHub (fetched Oct 24, 2026).

Details

License: MIT
Repository: github.com/bpicori/skills
First seen: Oct 24, 2026
Last checked: Oct 24, 2026
Source: GitHub github-graphql

More from bpicori

Cite this page

bp-canvas skill. Agent Mart. https://agentmart.dev/skills/bpicori-bp-canvas (last updated 2026-10-24)