A reusable prompt for building a personal Kanban work-tracker as a GitHub Copilot CLI canvas extension. You open it in the side panel to see and manage your work; the agent can add and update cards for you through canvas actions.
It renders as a responsive board with light/dark theming, pill status badges, and lanes that wrap to fit the panel.
Build me a personal Kanban work tracker as a Copilot CLI canvas extension. I'll
open it in the side panel to see and manage my work, and you'll be able to add
and update cards for me through canvas actions.
Before writing any code, read the extension authoring guide (the extensions
"guide" operation) so you use the current canvas API. Do not guess the API.
CONFIG (change these):
- Board name: "Field Notes"
- Lanes (id: label), in display order:
- todays-signal: Today's Signal
- content-pipeline: Content Pipeline
- backlog: Backlog
- in-flight: In Flight
- shipped: Shipped / Receipts
- next-action: Next Action
- Card statuses, each with a color: idea (gray), active (blue),
in-progress (amber), done (green), recurring (purple), blocked (red)
- Add a couple of seed cards per lane so it isn't empty on first open.
Requirements:
1. Canvas extension, user scope, single .mjs file. Use the SDK's joinSession
and createCanvas. stdout is reserved for JSON-RPC, so log with session.log,
never console.log.
2. open() boots a local loopback HTTP server (listen on port 0) and returns
{ title, url }. The webview iframe loads that url. The server renders the
board HTML on every request by reading a JSON file from disk, so a refresh
always shows current data.
3. Persist the board to a JSON file in the extension's own artifacts dir.
Writes must be atomic: write a temp file, then rename. Preserve unknown
fields on write.
4. Expose canvas actions so the agent can manage the board: get_board,
get_lane, add_card (lane, title, summary, source, status, nextAction,
owner, due), update_card (by id, including moving lanes), remove_card.
Validate lane and status against the CONFIG and return clear errors.
5. Card fields: id, title, summary, optional source URL, status, optional
next action, owner, optional due date, createdAt.
6. Styling: GitHub-like. Use CSS custom properties plus a
prefers-color-scheme dark block so it follows the system theme. Status
badges are pill-shaped with a colored border and a soft fill. Cards get a
soft border, a subtle shadow, and an accent border on hover. Use a
monospace font for source links and meta tags. A small top bar with a
mark, the board name, and a short subtitle.
7. Layout: a responsive CSS grid, grid-template-columns
repeat(auto-fill, minmax(240px, 1fr)) with align-items start, so every
lane is visible and wraps to fit the panel with no horizontal scroll.
Order the lanes so the ones that usually hold the most cards come first;
that keeps equal-height lanes side by side and shrinks the gaps. Keep the
order fixed, do not resort on every add.
Process:
- Scaffold, write the file, run node --check, then reload extensions and open
the canvas.
- Verify it renders: drive a headless browser to the server url, screenshot
it, read the screenshot back, and fix anything that looks off.
- Once it works, ask me to point you at my repos or notes so you can seed real
cards, then ask what I want to tune (density, colors, wording).
Keep the code boring and obvious: small functions, const by default, no
framework, no dependencies beyond the SDK. Comment only where it clarifies why.