mirror of
https://github.com/github/awesome-copilot.git
synced 2026-03-12 04:05:12 +00:00
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
GitHub
6
.github/plugin/marketplace.json
vendored
6
.github/plugin/marketplace.json
vendored
@@ -167,6 +167,12 @@
|
|||||||
"description": "Comprehensive collection for building declarative agents with Model Context Protocol integration for Microsoft 365 Copilot",
|
"description": "Comprehensive collection for building declarative agents with Model Context Protocol integration for Microsoft 365 Copilot",
|
||||||
"version": "1.0.0"
|
"version": "1.0.0"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "napkin",
|
||||||
|
"source": "napkin",
|
||||||
|
"description": "Visual whiteboard collaboration for Copilot CLI. Opens an interactive whiteboard in your browser where you can draw, sketch, and add sticky notes — then share everything back with Copilot. Copilot sees your drawings and responds with analysis, suggestions, and ideas.",
|
||||||
|
"version": "1.0.0"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "noob-mode",
|
"name": "noob-mode",
|
||||||
"source": "noob-mode",
|
"source": "noob-mode",
|
||||||
|
|||||||
@@ -47,6 +47,7 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-plugins) for guidelines on how t
|
|||||||
| [java-mcp-development](../plugins/java-mcp-development/README.md) | Complete toolkit for building Model Context Protocol servers in Java using the official MCP Java SDK with reactive streams and Spring Boot integration. | 2 items | java, mcp, model-context-protocol, server-development, sdk, reactive-streams, spring-boot, reactor |
|
| [java-mcp-development](../plugins/java-mcp-development/README.md) | Complete toolkit for building Model Context Protocol servers in Java using the official MCP Java SDK with reactive streams and Spring Boot integration. | 2 items | java, mcp, model-context-protocol, server-development, sdk, reactive-streams, spring-boot, reactor |
|
||||||
| [kotlin-mcp-development](../plugins/kotlin-mcp-development/README.md) | Complete toolkit for building Model Context Protocol (MCP) servers in Kotlin using the official io.modelcontextprotocol:kotlin-sdk library. Includes instructions for best practices, a prompt for generating servers, and an expert chat mode for guidance. | 2 items | kotlin, mcp, model-context-protocol, kotlin-multiplatform, server-development, ktor |
|
| [kotlin-mcp-development](../plugins/kotlin-mcp-development/README.md) | Complete toolkit for building Model Context Protocol (MCP) servers in Kotlin using the official io.modelcontextprotocol:kotlin-sdk library. Includes instructions for best practices, a prompt for generating servers, and an expert chat mode for guidance. | 2 items | kotlin, mcp, model-context-protocol, kotlin-multiplatform, server-development, ktor |
|
||||||
| [mcp-m365-copilot](../plugins/mcp-m365-copilot/README.md) | Comprehensive collection for building declarative agents with Model Context Protocol integration for Microsoft 365 Copilot | 4 items | mcp, m365-copilot, declarative-agents, api-plugins, model-context-protocol, adaptive-cards |
|
| [mcp-m365-copilot](../plugins/mcp-m365-copilot/README.md) | Comprehensive collection for building declarative agents with Model Context Protocol integration for Microsoft 365 Copilot | 4 items | mcp, m365-copilot, declarative-agents, api-plugins, model-context-protocol, adaptive-cards |
|
||||||
|
| [napkin](../plugins/napkin/README.md) | Visual whiteboard collaboration for Copilot CLI. Opens an interactive whiteboard in your browser where you can draw, sketch, and add sticky notes — then share everything back with Copilot. Copilot sees your drawings and responds with analysis, suggestions, and ideas. | 1 items | whiteboard, visual, collaboration, brainstorming, non-technical, drawing, sticky-notes, accessibility, copilot-cli, ux |
|
||||||
| [noob-mode](../plugins/noob-mode/README.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. | 1 items | accessibility, plain-english, non-technical, beginner, translation, copilot-cli, ux |
|
| [noob-mode](../plugins/noob-mode/README.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. | 1 items | accessibility, plain-english, non-technical, beginner, translation, copilot-cli, ux |
|
||||||
| [openapi-to-application-csharp-dotnet](../plugins/openapi-to-application-csharp-dotnet/README.md) | Generate production-ready .NET applications from OpenAPI specifications. Includes ASP.NET Core project scaffolding, controller generation, entity framework integration, and C# best practices. | 2 items | openapi, code-generation, api, csharp, dotnet, aspnet |
|
| [openapi-to-application-csharp-dotnet](../plugins/openapi-to-application-csharp-dotnet/README.md) | Generate production-ready .NET applications from OpenAPI specifications. Includes ASP.NET Core project scaffolding, controller generation, entity framework integration, and C# best practices. | 2 items | openapi, code-generation, api, csharp, dotnet, aspnet |
|
||||||
| [openapi-to-application-go](../plugins/openapi-to-application-go/README.md) | Generate production-ready Go applications from OpenAPI specifications. Includes project scaffolding, handler generation, middleware setup, and Go best practices for REST APIs. | 2 items | openapi, code-generation, api, go, golang |
|
| [openapi-to-application-go](../plugins/openapi-to-application-go/README.md) | Generate production-ready Go applications from OpenAPI specifications. Includes project scaffolding, handler generation, middleware setup, and Go best practices for REST APIs. | 2 items | openapi, code-generation, api, go, golang |
|
||||||
|
|||||||
@@ -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-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 |
|
| [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` |
|
| [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 |
|
| [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` |
|
| [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 |
|
| [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 |
|
||||||
|
|||||||
25
plugins/napkin/.github/plugin/plugin.json
vendored
Normal file
25
plugins/napkin/.github/plugin/plugin.json
vendored
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"name": "napkin",
|
||||||
|
"description": "Visual whiteboard collaboration for Copilot CLI. Opens an interactive whiteboard in your browser where you can draw, sketch, and add sticky notes — then share everything back with Copilot. Copilot sees your drawings and responds with analysis, suggestions, and ideas.",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"author": {
|
||||||
|
"name": "Awesome Copilot Community"
|
||||||
|
},
|
||||||
|
"repository": "https://github.com/github/awesome-copilot",
|
||||||
|
"license": "MIT",
|
||||||
|
"keywords": [
|
||||||
|
"whiteboard",
|
||||||
|
"visual",
|
||||||
|
"collaboration",
|
||||||
|
"brainstorming",
|
||||||
|
"non-technical",
|
||||||
|
"drawing",
|
||||||
|
"sticky-notes",
|
||||||
|
"accessibility",
|
||||||
|
"copilot-cli",
|
||||||
|
"ux"
|
||||||
|
],
|
||||||
|
"skills": [
|
||||||
|
"./skills/napkin/"
|
||||||
|
]
|
||||||
|
}
|
||||||
163
plugins/napkin/README.md
Normal file
163
plugins/napkin/README.md
Normal file
@@ -0,0 +1,163 @@
|
|||||||
|
# Napkin — Visual Whiteboard for Copilot CLI
|
||||||
|
|
||||||
|
A whiteboard that opens in your browser and connects to Copilot CLI. Draw, sketch, add sticky notes — then share everything back with Copilot. Copilot sees your drawings and responds with analysis, suggestions, and ideas.
|
||||||
|
|
||||||
|
Built for people who aren't software developers: lawyers, PMs, business stakeholders, designers, writers — anyone who thinks better visually.
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
Install the plugin directly from Copilot CLI:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
copilot plugin install napkin@awesome-copilot
|
||||||
|
```
|
||||||
|
|
||||||
|
That's it. No other software, accounts, or setup required.
|
||||||
|
|
||||||
|
### Verify It's Installed
|
||||||
|
|
||||||
|
Run this in Copilot CLI to confirm the plugin is available:
|
||||||
|
|
||||||
|
```
|
||||||
|
/skills
|
||||||
|
```
|
||||||
|
|
||||||
|
You should see **napkin** in the list of available skills.
|
||||||
|
|
||||||
|
## How to Use It
|
||||||
|
|
||||||
|
### Step 1: Say "let's napkin"
|
||||||
|
|
||||||
|
Open Copilot CLI and type `let's napkin` (or "open a napkin" or "start a whiteboard"). Copilot creates a whiteboard and opens it in your browser.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Step 2: Your whiteboard opens
|
||||||
|
|
||||||
|
A clean whiteboard appears in your browser with simple drawing tools. If it's your first time, a quick welcome message explains how everything works.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Step 3: Draw and brainstorm
|
||||||
|
|
||||||
|
Use the tools to sketch ideas, add sticky notes, draw arrows between concepts — whatever helps you think. This is your space.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Step 4: Share with Copilot
|
||||||
|
|
||||||
|
When you're ready for Copilot's input, click the green **Share with Copilot** button. It saves a screenshot and copies your notes.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Step 5: Copilot responds
|
||||||
|
|
||||||
|
Go back to your terminal and say `check the napkin`. Copilot looks at your whiteboard — including your drawings — and responds.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## What's Included
|
||||||
|
|
||||||
|
### Skill
|
||||||
|
|
||||||
|
| Skill | Description |
|
||||||
|
|-------|-------------|
|
||||||
|
| `napkin` | Visual whiteboard collaboration — creates a whiteboard, interprets your drawings and notes, and responds conversationally |
|
||||||
|
|
||||||
|
### Bundled Assets
|
||||||
|
|
||||||
|
| Asset | Description |
|
||||||
|
|-------|-------------|
|
||||||
|
| `assets/napkin.html` | The whiteboard application — a single HTML file that opens in any browser, no installation needed |
|
||||||
|
|
||||||
|
## Whiteboard Features
|
||||||
|
|
||||||
|
| Feature | What it does |
|
||||||
|
|---------|-------------|
|
||||||
|
| **Freehand drawing** | Draw with a pen tool, just like on paper |
|
||||||
|
| **Shapes** | Rectangles, circles, lines, and arrows — wobbly shapes snap to clean versions |
|
||||||
|
| **Sticky notes** | Draggable, resizable, color-coded notes (yellow, pink, blue, green) |
|
||||||
|
| **Text labels** | Click anywhere to type text directly on the canvas |
|
||||||
|
| **Pan and zoom** | Hold spacebar and drag to move around; scroll to zoom |
|
||||||
|
| **Undo/Redo** | Made a mistake? Ctrl+Z to undo, Ctrl+Shift+Z to redo |
|
||||||
|
| **Auto-save** | Your work saves automatically — close the tab, come back later, it's still there |
|
||||||
|
| **Share with Copilot** | One button exports a screenshot and copies your text content |
|
||||||
|
|
||||||
|
## How Copilot Understands Your Drawings
|
||||||
|
|
||||||
|
When you click "Share with Copilot," two things happen:
|
||||||
|
|
||||||
|
1. **A screenshot is saved** (`napkin-snapshot.png` in your Downloads or Desktop folder). Copilot reads this image and can see everything — sketches, arrows, groupings, annotations, sticky notes, spatial layout.
|
||||||
|
|
||||||
|
2. **Your text is copied to clipboard.** This gives Copilot the exact text from your sticky notes and labels, so nothing gets misread from the image.
|
||||||
|
|
||||||
|
Copilot uses both to understand what you're thinking and respond as a collaborator — not a computer analyzing data, but a colleague looking at your whiteboard sketch.
|
||||||
|
|
||||||
|
## What Can You Draw?
|
||||||
|
|
||||||
|
Anything. But here are some things Copilot is especially good at interpreting:
|
||||||
|
|
||||||
|
| What you draw | What Copilot understands |
|
||||||
|
|---------------|------------------------|
|
||||||
|
| Boxes connected by arrows | A process flow or workflow |
|
||||||
|
| Items circled together | A group of related ideas |
|
||||||
|
| Sticky notes in different colors | Categories or priorities |
|
||||||
|
| Text with a line through it | Something rejected or deprioritized |
|
||||||
|
| Stars or exclamation marks | High-priority items |
|
||||||
|
| Items on opposite sides | A comparison or contrast |
|
||||||
|
| A rough org chart | Reporting structure or team layout |
|
||||||
|
|
||||||
|
## Keyboard Shortcuts
|
||||||
|
|
||||||
|
You don't need these — everything works with mouse clicks. But if you want to work faster:
|
||||||
|
|
||||||
|
| Key | Tool |
|
||||||
|
|-----|------|
|
||||||
|
| V | Select / move |
|
||||||
|
| P | Pen (draw) |
|
||||||
|
| R | Rectangle |
|
||||||
|
| C | Circle |
|
||||||
|
| A | Arrow |
|
||||||
|
| L | Line |
|
||||||
|
| T | Text |
|
||||||
|
| N | New sticky note |
|
||||||
|
| E | Eraser |
|
||||||
|
| Delete | Delete selected item (not yet supported) |
|
||||||
|
| Ctrl+Z | Undo |
|
||||||
|
| Ctrl+Shift+Z | Redo |
|
||||||
|
| Space + drag | Pan the canvas |
|
||||||
|
| ? | Show help |
|
||||||
|
|
||||||
|
## FAQ
|
||||||
|
|
||||||
|
**Do I need to install anything besides the plugin?**
|
||||||
|
No. The whiteboard is a single HTML file that opens in your browser. No apps, no accounts, no setup.
|
||||||
|
|
||||||
|
**Does it work offline?**
|
||||||
|
Yes. Everything runs locally in your browser. No internet connection needed for the whiteboard itself.
|
||||||
|
|
||||||
|
**What browsers work?**
|
||||||
|
Any modern browser — Chrome, Safari, Edge, Firefox. Chrome works best for the "copy to clipboard" feature.
|
||||||
|
|
||||||
|
**Can I save my work?**
|
||||||
|
Yes, automatically. The whiteboard saves to your browser's local storage every few seconds. Close the tab, come back later, your work is still there.
|
||||||
|
|
||||||
|
**Can Copilot really understand my drawings?**
|
||||||
|
Yes. The AI models powering Copilot CLI (Claude, GPT) can interpret images. They can see your sketches, read your handwriting-style text, understand spatial relationships, and interpret common visual patterns like flowcharts, groupings, and annotations.
|
||||||
|
|
||||||
|
**What if I'm not a good artist?**
|
||||||
|
Doesn't matter. The whiteboard snaps wobbly shapes to clean versions, and Copilot is trained to interpret rough sketches. Stick figures and messy arrows work just fine.
|
||||||
|
|
||||||
|
**How do I start over?**
|
||||||
|
Say "let's napkin" again in the CLI. Copilot will ask if you want to keep the existing whiteboard or start fresh.
|
||||||
|
|
||||||
|
**What platforms are supported?**
|
||||||
|
macOS, Linux, and Windows. The whiteboard runs in any browser. Clipboard integration uses platform-native tools (`pbpaste` on macOS, `xclip` on Linux, PowerShell on Windows).
|
||||||
|
|
||||||
|
## Source
|
||||||
|
|
||||||
|
This plugin is part of [Awesome Copilot](https://github.com/github/awesome-copilot), a community-driven collection of GitHub Copilot extensions.
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
MIT
|
||||||
154
skills/napkin/SKILL.md
Normal file
154
skills/napkin/SKILL.md
Normal file
@@ -0,0 +1,154 @@
|
|||||||
|
---
|
||||||
|
name: napkin
|
||||||
|
description: '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.'
|
||||||
|
---
|
||||||
|
|
||||||
|
# Napkin — Visual Whiteboard for Copilot CLI
|
||||||
|
|
||||||
|
Napkin gives users a browser-based whiteboard where they can draw, sketch, and add sticky notes to think through ideas visually. The agent reads back the whiteboard contents (via a PNG snapshot and optional JSON data) and responds conversationally with analysis, suggestions, and next steps.
|
||||||
|
|
||||||
|
The target audience is lawyers, PMs, and business stakeholders — not software developers. Keep everything approachable and jargon-free.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Activation
|
||||||
|
|
||||||
|
When the user invokes this skill — saying things like "let's napkin," "open a napkin," "start a whiteboard," or using the slash command — do the following:
|
||||||
|
|
||||||
|
1. **Copy the bundled HTML template** from the skill assets to the user's Desktop.
|
||||||
|
- The template lives at `assets/napkin.html` relative to this SKILL.md file.
|
||||||
|
- Copy it to `~/Desktop/napkin.html`.
|
||||||
|
- If `~/Desktop/napkin.html` already exists, ask the user whether they want to open the existing one or start fresh before overwriting.
|
||||||
|
|
||||||
|
2. **Open it in the default browser:**
|
||||||
|
- macOS: `open ~/Desktop/napkin.html`
|
||||||
|
- Linux: `xdg-open ~/Desktop/napkin.html`
|
||||||
|
- Windows: `start ~/Desktop/napkin.html`
|
||||||
|
|
||||||
|
3. **Tell the user what to do next.** Say something warm and simple:
|
||||||
|
|
||||||
|
```
|
||||||
|
Your napkin is open in your browser!
|
||||||
|
|
||||||
|
Draw, sketch, or add sticky notes — whatever helps you think through your idea.
|
||||||
|
|
||||||
|
When you're ready for my input, click the green "Share with Copilot" button on the whiteboard, then come back here and say "check the napkin."
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Reading the Napkin
|
||||||
|
|
||||||
|
When the user says "check the napkin," "look at the napkin," "what do you think," "read my napkin," or anything similar, follow these steps:
|
||||||
|
|
||||||
|
### Step 1 — Read the PNG snapshot (primary)
|
||||||
|
|
||||||
|
Look for a PNG file called `napkin-snapshot.png`. Check these locations in order (the browser saves it to the user's default download folder, which varies):
|
||||||
|
|
||||||
|
1. `~/Downloads/napkin-snapshot.png`
|
||||||
|
2. `~/Desktop/napkin-snapshot.png`
|
||||||
|
|
||||||
|
Use the `view` tool to read the PNG. This sends the image as base64-encoded data to the model, which can visually interpret it. The PNG is the **primary** way the agent understands what the user drew — it captures freehand sketches, arrows, spatial layout, annotations, circled or crossed-out items, and anything else on the canvas.
|
||||||
|
|
||||||
|
If the PNG is not found in either location, do NOT silently skip it. Instead, tell the user:
|
||||||
|
|
||||||
|
```
|
||||||
|
I don't see a snapshot from your napkin yet. Here's what to do:
|
||||||
|
|
||||||
|
1. Go to your whiteboard in the browser
|
||||||
|
2. Click the green "Share with Copilot" button
|
||||||
|
3. Come back here and say "check the napkin" again
|
||||||
|
|
||||||
|
The button saves a screenshot that I can look at.
|
||||||
|
```
|
||||||
|
|
||||||
|
### Step 2 — Read the clipboard for structured JSON (supplementary)
|
||||||
|
|
||||||
|
Also try to grab structured JSON data from the system clipboard. The whiteboard copies this automatically alongside the PNG.
|
||||||
|
|
||||||
|
- macOS: `pbpaste`
|
||||||
|
- Linux: `xclip -selection clipboard -o`
|
||||||
|
- Windows: `powershell -command "Get-Clipboard"`
|
||||||
|
|
||||||
|
The JSON contains the exact text content of sticky notes and text labels, their positions, and their colors. This supplements the PNG by giving you precise text that might be hard to read from a screenshot.
|
||||||
|
|
||||||
|
If the clipboard doesn't contain JSON data, that's fine — the PNG alone gives the model plenty to work with. Do not treat a missing clipboard as an error.
|
||||||
|
|
||||||
|
### Step 3 — Interpret both sources together
|
||||||
|
|
||||||
|
Synthesize the visual snapshot and the structured text into a coherent understanding of what the user is thinking or planning:
|
||||||
|
|
||||||
|
- **From the PNG:** Describe what you see — sketches, diagrams, flowcharts, groupings, arrows, spatial layout, annotations, circled items, crossed-out items, emphasis marks.
|
||||||
|
- **From the JSON:** Read the exact text content of sticky notes and labels, noting their positions and colors.
|
||||||
|
- **Combine both** into a single, conversational interpretation.
|
||||||
|
|
||||||
|
### Step 4 — Respond conversationally
|
||||||
|
|
||||||
|
Do not dump raw data or a technical summary. Respond as a collaborator who looked at someone's whiteboard sketch. Examples:
|
||||||
|
|
||||||
|
- "I can see you've sketched out a three-stage process — it looks like you're thinking about [X] flowing into [Y] and then [Z]. The sticky note in the corner says '[text]' — is that a concern you want me to address?"
|
||||||
|
- "It looks like you've grouped these four ideas together on the left side and separated them from the two items on the right. Are you thinking of these as two different categories?"
|
||||||
|
- "I see you drew arrows connecting [A] to [B] to [C] — is this the workflow you're envisioning?"
|
||||||
|
|
||||||
|
### Step 5 — Ask what's next
|
||||||
|
|
||||||
|
Always end by offering a next step:
|
||||||
|
|
||||||
|
- "Want me to build on this?"
|
||||||
|
- "Should I turn this into a structured document?"
|
||||||
|
- "Want me to add my suggestions to the napkin?"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Responding on the Napkin
|
||||||
|
|
||||||
|
When the user wants the agent to add content back to the whiteboard:
|
||||||
|
|
||||||
|
- The agent **cannot** directly modify the HTML file's canvas state — that's managed by JavaScript running in the browser.
|
||||||
|
- Instead, offer practical alternatives:
|
||||||
|
- Provide the response right here in the CLI, and suggest the user add it to the napkin manually.
|
||||||
|
- Offer to create a separate document (markdown, memo, checklist, etc.) based on what was interpreted from the napkin.
|
||||||
|
- If it makes sense, create an updated copy of `napkin.html` with pre-loaded content.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tone and Style
|
||||||
|
|
||||||
|
- Use the same approachable, non-technical tone as the noob-mode skill.
|
||||||
|
- Never use developer jargon without explaining it in plain English.
|
||||||
|
- Treat the napkin as a creative, collaborative space — not a formal input mechanism.
|
||||||
|
- Be encouraging about the user's sketches regardless of artistic quality.
|
||||||
|
- Frame responses as "building on your thinking," not "analyzing your input."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Error Handling
|
||||||
|
|
||||||
|
**PNG snapshot not found:**
|
||||||
|
|
||||||
|
```
|
||||||
|
I don't see a snapshot from your napkin yet. Here's what to do:
|
||||||
|
|
||||||
|
1. Go to your whiteboard in the browser
|
||||||
|
2. Click the green "Share with Copilot" button
|
||||||
|
3. Come back here and say "check the napkin" again
|
||||||
|
|
||||||
|
The button saves a screenshot that I can look at.
|
||||||
|
```
|
||||||
|
|
||||||
|
**Whiteboard file doesn't exist on Desktop:**
|
||||||
|
|
||||||
|
```
|
||||||
|
It looks like we haven't started a napkin yet. Want me to open one for you?
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Important Notes
|
||||||
|
|
||||||
|
- The PNG interpretation is the **primary** channel. Multimodal models can read and interpret the base64 image data returned by the `view` tool.
|
||||||
|
- The JSON clipboard data is **supplementary** — it provides precise text but does not capture freehand drawings.
|
||||||
|
- Always check for the PNG first. If it isn't found, prompt the user to click "Share with Copilot."
|
||||||
|
- If the clipboard doesn't have JSON data, proceed with the PNG alone.
|
||||||
|
- The HTML template is located at `assets/napkin.html` relative to this SKILL.md file.
|
||||||
|
- If the noob-mode skill is also active, use its risk indicator format (green/yellow/red) when requesting file or bash permissions.
|
||||||
2019
skills/napkin/assets/napkin.html
Normal file
2019
skills/napkin/assets/napkin.html
Normal file
File diff suppressed because it is too large
Load Diff
107
skills/napkin/assets/step1-activate.svg
Normal file
107
skills/napkin/assets/step1-activate.svg
Normal file
@@ -0,0 +1,107 @@
|
|||||||
|
<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>
|
||||||
|
After Width: | Height: | Size: 5.9 KiB |
157
skills/napkin/assets/step2-whiteboard.svg
Normal file
157
skills/napkin/assets/step2-whiteboard.svg
Normal file
@@ -0,0 +1,157 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="480" viewBox="0 0 800 480">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="overlayBg" x1="0" y1="0" x2="0" y2="1">
|
||||||
|
<stop offset="0%" stop-color="white"/>
|
||||||
|
<stop offset="100%" stop-color="#F8FAFB"/>
|
||||||
|
</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">2</text>
|
||||||
|
<text x="72" y="33" font-family="Arial, Helvetica, sans-serif" font-size="15" font-weight="bold" fill="#334155">The whiteboard opens in your browser</text>
|
||||||
|
|
||||||
|
<!-- Browser Window -->
|
||||||
|
<g transform="translate(30, 52)">
|
||||||
|
<!-- Browser outer frame -->
|
||||||
|
<rect width="740" height="400" rx="10" fill="white" stroke="#D1D5DB" stroke-width="1.5"/>
|
||||||
|
|
||||||
|
<!-- Browser chrome -->
|
||||||
|
<rect width="740" height="38" rx="10" fill="#F1F5F9"/>
|
||||||
|
<rect x="0" y="28" width="740" height="10" fill="#F1F5F9"/>
|
||||||
|
<!-- Window buttons -->
|
||||||
|
<circle cx="18" cy="19" r="5.5" fill="#FF5F57"/>
|
||||||
|
<circle cx="36" cy="19" r="5.5" fill="#FFBD2E"/>
|
||||||
|
<circle cx="54" cy="19" r="5.5" fill="#28C840"/>
|
||||||
|
<!-- Address bar -->
|
||||||
|
<rect x="80" y="8" width="580" height="22" rx="6" fill="white" stroke="#E2E8F0" stroke-width="1"/>
|
||||||
|
<text x="96" y="23" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#94A3B8">file:///Users/.../napkin.html</text>
|
||||||
|
<!-- Lock icon substitute -->
|
||||||
|
<circle cx="90" cy="19" r="3" fill="none" stroke="#94A3B8" stroke-width="1"/>
|
||||||
|
|
||||||
|
<!-- Whiteboard area -->
|
||||||
|
<rect x="1" y="38" width="738" height="361" fill="white" rx="0"/>
|
||||||
|
|
||||||
|
<!-- Toolbar -->
|
||||||
|
<rect x="120" y="50" width="500" height="40" rx="20" fill="white" stroke="#E2E8F0" stroke-width="1.5"/>
|
||||||
|
<!-- Tool buttons -->
|
||||||
|
<!-- Pen -->
|
||||||
|
<g transform="translate(155, 58)">
|
||||||
|
<rect width="60" height="24" rx="12" fill="#F1F5F9"/>
|
||||||
|
<line x1="16" y1="18" x2="26" y2="6" stroke="#64748B" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<circle cx="16" cy="18" r="2" fill="#64748B"/>
|
||||||
|
<text x="34" y="16" font-family="Arial, Helvetica, sans-serif" font-size="9" fill="#64748B">Pen</text>
|
||||||
|
</g>
|
||||||
|
<!-- Shapes -->
|
||||||
|
<g transform="translate(230, 58)">
|
||||||
|
<rect width="76" height="24" rx="12" fill="#F1F5F9"/>
|
||||||
|
<rect x="10" y="6" width="12" height="12" rx="2" fill="none" stroke="#64748B" stroke-width="1.5"/>
|
||||||
|
<text x="30" y="16" font-family="Arial, Helvetica, sans-serif" font-size="9" fill="#64748B">Shapes</text>
|
||||||
|
</g>
|
||||||
|
<!-- Arrow -->
|
||||||
|
<g transform="translate(320, 58)">
|
||||||
|
<rect width="70" height="24" rx="12" fill="#F1F5F9"/>
|
||||||
|
<line x1="12" y1="16" x2="24" y2="8" stroke="#64748B" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<polygon points="22,5 28,8 22,11" fill="#64748B"/>
|
||||||
|
<text x="34" y="16" font-family="Arial, Helvetica, sans-serif" font-size="9" fill="#64748B">Arrow</text>
|
||||||
|
</g>
|
||||||
|
<!-- Sticky Note -->
|
||||||
|
<g transform="translate(404, 58)">
|
||||||
|
<rect width="80" height="24" rx="12" fill="#F1F5F9"/>
|
||||||
|
<rect x="10" y="6" width="12" height="12" rx="1" fill="#FEF3C7" stroke="#F59E0B" stroke-width="0.8"/>
|
||||||
|
<text x="28" y="16" font-family="Arial, Helvetica, sans-serif" font-size="9" fill="#64748B">Sticky Note</text>
|
||||||
|
</g>
|
||||||
|
<!-- Eraser -->
|
||||||
|
<g transform="translate(498, 58)">
|
||||||
|
<rect width="70" height="24" rx="12" fill="#F1F5F9"/>
|
||||||
|
<rect x="10" y="8" width="14" height="10" rx="2" fill="none" stroke="#64748B" stroke-width="1.5"/>
|
||||||
|
<text x="30" y="16" font-family="Arial, Helvetica, sans-serif" font-size="9" fill="#64748B">Eraser</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Share with Copilot button -->
|
||||||
|
<rect x="540" y="356" width="180" height="36" rx="18" fill="#0D9488"/>
|
||||||
|
<text x="582" y="378" font-family="Arial, Helvetica, sans-serif" font-size="13" fill="white" font-weight="bold">Share with Copilot</text>
|
||||||
|
|
||||||
|
<!-- Subtle grid dots on canvas -->
|
||||||
|
<g fill="#F1F5F9" opacity="0.8">
|
||||||
|
<circle cx="100" cy="140" r="1.5"/>
|
||||||
|
<circle cx="160" cy="140" r="1.5"/>
|
||||||
|
<circle cx="220" cy="140" r="1.5"/>
|
||||||
|
<circle cx="280" cy="140" r="1.5"/>
|
||||||
|
<circle cx="340" cy="140" r="1.5"/>
|
||||||
|
<circle cx="400" cy="140" r="1.5"/>
|
||||||
|
<circle cx="460" cy="140" r="1.5"/>
|
||||||
|
<circle cx="520" cy="140" r="1.5"/>
|
||||||
|
<circle cx="580" cy="140" r="1.5"/>
|
||||||
|
<circle cx="640" cy="140" r="1.5"/>
|
||||||
|
<circle cx="100" cy="200" r="1.5"/>
|
||||||
|
<circle cx="160" cy="200" r="1.5"/>
|
||||||
|
<circle cx="220" cy="200" r="1.5"/>
|
||||||
|
<circle cx="280" cy="200" r="1.5"/>
|
||||||
|
<circle cx="340" cy="200" r="1.5"/>
|
||||||
|
<circle cx="400" cy="200" r="1.5"/>
|
||||||
|
<circle cx="460" cy="200" r="1.5"/>
|
||||||
|
<circle cx="520" cy="200" r="1.5"/>
|
||||||
|
<circle cx="580" cy="200" r="1.5"/>
|
||||||
|
<circle cx="640" cy="200" r="1.5"/>
|
||||||
|
<circle cx="100" cy="260" r="1.5"/>
|
||||||
|
<circle cx="160" cy="260" r="1.5"/>
|
||||||
|
<circle cx="220" cy="260" r="1.5"/>
|
||||||
|
<circle cx="280" cy="260" r="1.5"/>
|
||||||
|
<circle cx="340" cy="260" r="1.5"/>
|
||||||
|
<circle cx="400" cy="260" r="1.5"/>
|
||||||
|
<circle cx="460" cy="260" r="1.5"/>
|
||||||
|
<circle cx="520" cy="260" r="1.5"/>
|
||||||
|
<circle cx="580" cy="260" r="1.5"/>
|
||||||
|
<circle cx="640" cy="260" r="1.5"/>
|
||||||
|
<circle cx="100" cy="320" r="1.5"/>
|
||||||
|
<circle cx="160" cy="320" r="1.5"/>
|
||||||
|
<circle cx="220" cy="320" r="1.5"/>
|
||||||
|
<circle cx="280" cy="320" r="1.5"/>
|
||||||
|
<circle cx="340" cy="320" r="1.5"/>
|
||||||
|
<circle cx="400" cy="320" r="1.5"/>
|
||||||
|
<circle cx="460" cy="320" r="1.5"/>
|
||||||
|
<circle cx="520" cy="320" r="1.5"/>
|
||||||
|
<circle cx="580" cy="320" r="1.5"/>
|
||||||
|
<circle cx="640" cy="320" r="1.5"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Onboarding Overlay -->
|
||||||
|
<!-- Semi-transparent backdrop -->
|
||||||
|
<rect x="1" y="38" width="738" height="361" fill="black" opacity="0.15" rx="0"/>
|
||||||
|
|
||||||
|
<!-- Overlay card -->
|
||||||
|
<rect x="195" y="135" width="350" height="200" rx="16" fill="white" stroke="#E2E8F0" stroke-width="1"/>
|
||||||
|
|
||||||
|
<!-- Pencil icon -->
|
||||||
|
<circle cx="370" cy="175" r="22" fill="#F0FDFA"/>
|
||||||
|
<line x1="360" y1="185" x2="380" y2="165" stroke="#0D9488" stroke-width="3" stroke-linecap="round"/>
|
||||||
|
<circle cx="360" cy="185" r="3" fill="#0D9488"/>
|
||||||
|
|
||||||
|
<!-- Welcome text -->
|
||||||
|
<text x="370" y="218" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="18" font-weight="bold" fill="#1E293B">Welcome to your Napkin!</text>
|
||||||
|
<text x="370" y="244" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#64748B">Sketch your ideas here — draw, write, add sticky notes.</text>
|
||||||
|
<text x="370" y="262" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#64748B">When you're done, click "Share with Copilot"</text>
|
||||||
|
<text x="370" y="280" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#64748B">to send your sketch back to the CLI.</text>
|
||||||
|
|
||||||
|
<!-- Got it button -->
|
||||||
|
<rect x="320" y="296" width="100" height="32" rx="16" fill="#0D9488"/>
|
||||||
|
<text x="370" y="316" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="13" font-weight="bold" fill="white">Got it!</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Callout annotations -->
|
||||||
|
<!-- Toolbar callout -->
|
||||||
|
<rect x="608" y="68" width="90" height="26" rx="6" fill="#0D9488" opacity="0.12"/>
|
||||||
|
<text x="653" y="85" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="10" fill="#0D9488" font-weight="bold">Drawing tools</text>
|
||||||
|
<path d="M608,82 L590,82" fill="none" stroke="#0D9488" stroke-width="1.5" stroke-dasharray="3,2"/>
|
||||||
|
<polygon points="592,79 586,82 592,85" fill="#0D9488"/>
|
||||||
|
|
||||||
|
<!-- Share button callout -->
|
||||||
|
<path d="M726,396 C746,396 756,416 756,436" fill="none" stroke="#0D9488" stroke-width="1.5" stroke-dasharray="3,2"/>
|
||||||
|
<polygon points="753,434 756,442 759,434" fill="#0D9488"/>
|
||||||
|
<rect x="690" y="444" width="104" height="26" rx="6" fill="#0D9488" opacity="0.12"/>
|
||||||
|
<text x="742" y="461" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="10" fill="#0D9488" font-weight="bold">Send to Copilot</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 8.0 KiB |
143
skills/napkin/assets/step3-draw.svg
Normal file
143
skills/napkin/assets/step3-draw.svg
Normal file
@@ -0,0 +1,143 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="480" viewBox="0 0 800 480">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="stickyYellow" x1="0" y1="0" x2="0" y2="1">
|
||||||
|
<stop offset="0%" stop-color="#FEF9C3"/>
|
||||||
|
<stop offset="100%" stop-color="#FEF3C7"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="stickyPink" x1="0" y1="0" x2="0" y2="1">
|
||||||
|
<stop offset="0%" stop-color="#FCE7F3"/>
|
||||||
|
<stop offset="100%" stop-color="#FBCFE8"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="stickyBlue" x1="0" y1="0" x2="0" y2="1">
|
||||||
|
<stop offset="0%" stop-color="#DBEAFE"/>
|
||||||
|
<stop offset="100%" stop-color="#BFDBFE"/>
|
||||||
|
</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">3</text>
|
||||||
|
<text x="72" y="33" font-family="Arial, Helvetica, sans-serif" font-size="15" font-weight="bold" fill="#334155">Sketch your ideas on the whiteboard</text>
|
||||||
|
|
||||||
|
<!-- Browser Window -->
|
||||||
|
<g transform="translate(30, 52)">
|
||||||
|
<!-- Browser frame -->
|
||||||
|
<rect width="740" height="390" rx="10" fill="white" stroke="#D1D5DB" stroke-width="1.5"/>
|
||||||
|
<!-- Browser chrome -->
|
||||||
|
<rect width="740" height="38" rx="10" fill="#F1F5F9"/>
|
||||||
|
<rect x="0" y="28" width="740" height="10" fill="#F1F5F9"/>
|
||||||
|
<circle cx="18" cy="19" r="5.5" fill="#FF5F57"/>
|
||||||
|
<circle cx="36" cy="19" r="5.5" fill="#FFBD2E"/>
|
||||||
|
<circle cx="54" cy="19" r="5.5" fill="#28C840"/>
|
||||||
|
<rect x="80" y="8" width="580" height="22" rx="6" fill="white" stroke="#E2E8F0" stroke-width="1"/>
|
||||||
|
<text x="96" y="23" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#94A3B8">napkin.html</text>
|
||||||
|
|
||||||
|
<!-- Whiteboard canvas -->
|
||||||
|
<rect x="1" y="38" width="738" height="351" fill="white"/>
|
||||||
|
|
||||||
|
<!-- Toolbar -->
|
||||||
|
<rect x="120" y="48" width="500" height="36" rx="18" fill="white" stroke="#E2E8F0" stroke-width="1.5"/>
|
||||||
|
<!-- Pen tool ACTIVE -->
|
||||||
|
<g transform="translate(155, 54)">
|
||||||
|
<rect width="60" height="24" rx="12" fill="#0D9488"/>
|
||||||
|
<line x1="16" y1="18" x2="26" y2="6" stroke="white" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<circle cx="16" cy="18" r="2" fill="white"/>
|
||||||
|
<text x="34" y="16" font-family="Arial, Helvetica, sans-serif" font-size="9" fill="white" font-weight="bold">Pen</text>
|
||||||
|
</g>
|
||||||
|
<!-- Other tools -->
|
||||||
|
<g transform="translate(230, 54)">
|
||||||
|
<rect width="76" height="24" rx="12" fill="#F1F5F9"/>
|
||||||
|
<rect x="10" y="6" width="12" height="12" rx="2" fill="none" stroke="#64748B" stroke-width="1.5"/>
|
||||||
|
<text x="30" y="16" font-family="Arial, Helvetica, sans-serif" font-size="9" fill="#64748B">Shapes</text>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(320, 54)">
|
||||||
|
<rect width="70" height="24" rx="12" fill="#F1F5F9"/>
|
||||||
|
<line x1="12" y1="16" x2="24" y2="8" stroke="#64748B" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<polygon points="22,5 28,8 22,11" fill="#64748B"/>
|
||||||
|
<text x="34" y="16" font-family="Arial, Helvetica, sans-serif" font-size="9" fill="#64748B">Arrow</text>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(404, 54)">
|
||||||
|
<rect width="80" height="24" rx="12" fill="#F1F5F9"/>
|
||||||
|
<rect x="10" y="6" width="12" height="12" rx="1" fill="#FEF3C7" stroke="#F59E0B" stroke-width="0.8"/>
|
||||||
|
<text x="28" y="16" font-family="Arial, Helvetica, sans-serif" font-size="9" fill="#64748B">Sticky Note</text>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(498, 54)">
|
||||||
|
<rect width="70" height="24" rx="12" fill="#F1F5F9"/>
|
||||||
|
<rect x="10" y="8" width="14" height="10" rx="2" fill="none" stroke="#64748B" stroke-width="1.5"/>
|
||||||
|
<text x="30" y="16" font-family="Arial, Helvetica, sans-serif" font-size="9" fill="#64748B">Eraser</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- ======= USER DRAWINGS ======= -->
|
||||||
|
|
||||||
|
<!-- Flowchart Box 1: "Draft" -->
|
||||||
|
<rect x="80" y="130" width="130" height="60" rx="8" fill="white" stroke="#475569" stroke-width="2"/>
|
||||||
|
<text x="145" y="158" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14" fill="#1E293B" font-weight="bold">Draft</text>
|
||||||
|
<text x="145" y="176" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#64748B">proposal</text>
|
||||||
|
|
||||||
|
<!-- Arrow 1 to 2 -->
|
||||||
|
<line x1="210" y1="160" x2="270" y2="160" stroke="#475569" stroke-width="2.5" stroke-linecap="round"/>
|
||||||
|
<polygon points="268,154 280,160 268,166" fill="#475569"/>
|
||||||
|
|
||||||
|
<!-- Flowchart Box 2: "Review" -->
|
||||||
|
<rect x="280" y="130" width="130" height="60" rx="8" fill="white" stroke="#475569" stroke-width="2"/>
|
||||||
|
<text x="345" y="158" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14" fill="#1E293B" font-weight="bold">Review</text>
|
||||||
|
<text x="345" y="176" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#64748B">with team</text>
|
||||||
|
|
||||||
|
<!-- Arrow 2 to 3 -->
|
||||||
|
<line x1="410" y1="160" x2="470" y2="160" stroke="#475569" stroke-width="2.5" stroke-linecap="round"/>
|
||||||
|
<polygon points="468,154 480,160 468,166" fill="#475569"/>
|
||||||
|
|
||||||
|
<!-- Flowchart Box 3: "Ship" -->
|
||||||
|
<rect x="480" y="130" width="130" height="60" rx="8" fill="white" stroke="#475569" stroke-width="2"/>
|
||||||
|
<text x="545" y="158" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14" fill="#1E293B" font-weight="bold">Ship</text>
|
||||||
|
<text x="545" y="176" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#64748B">to customer</text>
|
||||||
|
|
||||||
|
<!-- Sticky Note 1: Yellow -->
|
||||||
|
<g transform="translate(75, 225) rotate(-2)">
|
||||||
|
<rect width="140" height="90" rx="3" fill="url(#stickyYellow)" stroke="#F59E0B" stroke-width="0.8"/>
|
||||||
|
<text x="14" y="28" font-family="Arial, Helvetica, sans-serif" font-size="13" fill="#92400E" font-weight="bold">Need legal</text>
|
||||||
|
<text x="14" y="48" font-family="Arial, Helvetica, sans-serif" font-size="13" fill="#92400E" font-weight="bold">review</text>
|
||||||
|
<text x="14" y="72" font-family="Arial, Helvetica, sans-serif" font-size="10" fill="#B45309">before shipping!</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Sticky Note 2: Pink -->
|
||||||
|
<g transform="translate(260, 240) rotate(1.5)">
|
||||||
|
<rect width="130" height="80" rx="3" fill="url(#stickyPink)" stroke="#EC4899" stroke-width="0.8"/>
|
||||||
|
<text x="14" y="28" font-family="Arial, Helvetica, sans-serif" font-size="13" fill="#9D174D" font-weight="bold">Q2 deadline</text>
|
||||||
|
<text x="14" y="50" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#BE185D">June 30th</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Sticky Note 3: Blue -->
|
||||||
|
<g transform="translate(440, 230) rotate(-1)">
|
||||||
|
<rect width="140" height="85" rx="3" fill="url(#stickyBlue)" stroke="#3B82F6" stroke-width="0.8"/>
|
||||||
|
<text x="14" y="28" font-family="Arial, Helvetica, sans-serif" font-size="13" fill="#1E40AF" font-weight="bold">Check with</text>
|
||||||
|
<text x="14" y="48" font-family="Arial, Helvetica, sans-serif" font-size="13" fill="#1E40AF" font-weight="bold">Sarah</text>
|
||||||
|
<text x="14" y="70" font-family="Arial, Helvetica, sans-serif" font-size="10" fill="#2563EB">re: compliance</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Freehand circle around "Review" box -->
|
||||||
|
<ellipse cx="345" cy="160" rx="85" ry="45" fill="none" stroke="#EF4444" stroke-width="2" stroke-dasharray="6,3" opacity="0.7"/>
|
||||||
|
|
||||||
|
<!-- Freehand underline under "Ship" -->
|
||||||
|
<path d="M490,186 C510,192 540,190 600,188" fill="none" stroke="#F59E0B" stroke-width="2.5" stroke-linecap="round" opacity="0.7"/>
|
||||||
|
|
||||||
|
<!-- Small star/asterisk near Review box -->
|
||||||
|
<text x="420" y="128" font-family="Arial, Helvetica, sans-serif" font-size="20" fill="#EF4444" font-weight="bold">*</text>
|
||||||
|
<text x="430" y="128" font-family="Arial, Helvetica, sans-serif" font-size="10" fill="#EF4444">important!</text>
|
||||||
|
|
||||||
|
<!-- Freehand question marks -->
|
||||||
|
<text x="620" y="170" font-family="Arial, Helvetica, sans-serif" font-size="18" fill="#94A3B8">?</text>
|
||||||
|
<text x="636" y="162" font-family="Arial, Helvetica, sans-serif" font-size="14" fill="#CBD5E1">?</text>
|
||||||
|
|
||||||
|
<!-- Share button (still visible) -->
|
||||||
|
<rect x="540" y="348" width="180" height="34" rx="17" fill="#0D9488"/>
|
||||||
|
<text x="582" y="369" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="white" font-weight="bold">Share with Copilot</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Callout annotation -->
|
||||||
|
<rect x="30" y="448" width="440" height="26" rx="8" fill="#0D9488" opacity="0.1"/>
|
||||||
|
<text x="42" y="465" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#0D9488" font-weight="bold">Draw, sketch, and add notes — whatever helps you think</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 8.5 KiB |
98
skills/napkin/assets/step4-share.svg
Normal file
98
skills/napkin/assets/step4-share.svg
Normal file
@@ -0,0 +1,98 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="480" viewBox="0 0 800 480">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="popupShadow" x1="0" y1="0" x2="0" y2="1">
|
||||||
|
<stop offset="0%" stop-color="#0D9488" stop-opacity="0.08"/>
|
||||||
|
<stop offset="100%" stop-color="#0D9488" stop-opacity="0.02"/>
|
||||||
|
</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">4</text>
|
||||||
|
<text x="72" y="33" font-family="Arial, Helvetica, sans-serif" font-size="15" font-weight="bold" fill="#334155">Share your sketch with Copilot</text>
|
||||||
|
|
||||||
|
<!-- Browser Window -->
|
||||||
|
<g transform="translate(30, 52)">
|
||||||
|
<!-- Browser frame -->
|
||||||
|
<rect width="740" height="340" rx="10" fill="white" stroke="#D1D5DB" stroke-width="1.5"/>
|
||||||
|
<!-- Browser chrome -->
|
||||||
|
<rect width="740" height="38" rx="10" fill="#F1F5F9"/>
|
||||||
|
<rect x="0" y="28" width="740" height="10" fill="#F1F5F9"/>
|
||||||
|
<circle cx="18" cy="19" r="5.5" fill="#FF5F57"/>
|
||||||
|
<circle cx="36" cy="19" r="5.5" fill="#FFBD2E"/>
|
||||||
|
<circle cx="54" cy="19" r="5.5" fill="#28C840"/>
|
||||||
|
<rect x="80" y="8" width="580" height="22" rx="6" fill="white" stroke="#E2E8F0" stroke-width="1"/>
|
||||||
|
<text x="96" y="23" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#94A3B8">napkin.html</text>
|
||||||
|
|
||||||
|
<!-- Whiteboard canvas (slightly dimmed to show overlay context) -->
|
||||||
|
<rect x="1" y="38" width="738" height="301" fill="#FAFAFA"/>
|
||||||
|
|
||||||
|
<!-- Simplified whiteboard content (faded to focus on the popup) -->
|
||||||
|
<!-- Mini flowchart -->
|
||||||
|
<rect x="80" y="100" width="100" height="45" rx="6" fill="white" stroke="#CBD5E1" stroke-width="1.5" opacity="0.6"/>
|
||||||
|
<text x="130" y="127" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#94A3B8">Draft</text>
|
||||||
|
<line x1="180" y1="122" x2="230" y2="122" stroke="#CBD5E1" stroke-width="1.5" opacity="0.6"/>
|
||||||
|
<polygon points="228,118 236,122 228,126" fill="#CBD5E1" opacity="0.6"/>
|
||||||
|
<rect x="236" y="100" width="100" height="45" rx="6" fill="white" stroke="#CBD5E1" stroke-width="1.5" opacity="0.6"/>
|
||||||
|
<text x="286" y="127" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#94A3B8">Review</text>
|
||||||
|
<line x1="336" y1="122" x2="386" y2="122" stroke="#CBD5E1" stroke-width="1.5" opacity="0.6"/>
|
||||||
|
<polygon points="384,118 392,122 384,126" fill="#CBD5E1" opacity="0.6"/>
|
||||||
|
<rect x="392" y="100" width="100" height="45" rx="6" fill="white" stroke="#CBD5E1" stroke-width="1.5" opacity="0.6"/>
|
||||||
|
<text x="442" y="127" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#94A3B8">Ship</text>
|
||||||
|
|
||||||
|
<!-- Mini sticky notes (faded) -->
|
||||||
|
<rect x="90" y="170" width="100" height="60" rx="2" fill="#FEF9C3" opacity="0.5"/>
|
||||||
|
<rect x="260" y="175" width="90" height="55" rx="2" fill="#FCE7F3" opacity="0.5"/>
|
||||||
|
<rect x="420" y="168" width="100" height="58" rx="2" fill="#DBEAFE" opacity="0.5"/>
|
||||||
|
|
||||||
|
<!-- Share with Copilot button — HIGHLIGHTED with glow -->
|
||||||
|
<rect x="498" y="293" width="180" height="36" rx="18" fill="#059669"/>
|
||||||
|
<rect x="496" y="291" width="184" height="40" rx="20" fill="none" stroke="#0D9488" stroke-width="3" opacity="0.5"/>
|
||||||
|
<text x="540" y="315" font-family="Arial, Helvetica, sans-serif" font-size="13" fill="white" font-weight="bold">Share with Copilot</text>
|
||||||
|
|
||||||
|
<!-- Click cursor icon near button -->
|
||||||
|
<g transform="translate(660, 300)">
|
||||||
|
<path d="M0,0 L0,18 L5,14 L9,22 L13,20 L9,12 L15,12 Z" fill="#1E293B" stroke="white" stroke-width="1"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Confirmation Popup -->
|
||||||
|
<rect x="190" y="165" width="360" height="145" rx="14" fill="white" stroke="#0D9488" stroke-width="2"/>
|
||||||
|
<!-- Green check circle -->
|
||||||
|
<circle cx="370" cy="200" r="18" fill="#D1FAE5"/>
|
||||||
|
<path d="M360,200 L367,207 L381,193" fill="none" stroke="#059669" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<!-- Popup text -->
|
||||||
|
<text x="370" y="236" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="15" font-weight="bold" fill="#1E293B">Shared with Copilot!</text>
|
||||||
|
<text x="370" y="258" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#64748B">A screenshot was saved and your text was copied.</text>
|
||||||
|
<text x="370" y="276" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#64748B">Go back to your terminal to continue.</text>
|
||||||
|
<!-- Tiny icons for PNG + text -->
|
||||||
|
<rect x="285" y="286" width="50" height="16" rx="4" fill="#F0FDFA" stroke="#0D9488" stroke-width="0.8"/>
|
||||||
|
<text x="310" y="297" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="8" fill="#0D9488">PNG</text>
|
||||||
|
<rect x="345" y="286" width="50" height="16" rx="4" fill="#F0FDFA" stroke="#0D9488" stroke-width="0.8"/>
|
||||||
|
<text x="370" y="297" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="8" fill="#0D9488">TEXT</text>
|
||||||
|
<!-- Check marks -->
|
||||||
|
<text x="272" y="298" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#059669">✓</text>
|
||||||
|
<text x="332" y="298" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#059669">✓</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Annotation Arrow 1: Pointing to Share button -->
|
||||||
|
<g transform="translate(0, 0)">
|
||||||
|
<rect x="590" y="395" width="180" height="28" rx="8" fill="#0D9488" opacity="0.12"/>
|
||||||
|
<text x="680" y="413" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#0D9488" font-weight="bold">Click when you're ready</text>
|
||||||
|
<path d="M680,395 C680,380 670,365 660,355" fill="none" stroke="#0D9488" stroke-width="1.5" stroke-dasharray="4,3"/>
|
||||||
|
<polygon points="656,357 660,349 664,357" fill="#0D9488"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Annotation Arrow 2: Terminal instruction -->
|
||||||
|
<g transform="translate(0, 0)">
|
||||||
|
<rect x="30" y="415" width="490" height="52" rx="10" fill="white" stroke="#0D9488" stroke-width="1.5"/>
|
||||||
|
<!-- Terminal mini icon -->
|
||||||
|
<rect x="46" y="426" width="26" height="18" rx="3" fill="#1E1B3A"/>
|
||||||
|
<text x="52" y="439" font-family="monospace" font-size="8" fill="#0D9488">_</text>
|
||||||
|
<text x="82" y="437" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#334155" font-weight="bold">Next: Go back to your terminal and say:</text>
|
||||||
|
<rect x="82" y="446" width="172" height="18" rx="4" fill="#F0FDFA"/>
|
||||||
|
<text x="92" y="458" font-family="monospace" font-size="11" fill="#0D9488" font-weight="bold">check the napkin</text>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 6.6 KiB |
112
skills/napkin/assets/step5-response.svg
Normal file
112
skills/napkin/assets/step5-response.svg
Normal file
@@ -0,0 +1,112 @@
|
|||||||
|
<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>
|
||||||
|
After Width: | Height: | Size: 7.1 KiB |
Reference in New Issue
Block a user