Napkin — Quadro Branco Visual para Copilot CLI

O Napkin oferece aos usuários um quadro branco baseado em navegador onde eles podem desenhar, esboçar e adicionar notas adesivas para pensar visualmente sobre ideias. O agente lê o conteúdo do quadro branco (via um instantâneo PNG e dados JSON opcionais) e responde de forma conversacional com análises, sugestões e próximos passos.

O público-alvo são advogados, gerentes de produto e stakeholders de negócios — não desenvolvedores de software. Mantenha tudo acessível e livre de jargões.

Ativação

Quando o usuário invocar esta habilidade — dizendo coisas como "vamos usar o napkin", "abrir um napkin", "iniciar um quadro branco" ou usando o comando de barra — faça o seguinte:

1. Copie o template HTML empacotado dos ativos da habilidade para a Área de Trabalho do usuário.

   • O template fica em assets/napkin.html em relação a este arquivo SKILL.md.
   • Copie-o para ~/Desktop/napkin.html.
   • Se ~/Desktop/napkin.html já existir, pergunte ao usuário se ele deseja abrir o existente ou começar do zero antes de sobrescrever.

2. Abra-o no navegador padrão:

   • macOS: open ~/Desktop/napkin.html
   • Linux: xdg-open ~/Desktop/napkin.html
   • Windows: start ~/Desktop/napkin.html

3. Diga ao usuário o que fazer a seguir. Diga algo caloroso e simples:

   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."
   

Lendo o Napkin

Quando o usuário disser "verificar o napkin", "olhar o napkin", "o que você acha", "ler meu napkin" ou algo semelhante, siga estas etapas:

Etapa 1 — Ler o instantâneo PNG (primário)

Procure por um arquivo PNG chamado napkin-snapshot.png. Verifique estas localizações em ordem (o navegador o salva na pasta de downloads padrão do usuário, que varia):

1. ~/Downloads/napkin-snapshot.png
2. ~/Desktop/napkin-snapshot.png

Use a ferramenta view para ler o PNG. Isso envia a imagem como dados codificados em base64 para o modelo, que pode interpretá-la visualmente. O PNG é a forma primária pela qual o agente entende o que o usuário desenhou — ele captura esboços à mão livre, setas, layout espacial, anotações, itens circulados ou riscados e qualquer outra coisa na tela.

Se o PNG não for encontrado em nenhuma das localizações, NÃO o ignore silenciosamente. Em vez disso, diga ao usuário:

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.

Etapa 2 — Ler a área de transferência para JSON estruturado (suplementar)

Tente também obter dados JSON estruturados da área de transferência do sistema. O quadro branco copia isso automaticamente junto com o PNG.

• macOS: pbpaste
• Linux: xclip -selection clipboard -o
• Windows: powershell -command "Get-Clipboard"

O JSON contém o conteúdo exato do texto de notas adesivas e rótulos de texto, suas posições e suas cores. Isso complementa o PNG, fornecendo texto preciso que pode ser difícil de ler a partir de uma captura de tela.

Se a área de transferência não contiver dados JSON, tudo bem — o PNG sozinho oferece ao modelo material suficiente para trabalhar. Não trate uma área de transferência ausente como um erro.

Etapa 3 — Interpretar ambas as fontes juntas

Sintetize o instantâneo visual e o texto estruturado em uma compreensão coerente do que o usuário está pensando ou planejando:

• Do PNG: Descreva o que você vê — esboços, diagramas, fluxogramas, agrupamentos, setas, layout espacial, anotações, itens circulados, itens riscados, marcas de ênfase.
• Do JSON: Leia o conteúdo exato do texto de notas adesivas e rótulos, observando suas posições e cores.
• Combine ambos em uma única interpretação conversacional.

Etapa 4 — Responder conversacionalmente

Não despeje dados brutos ou um resumo técnico. Responda como um colaborador que olhou o esboço de alguém no quadro branco. Exemplos:

• "Posso ver que você esboçou um processo de três etapas — parece que você está pensando em [X] fluindo para [Y] e depois [Z]. A nota adesiva no canto diz '[texto]' — é uma preocupação que você quer que eu aborde?"
• "Parece que você agrupou essas quatro ideias juntas no lado esquerdo e as separou dos dois itens à direita. Você está pensando nelas como duas categorias diferentes?"

…