Add napkin plugin: visual whiteboard collaboration for Copilot CLI (#929)

* Add napkin plugin: visual whiteboard collaboration for Copilot CLI

Napkin opens an interactive HTML whiteboard in the user's browser where
they can draw, sketch, and add sticky notes. When ready, they click
'Share with Copilot' which exports a PNG snapshot. The Copilot CLI agent
reads the PNG via the view tool, and the multimodal AI model interprets
the drawings, spatial layout, and text content — responding
conversationally as a collaborator.

Built for non-technical users: lawyers, PMs, business stakeholders,
designers, and anyone who thinks better visually.

Includes:
- Self-contained HTML whiteboard (zero external dependencies)
- Shape recognition (wobbly shapes snap to clean versions)
- Freehand drawing, sticky notes, arrows, text labels
- Auto-save to localStorage
- SKILL.md with agent instructions
- SVG visual guides for step-by-step README documentation
- Plugin manifest for Copilot CLI installation

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* Fix review feedback: roundRect compat, cross-platform shortcuts, eraser undo

- Add safeRoundRect() fallback for browsers without CanvasRenderingContext2D.roundRect()
- Update undo/redo button titles to show Ctrl/Cmd instead of Mac-only Cmd
- Fix eraser undo by capturing state before first erase mutation per gesture

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* Update skills/napkin/templates/napkin.html

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update plugins/napkin/README.md

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update skills/napkin/templates/napkin.html

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update skills/napkin/templates/napkin.html

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update skills/napkin/templates/napkin.html

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Add missing Line (L) and Eraser (E) keyboard shortcuts to README

The in-app shortcuts panel and keyMap handler both support L for Line
and E for Eraser, but the README keyboard shortcuts table was missing
both entries. Adds them to match the actual implementation.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* Combine docs/ and templates/ into assets/ per agentskills.io spec

Moves skills/napkin/docs/*.svg and skills/napkin/templates/napkin.html
into skills/napkin/assets/ to align with the Agent Skills specification.
Updates all path references in SKILL.md, README.md, and generated docs.

Addresses review feedback from PR #929.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

---------

Co-authored-by: Dan Velton <dvelton@Dans-MacBook-Pro.local>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Dan Velton
2026-03-08 21:50:20 -07:00
committed by GitHub
parent febaf64d94
commit a4938e2aa7
12 changed files with 2986 additions and 0 deletions

View File

@@ -163,6 +163,7 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-skills) for guidelines on how to
| [my-issues](../skills/my-issues/SKILL.md) | List my issues in the current repository | None |
| [my-pull-requests](../skills/my-pull-requests/SKILL.md) | List my pull requests in the current repository | None |
| [nano-banana-pro-openrouter](../skills/nano-banana-pro-openrouter/SKILL.md) | Generate or edit images via OpenRouter with the Gemini 3 Pro Image model. Use for prompt-only image generation, image edits, and multi-image compositing; supports 1K/2K/4K output. | `assets/SYSTEM_TEMPLATE`<br />`scripts/generate_image.py` |
| [napkin](../skills/napkin/SKILL.md) | Visual whiteboard collaboration for Copilot CLI. Creates an interactive whiteboard that opens in your browser — draw, sketch, add sticky notes, then share everything back with Copilot. Copilot sees your drawings and text, and responds with analysis, suggestions, and ideas. | `assets/napkin.html`<br />`assets/step1-activate.svg`<br />`assets/step2-whiteboard.svg`<br />`assets/step3-draw.svg`<br />`assets/step4-share.svg`<br />`assets/step5-response.svg` |
| [next-intl-add-language](../skills/next-intl-add-language/SKILL.md) | Add new language to a Next.js + next-intl application | None |
| [noob-mode](../skills/noob-mode/SKILL.md) | Plain-English translation layer for non-technical Copilot CLI users. Translates every approval prompt, error message, and technical output into clear, jargon-free English with color-coded risk indicators. | `references/examples.md`<br />`references/glossary.md` |
| [nuget-manager](../skills/nuget-manager/SKILL.md) | Manage NuGet packages in .NET projects/solutions. Use this skill when adding, removing, or updating NuGet package versions. It enforces using `dotnet` CLI for package management and provides strict procedures for direct file edits only when updating versions. | None |