Screenshot Paste

{
  "schema_version": 1,
  "type": "skill",
  "slug": "adom-screenshot-paste",
  "title": "Screenshot Paste",
  "brief": "Paste screenshots from clipboard into the Adom Viewer. Auto-resizes to Claude's ideal 1568px, compresses with sharp, AI-names files via Haiku, and saves both optimized and original versions.",
  "version": "1.0.0",
  "tags": [],
  "license": "MIT",
  "source_path": "SKILL.md",
  "readme": "# Screenshot Paste\n\nThe Screenshot Paste widget is an interactive clipboard paste utility that runs inside the Adom Viewer. It provides the fastest way to get screenshots from your browser into the Docker container — one paste instead of save-to-file and drag-drop.\n\n## How to use\n\n1. Call `av_screenshot_paste` (MCP tool) to open the widget in AV\n2. Click anywhere in the widget to focus the paste area\n3. Press Ctrl+V (or Cmd+V on Mac) to paste a screenshot from your clipboard\n4. The system automatically processes and saves the image\n\n## What happens on paste\n\n1. **Resize** — If the image exceeds Claude's ideal 1568px max dimension, it's resized proportionally. If already small enough, it's kept as-is with an informational message (\"Original still in clipboard\").\n2. **Compress** — PNGs are compressed with sharp (level 9) for minimal file size while preserving quality.\n3. **AI Name** — Haiku analyzes the image and generates a descriptive kebab-case filename including dimensions (e.g. `dart-green-line-route-editor-1568x975.png`).\n4. **Dual Save** — Both the Claude-optimized version and the original are saved to `screenshots/sp/`.\n\n## Widget UX\n\n### Focus tracking\n- **Teal border** + \"READY FOR PASTE\" label when the paste area has focus\n- **Click anywhere** in the widget to give focus to the paste area\n- Paste detection triggers an immediate **teal flash animation** + status bar update\n\n### Two-card layout\nAfter processing, two cards appear side by side:\n- **Claude card** — The resized/optimized version (what Claude will see)\n- **Original card** — The full-size original\n\nClick either card to open a fullscreen preview overlay.\n\n### Smart clipboard badges\nThe widget shows context-aware clipboard status:\n- **\"Original still in clipboard\"** — Image didn't need resizing, your clipboard is unchanged\n- **\"Clipboard updated\"** — Successfully wrote the optimized image back to clipboard\n- **\"Right-click preview to copy\"** — Clipboard write failed (VS Code webview limitation) and the image was resized. Auto-opens the fullscreen preview with a \"Right-click → Copy image\" hint so you can manually copy.\n\n## Clipboard limitation\n\nVS Code webviews block `clipboard-write` at the Permissions-Policy level. This means the widget cannot programmatically update your clipboard with the resized image. When this happens and the image was resized, the widget gracefully falls back to showing a fullscreen preview you can right-click to copy.\n\n## Architecture\n\n| Component | Location | Purpose |\n|-----------|----------|---------|\n| Widget HTML | `viewer/screenshot-paste.js` | Generates the interactive paste UI |\n| HTTP endpoint | `GET /screenshot-paste` | Serves fresh HTML (bypasses module cache) |\n| Server handler | `handleScreenshot()` in `viewer/server.js` | Resize, compress, save, AI naming |\n| MCP tool | `av_screenshot_paste` | Opens the widget in AV |\n| Storage | `project-content/screenshots/sp/` | Saved screenshots (isolated from avShot/tabShot) |\n\n### Rendering\n\nThe widget is rendered as `html_interactive` content in a **non-sandboxed `<iframe srcdoc>`** with `allow=\"clipboard-write\"`. This gives the widget its own document for paste events while avoiding sandbox restrictions.\n\n### Tab metadata\n\nThe MCP tool sets tab metadata for proper attribution:\n- `source: 'av_screenshot_paste'`\n- `skill: 'screenshot-paste'`\n- `author: 'Adom'`\n\nThe `skill` field maps to a clipboard icon in the AV tab bar.\n\n## MCP Tool\n\n```\nmcp__adom-viewer__av_screenshot_paste({ title: 'Paste Screenshots' })\n```\n\nNo parameters are required. The widget opens immediately in the active AV panel.\n\n## File naming convention\n\n| Stage | Pattern | Example |\n|-------|---------|---------|\n| Initial (before AI) | `sp-{timestamp}-{width}x{height}.png` | `sp-20260307-152030-1568x975.png` |\n| After AI naming | `{ai-name}-{width}x{height}.png` | `dart-green-line-route-editor-1568x975.png` |\n| Original (after AI) | `{ai-name}-{width}x{height}-original.png` | `dart-green-line-route-editor-2400x1493-original.png` |",
  "author": {
    "id": "695820315b5f1e4db2fcf602",
    "name": "Kyle Bergstedt",
    "email": "[email protected]"
  },
  "visibility": {
    "public": true
  },
  "hero": null,
  "sample_prompts": [],
  "discovery_triggers": [],
  "discovery_pitch": null,
  "metadata": {},
  "created_at": "2026-05-28T05:30:15.790Z",
  "updated_at": "2026-05-28T05:30:15.790Z",
  "sub_skills": [],
  "parent_app": null
}