mcpskills.net
SkillsMCPsAgentsPrompts
mcpskills.net — A curated directory of AI agent Skills and MCP servers
TermsPrivacy
← Back to Skills
Creative

Slack GIF Creator

Create custom GIFs for Slack emojis and reactions. Use when users need animated GIFs for team communication.

by AnthropicRepository →Source →

Create custom animated GIFs for Slack emojis and reactions.

GIF Requirements for Slack

Technical Specifications

Dimensions:

  • Recommended: 128x128 pixels
  • Maximum: 256x256 pixels
  • Square aspect ratio

File Format:

  • GIF format required
  • Animated GIF supported
  • File size: Under 256KB for custom emoji

Animation:

  • Frame rate: 10-15 fps
  • Loop count: Infinite
  • Duration: 1-3 seconds typical

Creation Process

1. Design Concept

Define the GIF:

  • Purpose (reaction, emoji, illustration)
  • Style (minimal, detailed, cartoon)
  • Animation type (loop, one-shot, bounce)

Sketch Ideas:

  • Thumbnail sketches
  • Frame-by-frame breakdown
  • Timing and rhythm

2. Frame Creation

Frame-by-Frame Method:

// Create individual frames
const frames = [];

// Frame 1
frames.push(createFrame1());

// Frame 2
frames.push(createFrame2());

// Frame 3
frames.push(createFrame3());

Onion Skinning:

  • Show previous frame at reduced opacity
  • Maintain consistency across frames
  • Smooth transitions

3. Animation Assembly

Using Canvas:

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

canvas.width = 128;
canvas.height = 128;

// Draw each frame
frames.forEach((frame, index) => {
  setTimeout(() => {
    ctx.clearRect(0, 0, 128, 128);
    drawFrame(ctx, frame);
  }, index * 100); // 100ms per frame
});

4. Export as GIF

Using gif.js:

const gif = new GIF({
  workers: 2,
  quality: 10,
  width: 128,
  height: 128
});

// Add frames
frames.forEach(frame => {
  gif.addFrame(frame, { delay: 100 });
});

gif.render();

Popular GIF Types for Slack

Reactions

  • Thumbs up/down
  • Clapping
  • Fire/flame
  • Heart/love
  • Laughing/crying

Emotions

  • Happy/excited
  • Sad/disappointed
  • Surprised/shocked
  • Confused/thinking
  • Angry/frustrated

Actions

  • Waving
  • High five
  • Celebration
  • Facepalm
  • Shrugging

Best Practices

  • Keep file size small for fast loading
  • Use simple designs for small dimensions
  • Ensure animation loops smoothly
  • Test in Slack before finalizing
  • Consider accessibility (alt text)
  • Use consistent style across emoji set