Slack Gif Creator
AnthropicOfficialPublished by Anthropic
- Skill
- Content generator
- Design and creative
- Apache-2.0
- Low risk
- Has scripts
AutoGineer summary
Written by AutoGineer from the skill’s own files, not by the author
Slack GIF Creator provides a programmatic approach to generating animated GIFs using Python and the PIL library. It includes specialized utilities for building, validating, and optimizing animations to meet Slack's specific dimension, color, and file size constraints. The skill offers a flexible framework for drawing custom graphics, applying easing functions for smooth motion, and implementing various animation effects like pulses, bounces, and particle bursts.
What it does
- Provides a builder class to assemble and save animated GIFs.
- Includes validation tools to ensure GIFs meet Slack's technical requirements.
- Offers easing functions to create natural, non-linear motion.
- Supplies helper functions for common drawing tasks like gradients and shapes.
- Implements optimization strategies to reduce file size for Slack's limits.
- Supports custom animation logic using PIL primitives.
When to use it
- When you need to create custom animated emojis or message GIFs for Slack.
- When you have specific animation requirements that cannot be met by stock GIFs.
- When you need to programmatically generate animations from scratch.
- When you need to optimize existing GIF files to fit within Slack's constraints.
Advantages
- Ensures compatibility with Slack's specific file size and dimension limits.
- Allows for highly customized, unique animation sequences.
- Provides smooth, professional-looking motion through built-in easing functions.
- Offers granular control over frame rates and color palettes for optimization.
Usage examples
- “Create a 128x128 GIF of a blue circle pulsing in the center for a Slack emoji.”
- The agent uses the GIFBuilder and PIL to draw a blue circle, applies a sine-wave pulse effect to the scale, and saves the file optimized for Slack emoji use.
- “Make a Slack GIF of a star bouncing across the screen.”
- The agent generates a sequence of frames using the bounce_out easing function to simulate gravity and impact, then compiles them into an optimized GIF.
Install
Download the skill as a ZIP:
https://autogineer.com/agent-skills/anthropics/slack-gif-creator/downloadUnzip it into the cross-client skills folder of your project:
mkdir -p .agents/skills && unzip slack-gif-creator.zip -d .agents/skills
Documentation by Anthropic
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/styleDrawing 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: linear, ease_in, ease_out, ease_in_out,
# bounce_out, elastic_out, back_outFrame Helpers (core.frame_composer)
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()ormath.cos()with frame indexAdd small random variations for natural feel
Apply to x and/or y position
Pulse/Heartbeat
Scale object size rhythmically:
Use
math.sin(t * frequency * 2 * math.pi)for smooth pulseFor heartbeat: two quick pulses then pause (adjust sine wave)
Scale between 0.8 and 1.2 of base size
Bounce
Object falls and bounces:
Use
interpolate()witheasing='bounce_out'for landingUse
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
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()witheasing='ease_out'for smooth stopFor 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 += vyAdd gravity:
vy += gravity_constantFade out particles over time (reduce alpha)
Optimization Strategies
Only when asked to make the file size smaller, implement a few of the following methods:
Fewer frames - Lower FPS (10 instead of 20) or shorter duration
Fewer colors -
num_colors=48instead of 128Smaller dimensions - 128x128 instead of 480x480
Remove duplicates -
remove_duplicates=Truein save()Emoji mode -
optimize_for_emoji=Trueauto-optimizes
# Maximum optimization for emoji
builder.save(
'emoji.gif',
num_colors=48,
optimize_for_emoji=True,
remove_duplicates=True
)Philosophy
This skill provides:
Knowledge: Slack's requirements and animation concepts
Utilities: GIFBuilder, validators, easing functions
Flexibility: Create the 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 built into the skill
Note on user uploads: This skill doesn't include pre-built graphics, but if a user uploads 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.
Be creative! Combine concepts (bouncing + rotating, pulsing + sliding, etc.) and use PIL's full capabilities.
Dependencies
pip install pillow imageio numpyFiles
- ATTRIBUTION.mdAdded by AutoGineer889 B
- LICENSE.txt11.1 KiB
- SKILL.md7.7 KiB
- core/easing.pyScript6.1 KiB
- core/frame_composer.pyScript4.4 KiB
- core/gif_builder.pyScript9.6 KiB
- core/validators.pyScript3.7 KiB
- requirements.txt66 B
core/gif_builder.py
#!/usr/bin/env python3
"""
GIF Builder - Core module for assembling frames into GIFs optimized for Slack.
This module provides the main interface for creating GIFs from programmatically
generated frames, with automatic optimization for Slack's requirements.
"""
from pathlib import Path
from typing import Optional
import imageio.v3 as imageio
import numpy as np
from PIL import Image
class GIFBuilder:
"""Builder for creating optimized GIFs from frames."""
def __init__(self, width: int = 480, height: int = 480, fps: int = 15):
"""
Initialize GIF builder.
Args:
width: Frame width in pixels
height: Frame height in pixels
fps: Frames per second
"""
self.width = width
self.height = height
self.fps = fps
self.frames: list[np.ndarray] = []
def add_frame(self, frame: np.ndarray | Image.Image):
"""
Add a frame to the GIF.
Args:
frame: Frame as numpy array or PIL Image (will be converted to RGB)
"""
if isinstance(frame, Image.Image):
frame = np.array(frame.convert("RGB"))
# Ensure frame is correct size
if frame.shape[:2] != (self.height, self.width):
pil_frame = Image.fromarray(frame)
pil_frame = pil_frame.resize(
(self.width, self.height), Image.Resampling.LANCZOS
)
frame = np.array(pil_frame)
self.frames.append(frame)
def add_frames(self, frames: list[np.ndarray | Image.Image]):
"""Add multiple frames at once."""
for frame in frames:
self.add_frame(frame)
def optimize_colors(
self, num_colors: int = 128, use_global_palette: bool = True
) -> list[np.ndarray]:
"""
Reduce colors in all frames using quantization.
Args:
num_colors: Target number of colors (8-256)
use_global_palette: Use a single palette for all frames (better compression)
Returns:
List of color-optimized frames
"""
optimized = []
if use_global_palette and len(self.frames) > 1:
# Create a global palette from all frames
# Sample frames to build palette
sample_size = min(5, len(self.frames))
sample_indices = [
int(i * len(self.frames) / sample_size) for i in range(sample_size)
]
sample_frames = [self.frames[i] for i in sample_indices]
# Combine sample frames into a single image for palette generation
# Flatten each frame to get all pixels, then stack them
all_pixels = np.vstack(
[f.reshape(-1, 3) for f in sample_frames]
) # (total_pixels, 3)
# Create a properly-shaped RGB image from the pixel data
# We'll make a roughly square image from all the pixels
total_pixels = len(all_pixels)
width = min(512, int(np.sqrt(total_pixels))) # Reasonable width, max 512
height = (total_pixels + width - 1) // width # Ceiling division
# Pad if necessary to fill the rectangle
pixels_needed = width * height
if pixels_needed > total_pixels:
padding = np.zeros((pixels_needed - total_pixels, 3), dtype=np.uint8)
all_pixels = np.vstack([all_pixels, padding])
# Reshape to proper RGB image format (H, W, 3)
img_array = (
all_pixels[:pixels_needed].reshape(height, width, 3).astype(np.uint8)
)
combined_img = Image.fromarray(img_array, mode="RGB")
# Generate global palette
global_palette = combined_img.quantize(colors=num_colors, method=2)
# Apply global palette to all frames
for frame in self.frames:
pil_frame = Image.fromarray(frame)
quantized = pil_frame.quantize(palette=global_palette, dither=1)
optimized.append(np.array(quantized.convert("RGB")))
else:
# Use per-frame quantization
for frame in self.frames:
pil_frame = Image.fromarray(frame)
quantized = pil_frame.quantize(colors=num_colors, method=2, dither=1)
optimized.append(np.array(quantized.convert("RGB")))
return optimized
def deduplicate_frames(self, threshold: float = 0.9995) -> int:
"""
Remove duplicate or near-duplicate consecutive frames.
Args:
threshold: Similarity threshold (0.0-1.0). Higher = more strict (0.9995 = nearly identical).
Use 0.9995+ to preserve subtle animations, 0.98 for aggressive removal.
Returns:
Number of frames removed
"""
if len(self.frames) < 2:
return 0
deduplicated = [self.frames[0]]
removed_count = 0
for i in range(1, len(self.frames)):
# Compare with previous frame
prev_frame = np.array(deduplicated[-1], dtype=np.float32)
curr_frame = np.array(self.frames[i], dtype=np.float32)
# Calculate similarity (normalized)
diff = np.abs(prev_frame - curr_frame)
similarity = 1.0 - (np.mean(diff) / 255.0)
# Keep frame if sufficiently different
# High threshold (0.9995+) means only remove nearly identical frames
if similarity < threshold:
deduplicated.append(self.frames[i])
else:
removed_count += 1
self.frames = deduplicated
return removed_count
def save(
self,
output_path: str | Path,
num_colors: int = 128,
optimize_for_emoji: bool = False,
remove_duplicates: bool = False,
) -> dict:
"""
Save frames as optimized GIF for Slack.
Args:
output_path: Where to save the GIF
num_colors: Number of colors to use (fewer = smaller file)
optimize_for_emoji: If True, optimize for emoji size (128x128, fewer colors)
remove_duplicates: If True, remove duplicate consecutive frames (opt-in)
Returns:
Dictionary with file info (path, size, dimensions, frame_count)
"""
if not self.frames:
raise ValueError("No frames to save. Add frames with add_frame() first.")
output_path = Path(output_path)
# Remove duplicate frames to reduce file size
if remove_duplicates:
removed = self.deduplicate_frames(threshold=0.9995)
if removed > 0:
print(
f" Removed {removed} nearly identical frames (preserved subtle animations)"
)
# Optimize for emoji if requested
if optimize_for_emoji:
if self.width > 128 or self.height > 128:
print(
f" Resizing from {self.width}x{self.height} to 128x128 for emoji"
)
self.width = 128
self.height = 128
# Resize all frames
resized_frames = []
for frame in self.frames:
pil_frame = Image.fromarray(frame)
pil_frame = pil_frame.resize((128, 128), Image.Resampling.LANCZOS)
resized_frames.append(np.array(pil_frame))
self.frames = resized_frames
num_colors = min(num_colors, 48) # More aggressive color limit for emoji
# More aggressive FPS reduction for emoji
if len(self.frames) > 12:
print(
f" Reducing frames from {len(self.frames)} to ~12 for emoji size"
)
# Keep every nth frame to get close to 12 frames
keep_every = max(1, len(self.frames) // 12)
self.frames = [
self.frames[i] for i in range(0, len(self.frames), keep_every)
]
# Optimize colors with global palette
optimized_frames = self.optimize_colors(num_colors, use_global_palette=True)
# Calculate frame duration in milliseconds
frame_duration = 1000 / self.fps
# Save GIF
imageio.imwrite(
output_path,
optimized_frames,
duration=frame_duration,
loop=0, # Infinite loop
)
# Get file info
file_size_kb = output_path.stat().st_size / 1024
file_size_mb = file_size_kb / 1024
info = {
"path": str(output_path),
"size_kb": file_size_kb,
"size_mb": file_size_mb,
"dimensions": f"{self.width}x{self.height}",
"frame_count": len(optimized_frames),
"fps": self.fps,
"duration_seconds": len(optimized_frames) / self.fps,
"colors": num_colors,
}
# Print info
print(f"\n✓ GIF created successfully!")
print(f" Path: {output_path}")
print(f" Size: {file_size_kb:.1f} KB ({file_size_mb:.2f} MB)")
print(f" Dimensions: {self.width}x{self.height}")
print(f" Frames: {len(optimized_frames)} @ {self.fps} fps")
print(f" Duration: {info['duration_seconds']:.1f}s")
print(f" Colors: {num_colors}")
# Size info
if optimize_for_emoji:
print(f" Optimized for emoji (128x128, reduced colors)")
if file_size_mb > 1.0:
print(f"\n Note: Large file size ({file_size_kb:.1f} KB)")
print(" Consider: fewer frames, smaller dimensions, or fewer colors")
return info
def clear(self):
"""Clear all frames (useful for creating multiple GIFs)."""
self.frames = []
Requirements and compatibility
Written for: Claude Code, Claude apps
Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta
“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.
Needs: Needs Python
Security
What our scanner noticed· Low risk
- Instructions that use the network
- Scripts that your agent may run
This skill includes scripts that your agent may run. Read them before you use it.
A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.
Attribution and licence
- Published by
- Anthropic
- Publisher
- Anthropic (Official)
- Source
- anthropics/skills · skills/slack-gif-creator · commit 2c5958e
- Licence
- Apache License 2.0 (redistribution allowed)
- ATTRIBUTION.md (written by AutoGineer)
- Synced
AutoGineer is not affiliated with or endorsed by Anthropic or Anthropic.
Download ZIP
The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download slack-gif-creator.zip