Slack GIF Creator Skill

The Slack GIF Creator skill provides utilities and knowledge for creating animated GIFs optimized for Slack. It handles technical constraints, provides drawing tools, and offers animation concepts to create polished, performant GIFs for emoji and messages.

When to Use

Use this skill when users request:

“Make me a GIF of X doing Y for Slack”
“Create an animated emoji”
“I need a custom Slack GIF”
Animated content optimized for Slack’s requirements

Slack Requirements

Dimensions

Emoji GIFs

Size: 128x128 pixels (recommended)Use case: Custom animated emoji in SlackBest for: Icons, reactions, small animations

Message GIFs

Size: 480x480 pixelsUse case: GIFs posted in messagesBest for: Larger animations, more detailed content

Performance Parameters

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

Start with 10 FPS and 48 colors for emoji GIFs. This keeps file sizes small while maintaining smooth animation.

Core Workflow

Creating a GIF follows three steps:

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 Images

When users upload images:

Use directly: “animate this”, “split this into frames”
Use as inspiration: “make something like this”

from PIL import Image

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

Drawing from Scratch

Use PIL ImageDraw primitives for all graphics:

Circles and Ovals

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

Polygons (Stars, Triangles, etc.)

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. Draw everything using PIL primitives.

Making Graphics Look Good

Polished graphics require attention to detail: Use Thicker Lines

Always set width=2 or higher for outlines
Thin lines (width=1) look choppy and amateurish

Add Visual Depth

Use gradients for backgrounds (create_gradient_background)
Layer multiple shapes for complexity
Example: A star with a smaller star inside

Make Shapes Interesting

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

Pay Attention to Colors

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

Complex Shapes

Use combinations of polygons and ellipses
Calculate points carefully for symmetry
Add details (hearts can have highlight curves, snowflakes have intricate branches)

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

Available Utilities

GIFBuilder

Assembles frames and optimizes for Slack:

from core.gif_builder import GIFBuilder

builder = GIFBuilder(width=128, height=128, fps=10)
builder.add_frame(frame)     # Add single 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

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

Create 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: linear, ease_in, ease_out, ease_in_out,
#           bounce_out, elastic_out, back_out

Easing functions make animations feel natural and professional. Use ease_out for objects coming to rest, ease_in for objects starting to move.

Frame Helpers

Convenience functions for common needs:

from core.frame_composer import (
    create_blank_frame,         # Solid color background
    create_gradient_background,  # Vertical gradient
    draw_circle,                # Helper for circles
    draw_text,                  # Simple text rendering
    draw_star                   # 5-pointed star
)

Animation Concepts

Shake/Vibrate

Offset object position with oscillation:

Use math.sin() or math.cos() with frame index
Add small random variations for natural feel
Apply to x and/or y position

import math
offset_x = math.sin(i * 0.5) * 3
offset_y = math.cos(i * 0.7) * 2

Pulse/Heartbeat

Scale object size rhythmically:

Use math.sin(t * frequency * 2 * math.pi) for smooth pulse
For heartbeat: two quick pulses then pause (adjust sine wave)
Scale between 0.8 and 1.2 of base size

scale = 1.0 + 0.2 * math.sin(t * 2 * math.pi)

Bounce

Object falls and bounces:

Use interpolate() with easing='bounce_out' for landing
Use easing='ease_in' for falling (accelerating)
Apply gravity by increasing y velocity each frame

Spin/Rotate

Rotate object around center:

PIL: image.rotate(angle, resample=Image.BICUBIC)
For wobble: use sine wave for angle instead of linear

angle = i * 30  # 30 degrees per frame
rotated = image.rotate(angle, resample=Image.BICUBIC)

Fade In/Out

Gradually appear or disappear:

Create RGBA image, adjust alpha channel
Or use Image.blend(image1, image2, alpha)
Fade in: alpha from 0 to 1
Fade out: alpha from 1 to 0

Slide

Move object from off-screen to position:

Start position: outside frame bounds
End position: target location
Use interpolate() with easing='ease_out' for smooth stop
For overshoot: use easing='back_out'

Zoom

Scale and position for zoom effect:

Zoom in: scale from 0.1 to 2.0, crop center
Zoom out: scale from 2.0 to 1.0
Can add motion blur for drama (PIL filter)

Explode/Particle Burst

Create particles radiating outward:

Generate particles with random angles and velocities
Update each particle: x += vx, y += vy
Add gravity: vy += gravity_constant
Fade out particles over time (reduce alpha)

Combine concepts for unique effects: bouncing + rotating, pulsing + sliding, fade + zoom. Use PIL’s full capabilities creatively.

Optimization Strategies

Only optimize when file size is too large:

Fewer frames: Lower FPS (10 instead of 20) or shorter duration
Fewer colors: num_colors=48 instead of 128
Smaller dimensions: 128x128 instead of 480x480
Remove duplicates: remove_duplicates=True in save()
Emoji mode: optimize_for_emoji=True auto-optimizes

# Maximum optimization for emoji
builder.save(
    'emoji.gif',
    num_colors=48,
    optimize_for_emoji=True,
    remove_duplicates=True
)

Start with these optimizations for emoji GIFs. For message GIFs, you can use higher quality settings (more colors, higher FPS).

Philosophy

This skill provides:

Knowledge: Slack’s requirements and animation concepts
Utilities: GIFBuilder, validators, easing functions
Flexibility: Create animation logic using PIL primitives

It does NOT provide:

Rigid animation templates or pre-made functions
Emoji font rendering (unreliable across platforms)
A library of pre-packaged graphics

If users upload an image, use PIL to load and work with it. Interpret based on their request whether they want it used directly or just as inspiration.

Dependencies

Required Python packages:

pip install pillow imageio numpy

Example: Creating a Pulsing Star Emoji

from core.gif_builder import GIFBuilder
from core.frame_composer import draw_star, create_blank_frame
from core.easing import interpolate
from PIL import ImageDraw
import math

builder = GIFBuilder(width=128, height=128, fps=15)

for i in range(30):  # 2 second animation at 15 FPS
    t = i / 29.0
    
    # Create frame with gradient background
    frame = create_blank_frame(128, 128, (20, 20, 40))
    draw = ImageDraw.Draw(frame)
    
    # Pulse effect
    scale = 1.0 + 0.15 * math.sin(t * 4 * math.pi)
    size = int(50 * scale)
    
    # Draw pulsing star
    draw_star(draw, 64, 64, size, fill=(255, 215, 0), outline=(255, 140, 0), width=3)
    
    builder.add_frame(frame)

builder.save('pulsing_star.gif', num_colors=48, optimize_for_emoji=True)

Canvas Design: For creating static graphics that can be animated
Algorithmic Art: For generative patterns to use in animations

Document Skills

Creative & Design

Development & Technical

Enterprise & Communication

Slack GIF Creator

Slack GIF Creator Skill

When to Use

Slack Requirements

Dimensions

Performance Parameters

Core Workflow

Drawing Graphics

Working with User Images

Drawing from Scratch

Making Graphics Look Good

Available Utilities

GIFBuilder

Validators

Easing Functions

Frame Helpers

Animation Concepts

Optimization Strategies

Philosophy

Dependencies

Example: Creating a Pulsing Star Emoji

Build docs developers (and LLMs) love

Document Skills

Creative & Design

Development & Technical

Enterprise & Communication

​Slack GIF Creator Skill

​When to Use

​Slack Requirements

​Dimensions

​Performance Parameters

​Core Workflow

​Drawing Graphics

​Working with User Images

​Drawing from Scratch

​Making Graphics Look Good

​Available Utilities

​GIFBuilder

​Validators

​Easing Functions

​Frame Helpers

​Animation Concepts

​Optimization Strategies

​Philosophy

​Dependencies

​Example: Creating a Pulsing Star Emoji

​Related Skills

Build docs developers (and LLMs) love

Slack GIF Creator Skill

When to Use

Slack Requirements

Dimensions

Performance Parameters

Core Workflow

Drawing Graphics

Working with User Images

Drawing from Scratch

Making Graphics Look Good

Available Utilities

GIFBuilder

Validators

Easing Functions

Frame Helpers

Animation Concepts

Optimization Strategies

Philosophy

Dependencies

Example: Creating a Pulsing Star Emoji

Related Skills