home / skills / kevinslin / llm / tool-imagekit-upload

tool-imagekit-upload skill

needs review

/skills/tool-imagekit-upload

This skill uploads images to ImageKit from file paths or clipboard and returns a CDN URL for easy sharing.

npx playbooks add skill kevinslin/llm --skill tool-imagekit-upload

Review the files below or copy the command above to add this skill to your agents.

Files (7)

SKILL.md

3.1 KB

---
name: imagekit-upload
description: Upload images to ImageKit from file paths or clipboard, returning the CDN URL for easy sharing and embedding
version: 1.0.0
---

# ImageKit Upload

This skill enables uploading images to ImageKit CDN from either local file paths or clipboard contents. The skill returns the uploaded image URL for immediate use.

## Prerequisites

Before using this skill, configure your ImageKit credentials. Create a `.env` file in the scripts directory:

```bash
cd ~/.claude/skills/imagekit-upload/scripts
cp .env.example .env
```

Then edit `.env` and add your credentials:

- `IMAGEKIT_PUBLIC_KEY`: Your ImageKit public key
- `IMAGEKIT_PRIVATE_KEY`: Your ImageKit private key
- `IMAGEKIT_URL_ENDPOINT`: Your ImageKit URL endpoint (e.g., `https://ik.imagekit.io/your_id`)

Find these in your ImageKit dashboard under Developer Options → API Keys.

## Setup

Install Node.js dependencies:

```bash
cd ~/.claude/skills/imagekit-upload/scripts
npm install
```

This installs ImageKit SDK, dotenv for configuration, and clipboardy for clipboard support on macOS.

## Usage

### Upload from File Path

When the user provides a file path to an image, use the upload script:

```bash
node ~/.claude/skills/imagekit-upload/scripts/upload.js --file "/path/to/image.jpg"
```

Optional parameters:
- `--name "custom-name"`: Custom file name (default: original filename)
- `--folder "/images"`: Upload to specific folder in ImageKit
- `--tags "tag1,tag2"`: Add comma-separated tags

### Upload from Clipboard

When the user wants to upload an image from their clipboard:

```bash
node ~/.claude/skills/imagekit-upload/scripts/upload.js --clipboard
```

This reads image data directly from the system clipboard.

## Output

The script outputs a JSON object containing:
- `url`: The full CDN URL of the uploaded image
- `fileId`: The ImageKit file ID
- `name`: The file name
- `size`: File size in bytes

Display the URL prominently to the user for easy copying.

## Error Handling

Common errors:
- **Missing credentials**: Verify `.env` file exists with all required variables
- **File not found**: Check the file path is correct and accessible
- **Invalid file type**: ImageKit supports common image formats (JPG, PNG, GIF, WebP, SVG)
- **Clipboard empty**: Ensure an image is copied to the clipboard before upload

## When to Use This Skill

Use this skill when:
- User requests to upload an image to ImageKit
- User wants to get a CDN URL for an image
- User says "upload this image" or "put this on ImageKit"
- User provides an image path and mentions ImageKit or CDN
- User wants to upload from clipboard/copy buffer

## Examples

**Example 1: Upload screenshot**
```
User: Upload this screenshot to ImageKit: /tmp/screenshot.png
Assistant: [Uses this skill to upload the file and returns the CDN URL]
```

**Example 2: Upload from clipboard**
```
User: I just copied an image, can you upload it to ImageKit?
Assistant: [Uses this skill with --clipboard flag to upload and returns the CDN URL]
```

**Example 3: Organized upload**
```
User: Upload logo.png to ImageKit in the /brand folder
Assistant: [Uses this skill with --folder "/brand" parameter]
```

Overview

This skill uploads images to ImageKit CDN from local file paths or the system clipboard and returns the CDN URL for immediate sharing or embedding. It supports optional filename, folder, and tag parameters and prints a JSON payload with URL, fileId, name, and size. Configure ImageKit credentials via environment variables before use.

How this skill works

The script reads an image either from a provided file path or directly from the clipboard, then calls the ImageKit SDK to perform the upload. It accepts optional flags for custom name, target folder, and tags, and outputs a JSON object containing the CDN URL and metadata. Errors are mapped to common causes like missing credentials, file not found, unsupported format, or empty clipboard.

When to use it

You need a fast CDN URL for an image to embed in a website, email, or chat.
You have a local image file and want it hosted on ImageKit with minimal steps.
You copied an image to the clipboard and want to upload it without saving a file.
You want to organize uploads into folders or tag images at upload time.
You need a scriptable CLI flow to automate image hosting in a pipeline.

Best practices

Store IMAGEKIT_PUBLIC_KEY, IMAGEKIT_PRIVATE_KEY, and IMAGEKIT_URL_ENDPOINT in a .env file before running the script.
Verify file paths and permissions when uploading from disk to avoid file-not-found errors.
Use descriptive folder names and tags for better organization and searchability in ImageKit.
Prefer clipboard uploads for quick screenshots; ensure an image is actually copied before running the --clipboard flag.
Validate output JSON and use the url field directly for embedding or sharing.

Example use cases

Upload a screenshot from /tmp/screenshot.png and return the CDN URL for a bug report.
Copy an image, run the clipboard upload, and paste the returned URL into chat or a document.
Upload a company logo to the /brand folder with a custom name for consistent asset management.
Automate image hosting in a build script by invoking the upload script with file, folder, and tags.
Quickly host images for prototypes or documentation without manual dashboard uploads.

FAQ

What credentials are required?

You need IMAGEKIT_PUBLIC_KEY, IMAGEKIT_PRIVATE_KEY, and IMAGEKIT_URL_ENDPOINT set in a .env file.

Can I upload from the clipboard?

Yes. Use the --clipboard flag; ensure an image is copied to the system clipboard first.