mirror of
https://github.com/github/awesome-copilot.git
synced 2026-03-13 20:55:13 +00:00
a4938e2aa7
* 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>
107 lines
5.9 KiB
XML
107 lines
5.9 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="460" viewBox="0 0 800 460">
|
|
<defs>
|
|
<linearGradient id="termBg" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stop-color="#2D2B55"/>
|
|
<stop offset="100%" stop-color="#1E1B3A"/>
|
|
</linearGradient>
|
|
<linearGradient id="browserGlow" x1="0" y1="0" x2="1" y2="1">
|
|
<stop offset="0%" stop-color="#0D9488" stop-opacity="0.15"/>
|
|
<stop offset="100%" stop-color="#0D9488" stop-opacity="0.05"/>
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<!-- Background -->
|
|
<rect width="800" height="460" rx="12" fill="#F8FAFB"/>
|
|
|
|
<!-- Step indicator -->
|
|
<circle cx="46" cy="28" r="16" fill="#0D9488"/>
|
|
<text x="46" y="33" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14" font-weight="bold" fill="white">1</text>
|
|
<text x="72" y="33" font-family="Arial, Helvetica, sans-serif" font-size="15" font-weight="bold" fill="#334155">Type "let's napkin" to start</text>
|
|
|
|
<!-- Terminal Window -->
|
|
<g transform="translate(40, 55)">
|
|
<!-- Terminal chrome -->
|
|
<rect width="480" height="280" rx="10" fill="#1E1B3A" stroke="#3D3A5C" stroke-width="1"/>
|
|
<!-- Title bar -->
|
|
<rect width="480" height="36" rx="10" fill="#2D2B55"/>
|
|
<rect x="0" y="26" width="480" height="10" fill="#2D2B55"/>
|
|
<!-- Window buttons -->
|
|
<circle cx="20" cy="18" r="6" fill="#FF5F57"/>
|
|
<circle cx="40" cy="18" r="6" fill="#FFBD2E"/>
|
|
<circle cx="60" cy="18" r="6" fill="#28C840"/>
|
|
<!-- Title -->
|
|
<text x="240" y="22" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#8B87B0">Terminal</text>
|
|
|
|
<!-- Terminal content -->
|
|
<!-- Prompt line 1 -->
|
|
<text x="20" y="68" font-family="monospace" font-size="13" fill="#8B87B0">~/Projects</text>
|
|
<text x="115" y="68" font-family="monospace" font-size="13" fill="#6C6A8A">$</text>
|
|
<text x="130" y="68" font-family="monospace" font-size="13" fill="#E0DEF4">copilot</text>
|
|
|
|
<!-- Prompt line 2 - the napkin command -->
|
|
<text x="20" y="100" font-family="monospace" font-size="13" fill="#0D9488">❯</text>
|
|
<text x="36" y="100" font-family="monospace" font-size="13" fill="#E0DEF4">let's napkin</text>
|
|
|
|
<!-- Copilot response -->
|
|
<text x="20" y="140" font-family="monospace" font-size="13" fill="#0D9488">✓</text>
|
|
<text x="36" y="140" font-family="monospace" font-size="13" fill="#A5F3FC">Opening your napkin whiteboard...</text>
|
|
|
|
<!-- Blank line then response -->
|
|
<text x="20" y="172" font-family="monospace" font-size="13" fill="#C4B5FD">Copilot</text>
|
|
<text x="20" y="196" font-family="monospace" font-size="13" fill="#E0DEF4">Your napkin is open in your browser!</text>
|
|
<text x="20" y="218" font-family="monospace" font-size="13" fill="#E0DEF4">Sketch your ideas, then click</text>
|
|
<text x="20" y="240" font-family="monospace" font-size="13" fill="#34D399">"Share with Copilot"</text>
|
|
<text x="215" y="240" font-family="monospace" font-size="13" fill="#E0DEF4">when ready.</text>
|
|
|
|
<!-- Cursor -->
|
|
<rect x="20" y="260" width="8" height="14" fill="#0D9488" opacity="0.8"/>
|
|
</g>
|
|
|
|
<!-- Browser opening indicator -->
|
|
<g transform="translate(560, 100)">
|
|
<!-- Mini browser window -->
|
|
<rect width="200" height="160" rx="8" fill="white" stroke="#D1D5DB" stroke-width="1.5"/>
|
|
<!-- Browser chrome -->
|
|
<rect width="200" height="28" rx="8" fill="#F1F5F9"/>
|
|
<rect x="0" y="20" width="200" height="8" fill="#F1F5F9"/>
|
|
<!-- Browser dots -->
|
|
<circle cx="14" cy="14" r="4" fill="#E2E8F0"/>
|
|
<circle cx="28" cy="14" r="4" fill="#E2E8F0"/>
|
|
<circle cx="42" cy="14" r="4" fill="#E2E8F0"/>
|
|
<!-- Address bar -->
|
|
<rect x="56" y="7" width="132" height="14" rx="3" fill="white" stroke="#E2E8F0" stroke-width="1"/>
|
|
<text x="72" y="17" font-family="Arial, Helvetica, sans-serif" font-size="7" fill="#94A3B8">napkin.html</text>
|
|
|
|
<!-- Canvas preview -->
|
|
<rect x="10" y="38" width="180" height="110" rx="3" fill="#FAFAFA"/>
|
|
<!-- Mini toolbar -->
|
|
<rect x="40" y="44" width="120" height="14" rx="3" fill="#F1F5F9" stroke="#E2E8F0" stroke-width="0.5"/>
|
|
<!-- Mini green button -->
|
|
<rect x="130" y="130" width="50" height="12" rx="3" fill="#0D9488"/>
|
|
<text x="155" y="139" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="5" fill="white">Share</text>
|
|
<!-- Whiteboard grid dots -->
|
|
<circle cx="50" cy="80" r="1" fill="#E2E8F0"/>
|
|
<circle cx="80" cy="80" r="1" fill="#E2E8F0"/>
|
|
<circle cx="110" cy="80" r="1" fill="#E2E8F0"/>
|
|
<circle cx="140" cy="80" r="1" fill="#E2E8F0"/>
|
|
<circle cx="50" cy="105" r="1" fill="#E2E8F0"/>
|
|
<circle cx="80" cy="105" r="1" fill="#E2E8F0"/>
|
|
<circle cx="110" cy="105" r="1" fill="#E2E8F0"/>
|
|
<circle cx="140" cy="105" r="1" fill="#E2E8F0"/>
|
|
</g>
|
|
|
|
<!-- Curved arrow from terminal to browser -->
|
|
<path d="M525,200 C555,180 555,160 570,150" fill="none" stroke="#0D9488" stroke-width="2.5" stroke-dasharray="6,4"/>
|
|
<polygon points="568,144 576,150 568,156" fill="#0D9488"/>
|
|
|
|
<!-- Arrow label -->
|
|
<rect x="530" y="270" width="190" height="36" rx="6" fill="#0D9488" opacity="0.1"/>
|
|
<text x="625" y="285" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#0D9488" font-weight="bold">Browser opens</text>
|
|
<text x="625" y="300" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#0D9488">automatically</text>
|
|
|
|
<!-- Bottom caption -->
|
|
<rect x="40" y="365" width="720" height="70" rx="8" fill="white" stroke="#E2E8F0" stroke-width="1"/>
|
|
<text x="60" y="393" font-family="Arial, Helvetica, sans-serif" font-size="13" fill="#64748B" font-weight="bold">How it works:</text>
|
|
<text x="60" y="418" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#94A3B8">Type "let's napkin" (or "open the napkin") in your Copilot CLI session.</text>
|
|
<text x="60" y="436" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#94A3B8">A whiteboard will open in your default browser — no setup needed.</text>
|
|
</svg> |