skills.rest
MerkyorLynn
MerkyorLynnCOMMUNITY
Explore all skills by this author →
GitHub

image-lightbox

Open chat images in a full-screen overlay with zoom, pan, and download controls.

37|4|Updated Mar 31, 2026
Search Tags:#ui#accessibility#image#screenshot#pan#zoom#lightbox
One-click install
npx skills add https://github.com/MerkyorLynn/Lynn --skill image-lightbox
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: image-lightbox
Source: https://github.com/MerkyorLynn/Lynn/tree/main/skills2set/image-lightbox
Command: npx skills add https://github.com/MerkyorLynn/Lynn --skill image-lightbox

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Chat images and screenshots often appear as small, non-clickable thumbnails that make it hard to read details, verify evidence, or examine generated visuals.

Core Features & Use Cases

  • Click-to-zoom lightbox: Opens a full-screen overlay for any chat image or screenshot with a dimmed, blurred backdrop.
  • Scroll-wheel zoom (0.5x–5x): Lets users magnify fine details without leaving the chat view.
  • Drag-to-pan: Enables repositioning when zoomed in, making long screenshots and dense UI readable.
  • Pinch zoom on mobile: Supports two-finger gestures for touch devices.
  • Keyboard + toolbar controls: Provides zoom in/out, 1:1 reset, download, and ESC-to-close for fast inspection.
  • Use when: Users need to inspect attachments, browser screenshots, agent-generated visuals that are too small, or requests like “zoom in” / “enlarge” about an image.

Quick Start

Click the image thumbnail in the chat to open the lightbox, then use the mouse wheel or trackpad to zoom in and drag to pan for detail inspection.

Frequently Asked Questions about image-lightbox

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I zoom in and inspect details on chat screenshots?▼

To zoom in and inspect chat screenshots, you can click the image thumbnail to open a full-screen lightbox overlay, then use scroll-wheel zoom up to 5x and drag-to-pan to read dense UI details.

Can I use pinch zoom to enlarge agent-generated images on mobile?▼

Yes, you can use pinch zoom to enlarge agent-generated images on mobile devices, as the lightbox supports two-finger gestures alongside keyboard and toolbar controls for touch interaction.

Does the image lightbox require external dependencies or libraries?▼

The image lightbox requires no external dependencies, operating entirely through a root SKILL.md entry point with UI interaction support for scroll zoom, drag pan, and an ESC-close overlay.

What is the best way to download and view small user attachments in chat?▼

The best way to view small user attachments is opening the click-to-zoom lightbox, which provides a dimmed backdrop and toolbar controls to enlarge, pan, and download the image for verification.

What are the limitations of scroll zoom when examining long screenshots?▼

Scroll zoom ranges from 0.5x to 5x magnification for examining long screenshots, meaning users must drag-to-pan to reposition the view when zoomed in beyond the screen boundaries.

Why do chat images appear as non-clickable thumbnails that are hard to read?▼

Chat images appear as non-clickable thumbnails to save space, but this lightbox solves the readability problem by applying a click-to-zoom full-screen overlay with a blurred backdrop for detailed inspection.

Related Skills

Explore More Design & Creative Skills→
unoplatformunoplatform
9

uno-toolkit-zoomcontentcontrol

Create a zoomable and pannable container for images, maps, diagrams, and documents.

Official
Intermediate
I-OnlabsI-Onlabs
3

video-downloader

Download videos from YouTube and other platforms with selectable quality and format options.

Community
Intermediate
jackspacejackspace
16

motion

Create declarative gesture-aware UI animations in React with Motion.

Community
Advanced
tomtoto757tomtoto757
14

image-zoom-360

Add zoom, 360-degree spin viewers, and inline video to product galleries.

Community
Intermediate