[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-anthropic-slack-gif-creator":3,"mdc--p5piti-key":38,"related-repo-anthropic-slack-gif-creator":1633,"related-org-anthropic-slack-gif-creator":1749},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":12,"stars":26,"repoUrl":27,"updatedAt":28,"license":29,"forks":30,"topics":31,"repo":33,"sourceUrl":36,"mdContent":37},"slack-gif-creator","create animated GIFs optimized for Slack","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.\"",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},"anthropic","Anthropic","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fanthropic.png","anthropics",[13,17,20,23],{"name":14,"slug":15,"type":16},"Creative","creative","tag",{"name":18,"slug":19,"type":16},"Animation","animation",{"name":21,"slug":22,"type":16},"Slack","slack",{"name":24,"slug":25,"type":16},"Design","design",161831,"https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fskills","2026-04-06T17:56:06.333281","Complete terms in LICENSE.txt",19131,[32],"agent-skills",{"repoUrl":27,"stars":26,"forks":30,"topics":34,"description":35},[32],"Public repository for Agent Skills","https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fskills\u002Ftree\u002FHEAD\u002Fskills\u002Fslack-gif-creator","---\nname: slack-gif-creator\ndescription: 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.\"\nlicense: Complete terms in LICENSE.txt\n---\n\n# Slack GIF Creator\n\nA toolkit providing utilities and knowledge for creating animated GIFs optimized for Slack.\n\n## Slack Requirements\n\n**Dimensions:**\n- Emoji GIFs: 128x128 (recommended)\n- Message GIFs: 480x480\n\n**Parameters:**\n- FPS: 10-30 (lower is smaller file size)\n- Colors: 48-128 (fewer = smaller file size)\n- Duration: Keep under 3 seconds for emoji GIFs\n\n## Core Workflow\n\n```python\nfrom core.gif_builder import GIFBuilder\nfrom PIL import Image, ImageDraw\n\n# 1. Create builder\nbuilder = GIFBuilder(width=128, height=128, fps=10)\n\n# 2. Generate frames\nfor i in range(12):\n    frame = Image.new('RGB', (128, 128), (240, 248, 255))\n    draw = ImageDraw.Draw(frame)\n\n    # Draw your animation using PIL primitives\n    # (circles, polygons, lines, etc.)\n\n    builder.add_frame(frame)\n\n# 3. Save with optimization\nbuilder.save('output.gif', num_colors=48, optimize_for_emoji=True)\n```\n\n## Drawing Graphics\n\n### Working with User-Uploaded Images\nIf a user uploads an image, consider whether they want to:\n- **Use it directly** (e.g., \"animate this\", \"split this into frames\")\n- **Use it as inspiration** (e.g., \"make something like this\")\n\nLoad and work with images using PIL:\n```python\nfrom PIL import Image\n\nuploaded = Image.open('file.png')\n# Use directly, or just as reference for colors\u002Fstyle\n```\n\n### Drawing from Scratch\nWhen drawing graphics from scratch, use PIL ImageDraw primitives:\n\n```python\nfrom PIL import ImageDraw\n\ndraw = ImageDraw.Draw(frame)\n\n# Circles\u002Fovals\ndraw.ellipse([x1, y1, x2, y2], fill=(r, g, b), outline=(r, g, b), width=3)\n\n# Stars, triangles, any polygon\npoints = [(x1, y1), (x2, y2), (x3, y3), ...]\ndraw.polygon(points, fill=(r, g, b), outline=(r, g, b), width=3)\n\n# Lines\ndraw.line([(x1, y1), (x2, y2)], fill=(r, g, b), width=5)\n\n# Rectangles\ndraw.rectangle([x1, y1, x2, y2], fill=(r, g, b), outline=(r, g, b), width=3)\n```\n\n**Don't use:** Emoji fonts (unreliable across platforms) or assume pre-packaged graphics exist in this skill.\n\n### Making Graphics Look Good\n\nGraphics should look polished and creative, not basic. Here's how:\n\n**Use thicker lines** - Always set `width=2` or higher for outlines and lines. Thin lines (width=1) look choppy and amateurish.\n\n**Add visual depth**:\n- Use gradients for backgrounds (`create_gradient_background`)\n- Layer multiple shapes for complexity (e.g., a star with a smaller star inside)\n\n**Make shapes more interesting**:\n- Don't just draw a plain circle - add highlights, rings, or patterns\n- Stars can have glows (draw larger, semi-transparent versions behind)\n- Combine multiple shapes (stars + sparkles, circles + rings)\n\n**Pay attention to colors**:\n- Use vibrant, complementary colors\n- Add contrast (dark outlines on light shapes, light outlines on dark shapes)\n- Consider the overall composition\n\n**For complex shapes** (hearts, snowflakes, etc.):\n- Use combinations of polygons and ellipses\n- Calculate points carefully for symmetry\n- Add details (a heart can have a highlight curve, snowflakes have intricate branches)\n\nBe creative and detailed! A good Slack GIF should look polished, not like placeholder graphics.\n\n## Available Utilities\n\n### GIFBuilder (`core.gif_builder`)\nAssembles frames and optimizes for Slack:\n```python\nbuilder = GIFBuilder(width=128, height=128, fps=10)\nbuilder.add_frame(frame)  # Add PIL Image\nbuilder.add_frames(frames)  # Add list of frames\nbuilder.save('out.gif', num_colors=48, optimize_for_emoji=True, remove_duplicates=True)\n```\n\n### Validators (`core.validators`)\nCheck if GIF meets Slack requirements:\n```python\nfrom core.validators import validate_gif, is_slack_ready\n\n# Detailed validation\npasses, info = validate_gif('my.gif', is_emoji=True, verbose=True)\n\n# Quick check\nif is_slack_ready('my.gif'):\n    print(\"Ready!\")\n```\n\n### Easing Functions (`core.easing`)\nSmooth motion instead of linear:\n```python\nfrom core.easing import interpolate\n\n# Progress from 0.0 to 1.0\nt = i \u002F (num_frames - 1)\n\n# Apply easing\ny = interpolate(start=0, end=400, t=t, easing='ease_out')\n\n# Available: linear, ease_in, ease_out, ease_in_out,\n#           bounce_out, elastic_out, back_out\n```\n\n### Frame Helpers (`core.frame_composer`)\nConvenience functions for common needs:\n```python\nfrom core.frame_composer import (\n    create_blank_frame,         # Solid color background\n    create_gradient_background,  # Vertical gradient\n    draw_circle,                # Helper for circles\n    draw_text,                  # Simple text rendering\n    draw_star                   # 5-pointed star\n)\n```\n\n## Animation Concepts\n\n### Shake\u002FVibrate\nOffset object position with oscillation:\n- Use `math.sin()` or `math.cos()` with frame index\n- Add small random variations for natural feel\n- Apply to x and\u002For y position\n\n### Pulse\u002FHeartbeat\nScale object size rhythmically:\n- Use `math.sin(t * frequency * 2 * math.pi)` for smooth pulse\n- For heartbeat: two quick pulses then pause (adjust sine wave)\n- Scale between 0.8 and 1.2 of base size\n\n### Bounce\nObject falls and bounces:\n- Use `interpolate()` with `easing='bounce_out'` for landing\n- Use `easing='ease_in'` for falling (accelerating)\n- Apply gravity by increasing y velocity each frame\n\n### Spin\u002FRotate\nRotate object around center:\n- PIL: `image.rotate(angle, resample=Image.BICUBIC)`\n- For wobble: use sine wave for angle instead of linear\n\n### Fade In\u002FOut\nGradually appear or disappear:\n- Create RGBA image, adjust alpha channel\n- Or use `Image.blend(image1, image2, alpha)`\n- Fade in: alpha from 0 to 1\n- Fade out: alpha from 1 to 0\n\n### Slide\nMove object from off-screen to position:\n- Start position: outside frame bounds\n- End position: target location\n- Use `interpolate()` with `easing='ease_out'` for smooth stop\n- For overshoot: use `easing='back_out'`\n\n### Zoom\nScale and position for zoom effect:\n- Zoom in: scale from 0.1 to 2.0, crop center\n- Zoom out: scale from 2.0 to 1.0\n- Can add motion blur for drama (PIL filter)\n\n### Explode\u002FParticle Burst\nCreate particles radiating outward:\n- Generate particles with random angles and velocities\n- Update each particle: `x += vx`, `y += vy`\n- Add gravity: `vy += gravity_constant`\n- Fade out particles over time (reduce alpha)\n\n## Optimization Strategies\n\nOnly when asked to make the file size smaller, implement a few of the following methods:\n\n1. **Fewer frames** - Lower FPS (10 instead of 20) or shorter duration\n2. **Fewer colors** - `num_colors=48` instead of 128\n3. **Smaller dimensions** - 128x128 instead of 480x480\n4. **Remove duplicates** - `remove_duplicates=True` in save()\n5. **Emoji mode** - `optimize_for_emoji=True` auto-optimizes\n\n```python\n# Maximum optimization for emoji\nbuilder.save(\n    'emoji.gif',\n    num_colors=48,\n    optimize_for_emoji=True,\n    remove_duplicates=True\n)\n```\n\n## Philosophy\n\nThis skill provides:\n- **Knowledge**: Slack's requirements and animation concepts\n- **Utilities**: GIFBuilder, validators, easing functions\n- **Flexibility**: Create the animation logic using PIL primitives\n\nIt does NOT provide:\n- Rigid animation templates or pre-made functions\n- Emoji font rendering (unreliable across platforms)\n- A library of pre-packaged graphics built into the skill\n\n**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.\n\nBe creative! Combine concepts (bouncing + rotating, pulsing + sliding, etc.) and use PIL's full capabilities.\n\n## Dependencies\n\n```bash\npip install pillow imageio numpy\n```\n",{"data":39,"body":40},{"name":4,"description":6,"license":29},{"type":41,"children":42},"root",[43,51,57,64,73,88,96,114,120,293,299,306,311,334,339,377,383,388,518,528,534,539,557,567,588,597,615,624,642,652,670,675,681,694,699,737,750,755,824,837,842,926,939,944,1007,1013,1019,1024,1058,1064,1069,1094,1100,1105,1145,1151,1156,1175,1181,1186,1215,1221,1226,1268,1274,1279,1297,1303,1308,1351,1357,1362,1438,1500,1506,1511,1544,1549,1567,1577,1582,1588,1627],{"type":44,"tag":45,"props":46,"children":47},"element","h1",{"id":4},[48],{"type":49,"value":50},"text","Slack GIF Creator",{"type":44,"tag":52,"props":53,"children":54},"p",{},[55],{"type":49,"value":56},"A toolkit providing utilities and knowledge for creating animated GIFs optimized for Slack.",{"type":44,"tag":58,"props":59,"children":61},"h2",{"id":60},"slack-requirements",[62],{"type":49,"value":63},"Slack Requirements",{"type":44,"tag":52,"props":65,"children":66},{},[67],{"type":44,"tag":68,"props":69,"children":70},"strong",{},[71],{"type":49,"value":72},"Dimensions:",{"type":44,"tag":74,"props":75,"children":76},"ul",{},[77,83],{"type":44,"tag":78,"props":79,"children":80},"li",{},[81],{"type":49,"value":82},"Emoji GIFs: 128x128 (recommended)",{"type":44,"tag":78,"props":84,"children":85},{},[86],{"type":49,"value":87},"Message GIFs: 480x480",{"type":44,"tag":52,"props":89,"children":90},{},[91],{"type":44,"tag":68,"props":92,"children":93},{},[94],{"type":49,"value":95},"Parameters:",{"type":44,"tag":74,"props":97,"children":98},{},[99,104,109],{"type":44,"tag":78,"props":100,"children":101},{},[102],{"type":49,"value":103},"FPS: 10-30 (lower is smaller file size)",{"type":44,"tag":78,"props":105,"children":106},{},[107],{"type":49,"value":108},"Colors: 48-128 (fewer = smaller file size)",{"type":44,"tag":78,"props":110,"children":111},{},[112],{"type":49,"value":113},"Duration: Keep under 3 seconds for emoji GIFs",{"type":44,"tag":58,"props":115,"children":117},{"id":116},"core-workflow",[118],{"type":49,"value":119},"Core Workflow",{"type":44,"tag":121,"props":122,"children":127},"pre",{"className":123,"code":124,"language":125,"meta":126,"style":126},"language-python shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","from core.gif_builder import GIFBuilder\nfrom PIL import Image, ImageDraw\n\n# 1. Create builder\nbuilder = GIFBuilder(width=128, height=128, fps=10)\n\n# 2. Generate frames\nfor i in range(12):\n    frame = Image.new('RGB', (128, 128), (240, 248, 255))\n    draw = ImageDraw.Draw(frame)\n\n    # Draw your animation using PIL primitives\n    # (circles, polygons, lines, etc.)\n\n    builder.add_frame(frame)\n\n# 3. Save with optimization\nbuilder.save('output.gif', num_colors=48, optimize_for_emoji=True)\n","python","",[128],{"type":44,"tag":129,"props":130,"children":131},"code",{"__ignoreMap":126},[132,143,152,162,171,180,188,197,206,215,224,232,241,250,258,267,275,284],{"type":44,"tag":133,"props":134,"children":137},"span",{"class":135,"line":136},"line",1,[138],{"type":44,"tag":133,"props":139,"children":140},{},[141],{"type":49,"value":142},"from core.gif_builder import GIFBuilder\n",{"type":44,"tag":133,"props":144,"children":146},{"class":135,"line":145},2,[147],{"type":44,"tag":133,"props":148,"children":149},{},[150],{"type":49,"value":151},"from PIL import Image, ImageDraw\n",{"type":44,"tag":133,"props":153,"children":155},{"class":135,"line":154},3,[156],{"type":44,"tag":133,"props":157,"children":159},{"emptyLinePlaceholder":158},true,[160],{"type":49,"value":161},"\n",{"type":44,"tag":133,"props":163,"children":165},{"class":135,"line":164},4,[166],{"type":44,"tag":133,"props":167,"children":168},{},[169],{"type":49,"value":170},"# 1. Create builder\n",{"type":44,"tag":133,"props":172,"children":174},{"class":135,"line":173},5,[175],{"type":44,"tag":133,"props":176,"children":177},{},[178],{"type":49,"value":179},"builder = GIFBuilder(width=128, height=128, fps=10)\n",{"type":44,"tag":133,"props":181,"children":183},{"class":135,"line":182},6,[184],{"type":44,"tag":133,"props":185,"children":186},{"emptyLinePlaceholder":158},[187],{"type":49,"value":161},{"type":44,"tag":133,"props":189,"children":191},{"class":135,"line":190},7,[192],{"type":44,"tag":133,"props":193,"children":194},{},[195],{"type":49,"value":196},"# 2. Generate frames\n",{"type":44,"tag":133,"props":198,"children":200},{"class":135,"line":199},8,[201],{"type":44,"tag":133,"props":202,"children":203},{},[204],{"type":49,"value":205},"for i in range(12):\n",{"type":44,"tag":133,"props":207,"children":209},{"class":135,"line":208},9,[210],{"type":44,"tag":133,"props":211,"children":212},{},[213],{"type":49,"value":214},"    frame = Image.new('RGB', (128, 128), (240, 248, 255))\n",{"type":44,"tag":133,"props":216,"children":218},{"class":135,"line":217},10,[219],{"type":44,"tag":133,"props":220,"children":221},{},[222],{"type":49,"value":223},"    draw = ImageDraw.Draw(frame)\n",{"type":44,"tag":133,"props":225,"children":227},{"class":135,"line":226},11,[228],{"type":44,"tag":133,"props":229,"children":230},{"emptyLinePlaceholder":158},[231],{"type":49,"value":161},{"type":44,"tag":133,"props":233,"children":235},{"class":135,"line":234},12,[236],{"type":44,"tag":133,"props":237,"children":238},{},[239],{"type":49,"value":240},"    # Draw your animation using PIL primitives\n",{"type":44,"tag":133,"props":242,"children":244},{"class":135,"line":243},13,[245],{"type":44,"tag":133,"props":246,"children":247},{},[248],{"type":49,"value":249},"    # (circles, polygons, lines, etc.)\n",{"type":44,"tag":133,"props":251,"children":253},{"class":135,"line":252},14,[254],{"type":44,"tag":133,"props":255,"children":256},{"emptyLinePlaceholder":158},[257],{"type":49,"value":161},{"type":44,"tag":133,"props":259,"children":261},{"class":135,"line":260},15,[262],{"type":44,"tag":133,"props":263,"children":264},{},[265],{"type":49,"value":266},"    builder.add_frame(frame)\n",{"type":44,"tag":133,"props":268,"children":270},{"class":135,"line":269},16,[271],{"type":44,"tag":133,"props":272,"children":273},{"emptyLinePlaceholder":158},[274],{"type":49,"value":161},{"type":44,"tag":133,"props":276,"children":278},{"class":135,"line":277},17,[279],{"type":44,"tag":133,"props":280,"children":281},{},[282],{"type":49,"value":283},"# 3. Save with optimization\n",{"type":44,"tag":133,"props":285,"children":287},{"class":135,"line":286},18,[288],{"type":44,"tag":133,"props":289,"children":290},{},[291],{"type":49,"value":292},"builder.save('output.gif', num_colors=48, optimize_for_emoji=True)\n",{"type":44,"tag":58,"props":294,"children":296},{"id":295},"drawing-graphics",[297],{"type":49,"value":298},"Drawing Graphics",{"type":44,"tag":300,"props":301,"children":303},"h3",{"id":302},"working-with-user-uploaded-images",[304],{"type":49,"value":305},"Working with User-Uploaded Images",{"type":44,"tag":52,"props":307,"children":308},{},[309],{"type":49,"value":310},"If a user uploads an image, consider whether they want to:",{"type":44,"tag":74,"props":312,"children":313},{},[314,324],{"type":44,"tag":78,"props":315,"children":316},{},[317,322],{"type":44,"tag":68,"props":318,"children":319},{},[320],{"type":49,"value":321},"Use it directly",{"type":49,"value":323}," (e.g., \"animate this\", \"split this into frames\")",{"type":44,"tag":78,"props":325,"children":326},{},[327,332],{"type":44,"tag":68,"props":328,"children":329},{},[330],{"type":49,"value":331},"Use it as inspiration",{"type":49,"value":333}," (e.g., \"make something like this\")",{"type":44,"tag":52,"props":335,"children":336},{},[337],{"type":49,"value":338},"Load and work with images using PIL:",{"type":44,"tag":121,"props":340,"children":342},{"className":123,"code":341,"language":125,"meta":126,"style":126},"from PIL import Image\n\nuploaded = Image.open('file.png')\n# Use directly, or just as reference for colors\u002Fstyle\n",[343],{"type":44,"tag":129,"props":344,"children":345},{"__ignoreMap":126},[346,354,361,369],{"type":44,"tag":133,"props":347,"children":348},{"class":135,"line":136},[349],{"type":44,"tag":133,"props":350,"children":351},{},[352],{"type":49,"value":353},"from PIL import Image\n",{"type":44,"tag":133,"props":355,"children":356},{"class":135,"line":145},[357],{"type":44,"tag":133,"props":358,"children":359},{"emptyLinePlaceholder":158},[360],{"type":49,"value":161},{"type":44,"tag":133,"props":362,"children":363},{"class":135,"line":154},[364],{"type":44,"tag":133,"props":365,"children":366},{},[367],{"type":49,"value":368},"uploaded = Image.open('file.png')\n",{"type":44,"tag":133,"props":370,"children":371},{"class":135,"line":164},[372],{"type":44,"tag":133,"props":373,"children":374},{},[375],{"type":49,"value":376},"# Use directly, or just as reference for colors\u002Fstyle\n",{"type":44,"tag":300,"props":378,"children":380},{"id":379},"drawing-from-scratch",[381],{"type":49,"value":382},"Drawing from Scratch",{"type":44,"tag":52,"props":384,"children":385},{},[386],{"type":49,"value":387},"When drawing graphics from scratch, use PIL ImageDraw primitives:",{"type":44,"tag":121,"props":389,"children":391},{"className":123,"code":390,"language":125,"meta":126,"style":126},"from PIL import ImageDraw\n\ndraw = ImageDraw.Draw(frame)\n\n# Circles\u002Fovals\ndraw.ellipse([x1, y1, x2, y2], fill=(r, g, b), outline=(r, g, b), width=3)\n\n# Stars, triangles, any polygon\npoints = [(x1, y1), (x2, y2), (x3, y3), ...]\ndraw.polygon(points, fill=(r, g, b), outline=(r, g, b), width=3)\n\n# Lines\ndraw.line([(x1, y1), (x2, y2)], fill=(r, g, b), width=5)\n\n# Rectangles\ndraw.rectangle([x1, y1, x2, y2], fill=(r, g, b), outline=(r, g, b), width=3)\n",[392],{"type":44,"tag":129,"props":393,"children":394},{"__ignoreMap":126},[395,403,410,418,425,433,441,448,456,464,472,479,487,495,502,510],{"type":44,"tag":133,"props":396,"children":397},{"class":135,"line":136},[398],{"type":44,"tag":133,"props":399,"children":400},{},[401],{"type":49,"value":402},"from PIL import ImageDraw\n",{"type":44,"tag":133,"props":404,"children":405},{"class":135,"line":145},[406],{"type":44,"tag":133,"props":407,"children":408},{"emptyLinePlaceholder":158},[409],{"type":49,"value":161},{"type":44,"tag":133,"props":411,"children":412},{"class":135,"line":154},[413],{"type":44,"tag":133,"props":414,"children":415},{},[416],{"type":49,"value":417},"draw = ImageDraw.Draw(frame)\n",{"type":44,"tag":133,"props":419,"children":420},{"class":135,"line":164},[421],{"type":44,"tag":133,"props":422,"children":423},{"emptyLinePlaceholder":158},[424],{"type":49,"value":161},{"type":44,"tag":133,"props":426,"children":427},{"class":135,"line":173},[428],{"type":44,"tag":133,"props":429,"children":430},{},[431],{"type":49,"value":432},"# Circles\u002Fovals\n",{"type":44,"tag":133,"props":434,"children":435},{"class":135,"line":182},[436],{"type":44,"tag":133,"props":437,"children":438},{},[439],{"type":49,"value":440},"draw.ellipse([x1, y1, x2, y2], fill=(r, g, b), outline=(r, g, b), width=3)\n",{"type":44,"tag":133,"props":442,"children":443},{"class":135,"line":190},[444],{"type":44,"tag":133,"props":445,"children":446},{"emptyLinePlaceholder":158},[447],{"type":49,"value":161},{"type":44,"tag":133,"props":449,"children":450},{"class":135,"line":199},[451],{"type":44,"tag":133,"props":452,"children":453},{},[454],{"type":49,"value":455},"# Stars, triangles, any polygon\n",{"type":44,"tag":133,"props":457,"children":458},{"class":135,"line":208},[459],{"type":44,"tag":133,"props":460,"children":461},{},[462],{"type":49,"value":463},"points = [(x1, y1), (x2, y2), (x3, y3), ...]\n",{"type":44,"tag":133,"props":465,"children":466},{"class":135,"line":217},[467],{"type":44,"tag":133,"props":468,"children":469},{},[470],{"type":49,"value":471},"draw.polygon(points, fill=(r, g, b), outline=(r, g, b), width=3)\n",{"type":44,"tag":133,"props":473,"children":474},{"class":135,"line":226},[475],{"type":44,"tag":133,"props":476,"children":477},{"emptyLinePlaceholder":158},[478],{"type":49,"value":161},{"type":44,"tag":133,"props":480,"children":481},{"class":135,"line":234},[482],{"type":44,"tag":133,"props":483,"children":484},{},[485],{"type":49,"value":486},"# Lines\n",{"type":44,"tag":133,"props":488,"children":489},{"class":135,"line":243},[490],{"type":44,"tag":133,"props":491,"children":492},{},[493],{"type":49,"value":494},"draw.line([(x1, y1), (x2, y2)], fill=(r, g, b), width=5)\n",{"type":44,"tag":133,"props":496,"children":497},{"class":135,"line":252},[498],{"type":44,"tag":133,"props":499,"children":500},{"emptyLinePlaceholder":158},[501],{"type":49,"value":161},{"type":44,"tag":133,"props":503,"children":504},{"class":135,"line":260},[505],{"type":44,"tag":133,"props":506,"children":507},{},[508],{"type":49,"value":509},"# Rectangles\n",{"type":44,"tag":133,"props":511,"children":512},{"class":135,"line":269},[513],{"type":44,"tag":133,"props":514,"children":515},{},[516],{"type":49,"value":517},"draw.rectangle([x1, y1, x2, y2], fill=(r, g, b), outline=(r, g, b), width=3)\n",{"type":44,"tag":52,"props":519,"children":520},{},[521,526],{"type":44,"tag":68,"props":522,"children":523},{},[524],{"type":49,"value":525},"Don't use:",{"type":49,"value":527}," Emoji fonts (unreliable across platforms) or assume pre-packaged graphics exist in this skill.",{"type":44,"tag":300,"props":529,"children":531},{"id":530},"making-graphics-look-good",[532],{"type":49,"value":533},"Making Graphics Look Good",{"type":44,"tag":52,"props":535,"children":536},{},[537],{"type":49,"value":538},"Graphics should look polished and creative, not basic. Here's how:",{"type":44,"tag":52,"props":540,"children":541},{},[542,547,549,555],{"type":44,"tag":68,"props":543,"children":544},{},[545],{"type":49,"value":546},"Use thicker lines",{"type":49,"value":548}," - Always set ",{"type":44,"tag":129,"props":550,"children":552},{"className":551},[],[553],{"type":49,"value":554},"width=2",{"type":49,"value":556}," or higher for outlines and lines. Thin lines (width=1) look choppy and amateurish.",{"type":44,"tag":52,"props":558,"children":559},{},[560,565],{"type":44,"tag":68,"props":561,"children":562},{},[563],{"type":49,"value":564},"Add visual depth",{"type":49,"value":566},":",{"type":44,"tag":74,"props":568,"children":569},{},[570,583],{"type":44,"tag":78,"props":571,"children":572},{},[573,575,581],{"type":49,"value":574},"Use gradients for backgrounds (",{"type":44,"tag":129,"props":576,"children":578},{"className":577},[],[579],{"type":49,"value":580},"create_gradient_background",{"type":49,"value":582},")",{"type":44,"tag":78,"props":584,"children":585},{},[586],{"type":49,"value":587},"Layer multiple shapes for complexity (e.g., a star with a smaller star inside)",{"type":44,"tag":52,"props":589,"children":590},{},[591,596],{"type":44,"tag":68,"props":592,"children":593},{},[594],{"type":49,"value":595},"Make shapes more interesting",{"type":49,"value":566},{"type":44,"tag":74,"props":598,"children":599},{},[600,605,610],{"type":44,"tag":78,"props":601,"children":602},{},[603],{"type":49,"value":604},"Don't just draw a plain circle - add highlights, rings, or patterns",{"type":44,"tag":78,"props":606,"children":607},{},[608],{"type":49,"value":609},"Stars can have glows (draw larger, semi-transparent versions behind)",{"type":44,"tag":78,"props":611,"children":612},{},[613],{"type":49,"value":614},"Combine multiple shapes (stars + sparkles, circles + rings)",{"type":44,"tag":52,"props":616,"children":617},{},[618,623],{"type":44,"tag":68,"props":619,"children":620},{},[621],{"type":49,"value":622},"Pay attention to colors",{"type":49,"value":566},{"type":44,"tag":74,"props":625,"children":626},{},[627,632,637],{"type":44,"tag":78,"props":628,"children":629},{},[630],{"type":49,"value":631},"Use vibrant, complementary colors",{"type":44,"tag":78,"props":633,"children":634},{},[635],{"type":49,"value":636},"Add contrast (dark outlines on light shapes, light outlines on dark shapes)",{"type":44,"tag":78,"props":638,"children":639},{},[640],{"type":49,"value":641},"Consider the overall composition",{"type":44,"tag":52,"props":643,"children":644},{},[645,650],{"type":44,"tag":68,"props":646,"children":647},{},[648],{"type":49,"value":649},"For complex shapes",{"type":49,"value":651}," (hearts, snowflakes, etc.):",{"type":44,"tag":74,"props":653,"children":654},{},[655,660,665],{"type":44,"tag":78,"props":656,"children":657},{},[658],{"type":49,"value":659},"Use combinations of polygons and ellipses",{"type":44,"tag":78,"props":661,"children":662},{},[663],{"type":49,"value":664},"Calculate points carefully for symmetry",{"type":44,"tag":78,"props":666,"children":667},{},[668],{"type":49,"value":669},"Add details (a heart can have a highlight curve, snowflakes have intricate branches)",{"type":44,"tag":52,"props":671,"children":672},{},[673],{"type":49,"value":674},"Be creative and detailed! A good Slack GIF should look polished, not like placeholder graphics.",{"type":44,"tag":58,"props":676,"children":678},{"id":677},"available-utilities",[679],{"type":49,"value":680},"Available Utilities",{"type":44,"tag":300,"props":682,"children":684},{"id":683},"gifbuilder-coregif_builder",[685,687,693],{"type":49,"value":686},"GIFBuilder (",{"type":44,"tag":129,"props":688,"children":690},{"className":689},[],[691],{"type":49,"value":692},"core.gif_builder",{"type":49,"value":582},{"type":44,"tag":52,"props":695,"children":696},{},[697],{"type":49,"value":698},"Assembles frames and optimizes for Slack:",{"type":44,"tag":121,"props":700,"children":702},{"className":123,"code":701,"language":125,"meta":126,"style":126},"builder = GIFBuilder(width=128, height=128, fps=10)\nbuilder.add_frame(frame)  # Add PIL Image\nbuilder.add_frames(frames)  # Add list of frames\nbuilder.save('out.gif', num_colors=48, optimize_for_emoji=True, remove_duplicates=True)\n",[703],{"type":44,"tag":129,"props":704,"children":705},{"__ignoreMap":126},[706,713,721,729],{"type":44,"tag":133,"props":707,"children":708},{"class":135,"line":136},[709],{"type":44,"tag":133,"props":710,"children":711},{},[712],{"type":49,"value":179},{"type":44,"tag":133,"props":714,"children":715},{"class":135,"line":145},[716],{"type":44,"tag":133,"props":717,"children":718},{},[719],{"type":49,"value":720},"builder.add_frame(frame)  # Add PIL Image\n",{"type":44,"tag":133,"props":722,"children":723},{"class":135,"line":154},[724],{"type":44,"tag":133,"props":725,"children":726},{},[727],{"type":49,"value":728},"builder.add_frames(frames)  # Add list of frames\n",{"type":44,"tag":133,"props":730,"children":731},{"class":135,"line":164},[732],{"type":44,"tag":133,"props":733,"children":734},{},[735],{"type":49,"value":736},"builder.save('out.gif', num_colors=48, optimize_for_emoji=True, remove_duplicates=True)\n",{"type":44,"tag":300,"props":738,"children":740},{"id":739},"validators-corevalidators",[741,743,749],{"type":49,"value":742},"Validators (",{"type":44,"tag":129,"props":744,"children":746},{"className":745},[],[747],{"type":49,"value":748},"core.validators",{"type":49,"value":582},{"type":44,"tag":52,"props":751,"children":752},{},[753],{"type":49,"value":754},"Check if GIF meets Slack requirements:",{"type":44,"tag":121,"props":756,"children":758},{"className":123,"code":757,"language":125,"meta":126,"style":126},"from core.validators import validate_gif, is_slack_ready\n\n# Detailed validation\npasses, info = validate_gif('my.gif', is_emoji=True, verbose=True)\n\n# Quick check\nif is_slack_ready('my.gif'):\n    print(\"Ready!\")\n",[759],{"type":44,"tag":129,"props":760,"children":761},{"__ignoreMap":126},[762,770,777,785,793,800,808,816],{"type":44,"tag":133,"props":763,"children":764},{"class":135,"line":136},[765],{"type":44,"tag":133,"props":766,"children":767},{},[768],{"type":49,"value":769},"from core.validators import validate_gif, is_slack_ready\n",{"type":44,"tag":133,"props":771,"children":772},{"class":135,"line":145},[773],{"type":44,"tag":133,"props":774,"children":775},{"emptyLinePlaceholder":158},[776],{"type":49,"value":161},{"type":44,"tag":133,"props":778,"children":779},{"class":135,"line":154},[780],{"type":44,"tag":133,"props":781,"children":782},{},[783],{"type":49,"value":784},"# Detailed validation\n",{"type":44,"tag":133,"props":786,"children":787},{"class":135,"line":164},[788],{"type":44,"tag":133,"props":789,"children":790},{},[791],{"type":49,"value":792},"passes, info = validate_gif('my.gif', is_emoji=True, verbose=True)\n",{"type":44,"tag":133,"props":794,"children":795},{"class":135,"line":173},[796],{"type":44,"tag":133,"props":797,"children":798},{"emptyLinePlaceholder":158},[799],{"type":49,"value":161},{"type":44,"tag":133,"props":801,"children":802},{"class":135,"line":182},[803],{"type":44,"tag":133,"props":804,"children":805},{},[806],{"type":49,"value":807},"# Quick check\n",{"type":44,"tag":133,"props":809,"children":810},{"class":135,"line":190},[811],{"type":44,"tag":133,"props":812,"children":813},{},[814],{"type":49,"value":815},"if is_slack_ready('my.gif'):\n",{"type":44,"tag":133,"props":817,"children":818},{"class":135,"line":199},[819],{"type":44,"tag":133,"props":820,"children":821},{},[822],{"type":49,"value":823},"    print(\"Ready!\")\n",{"type":44,"tag":300,"props":825,"children":827},{"id":826},"easing-functions-coreeasing",[828,830,836],{"type":49,"value":829},"Easing Functions (",{"type":44,"tag":129,"props":831,"children":833},{"className":832},[],[834],{"type":49,"value":835},"core.easing",{"type":49,"value":582},{"type":44,"tag":52,"props":838,"children":839},{},[840],{"type":49,"value":841},"Smooth motion instead of linear:",{"type":44,"tag":121,"props":843,"children":845},{"className":123,"code":844,"language":125,"meta":126,"style":126},"from core.easing import interpolate\n\n# Progress from 0.0 to 1.0\nt = i \u002F (num_frames - 1)\n\n# Apply easing\ny = interpolate(start=0, end=400, t=t, easing='ease_out')\n\n# Available: linear, ease_in, ease_out, ease_in_out,\n#           bounce_out, elastic_out, back_out\n",[846],{"type":44,"tag":129,"props":847,"children":848},{"__ignoreMap":126},[849,857,864,872,880,887,895,903,910,918],{"type":44,"tag":133,"props":850,"children":851},{"class":135,"line":136},[852],{"type":44,"tag":133,"props":853,"children":854},{},[855],{"type":49,"value":856},"from core.easing import interpolate\n",{"type":44,"tag":133,"props":858,"children":859},{"class":135,"line":145},[860],{"type":44,"tag":133,"props":861,"children":862},{"emptyLinePlaceholder":158},[863],{"type":49,"value":161},{"type":44,"tag":133,"props":865,"children":866},{"class":135,"line":154},[867],{"type":44,"tag":133,"props":868,"children":869},{},[870],{"type":49,"value":871},"# Progress from 0.0 to 1.0\n",{"type":44,"tag":133,"props":873,"children":874},{"class":135,"line":164},[875],{"type":44,"tag":133,"props":876,"children":877},{},[878],{"type":49,"value":879},"t = i \u002F (num_frames - 1)\n",{"type":44,"tag":133,"props":881,"children":882},{"class":135,"line":173},[883],{"type":44,"tag":133,"props":884,"children":885},{"emptyLinePlaceholder":158},[886],{"type":49,"value":161},{"type":44,"tag":133,"props":888,"children":889},{"class":135,"line":182},[890],{"type":44,"tag":133,"props":891,"children":892},{},[893],{"type":49,"value":894},"# Apply easing\n",{"type":44,"tag":133,"props":896,"children":897},{"class":135,"line":190},[898],{"type":44,"tag":133,"props":899,"children":900},{},[901],{"type":49,"value":902},"y = interpolate(start=0, end=400, t=t, easing='ease_out')\n",{"type":44,"tag":133,"props":904,"children":905},{"class":135,"line":199},[906],{"type":44,"tag":133,"props":907,"children":908},{"emptyLinePlaceholder":158},[909],{"type":49,"value":161},{"type":44,"tag":133,"props":911,"children":912},{"class":135,"line":208},[913],{"type":44,"tag":133,"props":914,"children":915},{},[916],{"type":49,"value":917},"# Available: linear, ease_in, ease_out, ease_in_out,\n",{"type":44,"tag":133,"props":919,"children":920},{"class":135,"line":217},[921],{"type":44,"tag":133,"props":922,"children":923},{},[924],{"type":49,"value":925},"#           bounce_out, elastic_out, back_out\n",{"type":44,"tag":300,"props":927,"children":929},{"id":928},"frame-helpers-coreframe_composer",[930,932,938],{"type":49,"value":931},"Frame Helpers (",{"type":44,"tag":129,"props":933,"children":935},{"className":934},[],[936],{"type":49,"value":937},"core.frame_composer",{"type":49,"value":582},{"type":44,"tag":52,"props":940,"children":941},{},[942],{"type":49,"value":943},"Convenience functions for common needs:",{"type":44,"tag":121,"props":945,"children":947},{"className":123,"code":946,"language":125,"meta":126,"style":126},"from core.frame_composer import (\n    create_blank_frame,         # Solid color background\n    create_gradient_background,  # Vertical gradient\n    draw_circle,                # Helper for circles\n    draw_text,                  # Simple text rendering\n    draw_star                   # 5-pointed star\n)\n",[948],{"type":44,"tag":129,"props":949,"children":950},{"__ignoreMap":126},[951,959,967,975,983,991,999],{"type":44,"tag":133,"props":952,"children":953},{"class":135,"line":136},[954],{"type":44,"tag":133,"props":955,"children":956},{},[957],{"type":49,"value":958},"from core.frame_composer import (\n",{"type":44,"tag":133,"props":960,"children":961},{"class":135,"line":145},[962],{"type":44,"tag":133,"props":963,"children":964},{},[965],{"type":49,"value":966},"    create_blank_frame,         # Solid color background\n",{"type":44,"tag":133,"props":968,"children":969},{"class":135,"line":154},[970],{"type":44,"tag":133,"props":971,"children":972},{},[973],{"type":49,"value":974},"    create_gradient_background,  # Vertical gradient\n",{"type":44,"tag":133,"props":976,"children":977},{"class":135,"line":164},[978],{"type":44,"tag":133,"props":979,"children":980},{},[981],{"type":49,"value":982},"    draw_circle,                # Helper for circles\n",{"type":44,"tag":133,"props":984,"children":985},{"class":135,"line":173},[986],{"type":44,"tag":133,"props":987,"children":988},{},[989],{"type":49,"value":990},"    draw_text,                  # Simple text rendering\n",{"type":44,"tag":133,"props":992,"children":993},{"class":135,"line":182},[994],{"type":44,"tag":133,"props":995,"children":996},{},[997],{"type":49,"value":998},"    draw_star                   # 5-pointed star\n",{"type":44,"tag":133,"props":1000,"children":1001},{"class":135,"line":190},[1002],{"type":44,"tag":133,"props":1003,"children":1004},{},[1005],{"type":49,"value":1006},")\n",{"type":44,"tag":58,"props":1008,"children":1010},{"id":1009},"animation-concepts",[1011],{"type":49,"value":1012},"Animation Concepts",{"type":44,"tag":300,"props":1014,"children":1016},{"id":1015},"shakevibrate",[1017],{"type":49,"value":1018},"Shake\u002FVibrate",{"type":44,"tag":52,"props":1020,"children":1021},{},[1022],{"type":49,"value":1023},"Offset object position with oscillation:",{"type":44,"tag":74,"props":1025,"children":1026},{},[1027,1048,1053],{"type":44,"tag":78,"props":1028,"children":1029},{},[1030,1032,1038,1040,1046],{"type":49,"value":1031},"Use ",{"type":44,"tag":129,"props":1033,"children":1035},{"className":1034},[],[1036],{"type":49,"value":1037},"math.sin()",{"type":49,"value":1039}," or ",{"type":44,"tag":129,"props":1041,"children":1043},{"className":1042},[],[1044],{"type":49,"value":1045},"math.cos()",{"type":49,"value":1047}," with frame index",{"type":44,"tag":78,"props":1049,"children":1050},{},[1051],{"type":49,"value":1052},"Add small random variations for natural feel",{"type":44,"tag":78,"props":1054,"children":1055},{},[1056],{"type":49,"value":1057},"Apply to x and\u002For y position",{"type":44,"tag":300,"props":1059,"children":1061},{"id":1060},"pulseheartbeat",[1062],{"type":49,"value":1063},"Pulse\u002FHeartbeat",{"type":44,"tag":52,"props":1065,"children":1066},{},[1067],{"type":49,"value":1068},"Scale object size rhythmically:",{"type":44,"tag":74,"props":1070,"children":1071},{},[1072,1084,1089],{"type":44,"tag":78,"props":1073,"children":1074},{},[1075,1076,1082],{"type":49,"value":1031},{"type":44,"tag":129,"props":1077,"children":1079},{"className":1078},[],[1080],{"type":49,"value":1081},"math.sin(t * frequency * 2 * math.pi)",{"type":49,"value":1083}," for smooth pulse",{"type":44,"tag":78,"props":1085,"children":1086},{},[1087],{"type":49,"value":1088},"For heartbeat: two quick pulses then pause (adjust sine wave)",{"type":44,"tag":78,"props":1090,"children":1091},{},[1092],{"type":49,"value":1093},"Scale between 0.8 and 1.2 of base size",{"type":44,"tag":300,"props":1095,"children":1097},{"id":1096},"bounce",[1098],{"type":49,"value":1099},"Bounce",{"type":44,"tag":52,"props":1101,"children":1102},{},[1103],{"type":49,"value":1104},"Object falls and bounces:",{"type":44,"tag":74,"props":1106,"children":1107},{},[1108,1128,1140],{"type":44,"tag":78,"props":1109,"children":1110},{},[1111,1112,1118,1120,1126],{"type":49,"value":1031},{"type":44,"tag":129,"props":1113,"children":1115},{"className":1114},[],[1116],{"type":49,"value":1117},"interpolate()",{"type":49,"value":1119}," with ",{"type":44,"tag":129,"props":1121,"children":1123},{"className":1122},[],[1124],{"type":49,"value":1125},"easing='bounce_out'",{"type":49,"value":1127}," for landing",{"type":44,"tag":78,"props":1129,"children":1130},{},[1131,1132,1138],{"type":49,"value":1031},{"type":44,"tag":129,"props":1133,"children":1135},{"className":1134},[],[1136],{"type":49,"value":1137},"easing='ease_in'",{"type":49,"value":1139}," for falling (accelerating)",{"type":44,"tag":78,"props":1141,"children":1142},{},[1143],{"type":49,"value":1144},"Apply gravity by increasing y velocity each frame",{"type":44,"tag":300,"props":1146,"children":1148},{"id":1147},"spinrotate",[1149],{"type":49,"value":1150},"Spin\u002FRotate",{"type":44,"tag":52,"props":1152,"children":1153},{},[1154],{"type":49,"value":1155},"Rotate object around center:",{"type":44,"tag":74,"props":1157,"children":1158},{},[1159,1170],{"type":44,"tag":78,"props":1160,"children":1161},{},[1162,1164],{"type":49,"value":1163},"PIL: ",{"type":44,"tag":129,"props":1165,"children":1167},{"className":1166},[],[1168],{"type":49,"value":1169},"image.rotate(angle, resample=Image.BICUBIC)",{"type":44,"tag":78,"props":1171,"children":1172},{},[1173],{"type":49,"value":1174},"For wobble: use sine wave for angle instead of linear",{"type":44,"tag":300,"props":1176,"children":1178},{"id":1177},"fade-inout",[1179],{"type":49,"value":1180},"Fade In\u002FOut",{"type":44,"tag":52,"props":1182,"children":1183},{},[1184],{"type":49,"value":1185},"Gradually appear or disappear:",{"type":44,"tag":74,"props":1187,"children":1188},{},[1189,1194,1205,1210],{"type":44,"tag":78,"props":1190,"children":1191},{},[1192],{"type":49,"value":1193},"Create RGBA image, adjust alpha channel",{"type":44,"tag":78,"props":1195,"children":1196},{},[1197,1199],{"type":49,"value":1198},"Or use ",{"type":44,"tag":129,"props":1200,"children":1202},{"className":1201},[],[1203],{"type":49,"value":1204},"Image.blend(image1, image2, alpha)",{"type":44,"tag":78,"props":1206,"children":1207},{},[1208],{"type":49,"value":1209},"Fade in: alpha from 0 to 1",{"type":44,"tag":78,"props":1211,"children":1212},{},[1213],{"type":49,"value":1214},"Fade out: alpha from 1 to 0",{"type":44,"tag":300,"props":1216,"children":1218},{"id":1217},"slide",[1219],{"type":49,"value":1220},"Slide",{"type":44,"tag":52,"props":1222,"children":1223},{},[1224],{"type":49,"value":1225},"Move object from off-screen to position:",{"type":44,"tag":74,"props":1227,"children":1228},{},[1229,1234,1239,1257],{"type":44,"tag":78,"props":1230,"children":1231},{},[1232],{"type":49,"value":1233},"Start position: outside frame bounds",{"type":44,"tag":78,"props":1235,"children":1236},{},[1237],{"type":49,"value":1238},"End position: target location",{"type":44,"tag":78,"props":1240,"children":1241},{},[1242,1243,1248,1249,1255],{"type":49,"value":1031},{"type":44,"tag":129,"props":1244,"children":1246},{"className":1245},[],[1247],{"type":49,"value":1117},{"type":49,"value":1119},{"type":44,"tag":129,"props":1250,"children":1252},{"className":1251},[],[1253],{"type":49,"value":1254},"easing='ease_out'",{"type":49,"value":1256}," for smooth stop",{"type":44,"tag":78,"props":1258,"children":1259},{},[1260,1262],{"type":49,"value":1261},"For overshoot: use ",{"type":44,"tag":129,"props":1263,"children":1265},{"className":1264},[],[1266],{"type":49,"value":1267},"easing='back_out'",{"type":44,"tag":300,"props":1269,"children":1271},{"id":1270},"zoom",[1272],{"type":49,"value":1273},"Zoom",{"type":44,"tag":52,"props":1275,"children":1276},{},[1277],{"type":49,"value":1278},"Scale and position for zoom effect:",{"type":44,"tag":74,"props":1280,"children":1281},{},[1282,1287,1292],{"type":44,"tag":78,"props":1283,"children":1284},{},[1285],{"type":49,"value":1286},"Zoom in: scale from 0.1 to 2.0, crop center",{"type":44,"tag":78,"props":1288,"children":1289},{},[1290],{"type":49,"value":1291},"Zoom out: scale from 2.0 to 1.0",{"type":44,"tag":78,"props":1293,"children":1294},{},[1295],{"type":49,"value":1296},"Can add motion blur for drama (PIL filter)",{"type":44,"tag":300,"props":1298,"children":1300},{"id":1299},"explodeparticle-burst",[1301],{"type":49,"value":1302},"Explode\u002FParticle Burst",{"type":44,"tag":52,"props":1304,"children":1305},{},[1306],{"type":49,"value":1307},"Create particles radiating outward:",{"type":44,"tag":74,"props":1309,"children":1310},{},[1311,1316,1335,1346],{"type":44,"tag":78,"props":1312,"children":1313},{},[1314],{"type":49,"value":1315},"Generate particles with random angles and velocities",{"type":44,"tag":78,"props":1317,"children":1318},{},[1319,1321,1327,1329],{"type":49,"value":1320},"Update each particle: ",{"type":44,"tag":129,"props":1322,"children":1324},{"className":1323},[],[1325],{"type":49,"value":1326},"x += vx",{"type":49,"value":1328},", ",{"type":44,"tag":129,"props":1330,"children":1332},{"className":1331},[],[1333],{"type":49,"value":1334},"y += vy",{"type":44,"tag":78,"props":1336,"children":1337},{},[1338,1340],{"type":49,"value":1339},"Add gravity: ",{"type":44,"tag":129,"props":1341,"children":1343},{"className":1342},[],[1344],{"type":49,"value":1345},"vy += gravity_constant",{"type":44,"tag":78,"props":1347,"children":1348},{},[1349],{"type":49,"value":1350},"Fade out particles over time (reduce alpha)",{"type":44,"tag":58,"props":1352,"children":1354},{"id":1353},"optimization-strategies",[1355],{"type":49,"value":1356},"Optimization Strategies",{"type":44,"tag":52,"props":1358,"children":1359},{},[1360],{"type":49,"value":1361},"Only when asked to make the file size smaller, implement a few of the following methods:",{"type":44,"tag":1363,"props":1364,"children":1365},"ol",{},[1366,1376,1394,1404,1421],{"type":44,"tag":78,"props":1367,"children":1368},{},[1369,1374],{"type":44,"tag":68,"props":1370,"children":1371},{},[1372],{"type":49,"value":1373},"Fewer frames",{"type":49,"value":1375}," - Lower FPS (10 instead of 20) or shorter duration",{"type":44,"tag":78,"props":1377,"children":1378},{},[1379,1384,1386,1392],{"type":44,"tag":68,"props":1380,"children":1381},{},[1382],{"type":49,"value":1383},"Fewer colors",{"type":49,"value":1385}," - ",{"type":44,"tag":129,"props":1387,"children":1389},{"className":1388},[],[1390],{"type":49,"value":1391},"num_colors=48",{"type":49,"value":1393}," instead of 128",{"type":44,"tag":78,"props":1395,"children":1396},{},[1397,1402],{"type":44,"tag":68,"props":1398,"children":1399},{},[1400],{"type":49,"value":1401},"Smaller dimensions",{"type":49,"value":1403}," - 128x128 instead of 480x480",{"type":44,"tag":78,"props":1405,"children":1406},{},[1407,1412,1413,1419],{"type":44,"tag":68,"props":1408,"children":1409},{},[1410],{"type":49,"value":1411},"Remove duplicates",{"type":49,"value":1385},{"type":44,"tag":129,"props":1414,"children":1416},{"className":1415},[],[1417],{"type":49,"value":1418},"remove_duplicates=True",{"type":49,"value":1420}," in save()",{"type":44,"tag":78,"props":1422,"children":1423},{},[1424,1429,1430,1436],{"type":44,"tag":68,"props":1425,"children":1426},{},[1427],{"type":49,"value":1428},"Emoji mode",{"type":49,"value":1385},{"type":44,"tag":129,"props":1431,"children":1433},{"className":1432},[],[1434],{"type":49,"value":1435},"optimize_for_emoji=True",{"type":49,"value":1437}," auto-optimizes",{"type":44,"tag":121,"props":1439,"children":1441},{"className":123,"code":1440,"language":125,"meta":126,"style":126},"# Maximum optimization for emoji\nbuilder.save(\n    'emoji.gif',\n    num_colors=48,\n    optimize_for_emoji=True,\n    remove_duplicates=True\n)\n",[1442],{"type":44,"tag":129,"props":1443,"children":1444},{"__ignoreMap":126},[1445,1453,1461,1469,1477,1485,1493],{"type":44,"tag":133,"props":1446,"children":1447},{"class":135,"line":136},[1448],{"type":44,"tag":133,"props":1449,"children":1450},{},[1451],{"type":49,"value":1452},"# Maximum optimization for emoji\n",{"type":44,"tag":133,"props":1454,"children":1455},{"class":135,"line":145},[1456],{"type":44,"tag":133,"props":1457,"children":1458},{},[1459],{"type":49,"value":1460},"builder.save(\n",{"type":44,"tag":133,"props":1462,"children":1463},{"class":135,"line":154},[1464],{"type":44,"tag":133,"props":1465,"children":1466},{},[1467],{"type":49,"value":1468},"    'emoji.gif',\n",{"type":44,"tag":133,"props":1470,"children":1471},{"class":135,"line":164},[1472],{"type":44,"tag":133,"props":1473,"children":1474},{},[1475],{"type":49,"value":1476},"    num_colors=48,\n",{"type":44,"tag":133,"props":1478,"children":1479},{"class":135,"line":173},[1480],{"type":44,"tag":133,"props":1481,"children":1482},{},[1483],{"type":49,"value":1484},"    optimize_for_emoji=True,\n",{"type":44,"tag":133,"props":1486,"children":1487},{"class":135,"line":182},[1488],{"type":44,"tag":133,"props":1489,"children":1490},{},[1491],{"type":49,"value":1492},"    remove_duplicates=True\n",{"type":44,"tag":133,"props":1494,"children":1495},{"class":135,"line":190},[1496],{"type":44,"tag":133,"props":1497,"children":1498},{},[1499],{"type":49,"value":1006},{"type":44,"tag":58,"props":1501,"children":1503},{"id":1502},"philosophy",[1504],{"type":49,"value":1505},"Philosophy",{"type":44,"tag":52,"props":1507,"children":1508},{},[1509],{"type":49,"value":1510},"This skill provides:",{"type":44,"tag":74,"props":1512,"children":1513},{},[1514,1524,1534],{"type":44,"tag":78,"props":1515,"children":1516},{},[1517,1522],{"type":44,"tag":68,"props":1518,"children":1519},{},[1520],{"type":49,"value":1521},"Knowledge",{"type":49,"value":1523},": Slack's requirements and animation concepts",{"type":44,"tag":78,"props":1525,"children":1526},{},[1527,1532],{"type":44,"tag":68,"props":1528,"children":1529},{},[1530],{"type":49,"value":1531},"Utilities",{"type":49,"value":1533},": GIFBuilder, validators, easing functions",{"type":44,"tag":78,"props":1535,"children":1536},{},[1537,1542],{"type":44,"tag":68,"props":1538,"children":1539},{},[1540],{"type":49,"value":1541},"Flexibility",{"type":49,"value":1543},": Create the animation logic using PIL primitives",{"type":44,"tag":52,"props":1545,"children":1546},{},[1547],{"type":49,"value":1548},"It does NOT provide:",{"type":44,"tag":74,"props":1550,"children":1551},{},[1552,1557,1562],{"type":44,"tag":78,"props":1553,"children":1554},{},[1555],{"type":49,"value":1556},"Rigid animation templates or pre-made functions",{"type":44,"tag":78,"props":1558,"children":1559},{},[1560],{"type":49,"value":1561},"Emoji font rendering (unreliable across platforms)",{"type":44,"tag":78,"props":1563,"children":1564},{},[1565],{"type":49,"value":1566},"A library of pre-packaged graphics built into the skill",{"type":44,"tag":52,"props":1568,"children":1569},{},[1570,1575],{"type":44,"tag":68,"props":1571,"children":1572},{},[1573],{"type":49,"value":1574},"Note on user uploads",{"type":49,"value":1576},": 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.",{"type":44,"tag":52,"props":1578,"children":1579},{},[1580],{"type":49,"value":1581},"Be creative! Combine concepts (bouncing + rotating, pulsing + sliding, etc.) and use PIL's full capabilities.",{"type":44,"tag":58,"props":1583,"children":1585},{"id":1584},"dependencies",[1586],{"type":49,"value":1587},"Dependencies",{"type":44,"tag":121,"props":1589,"children":1593},{"className":1590,"code":1591,"language":1592,"meta":126,"style":126},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pip install pillow imageio numpy\n","bash",[1594],{"type":44,"tag":129,"props":1595,"children":1596},{"__ignoreMap":126},[1597],{"type":44,"tag":133,"props":1598,"children":1599},{"class":135,"line":136},[1600,1606,1612,1617,1622],{"type":44,"tag":133,"props":1601,"children":1603},{"style":1602},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[1604],{"type":49,"value":1605},"pip",{"type":44,"tag":133,"props":1607,"children":1609},{"style":1608},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[1610],{"type":49,"value":1611}," install",{"type":44,"tag":133,"props":1613,"children":1614},{"style":1608},[1615],{"type":49,"value":1616}," pillow",{"type":44,"tag":133,"props":1618,"children":1619},{"style":1608},[1620],{"type":49,"value":1621}," imageio",{"type":44,"tag":133,"props":1623,"children":1624},{"style":1608},[1625],{"type":49,"value":1626}," numpy\n",{"type":44,"tag":1628,"props":1629,"children":1630},"style",{},[1631],{"type":49,"value":1632},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":1634,"total":277},[1635,1650,1664,1676,1695,1708,1729],{"slug":1636,"name":1636,"fn":1637,"description":1638,"org":1639,"tags":1640,"stars":26,"repoUrl":27,"updatedAt":1649},"algorithmic-art","create algorithmic art with p5.js","Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1641,1642,1643,1646],{"name":14,"slug":15,"type":16},{"name":24,"slug":25,"type":16},{"name":1644,"slug":1645,"type":16},"Generative Art","generative-art",{"name":1647,"slug":1648,"type":16},"JavaScript","javascript","2026-04-06T17:56:15.455818",{"slug":1651,"name":1651,"fn":1652,"description":1653,"org":1654,"tags":1655,"stars":26,"repoUrl":27,"updatedAt":1663},"brand-guidelines","apply Anthropic brand colors and typography","Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1656,1659,1660],{"name":1657,"slug":1658,"type":16},"Branding","branding",{"name":24,"slug":25,"type":16},{"name":1661,"slug":1662,"type":16},"Typography","typography","2026-04-06T17:56:05.042852",{"slug":1665,"name":1665,"fn":1666,"description":1667,"org":1668,"tags":1669,"stars":26,"repoUrl":27,"updatedAt":1675},"canvas-design","create posters and visual art as PNG or PDF","Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1670,1671,1672],{"name":14,"slug":15,"type":16},{"name":24,"slug":25,"type":16},{"name":1673,"slug":1674,"type":16},"PDF","pdf","2026-04-06T17:56:03.794732",{"slug":1677,"name":1677,"fn":1678,"description":1679,"org":1680,"tags":1681,"stars":26,"repoUrl":27,"updatedAt":1694},"claude-api","build apps with the Claude API","Reference for the Claude API \u002F Anthropic SDK — model ids, pricing, params, streaming, tool use, MCP, agents, caching, token counting, model migration.\nTRIGGER — read BEFORE opening the target file; don't skip because it \"looks like a one-liner\" — whenever: the prompt names Claude\u002FAnthropic in any form (Claude, Anthropic, Fable, Opus, Sonnet, Haiku, `anthropic`, `@anthropic-ai`, `claude-*`, `us.anthropic.*`, `[1m]`); the user asks about an LLM (pricing\u002Fmodel choice\u002Flimits\u002Fcaching) — never answer from memory; OR the task is LLM-shaped with provider unstated (agent\u002FMCP\u002Ftool-definition\u002Fmulti-agent\u002FRAG\u002FLLM-judge\u002Fcomputer-use; generate\u002Fsummarize\u002Fextract\u002Fclassify\u002Frewrite\u002Fconverse over NL; debugging refusals\u002Fcutoffs\u002Fstreaming\u002Ftool-calls\u002Ftokens).\nSKIP only when another provider is being worked on (overrides all triggers): OpenAI\u002FGPT\u002FGemini\u002FLlama\u002FMistral\u002FCohere\u002FOllama named in the query; OR `grep -rE 'openai|langchain_openai|google.generativeai|genai|mistralai|cohere|ollama'` over the project hits (run this grep FIRST if no provider named — don't Read the file).",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1682,1685,1686,1689,1691],{"name":1683,"slug":1684,"type":16},"Agents","agents",{"name":9,"slug":8,"type":16},{"name":1687,"slug":1688,"type":16},"Anthropic SDK","anthropic-sdk",{"name":1690,"slug":1677,"type":16},"Claude API",{"name":1692,"slug":1693,"type":16},"LLM","llm","2026-07-28T05:36:08.213335",{"slug":1696,"name":1696,"fn":1697,"description":1698,"org":1699,"tags":1700,"stars":26,"repoUrl":27,"updatedAt":1707},"doc-coauthoring","co-author documentation and technical specs","Guide users through a structured workflow for co-authoring documentation. Use when user wants to write documentation, proposals, technical specs, decision docs, or similar structured content. This workflow helps users efficiently transfer context, refine content through iteration, and verify the doc works for readers. Trigger when user mentions writing docs, creating proposals, drafting specs, or similar documentation tasks.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1701,1704],{"name":1702,"slug":1703,"type":16},"Documentation","documentation",{"name":1705,"slug":1706,"type":16},"Technical Writing","technical-writing","2026-04-06T17:56:14.18897",{"slug":1709,"name":1709,"fn":1710,"description":1711,"org":1712,"tags":1713,"stars":26,"repoUrl":27,"updatedAt":1728},"docx","create and edit Word documents","Use this skill whenever the user wants to create, read, edit, or manipulate Word documents (.docx files) or Word templates (.dotx files). Triggers include: any mention of 'Word doc', 'word document', '.docx', '.dotx', or requests to produce professional documents with formatting like tables of contents, headings, page numbers, or letterheads. Also use when extracting or reorganizing content from .docx or .dotx files, inserting or replacing images in documents, performing find-and-replace in Word files, working with tracked changes or comments, or converting content into a polished Word document. If the user asks for a 'report', 'memo', 'letter', 'template', or similar deliverable as a Word or .docx file, use this skill. Do NOT use for PDFs, spreadsheets, Google Docs, or general coding tasks unrelated to document generation.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1714,1717,1719,1722,1725],{"name":1715,"slug":1716,"type":16},"Documents","documents",{"name":1718,"slug":1709,"type":16},"DOCX",{"name":1720,"slug":1721,"type":16},"Office","office",{"name":1723,"slug":1724,"type":16},"Templates","templates",{"name":1726,"slug":1727,"type":16},"Word","word","2026-07-18T05:16:23.136271",{"slug":1730,"name":1730,"fn":1731,"description":1732,"org":1733,"tags":1734,"stars":26,"repoUrl":27,"updatedAt":1748},"frontend-design","design production-grade frontend interfaces","Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1735,1736,1739,1742,1745],{"name":24,"slug":25,"type":16},{"name":1737,"slug":1738,"type":16},"Frontend","frontend",{"name":1740,"slug":1741,"type":16},"React","react",{"name":1743,"slug":1744,"type":16},"Tailwind CSS","tailwind-css",{"name":1746,"slug":1747,"type":16},"UI Components","ui-components","2026-04-06T17:56:16.723469",{"items":1750,"total":1865},[1751,1758,1764,1770,1778,1783,1791,1799,1813,1828,1836,1849],{"slug":1636,"name":1636,"fn":1637,"description":1638,"org":1752,"tags":1753,"stars":26,"repoUrl":27,"updatedAt":1649},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1754,1755,1756,1757],{"name":14,"slug":15,"type":16},{"name":24,"slug":25,"type":16},{"name":1644,"slug":1645,"type":16},{"name":1647,"slug":1648,"type":16},{"slug":1651,"name":1651,"fn":1652,"description":1653,"org":1759,"tags":1760,"stars":26,"repoUrl":27,"updatedAt":1663},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1761,1762,1763],{"name":1657,"slug":1658,"type":16},{"name":24,"slug":25,"type":16},{"name":1661,"slug":1662,"type":16},{"slug":1665,"name":1665,"fn":1666,"description":1667,"org":1765,"tags":1766,"stars":26,"repoUrl":27,"updatedAt":1675},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1767,1768,1769],{"name":14,"slug":15,"type":16},{"name":24,"slug":25,"type":16},{"name":1673,"slug":1674,"type":16},{"slug":1677,"name":1677,"fn":1678,"description":1679,"org":1771,"tags":1772,"stars":26,"repoUrl":27,"updatedAt":1694},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1773,1774,1775,1776,1777],{"name":1683,"slug":1684,"type":16},{"name":9,"slug":8,"type":16},{"name":1687,"slug":1688,"type":16},{"name":1690,"slug":1677,"type":16},{"name":1692,"slug":1693,"type":16},{"slug":1696,"name":1696,"fn":1697,"description":1698,"org":1779,"tags":1780,"stars":26,"repoUrl":27,"updatedAt":1707},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1781,1782],{"name":1702,"slug":1703,"type":16},{"name":1705,"slug":1706,"type":16},{"slug":1709,"name":1709,"fn":1710,"description":1711,"org":1784,"tags":1785,"stars":26,"repoUrl":27,"updatedAt":1728},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1786,1787,1788,1789,1790],{"name":1715,"slug":1716,"type":16},{"name":1718,"slug":1709,"type":16},{"name":1720,"slug":1721,"type":16},{"name":1723,"slug":1724,"type":16},{"name":1726,"slug":1727,"type":16},{"slug":1730,"name":1730,"fn":1731,"description":1732,"org":1792,"tags":1793,"stars":26,"repoUrl":27,"updatedAt":1748},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1794,1795,1796,1797,1798],{"name":24,"slug":25,"type":16},{"name":1737,"slug":1738,"type":16},{"name":1740,"slug":1741,"type":16},{"name":1743,"slug":1744,"type":16},{"name":1746,"slug":1747,"type":16},{"slug":1800,"name":1800,"fn":1801,"description":1802,"org":1803,"tags":1804,"stars":26,"repoUrl":27,"updatedAt":1812},"internal-comms","write internal company communications","A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use this skill whenever asked to write some sort of internal communications (status reports, leadership updates, 3P updates, company newsletters, FAQs, incident reports, project updates, etc.).",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1805,1808,1809],{"name":1806,"slug":1807,"type":16},"Communications","communications",{"name":1723,"slug":1724,"type":16},{"name":1810,"slug":1811,"type":16},"Writing","writing","2026-04-06T17:56:20.695522",{"slug":1814,"name":1814,"fn":1815,"description":1816,"org":1817,"tags":1818,"stars":26,"repoUrl":27,"updatedAt":1827},"mcp-builder","build MCP servers","Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node\u002FTypeScript (MCP SDK).",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1819,1820,1823,1824],{"name":1683,"slug":1684,"type":16},{"name":1821,"slug":1822,"type":16},"API Development","api-development",{"name":1692,"slug":1693,"type":16},{"name":1825,"slug":1826,"type":16},"MCP","mcp","2026-04-06T17:56:10.357665",{"slug":1674,"name":1674,"fn":1829,"description":1830,"org":1831,"tags":1832,"stars":26,"repoUrl":27,"updatedAt":1835},"read edit and manipulate PDF files","Use this skill whenever the user wants to do anything with PDF files. This includes reading or extracting text\u002Ftables from PDFs, combining or merging multiple PDFs into one, splitting PDFs apart, rotating pages, adding watermarks, creating new PDFs, filling PDF forms, encrypting\u002Fdecrypting PDFs, extracting images, and OCR on scanned PDFs to make them searchable. If the user mentions a .pdf file or asks to produce one, use this skill.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1833,1834],{"name":1715,"slug":1716,"type":16},{"name":1673,"slug":1674,"type":16},"2026-04-06T17:56:02.483316",{"slug":1837,"name":1837,"fn":1838,"description":1839,"org":1840,"tags":1841,"stars":26,"repoUrl":27,"updatedAt":1848},"pptx","create and edit PowerPoint presentations","Use this skill any time a .pptx or .potx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx or .potx file (even if the extracted content will be used elsewhere, like in an email or summary); editing, modifying, or updating existing presentations; combining or splitting slide files; working with templates (.potx), layouts, speaker notes, or comments. Trigger whenever the user mentions \"deck,\" \"slides,\" \"presentation,\" or references a .pptx or .potx filename, regardless of what they plan to do with the content afterward. If a .pptx or .potx file needs to be opened, created, or touched, use this skill.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1842,1845],{"name":1843,"slug":1844,"type":16},"PowerPoint","powerpoint",{"name":1846,"slug":1847,"type":16},"Presentations","presentations","2026-07-18T05:16:24.1471",{"slug":1850,"name":1850,"fn":1851,"description":1852,"org":1853,"tags":1854,"stars":26,"repoUrl":27,"updatedAt":1864},"skill-creator","create and optimize agent skills","Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1855,1856,1857,1860,1863],{"name":1683,"slug":1684,"type":16},{"name":1702,"slug":1703,"type":16},{"name":1858,"slug":1859,"type":16},"Evals","evals",{"name":1861,"slug":1862,"type":16},"Performance","performance",{"name":1705,"slug":1706,"type":16},"2026-04-19T06:45:40.804",490]