editing-images

Files (1)

• SKILL.md

SKILL.md (first lines)

# Image Editing with Sharp

Performs image editing using the Sharp library for high-performance image processing.

## When to Use

Use this skill when:

- Compositing images (adding QR codes, logos, watermarks to posters)
- Resizing or cropping images
- Rotating or flipping images
- Adjusting brightness, contrast, saturation
- Applying blur or sharpening effects
- Getting image metadata (dimensions, format)

## Available Tools

| Tool               | Purpose                               |
| ------------------ | ------------------------------------- |
| `compositeImages`  | Overlay images onto a base image      |
| `resizeImage`      | Resize, crop, or extend images        |
| `transformImage`   | Rotate, flip images                   |
| `adjustImage`      | Brightness, saturation, blur, sharpen |
| `getImageMetadata` | Get image dimensions and format info  |

## Workflow

### Step 1: Get Image Information (Recommended)

Call `getImageMetadata` first to understand the base image dimensions for accurate positioning.

### Step 2: Perform Editing

Use the appropriate tool based on the task.

### Step 3: Return Results

Return the output image URL to the user.

## Common Use Cases

### Case 1: Add QR Code to Poster (Bottom-Right Corner)

```json
{
  "base": "https://example.com/poster.jpg",
  "layers": [{
    "input": "https://example.com/qrcode.png",
    "resize": { "width": 150, "height": 150 },
    "gravity": "southeast"
  }]
}
```

### Case 2: Add Logo Watermark (Absolute Position)

```json
{
  "base": "https://example.com/photo.jpg",
  "layers": [{
    "input": "https://example.com/logo.png",
    "resize": { "scale": 0.5 },
    "top": 20,
    "left": 20,
    "opacity": 0.7
  }]
}
```

### Case 3: Resize for Social Media

```json
{
  "input": "https://example.com/image.jpg",
  "width": 1080,
  "height": 1080,
  "fit": "cover"
}
```

### Case 4: Create Thumbnail

```json
{
  "input": "https://example.com/image.jpg",
  "width": 200,
  "height": 200,
  "fit": "cover"
}
```

## Positioning Modes (Mutually Exclusive)

**IMPORTANT:** `gravity` and `top/left` are mutually exclusive. Do NOT mix them.

### Mode A: Gravity Anchor Positioning

Use `gravity` alone to place layer at predefined anchor points:

```
northwest |  north   | northeast
----------+----------+----------
   west   |  center  |   east
----------+----------+----------
southwest |  south   | southeast
```

Example: `{ "gravity": "southeast" }` → bottom-right corner

### Mode B: Absolute Coordinates

Use `top` + `left` together for precise pixel positioning:

```
(0,0)────────────────────→ X (left)
  │
  │    ┌─────────┐
  │    │  layer  │ ← top=100, left=200
  │    └─────────┘

From Yusufkotavom/AiToEarn, MIT.

More from Yusufkotavom/AiToEarn