skill
Screenshot Paste
Public UnreviewedPaste 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.
← Commit history
wiki-sp-demo-results.htmladded+172@@ -0,0 +1,172 @@+<!DOCTYPE html>+<html lang="en">+<head><script>(function(){var n=0;function show(p,m){var el=document.createElement('div');el.style.cssText='position:fixed;left:0;right:0;background:#e04040;color:#fff;padding:6px 12px;z-index:'+(99999-n)+';font:13px/1.4 monospace;white-space:pre-wrap;border-bottom:1px solid #b02020;top:'+n*30+'px';el.textContent=p+m;document.body.appendChild(el);n++}window.onerror=function(msg,src,line){show('ERROR '+(src||'').split('/').pop()+':'+line+' \u2014 ',msg)};window.addEventListener('unhandledrejection',function(e){show('REJECT \u2014 ',e.reason&&e.reason.message||e.reason||'unknown')})})()</script>+<meta charset="UTF-8">+<meta name="viewport" content="width=device-width, initial-scale=1.0">+<title>Screenshot Paste - Results</title>+<style>+ * { margin: 0; padding: 0; box-sizing: border-box; }+ body {+ background: #0d1117;+ color: #e6edf3;+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;+ height: 100vh;+ display: flex;+ flex-direction: column;+ overflow: hidden;+ }+ .header {+ padding: 16px 20px 12px;+ border-bottom: 1px solid #30363d;+ flex-shrink: 0;+ }+ .header h1 { font-size: 16px; color: #00b8b0; font-weight: 600; margin-bottom: 4px; }+ .header .subtitle { font-size: 12px; color: #8b949e; }+ .header .counter { font-size: 11px; color: #484f58; margin-top: 6px; }+ .header .counter span { color: #00b8b0; font-weight: 600; }+ .paste-zone {+ flex: 1; display: flex; flex-direction: column;+ min-height: 0; padding: 16px;+ border: 2px solid transparent;+ }+ .gallery {+ width: 100%; flex: 1; overflow-y: auto;+ display: flex; flex-direction: column; gap: 12px; min-height: 0;+ }+ .screenshot-entry {+ padding: 12px; background: #161b22;+ border-radius: 6px; border: 1px solid #21262d; flex-shrink: 0;+ }+ .entry-status {+ font-size: 11px; margin-bottom: 8px;+ display: flex; align-items: center; gap: 6px;+ }+ .entry-status .label { color: #3fb950; }+ .clipboard-badge {+ display: inline-block; font-size: 10px; padding: 1px 6px;+ border-radius: 8px;+ }+ .clipboard-badge.unavailable {+ background: #21262d; color: #8b949e; border: 1px solid #21262d;+ }+ .clipboard-badge.ok {+ background: rgba(0,184,176,0.13); color: #00b8b0; border: 1px solid rgba(0,184,176,0.27);+ }+ .image-row { display: flex; gap: 10px; }+ .image-card {+ flex: 1; min-width: 0; border: 1px solid #30363d;+ border-radius: 4px; overflow: hidden; background: #0d1117;+ }+ .image-card .card-header {+ padding: 4px 8px; font-size: 10px; font-weight: 600;+ text-transform: uppercase; letter-spacing: 0.5px;+ border-bottom: 1px solid #21262d;+ }+ .image-card.claude .card-header { background: rgba(0,184,176,0.08); color: #00b8b0; }+ .image-card.original .card-header { background: rgba(72,79,88,0.08); color: #8b949e; }+ .thumb-wrap {+ position: relative; cursor: pointer; height: 80px;+ display: flex; align-items: center; justify-content: center; background: #000;+ }+ .thumb-wrap:hover { opacity: 0.85; }+ .thumb-placeholder {+ width: 100%; height: 80px; display: flex; align-items: center; justify-content: center;+ font-size: 11px; color: #484f58;+ }+ .thumb-placeholder .mock-img {+ width: 90%; height: 64px; border-radius: 3px;+ background: linear-gradient(135deg, #1a2332 0%, #1e3a5f 30%, #1a3350 50%, #162d44 70%, #1a2332 100%);+ display: flex; align-items: center; justify-content: center;+ font-size: 10px; color: #30363d; position: relative; overflow: hidden;+ }+ .thumb-placeholder .mock-img::before {+ content: ''; position: absolute; top: 8px; left: 8px;+ width: 40%; height: 12px; background: #00b8b022; border-radius: 2px;+ }+ .thumb-placeholder .mock-img::after {+ content: ''; position: absolute; bottom: 12px; left: 8px; right: 8px;+ height: 6px; background: #30363d44; border-radius: 2px;+ }+ .card-meta {+ padding: 6px 8px; font-size: 10px; color: #484f58; line-height: 1.5; word-break: break-all;+ }+ .card-meta .val { color: #8b949e; }+ .card-meta .path { color: #00b8b0; font-size: 9px; opacity: 0.8; }+ .status-bar {+ padding: 8px 20px; border-top: 1px solid #30363d;+ font-size: 11px; color: #484f58; flex-shrink: 0; text-align: center;+ }+ .demo-badge {+ position: fixed; bottom: 36px; right: 12px;+ font-size: 10px; color: #484f58; opacity: 0.6;+ }+</style>+</head>+<body>+ <div class="header">+ <h1>Screenshot Paste</h1>+ <div class="subtitle">Paste from clipboard to save screenshots to your project</div>+ <div class="counter">Screenshots saved: <span>2</span></div>+ </div>++ <div class="paste-zone">+ <div class="gallery">+ <!-- Entry 1: resized image -->+ <div class="screenshot-entry">+ <div class="entry-status">+ <span class="label">Saved</span>+ <span class="clipboard-badge unavailable">Right-click preview to copy</span>+ </div>+ <div class="image-row">+ <div class="image-card claude">+ <div class="card-header">Claude (resized to 1568x975)</div>+ <div class="thumb-wrap">+ <div class="thumb-placeholder"><div class="mock-img"></div></div>+ </div>+ <div class="card-meta">+ <span class="val">dart-green-line-route-editor-1568x975.png</span><br>+ 1568 x 975 · 187.3 KB<br>+ <span class="path">screenshots/sp/dart-green-line-route-editor-1568x975.png</span>+ </div>+ </div>+ <div class="image-card original">+ <div class="card-header">Original</div>+ <div class="thumb-wrap">+ <div class="thumb-placeholder"><div class="mock-img"></div></div>+ </div>+ <div class="card-meta">+ <span class="val">dart-green-line-route-editor-2400x1493-original.png</span><br>+ 2400 x 1493 · 1.2 MB<br>+ <span class="path">screenshots/sp/dart-green-line-route-editor-2400x1493-original.png</span>+ </div>+ </div>+ </div>+ </div>++ <!-- Entry 2: no resize needed -->+ <div class="screenshot-entry">+ <div class="entry-status">+ <span class="label">Saved</span>+ <span class="clipboard-badge ok">Original still in clipboard</span>+ </div>+ <div class="image-row">+ <div class="image-card claude">+ <div class="card-header">Claude (original size — already ≤1568px)</div>+ <div class="thumb-wrap">+ <div class="thumb-placeholder"><div class="mock-img"></div></div>+ </div>+ <div class="card-meta">+ <span class="val">vscode-terminal-npm-output-1024x640.png</span><br>+ 1024 x 640 · 52.1 KB <span style="color:#3fb950">✓ No resize needed</span><br>+ <span class="path">screenshots/sp/vscode-terminal-npm-output-1024x640.png</span>+ </div>+ </div>+ </div>+ </div>+ </div>+ </div>++ <div class="status-bar">Saved: dart-green-line-route-editor-1568x975.png — paste another</div>+ <div class="demo-badge">Demo — simulated data</div>+</body>+</html>