/slack-gif-creator

name: slack-gif-creator
scope: persistence
description: Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like "make me a GIF of X doing Y for Slack."
license: Complete terms in LICENSE.txt
config:
  - key: SLACK_WEBHOOK_URL
    type: secret
    required: false
    default: null
    bindable: [role, agent]
    description: Optional Slack Incoming Webhook to post the finished GIF to a channel directly. Webhook URLs embed a token — treated as a secret.
    prompt:
      zh: "要把 GIF 直接发到 Slack 频道吗？请提供 Incoming Webhook URL。"
      en: "Should the GIF be posted to a Slack channel directly? Provide the Incoming Webhook URL."

Optional: post directly to Slack

If `SLACK_WEBHOOK_URL` is present in your environment, you may additionally post the finished GIF to that Slack channel (upload the file where the webhook workflow expects it, or send a message linking the delivered asset). Never print the webhook URL itself into chat, files, or logs. When the variable is absent, skip this step silently — delivery below is the only required output.

Delivering the GIF

When this skill finishes producing an animated GIF (`output.gif`), deliver it with the **standard delivery commands** — `cloud deliver <abs-path>` to attach it to your reply, or `cloud file send "$PRISMER_CONVERSATION_ID" <abs-path>` to send it as a standalone message. See the **office-artifacts delivery contract** for the full rules (incl. the hermes `--run-id` / `--conversation-id` flags).

Do NOT hand-build `POST /api/im/assets` calls or assemble ContentBlock JSON yourself, and do NOT paste a `data:image/gif;base64,…` URI or a local `./output.gif` path into the reply body — local paths break the moment the daemon is restarted and base64 defeats caching. The delivery command registers the asset so the chat renderer surfaces the GIF preview automatically.

Slack GIF Creator

A toolkit providing utilities and knowledge for creating animated GIFs optimized for Slack.

Slack Requirements

**Dimensions:**

• Emoji GIFs: 128x128 (recommended)
• Message GIFs: 480x480

**Parameters:**

• FPS: 10-30 (lower is smaller file size)
• Colors: 48-128 (fewer = smaller file size)
• Duration: Keep under 3 seconds for emoji GIFs

Core Workflow

from core.gif_builder import GIFBuilder
from PIL import Image, ImageDraw

# 1. Create builder
builder = GIFBuilder(width=128, height=128, fps=10)

# 2. Generate frames
for i in range(12):
    frame = Image.new('RGB', (128, 128), (240, 248, 255))
    draw = ImageDraw.Draw(frame)

    # Draw your animation using PIL primitives
    # (circles, polygons, lines, etc.)

    builder.add_frame(frame)

# 3. Save with optimization
builder.save('output.gif', num_colors=48, optimize_for_emoji=True)

Drawing Graphics

Working with User-Uploaded Images

If a user uploads an image, consider whether they want to:

• **Use it directly** (e.g., "animate this", "split this into frames")
• **Use it as inspiration** (e.g., "make something like this")

Load and work with images using PIL:

from PIL import Image

uploaded = Image.open('file.png')
# Use directly, or just as reference for colors/style

Drawing from Scratch

When drawing graphics from scratch, use PIL ImageDraw primitives:

from PIL import ImageDraw

draw = ImageDraw.Draw(frame)

# Circles/ovals
draw.ellipse([x1, y1, x2, y2], fill=(r, g, b), outline=(r, g, b), width=3)

# Stars, triangles, any polygon
points = [(x1, y1), (x2, y2), (x3, y3), ...]
draw.polygon(points, fill=(r, g, b), outline=(r, g, b), width=3)

# Lines
draw.line([(x1, y1), (x2, y2)], fill=(r, g, b), width=5)

# Rectangles
draw.rectangle([x1, y1, x2, y2], fill=(r, g, b), outline=(r, g, b), width=3)

**Don't use:** Emoji fonts (unreliable across platforms) or assume pre-packaged graphics exist in this skill.

Making Graphics Look Good

Graphics should look polished and creative, not basic. Here's how:

**Use thicker lines** - Always set `width=2` or higher for outlines and lines. Thin lines (width=1) look choppy and amateurish.

**Add visual depth**:

• Use gradients for backgrounds (`create_gradient_background`)
• Layer multiple shapes for complexity (e.g., a star with a smaller star inside)

**Make shapes more interesting**:

• Don't just draw a plain circle - add highlights, rings, or patterns
• Stars can have glows (draw larger, semi-transparent versions behind)
• Combine multiple shapes (stars + sparkles, circles + rings)

**Pay attention to colors**:

• Use vibrant, complementary colors
• Add contrast (dark outlines on light shapes, light outlines on dark shapes)
• Consider the overall composition

**For complex shapes** (hearts, snowflakes, etc.):

• Use combinations of polygons and ellipses
• Calculate points carefully for symmetry
• Add details (a heart can have a highlight curve, snowflakes have intricate branches)

Be creative and detailed! A good Slack GIF should look polished, not like placeholder graphics.

Available Utilities

GIFBuilder (`core.gif_builder`)

Assembles frames and optimizes for Slack:

builder = GIFBuilder(width=128, height=128, fps=10)
builder.add_frame(frame)  # Add PIL Image
builder.add_frames(frames)  # Add list of frames
builder.save('out.gif', num_colors=48, optimize_for_emoji=True, remove_duplicates=True)

Validators (`core.validators`)

Check if GIF meets Slack requirements:

from core.validators import validate_gif, is_slack_ready

# Detailed validation
passes, info = validate_gif('my.gif', is_emoji=True, verbose=True)

# Quick check
if is_slack_ready('my.gif'):
    print("Ready!")

Easing Functions (`core.easing`)

Smooth motion instead of linear:

from core.easing import interpolate

# Progress from 0.0 to 1.0
t = i / (num_frames - 1)

# Apply easing
y = interpolate(start=0, end=400, t=t, easing='ease_out')

# Available: line