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>
112 lines
7.1 KiB
XML
112 lines
7.1 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="480" viewBox="0 0 800 480">
|
|
<defs>
|
|
<linearGradient id="termBg5" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stop-color="#2D2B55"/>
|
|
<stop offset="100%" stop-color="#1E1B3A"/>
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<!-- Background -->
|
|
<rect width="800" height="480" 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">5</text>
|
|
<text x="72" y="33" font-family="Arial, Helvetica, sans-serif" font-size="15" font-weight="bold" fill="#334155">Copilot reads your napkin and responds</text>
|
|
|
|
<!-- Terminal Window -->
|
|
<g transform="translate(40, 55)">
|
|
<!-- Terminal chrome -->
|
|
<rect width="550" height="370" rx="10" fill="#1E1B3A" stroke="#3D3A5C" stroke-width="1"/>
|
|
<!-- Title bar -->
|
|
<rect width="550" height="36" rx="10" fill="#2D2B55"/>
|
|
<rect x="0" y="26" width="550" 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"/>
|
|
<text x="275" y="22" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#8B87B0">Terminal</text>
|
|
|
|
<!-- User prompt -->
|
|
<text x="20" y="62" font-family="monospace" font-size="13" fill="#0D9488">❯</text>
|
|
<text x="36" y="62" font-family="monospace" font-size="13" fill="#E0DEF4">check the napkin</text>
|
|
|
|
<!-- Loading indicator -->
|
|
<text x="20" y="88" font-family="monospace" font-size="13" fill="#0D9488">✓</text>
|
|
<text x="36" y="88" font-family="monospace" font-size="13" fill="#A5F3FC">Reading your napkin...</text>
|
|
|
|
<!-- Copilot response header -->
|
|
<text x="20" y="120" font-family="monospace" font-size="13" fill="#C4B5FD">Copilot</text>
|
|
|
|
<!-- Response content - warm, conversational -->
|
|
<text x="20" y="148" font-family="monospace" font-size="12" fill="#E0DEF4">I can see your sketch! Here's what I'm picking up:</text>
|
|
|
|
<!-- Response body -->
|
|
<text x="20" y="178" font-family="monospace" font-size="12" fill="#E0DEF4">You've drawn a three-stage workflow:</text>
|
|
<text x="20" y="200" font-family="monospace" font-size="12" fill="#A5F3FC"> Draft</text>
|
|
<text x="80" y="200" font-family="monospace" font-size="12" fill="#64748B">→</text>
|
|
<text x="100" y="200" font-family="monospace" font-size="12" fill="#A5F3FC">Review</text>
|
|
<text x="165" y="200" font-family="monospace" font-size="12" fill="#64748B">→</text>
|
|
<text x="185" y="200" font-family="monospace" font-size="12" fill="#A5F3FC">Ship</text>
|
|
|
|
<text x="20" y="228" font-family="monospace" font-size="12" fill="#E0DEF4">Your sticky notes highlight some key items:</text>
|
|
|
|
<!-- Sticky note references -->
|
|
<text x="20" y="254" font-family="monospace" font-size="12" fill="#FBBF24">■</text>
|
|
<text x="36" y="254" font-family="monospace" font-size="12" fill="#FEF3C7">"Need legal review" — before the Ship phase</text>
|
|
<text x="20" y="276" font-family="monospace" font-size="12" fill="#F472B6">■</text>
|
|
<text x="36" y="276" font-family="monospace" font-size="12" fill="#FCE7F3">"Q2 deadline" — June 30th</text>
|
|
<text x="20" y="298" font-family="monospace" font-size="12" fill="#60A5FA">■</text>
|
|
<text x="36" y="298" font-family="monospace" font-size="12" fill="#DBEAFE">"Check with Sarah" — re: compliance</text>
|
|
|
|
<text x="20" y="328" font-family="monospace" font-size="12" fill="#E0DEF4">It looks like you're planning a review workflow</text>
|
|
<text x="20" y="348" font-family="monospace" font-size="12" fill="#E0DEF4">with a legal gate. Would you like me to help you</text>
|
|
<text x="20" y="368" font-family="monospace" font-size="12" fill="#E0DEF4">turn this into a checklist or project plan?</text>
|
|
|
|
<!-- Cursor -->
|
|
<rect x="20" y="385" width="8" height="14" fill="#0D9488" opacity="0.8"/>
|
|
</g>
|
|
|
|
<!-- Annotation callout -->
|
|
<g transform="translate(608, 75)">
|
|
<rect width="170" height="84" rx="10" fill="#0D9488" opacity="0.1"/>
|
|
<text x="85" y="24" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#0D9488" font-weight="bold">Copilot sees your</text>
|
|
<text x="85" y="42" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#0D9488" font-weight="bold">drawings and text,</text>
|
|
<text x="85" y="60" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#0D9488" font-weight="bold">then responds in</text>
|
|
<text x="85" y="78" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#0D9488" font-weight="bold">plain English</text>
|
|
</g>
|
|
<!-- Arrow from annotation to terminal content -->
|
|
<path d="M608,130 C598,140 596,150 594,160" fill="none" stroke="#0D9488" stroke-width="1.5" stroke-dasharray="4,3"/>
|
|
<polygon points="590,158 594,166 598,158" fill="#0D9488"/>
|
|
|
|
<!-- What Copilot understood panel -->
|
|
<g transform="translate(608, 190)">
|
|
<rect width="170" height="230" rx="10" fill="white" stroke="#E2E8F0" stroke-width="1"/>
|
|
<text x="85" y="24" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="11" font-weight="bold" fill="#334155">What Copilot understood:</text>
|
|
<line x1="15" y1="34" x2="155" y2="34" stroke="#E2E8F0" stroke-width="1"/>
|
|
|
|
<!-- Mini flowchart icon -->
|
|
<rect x="15" y="48" width="14" height="14" rx="2" fill="#F0FDFA" stroke="#0D9488" stroke-width="1"/>
|
|
<text x="35" y="59" font-family="Arial, Helvetica, sans-serif" font-size="10" fill="#475569">3-stage workflow</text>
|
|
|
|
<!-- Sticky note icon -->
|
|
<rect x="15" y="74" width="14" height="14" rx="1" fill="#FEF9C3" stroke="#F59E0B" stroke-width="0.8"/>
|
|
<text x="35" y="85" font-family="Arial, Helvetica, sans-serif" font-size="10" fill="#475569">Legal review needed</text>
|
|
|
|
<!-- Calendar icon -->
|
|
<rect x="15" y="100" width="14" height="14" rx="2" fill="#FCE7F3" stroke="#EC4899" stroke-width="0.8"/>
|
|
<text x="35" y="111" font-family="Arial, Helvetica, sans-serif" font-size="10" fill="#475569">Q2 deadline (June 30)</text>
|
|
|
|
<!-- Person icon -->
|
|
<rect x="15" y="126" width="14" height="14" rx="2" fill="#DBEAFE" stroke="#3B82F6" stroke-width="0.8"/>
|
|
<text x="35" y="137" font-family="Arial, Helvetica, sans-serif" font-size="10" fill="#475569">Follow up with Sarah</text>
|
|
|
|
<!-- Annotation icon -->
|
|
<rect x="15" y="152" width="14" height="14" rx="7" fill="#FEE2E2" stroke="#EF4444" stroke-width="0.8"/>
|
|
<text x="35" y="163" font-family="Arial, Helvetica, sans-serif" font-size="10" fill="#475569">Review step = priority</text>
|
|
|
|
<line x1="15" y1="180" x2="155" y2="180" stroke="#E2E8F0" stroke-width="1"/>
|
|
<text x="85" y="200" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="10" fill="#0D9488" font-weight="bold">Everything from your</text>
|
|
<text x="85" y="216" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="10" fill="#0D9488" font-weight="bold">napkin — captured!</text>
|
|
</g>
|
|
</svg> |