[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-jetbrains-slack-gif-creator":3,"mdc--thm5rx-key":36,"related-org-jetbrains-slack-gif-creator":1634,"related-repo-jetbrains-slack-gif-creator":1767},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":25,"repoUrl":26,"updatedAt":27,"license":28,"forks":29,"topics":30,"repo":31,"sourceUrl":34,"mdContent":35},"slack-gif-creator","create animated GIFs 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":9},"jetbrains","JetBrains","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fjetbrains.png",[12,16,19,22],{"name":13,"slug":14,"type":15},"Graphics","graphics","tag",{"name":17,"slug":18,"type":15},"Creative","creative",{"name":20,"slug":21,"type":15},"Animation","animation",{"name":23,"slug":24,"type":15},"Slack","slack",252,"https:\u002F\u002Fgithub.com\u002FJetBrains\u002Fskills","2026-07-13T06:41:08.435397","Complete terms in LICENSE.txt",17,[],{"repoUrl":26,"stars":25,"forks":29,"topics":32,"description":33},[],"Curated agent skills collection verified by JetBrains","https:\u002F\u002Fgithub.com\u002FJetBrains\u002Fskills\u002Ftree\u002FHEAD\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\nmetadata:\n  short-description: \"Create Slack-optimized animated GIFs\"\n  author: Anthropic\n  source: https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fskills\u002Ftree\u002Fmain\u002Fskills\u002Fslack-gif-creator\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":37,"body":42},{"name":4,"description":6,"license":28,"metadata":38},{"short-description":39,"author":40,"source":41},"Create Slack-optimized animated GIFs","Anthropic","https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fskills\u002Ftree\u002Fmain\u002Fskills\u002Fslack-gif-creator",{"type":43,"children":44},"root",[45,53,59,66,75,90,98,116,122,294,300,307,312,335,340,378,384,389,519,529,535,540,558,568,589,598,616,625,643,653,671,676,682,695,700,738,751,756,825,838,843,927,940,945,1008,1014,1020,1025,1059,1065,1070,1095,1101,1106,1146,1152,1157,1176,1182,1187,1216,1222,1227,1269,1275,1280,1298,1304,1309,1352,1358,1363,1439,1501,1507,1512,1545,1550,1568,1578,1583,1589,1628],{"type":46,"tag":47,"props":48,"children":49},"element","h1",{"id":4},[50],{"type":51,"value":52},"text","Slack GIF Creator",{"type":46,"tag":54,"props":55,"children":56},"p",{},[57],{"type":51,"value":58},"A toolkit providing utilities and knowledge for creating animated GIFs optimized for Slack.",{"type":46,"tag":60,"props":61,"children":63},"h2",{"id":62},"slack-requirements",[64],{"type":51,"value":65},"Slack Requirements",{"type":46,"tag":54,"props":67,"children":68},{},[69],{"type":46,"tag":70,"props":71,"children":72},"strong",{},[73],{"type":51,"value":74},"Dimensions:",{"type":46,"tag":76,"props":77,"children":78},"ul",{},[79,85],{"type":46,"tag":80,"props":81,"children":82},"li",{},[83],{"type":51,"value":84},"Emoji GIFs: 128x128 (recommended)",{"type":46,"tag":80,"props":86,"children":87},{},[88],{"type":51,"value":89},"Message GIFs: 480x480",{"type":46,"tag":54,"props":91,"children":92},{},[93],{"type":46,"tag":70,"props":94,"children":95},{},[96],{"type":51,"value":97},"Parameters:",{"type":46,"tag":76,"props":99,"children":100},{},[101,106,111],{"type":46,"tag":80,"props":102,"children":103},{},[104],{"type":51,"value":105},"FPS: 10-30 (lower is smaller file size)",{"type":46,"tag":80,"props":107,"children":108},{},[109],{"type":51,"value":110},"Colors: 48-128 (fewer = smaller file size)",{"type":46,"tag":80,"props":112,"children":113},{},[114],{"type":51,"value":115},"Duration: Keep under 3 seconds for emoji GIFs",{"type":46,"tag":60,"props":117,"children":119},{"id":118},"core-workflow",[120],{"type":51,"value":121},"Core Workflow",{"type":46,"tag":123,"props":124,"children":129},"pre",{"className":125,"code":126,"language":127,"meta":128,"style":128},"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","",[130],{"type":46,"tag":131,"props":132,"children":133},"code",{"__ignoreMap":128},[134,145,154,164,173,182,190,199,208,217,226,234,243,252,260,269,277,285],{"type":46,"tag":135,"props":136,"children":139},"span",{"class":137,"line":138},"line",1,[140],{"type":46,"tag":135,"props":141,"children":142},{},[143],{"type":51,"value":144},"from core.gif_builder import GIFBuilder\n",{"type":46,"tag":135,"props":146,"children":148},{"class":137,"line":147},2,[149],{"type":46,"tag":135,"props":150,"children":151},{},[152],{"type":51,"value":153},"from PIL import Image, ImageDraw\n",{"type":46,"tag":135,"props":155,"children":157},{"class":137,"line":156},3,[158],{"type":46,"tag":135,"props":159,"children":161},{"emptyLinePlaceholder":160},true,[162],{"type":51,"value":163},"\n",{"type":46,"tag":135,"props":165,"children":167},{"class":137,"line":166},4,[168],{"type":46,"tag":135,"props":169,"children":170},{},[171],{"type":51,"value":172},"# 1. Create builder\n",{"type":46,"tag":135,"props":174,"children":176},{"class":137,"line":175},5,[177],{"type":46,"tag":135,"props":178,"children":179},{},[180],{"type":51,"value":181},"builder = GIFBuilder(width=128, height=128, fps=10)\n",{"type":46,"tag":135,"props":183,"children":185},{"class":137,"line":184},6,[186],{"type":46,"tag":135,"props":187,"children":188},{"emptyLinePlaceholder":160},[189],{"type":51,"value":163},{"type":46,"tag":135,"props":191,"children":193},{"class":137,"line":192},7,[194],{"type":46,"tag":135,"props":195,"children":196},{},[197],{"type":51,"value":198},"# 2. Generate frames\n",{"type":46,"tag":135,"props":200,"children":202},{"class":137,"line":201},8,[203],{"type":46,"tag":135,"props":204,"children":205},{},[206],{"type":51,"value":207},"for i in range(12):\n",{"type":46,"tag":135,"props":209,"children":211},{"class":137,"line":210},9,[212],{"type":46,"tag":135,"props":213,"children":214},{},[215],{"type":51,"value":216},"    frame = Image.new('RGB', (128, 128), (240, 248, 255))\n",{"type":46,"tag":135,"props":218,"children":220},{"class":137,"line":219},10,[221],{"type":46,"tag":135,"props":222,"children":223},{},[224],{"type":51,"value":225},"    draw = ImageDraw.Draw(frame)\n",{"type":46,"tag":135,"props":227,"children":229},{"class":137,"line":228},11,[230],{"type":46,"tag":135,"props":231,"children":232},{"emptyLinePlaceholder":160},[233],{"type":51,"value":163},{"type":46,"tag":135,"props":235,"children":237},{"class":137,"line":236},12,[238],{"type":46,"tag":135,"props":239,"children":240},{},[241],{"type":51,"value":242},"    # Draw your animation using PIL primitives\n",{"type":46,"tag":135,"props":244,"children":246},{"class":137,"line":245},13,[247],{"type":46,"tag":135,"props":248,"children":249},{},[250],{"type":51,"value":251},"    # (circles, polygons, lines, etc.)\n",{"type":46,"tag":135,"props":253,"children":255},{"class":137,"line":254},14,[256],{"type":46,"tag":135,"props":257,"children":258},{"emptyLinePlaceholder":160},[259],{"type":51,"value":163},{"type":46,"tag":135,"props":261,"children":263},{"class":137,"line":262},15,[264],{"type":46,"tag":135,"props":265,"children":266},{},[267],{"type":51,"value":268},"    builder.add_frame(frame)\n",{"type":46,"tag":135,"props":270,"children":272},{"class":137,"line":271},16,[273],{"type":46,"tag":135,"props":274,"children":275},{"emptyLinePlaceholder":160},[276],{"type":51,"value":163},{"type":46,"tag":135,"props":278,"children":279},{"class":137,"line":29},[280],{"type":46,"tag":135,"props":281,"children":282},{},[283],{"type":51,"value":284},"# 3. Save with optimization\n",{"type":46,"tag":135,"props":286,"children":288},{"class":137,"line":287},18,[289],{"type":46,"tag":135,"props":290,"children":291},{},[292],{"type":51,"value":293},"builder.save('output.gif', num_colors=48, optimize_for_emoji=True)\n",{"type":46,"tag":60,"props":295,"children":297},{"id":296},"drawing-graphics",[298],{"type":51,"value":299},"Drawing Graphics",{"type":46,"tag":301,"props":302,"children":304},"h3",{"id":303},"working-with-user-uploaded-images",[305],{"type":51,"value":306},"Working with User-Uploaded Images",{"type":46,"tag":54,"props":308,"children":309},{},[310],{"type":51,"value":311},"If a user uploads an image, consider whether they want to:",{"type":46,"tag":76,"props":313,"children":314},{},[315,325],{"type":46,"tag":80,"props":316,"children":317},{},[318,323],{"type":46,"tag":70,"props":319,"children":320},{},[321],{"type":51,"value":322},"Use it directly",{"type":51,"value":324}," (e.g., \"animate this\", \"split this into frames\")",{"type":46,"tag":80,"props":326,"children":327},{},[328,333],{"type":46,"tag":70,"props":329,"children":330},{},[331],{"type":51,"value":332},"Use it as inspiration",{"type":51,"value":334}," (e.g., \"make something like this\")",{"type":46,"tag":54,"props":336,"children":337},{},[338],{"type":51,"value":339},"Load and work with images using PIL:",{"type":46,"tag":123,"props":341,"children":343},{"className":125,"code":342,"language":127,"meta":128,"style":128},"from PIL import Image\n\nuploaded = Image.open('file.png')\n# Use directly, or just as reference for colors\u002Fstyle\n",[344],{"type":46,"tag":131,"props":345,"children":346},{"__ignoreMap":128},[347,355,362,370],{"type":46,"tag":135,"props":348,"children":349},{"class":137,"line":138},[350],{"type":46,"tag":135,"props":351,"children":352},{},[353],{"type":51,"value":354},"from PIL import Image\n",{"type":46,"tag":135,"props":356,"children":357},{"class":137,"line":147},[358],{"type":46,"tag":135,"props":359,"children":360},{"emptyLinePlaceholder":160},[361],{"type":51,"value":163},{"type":46,"tag":135,"props":363,"children":364},{"class":137,"line":156},[365],{"type":46,"tag":135,"props":366,"children":367},{},[368],{"type":51,"value":369},"uploaded = Image.open('file.png')\n",{"type":46,"tag":135,"props":371,"children":372},{"class":137,"line":166},[373],{"type":46,"tag":135,"props":374,"children":375},{},[376],{"type":51,"value":377},"# Use directly, or just as reference for colors\u002Fstyle\n",{"type":46,"tag":301,"props":379,"children":381},{"id":380},"drawing-from-scratch",[382],{"type":51,"value":383},"Drawing from Scratch",{"type":46,"tag":54,"props":385,"children":386},{},[387],{"type":51,"value":388},"When drawing graphics from scratch, use PIL ImageDraw primitives:",{"type":46,"tag":123,"props":390,"children":392},{"className":125,"code":391,"language":127,"meta":128,"style":128},"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",[393],{"type":46,"tag":131,"props":394,"children":395},{"__ignoreMap":128},[396,404,411,419,426,434,442,449,457,465,473,480,488,496,503,511],{"type":46,"tag":135,"props":397,"children":398},{"class":137,"line":138},[399],{"type":46,"tag":135,"props":400,"children":401},{},[402],{"type":51,"value":403},"from PIL import ImageDraw\n",{"type":46,"tag":135,"props":405,"children":406},{"class":137,"line":147},[407],{"type":46,"tag":135,"props":408,"children":409},{"emptyLinePlaceholder":160},[410],{"type":51,"value":163},{"type":46,"tag":135,"props":412,"children":413},{"class":137,"line":156},[414],{"type":46,"tag":135,"props":415,"children":416},{},[417],{"type":51,"value":418},"draw = ImageDraw.Draw(frame)\n",{"type":46,"tag":135,"props":420,"children":421},{"class":137,"line":166},[422],{"type":46,"tag":135,"props":423,"children":424},{"emptyLinePlaceholder":160},[425],{"type":51,"value":163},{"type":46,"tag":135,"props":427,"children":428},{"class":137,"line":175},[429],{"type":46,"tag":135,"props":430,"children":431},{},[432],{"type":51,"value":433},"# Circles\u002Fovals\n",{"type":46,"tag":135,"props":435,"children":436},{"class":137,"line":184},[437],{"type":46,"tag":135,"props":438,"children":439},{},[440],{"type":51,"value":441},"draw.ellipse([x1, y1, x2, y2], fill=(r, g, b), outline=(r, g, b), width=3)\n",{"type":46,"tag":135,"props":443,"children":444},{"class":137,"line":192},[445],{"type":46,"tag":135,"props":446,"children":447},{"emptyLinePlaceholder":160},[448],{"type":51,"value":163},{"type":46,"tag":135,"props":450,"children":451},{"class":137,"line":201},[452],{"type":46,"tag":135,"props":453,"children":454},{},[455],{"type":51,"value":456},"# Stars, triangles, any polygon\n",{"type":46,"tag":135,"props":458,"children":459},{"class":137,"line":210},[460],{"type":46,"tag":135,"props":461,"children":462},{},[463],{"type":51,"value":464},"points = [(x1, y1), (x2, y2), (x3, y3), ...]\n",{"type":46,"tag":135,"props":466,"children":467},{"class":137,"line":219},[468],{"type":46,"tag":135,"props":469,"children":470},{},[471],{"type":51,"value":472},"draw.polygon(points, fill=(r, g, b), outline=(r, g, b), width=3)\n",{"type":46,"tag":135,"props":474,"children":475},{"class":137,"line":228},[476],{"type":46,"tag":135,"props":477,"children":478},{"emptyLinePlaceholder":160},[479],{"type":51,"value":163},{"type":46,"tag":135,"props":481,"children":482},{"class":137,"line":236},[483],{"type":46,"tag":135,"props":484,"children":485},{},[486],{"type":51,"value":487},"# Lines\n",{"type":46,"tag":135,"props":489,"children":490},{"class":137,"line":245},[491],{"type":46,"tag":135,"props":492,"children":493},{},[494],{"type":51,"value":495},"draw.line([(x1, y1), (x2, y2)], fill=(r, g, b), width=5)\n",{"type":46,"tag":135,"props":497,"children":498},{"class":137,"line":254},[499],{"type":46,"tag":135,"props":500,"children":501},{"emptyLinePlaceholder":160},[502],{"type":51,"value":163},{"type":46,"tag":135,"props":504,"children":505},{"class":137,"line":262},[506],{"type":46,"tag":135,"props":507,"children":508},{},[509],{"type":51,"value":510},"# Rectangles\n",{"type":46,"tag":135,"props":512,"children":513},{"class":137,"line":271},[514],{"type":46,"tag":135,"props":515,"children":516},{},[517],{"type":51,"value":518},"draw.rectangle([x1, y1, x2, y2], fill=(r, g, b), outline=(r, g, b), width=3)\n",{"type":46,"tag":54,"props":520,"children":521},{},[522,527],{"type":46,"tag":70,"props":523,"children":524},{},[525],{"type":51,"value":526},"Don't use:",{"type":51,"value":528}," Emoji fonts (unreliable across platforms) or assume pre-packaged graphics exist in this skill.",{"type":46,"tag":301,"props":530,"children":532},{"id":531},"making-graphics-look-good",[533],{"type":51,"value":534},"Making Graphics Look Good",{"type":46,"tag":54,"props":536,"children":537},{},[538],{"type":51,"value":539},"Graphics should look polished and creative, not basic. Here's how:",{"type":46,"tag":54,"props":541,"children":542},{},[543,548,550,556],{"type":46,"tag":70,"props":544,"children":545},{},[546],{"type":51,"value":547},"Use thicker lines",{"type":51,"value":549}," - Always set ",{"type":46,"tag":131,"props":551,"children":553},{"className":552},[],[554],{"type":51,"value":555},"width=2",{"type":51,"value":557}," or higher for outlines and lines. Thin lines (width=1) look choppy and amateurish.",{"type":46,"tag":54,"props":559,"children":560},{},[561,566],{"type":46,"tag":70,"props":562,"children":563},{},[564],{"type":51,"value":565},"Add visual depth",{"type":51,"value":567},":",{"type":46,"tag":76,"props":569,"children":570},{},[571,584],{"type":46,"tag":80,"props":572,"children":573},{},[574,576,582],{"type":51,"value":575},"Use gradients for backgrounds (",{"type":46,"tag":131,"props":577,"children":579},{"className":578},[],[580],{"type":51,"value":581},"create_gradient_background",{"type":51,"value":583},")",{"type":46,"tag":80,"props":585,"children":586},{},[587],{"type":51,"value":588},"Layer multiple shapes for complexity (e.g., a star with a smaller star inside)",{"type":46,"tag":54,"props":590,"children":591},{},[592,597],{"type":46,"tag":70,"props":593,"children":594},{},[595],{"type":51,"value":596},"Make shapes more interesting",{"type":51,"value":567},{"type":46,"tag":76,"props":599,"children":600},{},[601,606,611],{"type":46,"tag":80,"props":602,"children":603},{},[604],{"type":51,"value":605},"Don't just draw a plain circle - add highlights, rings, or patterns",{"type":46,"tag":80,"props":607,"children":608},{},[609],{"type":51,"value":610},"Stars can have glows (draw larger, semi-transparent versions behind)",{"type":46,"tag":80,"props":612,"children":613},{},[614],{"type":51,"value":615},"Combine multiple shapes (stars + sparkles, circles + rings)",{"type":46,"tag":54,"props":617,"children":618},{},[619,624],{"type":46,"tag":70,"props":620,"children":621},{},[622],{"type":51,"value":623},"Pay attention to colors",{"type":51,"value":567},{"type":46,"tag":76,"props":626,"children":627},{},[628,633,638],{"type":46,"tag":80,"props":629,"children":630},{},[631],{"type":51,"value":632},"Use vibrant, complementary colors",{"type":46,"tag":80,"props":634,"children":635},{},[636],{"type":51,"value":637},"Add contrast (dark outlines on light shapes, light outlines on dark shapes)",{"type":46,"tag":80,"props":639,"children":640},{},[641],{"type":51,"value":642},"Consider the overall composition",{"type":46,"tag":54,"props":644,"children":645},{},[646,651],{"type":46,"tag":70,"props":647,"children":648},{},[649],{"type":51,"value":650},"For complex shapes",{"type":51,"value":652}," (hearts, snowflakes, etc.):",{"type":46,"tag":76,"props":654,"children":655},{},[656,661,666],{"type":46,"tag":80,"props":657,"children":658},{},[659],{"type":51,"value":660},"Use combinations of polygons and ellipses",{"type":46,"tag":80,"props":662,"children":663},{},[664],{"type":51,"value":665},"Calculate points carefully for symmetry",{"type":46,"tag":80,"props":667,"children":668},{},[669],{"type":51,"value":670},"Add details (a heart can have a highlight curve, snowflakes have intricate branches)",{"type":46,"tag":54,"props":672,"children":673},{},[674],{"type":51,"value":675},"Be creative and detailed! A good Slack GIF should look polished, not like placeholder graphics.",{"type":46,"tag":60,"props":677,"children":679},{"id":678},"available-utilities",[680],{"type":51,"value":681},"Available Utilities",{"type":46,"tag":301,"props":683,"children":685},{"id":684},"gifbuilder-coregif_builder",[686,688,694],{"type":51,"value":687},"GIFBuilder (",{"type":46,"tag":131,"props":689,"children":691},{"className":690},[],[692],{"type":51,"value":693},"core.gif_builder",{"type":51,"value":583},{"type":46,"tag":54,"props":696,"children":697},{},[698],{"type":51,"value":699},"Assembles frames and optimizes for Slack:",{"type":46,"tag":123,"props":701,"children":703},{"className":125,"code":702,"language":127,"meta":128,"style":128},"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",[704],{"type":46,"tag":131,"props":705,"children":706},{"__ignoreMap":128},[707,714,722,730],{"type":46,"tag":135,"props":708,"children":709},{"class":137,"line":138},[710],{"type":46,"tag":135,"props":711,"children":712},{},[713],{"type":51,"value":181},{"type":46,"tag":135,"props":715,"children":716},{"class":137,"line":147},[717],{"type":46,"tag":135,"props":718,"children":719},{},[720],{"type":51,"value":721},"builder.add_frame(frame)  # Add PIL Image\n",{"type":46,"tag":135,"props":723,"children":724},{"class":137,"line":156},[725],{"type":46,"tag":135,"props":726,"children":727},{},[728],{"type":51,"value":729},"builder.add_frames(frames)  # Add list of frames\n",{"type":46,"tag":135,"props":731,"children":732},{"class":137,"line":166},[733],{"type":46,"tag":135,"props":734,"children":735},{},[736],{"type":51,"value":737},"builder.save('out.gif', num_colors=48, optimize_for_emoji=True, remove_duplicates=True)\n",{"type":46,"tag":301,"props":739,"children":741},{"id":740},"validators-corevalidators",[742,744,750],{"type":51,"value":743},"Validators (",{"type":46,"tag":131,"props":745,"children":747},{"className":746},[],[748],{"type":51,"value":749},"core.validators",{"type":51,"value":583},{"type":46,"tag":54,"props":752,"children":753},{},[754],{"type":51,"value":755},"Check if GIF meets Slack requirements:",{"type":46,"tag":123,"props":757,"children":759},{"className":125,"code":758,"language":127,"meta":128,"style":128},"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",[760],{"type":46,"tag":131,"props":761,"children":762},{"__ignoreMap":128},[763,771,778,786,794,801,809,817],{"type":46,"tag":135,"props":764,"children":765},{"class":137,"line":138},[766],{"type":46,"tag":135,"props":767,"children":768},{},[769],{"type":51,"value":770},"from core.validators import validate_gif, is_slack_ready\n",{"type":46,"tag":135,"props":772,"children":773},{"class":137,"line":147},[774],{"type":46,"tag":135,"props":775,"children":776},{"emptyLinePlaceholder":160},[777],{"type":51,"value":163},{"type":46,"tag":135,"props":779,"children":780},{"class":137,"line":156},[781],{"type":46,"tag":135,"props":782,"children":783},{},[784],{"type":51,"value":785},"# Detailed validation\n",{"type":46,"tag":135,"props":787,"children":788},{"class":137,"line":166},[789],{"type":46,"tag":135,"props":790,"children":791},{},[792],{"type":51,"value":793},"passes, info = validate_gif('my.gif', is_emoji=True, verbose=True)\n",{"type":46,"tag":135,"props":795,"children":796},{"class":137,"line":175},[797],{"type":46,"tag":135,"props":798,"children":799},{"emptyLinePlaceholder":160},[800],{"type":51,"value":163},{"type":46,"tag":135,"props":802,"children":803},{"class":137,"line":184},[804],{"type":46,"tag":135,"props":805,"children":806},{},[807],{"type":51,"value":808},"# Quick check\n",{"type":46,"tag":135,"props":810,"children":811},{"class":137,"line":192},[812],{"type":46,"tag":135,"props":813,"children":814},{},[815],{"type":51,"value":816},"if is_slack_ready('my.gif'):\n",{"type":46,"tag":135,"props":818,"children":819},{"class":137,"line":201},[820],{"type":46,"tag":135,"props":821,"children":822},{},[823],{"type":51,"value":824},"    print(\"Ready!\")\n",{"type":46,"tag":301,"props":826,"children":828},{"id":827},"easing-functions-coreeasing",[829,831,837],{"type":51,"value":830},"Easing Functions (",{"type":46,"tag":131,"props":832,"children":834},{"className":833},[],[835],{"type":51,"value":836},"core.easing",{"type":51,"value":583},{"type":46,"tag":54,"props":839,"children":840},{},[841],{"type":51,"value":842},"Smooth motion instead of linear:",{"type":46,"tag":123,"props":844,"children":846},{"className":125,"code":845,"language":127,"meta":128,"style":128},"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",[847],{"type":46,"tag":131,"props":848,"children":849},{"__ignoreMap":128},[850,858,865,873,881,888,896,904,911,919],{"type":46,"tag":135,"props":851,"children":852},{"class":137,"line":138},[853],{"type":46,"tag":135,"props":854,"children":855},{},[856],{"type":51,"value":857},"from core.easing import interpolate\n",{"type":46,"tag":135,"props":859,"children":860},{"class":137,"line":147},[861],{"type":46,"tag":135,"props":862,"children":863},{"emptyLinePlaceholder":160},[864],{"type":51,"value":163},{"type":46,"tag":135,"props":866,"children":867},{"class":137,"line":156},[868],{"type":46,"tag":135,"props":869,"children":870},{},[871],{"type":51,"value":872},"# Progress from 0.0 to 1.0\n",{"type":46,"tag":135,"props":874,"children":875},{"class":137,"line":166},[876],{"type":46,"tag":135,"props":877,"children":878},{},[879],{"type":51,"value":880},"t = i \u002F (num_frames - 1)\n",{"type":46,"tag":135,"props":882,"children":883},{"class":137,"line":175},[884],{"type":46,"tag":135,"props":885,"children":886},{"emptyLinePlaceholder":160},[887],{"type":51,"value":163},{"type":46,"tag":135,"props":889,"children":890},{"class":137,"line":184},[891],{"type":46,"tag":135,"props":892,"children":893},{},[894],{"type":51,"value":895},"# Apply easing\n",{"type":46,"tag":135,"props":897,"children":898},{"class":137,"line":192},[899],{"type":46,"tag":135,"props":900,"children":901},{},[902],{"type":51,"value":903},"y = interpolate(start=0, end=400, t=t, easing='ease_out')\n",{"type":46,"tag":135,"props":905,"children":906},{"class":137,"line":201},[907],{"type":46,"tag":135,"props":908,"children":909},{"emptyLinePlaceholder":160},[910],{"type":51,"value":163},{"type":46,"tag":135,"props":912,"children":913},{"class":137,"line":210},[914],{"type":46,"tag":135,"props":915,"children":916},{},[917],{"type":51,"value":918},"# Available: linear, ease_in, ease_out, ease_in_out,\n",{"type":46,"tag":135,"props":920,"children":921},{"class":137,"line":219},[922],{"type":46,"tag":135,"props":923,"children":924},{},[925],{"type":51,"value":926},"#           bounce_out, elastic_out, back_out\n",{"type":46,"tag":301,"props":928,"children":930},{"id":929},"frame-helpers-coreframe_composer",[931,933,939],{"type":51,"value":932},"Frame Helpers (",{"type":46,"tag":131,"props":934,"children":936},{"className":935},[],[937],{"type":51,"value":938},"core.frame_composer",{"type":51,"value":583},{"type":46,"tag":54,"props":941,"children":942},{},[943],{"type":51,"value":944},"Convenience functions for common needs:",{"type":46,"tag":123,"props":946,"children":948},{"className":125,"code":947,"language":127,"meta":128,"style":128},"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",[949],{"type":46,"tag":131,"props":950,"children":951},{"__ignoreMap":128},[952,960,968,976,984,992,1000],{"type":46,"tag":135,"props":953,"children":954},{"class":137,"line":138},[955],{"type":46,"tag":135,"props":956,"children":957},{},[958],{"type":51,"value":959},"from core.frame_composer import (\n",{"type":46,"tag":135,"props":961,"children":962},{"class":137,"line":147},[963],{"type":46,"tag":135,"props":964,"children":965},{},[966],{"type":51,"value":967},"    create_blank_frame,         # Solid color background\n",{"type":46,"tag":135,"props":969,"children":970},{"class":137,"line":156},[971],{"type":46,"tag":135,"props":972,"children":973},{},[974],{"type":51,"value":975},"    create_gradient_background,  # Vertical gradient\n",{"type":46,"tag":135,"props":977,"children":978},{"class":137,"line":166},[979],{"type":46,"tag":135,"props":980,"children":981},{},[982],{"type":51,"value":983},"    draw_circle,                # Helper for circles\n",{"type":46,"tag":135,"props":985,"children":986},{"class":137,"line":175},[987],{"type":46,"tag":135,"props":988,"children":989},{},[990],{"type":51,"value":991},"    draw_text,                  # Simple text rendering\n",{"type":46,"tag":135,"props":993,"children":994},{"class":137,"line":184},[995],{"type":46,"tag":135,"props":996,"children":997},{},[998],{"type":51,"value":999},"    draw_star                   # 5-pointed star\n",{"type":46,"tag":135,"props":1001,"children":1002},{"class":137,"line":192},[1003],{"type":46,"tag":135,"props":1004,"children":1005},{},[1006],{"type":51,"value":1007},")\n",{"type":46,"tag":60,"props":1009,"children":1011},{"id":1010},"animation-concepts",[1012],{"type":51,"value":1013},"Animation Concepts",{"type":46,"tag":301,"props":1015,"children":1017},{"id":1016},"shakevibrate",[1018],{"type":51,"value":1019},"Shake\u002FVibrate",{"type":46,"tag":54,"props":1021,"children":1022},{},[1023],{"type":51,"value":1024},"Offset object position with oscillation:",{"type":46,"tag":76,"props":1026,"children":1027},{},[1028,1049,1054],{"type":46,"tag":80,"props":1029,"children":1030},{},[1031,1033,1039,1041,1047],{"type":51,"value":1032},"Use ",{"type":46,"tag":131,"props":1034,"children":1036},{"className":1035},[],[1037],{"type":51,"value":1038},"math.sin()",{"type":51,"value":1040}," or ",{"type":46,"tag":131,"props":1042,"children":1044},{"className":1043},[],[1045],{"type":51,"value":1046},"math.cos()",{"type":51,"value":1048}," with frame index",{"type":46,"tag":80,"props":1050,"children":1051},{},[1052],{"type":51,"value":1053},"Add small random variations for natural feel",{"type":46,"tag":80,"props":1055,"children":1056},{},[1057],{"type":51,"value":1058},"Apply to x and\u002For y position",{"type":46,"tag":301,"props":1060,"children":1062},{"id":1061},"pulseheartbeat",[1063],{"type":51,"value":1064},"Pulse\u002FHeartbeat",{"type":46,"tag":54,"props":1066,"children":1067},{},[1068],{"type":51,"value":1069},"Scale object size rhythmically:",{"type":46,"tag":76,"props":1071,"children":1072},{},[1073,1085,1090],{"type":46,"tag":80,"props":1074,"children":1075},{},[1076,1077,1083],{"type":51,"value":1032},{"type":46,"tag":131,"props":1078,"children":1080},{"className":1079},[],[1081],{"type":51,"value":1082},"math.sin(t * frequency * 2 * math.pi)",{"type":51,"value":1084}," for smooth pulse",{"type":46,"tag":80,"props":1086,"children":1087},{},[1088],{"type":51,"value":1089},"For heartbeat: two quick pulses then pause (adjust sine wave)",{"type":46,"tag":80,"props":1091,"children":1092},{},[1093],{"type":51,"value":1094},"Scale between 0.8 and 1.2 of base size",{"type":46,"tag":301,"props":1096,"children":1098},{"id":1097},"bounce",[1099],{"type":51,"value":1100},"Bounce",{"type":46,"tag":54,"props":1102,"children":1103},{},[1104],{"type":51,"value":1105},"Object falls and bounces:",{"type":46,"tag":76,"props":1107,"children":1108},{},[1109,1129,1141],{"type":46,"tag":80,"props":1110,"children":1111},{},[1112,1113,1119,1121,1127],{"type":51,"value":1032},{"type":46,"tag":131,"props":1114,"children":1116},{"className":1115},[],[1117],{"type":51,"value":1118},"interpolate()",{"type":51,"value":1120}," with ",{"type":46,"tag":131,"props":1122,"children":1124},{"className":1123},[],[1125],{"type":51,"value":1126},"easing='bounce_out'",{"type":51,"value":1128}," for landing",{"type":46,"tag":80,"props":1130,"children":1131},{},[1132,1133,1139],{"type":51,"value":1032},{"type":46,"tag":131,"props":1134,"children":1136},{"className":1135},[],[1137],{"type":51,"value":1138},"easing='ease_in'",{"type":51,"value":1140}," for falling (accelerating)",{"type":46,"tag":80,"props":1142,"children":1143},{},[1144],{"type":51,"value":1145},"Apply gravity by increasing y velocity each frame",{"type":46,"tag":301,"props":1147,"children":1149},{"id":1148},"spinrotate",[1150],{"type":51,"value":1151},"Spin\u002FRotate",{"type":46,"tag":54,"props":1153,"children":1154},{},[1155],{"type":51,"value":1156},"Rotate object around center:",{"type":46,"tag":76,"props":1158,"children":1159},{},[1160,1171],{"type":46,"tag":80,"props":1161,"children":1162},{},[1163,1165],{"type":51,"value":1164},"PIL: ",{"type":46,"tag":131,"props":1166,"children":1168},{"className":1167},[],[1169],{"type":51,"value":1170},"image.rotate(angle, resample=Image.BICUBIC)",{"type":46,"tag":80,"props":1172,"children":1173},{},[1174],{"type":51,"value":1175},"For wobble: use sine wave for angle instead of linear",{"type":46,"tag":301,"props":1177,"children":1179},{"id":1178},"fade-inout",[1180],{"type":51,"value":1181},"Fade In\u002FOut",{"type":46,"tag":54,"props":1183,"children":1184},{},[1185],{"type":51,"value":1186},"Gradually appear or disappear:",{"type":46,"tag":76,"props":1188,"children":1189},{},[1190,1195,1206,1211],{"type":46,"tag":80,"props":1191,"children":1192},{},[1193],{"type":51,"value":1194},"Create RGBA image, adjust alpha channel",{"type":46,"tag":80,"props":1196,"children":1197},{},[1198,1200],{"type":51,"value":1199},"Or use ",{"type":46,"tag":131,"props":1201,"children":1203},{"className":1202},[],[1204],{"type":51,"value":1205},"Image.blend(image1, image2, alpha)",{"type":46,"tag":80,"props":1207,"children":1208},{},[1209],{"type":51,"value":1210},"Fade in: alpha from 0 to 1",{"type":46,"tag":80,"props":1212,"children":1213},{},[1214],{"type":51,"value":1215},"Fade out: alpha from 1 to 0",{"type":46,"tag":301,"props":1217,"children":1219},{"id":1218},"slide",[1220],{"type":51,"value":1221},"Slide",{"type":46,"tag":54,"props":1223,"children":1224},{},[1225],{"type":51,"value":1226},"Move object from off-screen to position:",{"type":46,"tag":76,"props":1228,"children":1229},{},[1230,1235,1240,1258],{"type":46,"tag":80,"props":1231,"children":1232},{},[1233],{"type":51,"value":1234},"Start position: outside frame bounds",{"type":46,"tag":80,"props":1236,"children":1237},{},[1238],{"type":51,"value":1239},"End position: target location",{"type":46,"tag":80,"props":1241,"children":1242},{},[1243,1244,1249,1250,1256],{"type":51,"value":1032},{"type":46,"tag":131,"props":1245,"children":1247},{"className":1246},[],[1248],{"type":51,"value":1118},{"type":51,"value":1120},{"type":46,"tag":131,"props":1251,"children":1253},{"className":1252},[],[1254],{"type":51,"value":1255},"easing='ease_out'",{"type":51,"value":1257}," for smooth stop",{"type":46,"tag":80,"props":1259,"children":1260},{},[1261,1263],{"type":51,"value":1262},"For overshoot: use ",{"type":46,"tag":131,"props":1264,"children":1266},{"className":1265},[],[1267],{"type":51,"value":1268},"easing='back_out'",{"type":46,"tag":301,"props":1270,"children":1272},{"id":1271},"zoom",[1273],{"type":51,"value":1274},"Zoom",{"type":46,"tag":54,"props":1276,"children":1277},{},[1278],{"type":51,"value":1279},"Scale and position for zoom effect:",{"type":46,"tag":76,"props":1281,"children":1282},{},[1283,1288,1293],{"type":46,"tag":80,"props":1284,"children":1285},{},[1286],{"type":51,"value":1287},"Zoom in: scale from 0.1 to 2.0, crop center",{"type":46,"tag":80,"props":1289,"children":1290},{},[1291],{"type":51,"value":1292},"Zoom out: scale from 2.0 to 1.0",{"type":46,"tag":80,"props":1294,"children":1295},{},[1296],{"type":51,"value":1297},"Can add motion blur for drama (PIL filter)",{"type":46,"tag":301,"props":1299,"children":1301},{"id":1300},"explodeparticle-burst",[1302],{"type":51,"value":1303},"Explode\u002FParticle Burst",{"type":46,"tag":54,"props":1305,"children":1306},{},[1307],{"type":51,"value":1308},"Create particles radiating outward:",{"type":46,"tag":76,"props":1310,"children":1311},{},[1312,1317,1336,1347],{"type":46,"tag":80,"props":1313,"children":1314},{},[1315],{"type":51,"value":1316},"Generate particles with random angles and velocities",{"type":46,"tag":80,"props":1318,"children":1319},{},[1320,1322,1328,1330],{"type":51,"value":1321},"Update each particle: ",{"type":46,"tag":131,"props":1323,"children":1325},{"className":1324},[],[1326],{"type":51,"value":1327},"x += vx",{"type":51,"value":1329},", ",{"type":46,"tag":131,"props":1331,"children":1333},{"className":1332},[],[1334],{"type":51,"value":1335},"y += vy",{"type":46,"tag":80,"props":1337,"children":1338},{},[1339,1341],{"type":51,"value":1340},"Add gravity: ",{"type":46,"tag":131,"props":1342,"children":1344},{"className":1343},[],[1345],{"type":51,"value":1346},"vy += gravity_constant",{"type":46,"tag":80,"props":1348,"children":1349},{},[1350],{"type":51,"value":1351},"Fade out particles over time (reduce alpha)",{"type":46,"tag":60,"props":1353,"children":1355},{"id":1354},"optimization-strategies",[1356],{"type":51,"value":1357},"Optimization Strategies",{"type":46,"tag":54,"props":1359,"children":1360},{},[1361],{"type":51,"value":1362},"Only when asked to make the file size smaller, implement a few of the following methods:",{"type":46,"tag":1364,"props":1365,"children":1366},"ol",{},[1367,1377,1395,1405,1422],{"type":46,"tag":80,"props":1368,"children":1369},{},[1370,1375],{"type":46,"tag":70,"props":1371,"children":1372},{},[1373],{"type":51,"value":1374},"Fewer frames",{"type":51,"value":1376}," - Lower FPS (10 instead of 20) or shorter duration",{"type":46,"tag":80,"props":1378,"children":1379},{},[1380,1385,1387,1393],{"type":46,"tag":70,"props":1381,"children":1382},{},[1383],{"type":51,"value":1384},"Fewer colors",{"type":51,"value":1386}," - ",{"type":46,"tag":131,"props":1388,"children":1390},{"className":1389},[],[1391],{"type":51,"value":1392},"num_colors=48",{"type":51,"value":1394}," instead of 128",{"type":46,"tag":80,"props":1396,"children":1397},{},[1398,1403],{"type":46,"tag":70,"props":1399,"children":1400},{},[1401],{"type":51,"value":1402},"Smaller dimensions",{"type":51,"value":1404}," - 128x128 instead of 480x480",{"type":46,"tag":80,"props":1406,"children":1407},{},[1408,1413,1414,1420],{"type":46,"tag":70,"props":1409,"children":1410},{},[1411],{"type":51,"value":1412},"Remove duplicates",{"type":51,"value":1386},{"type":46,"tag":131,"props":1415,"children":1417},{"className":1416},[],[1418],{"type":51,"value":1419},"remove_duplicates=True",{"type":51,"value":1421}," in save()",{"type":46,"tag":80,"props":1423,"children":1424},{},[1425,1430,1431,1437],{"type":46,"tag":70,"props":1426,"children":1427},{},[1428],{"type":51,"value":1429},"Emoji mode",{"type":51,"value":1386},{"type":46,"tag":131,"props":1432,"children":1434},{"className":1433},[],[1435],{"type":51,"value":1436},"optimize_for_emoji=True",{"type":51,"value":1438}," auto-optimizes",{"type":46,"tag":123,"props":1440,"children":1442},{"className":125,"code":1441,"language":127,"meta":128,"style":128},"# Maximum optimization for emoji\nbuilder.save(\n    'emoji.gif',\n    num_colors=48,\n    optimize_for_emoji=True,\n    remove_duplicates=True\n)\n",[1443],{"type":46,"tag":131,"props":1444,"children":1445},{"__ignoreMap":128},[1446,1454,1462,1470,1478,1486,1494],{"type":46,"tag":135,"props":1447,"children":1448},{"class":137,"line":138},[1449],{"type":46,"tag":135,"props":1450,"children":1451},{},[1452],{"type":51,"value":1453},"# Maximum optimization for emoji\n",{"type":46,"tag":135,"props":1455,"children":1456},{"class":137,"line":147},[1457],{"type":46,"tag":135,"props":1458,"children":1459},{},[1460],{"type":51,"value":1461},"builder.save(\n",{"type":46,"tag":135,"props":1463,"children":1464},{"class":137,"line":156},[1465],{"type":46,"tag":135,"props":1466,"children":1467},{},[1468],{"type":51,"value":1469},"    'emoji.gif',\n",{"type":46,"tag":135,"props":1471,"children":1472},{"class":137,"line":166},[1473],{"type":46,"tag":135,"props":1474,"children":1475},{},[1476],{"type":51,"value":1477},"    num_colors=48,\n",{"type":46,"tag":135,"props":1479,"children":1480},{"class":137,"line":175},[1481],{"type":46,"tag":135,"props":1482,"children":1483},{},[1484],{"type":51,"value":1485},"    optimize_for_emoji=True,\n",{"type":46,"tag":135,"props":1487,"children":1488},{"class":137,"line":184},[1489],{"type":46,"tag":135,"props":1490,"children":1491},{},[1492],{"type":51,"value":1493},"    remove_duplicates=True\n",{"type":46,"tag":135,"props":1495,"children":1496},{"class":137,"line":192},[1497],{"type":46,"tag":135,"props":1498,"children":1499},{},[1500],{"type":51,"value":1007},{"type":46,"tag":60,"props":1502,"children":1504},{"id":1503},"philosophy",[1505],{"type":51,"value":1506},"Philosophy",{"type":46,"tag":54,"props":1508,"children":1509},{},[1510],{"type":51,"value":1511},"This skill provides:",{"type":46,"tag":76,"props":1513,"children":1514},{},[1515,1525,1535],{"type":46,"tag":80,"props":1516,"children":1517},{},[1518,1523],{"type":46,"tag":70,"props":1519,"children":1520},{},[1521],{"type":51,"value":1522},"Knowledge",{"type":51,"value":1524},": Slack's requirements and animation concepts",{"type":46,"tag":80,"props":1526,"children":1527},{},[1528,1533],{"type":46,"tag":70,"props":1529,"children":1530},{},[1531],{"type":51,"value":1532},"Utilities",{"type":51,"value":1534},": GIFBuilder, validators, easing functions",{"type":46,"tag":80,"props":1536,"children":1537},{},[1538,1543],{"type":46,"tag":70,"props":1539,"children":1540},{},[1541],{"type":51,"value":1542},"Flexibility",{"type":51,"value":1544},": Create the animation logic using PIL primitives",{"type":46,"tag":54,"props":1546,"children":1547},{},[1548],{"type":51,"value":1549},"It does NOT provide:",{"type":46,"tag":76,"props":1551,"children":1552},{},[1553,1558,1563],{"type":46,"tag":80,"props":1554,"children":1555},{},[1556],{"type":51,"value":1557},"Rigid animation templates or pre-made functions",{"type":46,"tag":80,"props":1559,"children":1560},{},[1561],{"type":51,"value":1562},"Emoji font rendering (unreliable across platforms)",{"type":46,"tag":80,"props":1564,"children":1565},{},[1566],{"type":51,"value":1567},"A library of pre-packaged graphics built into the skill",{"type":46,"tag":54,"props":1569,"children":1570},{},[1571,1576],{"type":46,"tag":70,"props":1572,"children":1573},{},[1574],{"type":51,"value":1575},"Note on user uploads",{"type":51,"value":1577},": 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":46,"tag":54,"props":1579,"children":1580},{},[1581],{"type":51,"value":1582},"Be creative! Combine concepts (bouncing + rotating, pulsing + sliding, etc.) and use PIL's full capabilities.",{"type":46,"tag":60,"props":1584,"children":1586},{"id":1585},"dependencies",[1587],{"type":51,"value":1588},"Dependencies",{"type":46,"tag":123,"props":1590,"children":1594},{"className":1591,"code":1592,"language":1593,"meta":128,"style":128},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pip install pillow imageio numpy\n","bash",[1595],{"type":46,"tag":131,"props":1596,"children":1597},{"__ignoreMap":128},[1598],{"type":46,"tag":135,"props":1599,"children":1600},{"class":137,"line":138},[1601,1607,1613,1618,1623],{"type":46,"tag":135,"props":1602,"children":1604},{"style":1603},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[1605],{"type":51,"value":1606},"pip",{"type":46,"tag":135,"props":1608,"children":1610},{"style":1609},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[1611],{"type":51,"value":1612}," install",{"type":46,"tag":135,"props":1614,"children":1615},{"style":1609},[1616],{"type":51,"value":1617}," pillow",{"type":46,"tag":135,"props":1619,"children":1620},{"style":1609},[1621],{"type":51,"value":1622}," imageio",{"type":46,"tag":135,"props":1624,"children":1625},{"style":1609},[1626],{"type":51,"value":1627}," numpy\n",{"type":46,"tag":1629,"props":1630,"children":1631},"style",{},[1632],{"type":51,"value":1633},"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":1635,"total":1766},[1636,1654,1663,1672,1683,1693,1706,1715,1724,1734,1743,1756],{"slug":1637,"name":1637,"fn":1638,"description":1639,"org":1640,"tags":1641,"stars":1651,"repoUrl":1652,"updatedAt":1653},"mps-aspect-accessories","configure JetBrains MPS module dependencies","Wire MPS module and model dependencies, used languages, used devkits, extended languages, runtime solutions, accessory models, and language\u002Fdependency versions. Use when adding\u002Fremoving module dependencies, importing languages or devkits into a model, declaring runtime solutions, or shipping accessory content visible to consumers without explicit import.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1642,1645,1648],{"name":1643,"slug":1644,"type":15},"Architecture","architecture",{"name":1646,"slug":1647,"type":15},"Configuration","configuration",{"name":1649,"slug":1650,"type":15},"Engineering","engineering",1650,"https:\u002F\u002Fgithub.com\u002FJetBrains\u002FMPS","2026-07-17T06:06:57.311661",{"slug":1655,"name":1655,"fn":1656,"description":1657,"org":1658,"tags":1659,"stars":1651,"repoUrl":1652,"updatedAt":1662},"mps-aspect-actions","define and edit MPS node factories","Use when defining or editing MPS node factories (the \"actions\" aspect) — `NodeFactories` roots, per-concept `NodeFactory` setup functions that initialize a freshly created node and optionally copy data from a replaced `sampleNode`, plus the actions aspect's `CopyPasteHandlers` and `PasteWrappers` roots. Reach for this skill when a substitution, side transform, completion replacement, or `add new initialized(...)` should preserve fields from the node it is replacing, or when defaults set in a constructor are not enough.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1660,1661],{"name":1643,"slug":1644,"type":15},{"name":1649,"slug":1650,"type":15},"2026-07-17T06:04:48.066901",{"slug":1664,"name":1664,"fn":1665,"description":1666,"org":1667,"tags":1668,"stars":1651,"repoUrl":1652,"updatedAt":1671},"mps-aspect-behavior","define and edit MPS concept behavior","Use when defining or editing MPS `ConceptBehavior` — per-concept methods (non-virtual \u002F virtual \u002F abstract \u002F static \u002F virtual static), constructors, virtual dispatch (MRO), super and interface-default calls (`super\u003CInterface>.method`), overriding methods from `lang.core.behavior` interfaces such as `ScopeProvider.getScope` \u002F `INamedConcept.getName` \u002F `BaseConcept.getPresentation`, calling sibling methods (`LocalBehaviorMethodCall`) and behavior methods from other aspects via `node.method(...)`. Reach for this skill whenever the task involves authoring or modifying `\u003Clang>\u002FlanguageModels\u002Fbehavior.mps`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1669,1670],{"name":1643,"slug":1644,"type":15},{"name":1649,"slug":1650,"type":15},"2026-07-13T06:45:21.757084",{"slug":1673,"name":1673,"fn":1674,"description":1675,"org":1676,"tags":1677,"stars":1651,"repoUrl":1652,"updatedAt":1682},"mps-aspect-constraints","define JetBrains MPS language constraints","Use when defining or editing MPS language constraints — property validators \u002F setters \u002F getters, referent search scopes (imperative or inherited via `ScopeProvider.getScope`), `referentSetHandler` side effects, default-scope blocks, `canBeChild` \u002F `canBeParent` \u002F `canBeAncestor` \u002F `canBeRoot` placement rules, `defaultConcreteConcept` for abstract concepts, `set \u003Cread-only>` and `{name}` aliasing, and scope helpers (`SimpleRoleScope`, `ListScope`, `CompositeScope`, `HidingByNameScope`). Reach for this skill whenever the task involves authoring or modifying `\u003Clang>\u002FlanguageModels\u002Fconstraints.mps`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1678,1679],{"name":1643,"slug":1644,"type":15},{"name":1680,"slug":1681,"type":15},"Code Analysis","code-analysis","2026-07-23T05:41:33.639365",{"slug":1684,"name":1684,"fn":1685,"description":1686,"org":1687,"tags":1688,"stars":1651,"repoUrl":1652,"updatedAt":1692},"mps-aspect-dataflow","define and debug MPS dataflow builders","Use when defining or debugging MPS dataflow builders for a concept — control\u002Fdata flow declarations that drive reachability analysis and variable-use checking. Covers DataFlowBuilderDeclaration, BuilderBlock, emit instructions (code for, jump, ifjump, label, read, write, ret, mayBeUnreachable), positions (AfterPosition, BeforePosition, LabelPosition), the jetbrains.mps.lang.dataFlow language, the NodeParameter implicit, BL+smodel usage inside builder bodies, and IBuilderMode for advanced analyses such as nullable\u002Fnon-null tracking.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1689],{"name":1690,"slug":1691,"type":15},"Data Analysis","data-analysis","2026-07-13T06:45:19.114674",{"slug":1694,"name":1694,"fn":1695,"description":1696,"org":1697,"tags":1698,"stars":1651,"repoUrl":1652,"updatedAt":1705},"mps-aspect-editor","define MPS editor layouts","Use when creating or changing MPS editor definitions — the overall workflow from scaffolding a `ConceptEditorDeclaration` through componentizing reusable `EditorComponentDeclaration`s, refining cell models and cell layouts, applying style sheets and indent-layout style items, wiring smart references, leveraging inheritance via super-concepts and interfaces, inspecting (`print_node_json`, `show_node_representation`) and validating (`check_root_node_problems`). Covers `jetbrains.mps.lang.editor` cell models (`CellModel_RefNode`\u002F`CellModel_RefNodeList`\u002F`CellModel_RefCell`\u002F`CellModel_Property`\u002F`CellModel_Constant`), layout choices, and JSON blueprints for common editor shapes. For the non-layout side (action maps, keymaps, transformation\u002Fsubstitute menus) use `mps-aspect-editor-menus-and-keymaps`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1699,1702],{"name":1700,"slug":1701,"type":15},"Design","design",{"name":1703,"slug":1704,"type":15},"UI Components","ui-components","2026-07-23T05:41:56.638151",{"slug":1707,"name":1707,"fn":1708,"description":1709,"org":1710,"tags":1711,"stars":1651,"repoUrl":1652,"updatedAt":1714},"mps-aspect-editor-menus-and-keymaps","author MPS editor menus and keymaps","Use when authoring the **non-layout** parts of the MPS editor aspect — what happens when the user types, presses a key, triggers completion, pastes, or invokes a context action. Covers action maps (`CellActionMapDeclaration`), cell keymaps (`CellKeyMapDeclaration`), transformation menus (`TransformationMenu_Default` \u002F `_Named` \u002F `_Contribution`), substitute menus (`SubstituteMenu_Default` \u002F `SubstituteMenu` \u002F contributions), side transforms (LEFT\u002FRIGHT), legacy cell menus, paste wrappers and copy-paste handlers (in the actions language), completion styling, reference presentation, two-step deletion, and the editor selection API. Trigger terms: `actionMap`, `keyMap`, `delete_action_id`, `transformationMenu`, `substituteMenu`, `Ctrl+Space`, `Ctrl+Alt+B`, side transform, paste wrapper, completion styling, `PasteWrappers`, `CopyPasteHandlers`. For the **layout** side (cells, layouts, style sheets) use `mps-aspect-editor` instead.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1712,1713],{"name":1649,"slug":1650,"type":15},{"name":1703,"slug":1704,"type":15},"2026-07-23T05:41:49.666535",{"slug":1716,"name":1716,"fn":1717,"description":1718,"org":1719,"tags":1720,"stars":1651,"repoUrl":1652,"updatedAt":1723},"mps-aspect-generation-plan","modify MPS generation plans","Use when defining or modifying an MPS generation plan — explicit ordering of generators, checkpoints for cross-model reference resolution, forks for parallel branches, IncludePlan composition, conditional PlanContribution activation, ParameterEquals\u002FConceptListSelector fork selectors, and InitModelAttributes for targetFacet routing. Apply when working with @genplan models, the jetbrains.mps.lang.generator.plan language, attaching plans via DevKits or the Custom generation facet, or debugging cross-model mapping label resolution.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1721,1722],{"name":1643,"slug":1644,"type":15},{"name":1649,"slug":1650,"type":15},"2026-07-13T06:44:59.507855",{"slug":1725,"name":1725,"fn":1726,"description":1727,"org":1728,"tags":1729,"stars":1651,"repoUrl":1652,"updatedAt":1733},"mps-aspect-generator","define JetBrains MPS generator rules","Use when defining or modifying MPS generators — author a generator module, add or edit root\u002Freduction\u002Fweaving\u002Fpattern mapping rules, attach template macros ($COPY_SRC, $LOOP, $IF, $PROPERTY, $REF, $SWITCH, $MAP_SRC, $WEAVE, $INSERT, $LABEL, $TRACE, $VAR), wire mapping labels, build template switches, write pre\u002Fpost mapping scripts, navigate `genContext`, or debug \"rule didn't fire\", missing references, empty output, infinite reduction loops, and generated-Java compile failures.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1730,1731,1732],{"name":1643,"slug":1644,"type":15},{"name":1680,"slug":1681,"type":15},{"name":1649,"slug":1650,"type":15},"2026-07-17T06:06:58.042999",{"slug":1735,"name":1735,"fn":1736,"description":1737,"org":1738,"tags":1739,"stars":1651,"repoUrl":1652,"updatedAt":1742},"mps-aspect-intentions","define and edit MPS intentions","Use when defining or editing MPS intentions (the Alt+Enter context-action aspect) — adding `IntentionDeclaration` roots, parameterized or surround-with variants, description\u002FisApplicable\u002Fexecute blocks, child-filter functions, factory-initialized AST splicing, or debugging why an intention is not offered. Lives in the language's `intentions` model and uses `jetbrains.mps.lang.intentions`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1740,1741],{"name":1643,"slug":1644,"type":15},{"name":1649,"slug":1650,"type":15},"2026-07-23T05:41:48.692899",{"slug":1744,"name":1744,"fn":1745,"description":1746,"org":1747,"tags":1748,"stars":1651,"repoUrl":1652,"updatedAt":1755},"mps-aspect-migrations","author and debug MPS migration scripts","Use when authoring or debugging MPS migration scripts that upgrade user models after a language definition changes — covers jetbrains.mps.lang.migration (MigrationScript class-based, PureMigrationScript declarative, MoveConcept\u002FMoveContainmentLink\u002FMoveReferenceLink\u002FMoveProperty, ordering via OrderDependency, data exchange via putData\u002FgetData, RefactoringLog, ConceptMigrationReference) and jetbrains.mps.lang.script Enhancement Scripts (MigrationScript with MigrationScriptPart_Instance, ExtractInterfaceMigration, FactoryMigrationScriptPart, CommentMigrationScriptPart) — when a model needs version-gated upgrade, concept rename or removal, link or property rename, instance-level transformation, or composition of migration steps.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1749,1752],{"name":1750,"slug":1751,"type":15},"Debugging","debugging",{"name":1753,"slug":1754,"type":15},"Migration","migration","2026-07-13T06:45:20.372122",{"slug":1757,"name":1757,"fn":1758,"description":1759,"org":1760,"tags":1761,"stars":1651,"repoUrl":1652,"updatedAt":1765},"mps-aspect-structure-concepts","define concepts in MPS structure aspect","Define concepts, interface concepts, enumerations, and constrained data types in an MPS language's `structure` aspect. Covers smart-reference detection, alias rules, cardinality, INamedConcept usage, bulk creation, and the full `mps_mcp_alter_structure` \u002F `mps_mcp_query_structure` reference. Use when authoring or modifying a language's structure model.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1762],{"name":1763,"slug":1764,"type":15},"Data Modeling","data-modeling","2026-07-23T05:41:30.705975",188,{"items":1768,"total":1882},[1769,1784,1799,1813,1828,1851,1868],{"slug":1770,"name":1770,"fn":1771,"description":1772,"org":1773,"tags":1774,"stars":25,"repoUrl":26,"updatedAt":1783},"algorithmic-art","create generative 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":9},[1775,1776,1779,1780],{"name":17,"slug":18,"type":15},{"name":1777,"slug":1778,"type":15},"Generative Art","generative-art",{"name":13,"slug":14,"type":15},{"name":1781,"slug":1782,"type":15},"JavaScript","javascript","2026-07-13T06:41:35.540127",{"slug":1785,"name":1785,"fn":1786,"description":1787,"org":1788,"tags":1789,"stars":25,"repoUrl":26,"updatedAt":1798},"antfu","configure JavaScript projects with Anthony Fu's tools","Anthony Fu's opinionated tooling and conventions for JavaScript\u002FTypeScript projects. Use when setting up new projects, configuring ESLint\u002FPrettier alternatives, monorepos, library publishing, or when the user mentions Anthony Fu's preferences.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1790,1793,1794,1795],{"name":1791,"slug":1792,"type":15},"Best Practices","best-practices",{"name":1649,"slug":1650,"type":15},{"name":1781,"slug":1782,"type":15},{"name":1796,"slug":1797,"type":15},"TypeScript","typescript","2026-07-13T06:43:13.153309",{"slug":1800,"name":1800,"fn":1801,"description":1802,"org":1803,"tags":1804,"stars":25,"repoUrl":26,"updatedAt":1812},"brand-guidelines","apply Anthropic brand guidelines","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":9},[1805,1808,1809],{"name":1806,"slug":1807,"type":15},"Branding","branding",{"name":1700,"slug":1701,"type":15},{"name":1810,"slug":1811,"type":15},"Typography","typography","2026-07-13T06:43:06.077629",{"slug":1814,"name":1814,"fn":1815,"description":1816,"org":1817,"tags":1818,"stars":25,"repoUrl":26,"updatedAt":1827},"canvas-design","create visual art and design assets","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":9},[1819,1820,1821,1824],{"name":17,"slug":18,"type":15},{"name":1700,"slug":1701,"type":15},{"name":1822,"slug":1823,"type":15},"Images","images",{"name":1825,"slug":1826,"type":15},"PDF","pdf","2026-07-13T06:39:58.803113",{"slug":1829,"name":1829,"fn":1830,"description":1831,"org":1832,"tags":1833,"stars":25,"repoUrl":26,"updatedAt":1850},"ci-cd-containerization-advisor","design CI\u002FCD pipelines for Kotlin applications","Design reproducible build, image, and deployment pipelines for Kotlin plus Spring applications, including CI verification, layered containers, rollout safety, and deployment-time migration coordination. Use when creating or improving Dockerfiles, CI workflows, image hardening, Kubernetes manifests, release gates, or deployment strategies for Spring Boot services, especially where build reproducibility and operational safety matter.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1834,1837,1840,1843,1844,1847],{"name":1835,"slug":1836,"type":15},"CI\u002FCD","ci-cd",{"name":1838,"slug":1839,"type":15},"Containers","containers",{"name":1841,"slug":1842,"type":15},"Deployment","deployment",{"name":1649,"slug":1650,"type":15},{"name":1845,"slug":1846,"type":15},"Kotlin","kotlin",{"name":1848,"slug":1849,"type":15},"Spring","spring","2026-07-13T06:41:47.83899",{"slug":1852,"name":1852,"fn":1853,"description":1854,"org":1855,"tags":1856,"stars":25,"repoUrl":26,"updatedAt":1867},"cloudflare-deploy","deploy applications to Cloudflare","Deploy applications and infrastructure to Cloudflare using Workers, Pages, and related platform services. Use when the user asks to deploy, host, publish, or set up a project on Cloudflare.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1857,1860,1863,1866],{"name":1858,"slug":1859,"type":15},"Cloudflare","cloudflare",{"name":1861,"slug":1862,"type":15},"Cloudflare Pages","cloudflare-pages",{"name":1864,"slug":1865,"type":15},"Cloudflare Workers","cloudflare-workers",{"name":1841,"slug":1842,"type":15},"2026-07-17T06:04:42.853896",{"slug":1869,"name":1869,"fn":1870,"description":1871,"org":1872,"tags":1873,"stars":25,"repoUrl":26,"updatedAt":1881},"compose-ui-control","interact with Compose Desktop applications","Control a running Compose Desktop application via HTTP. Use when you need to interact with UI elements, click buttons, enter text, wait for elements to appear, or capture screenshots in a Compose Desktop app that has compose-ui-test-server enabled.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1874,1877,1880],{"name":1875,"slug":1876,"type":15},"Automation","automation",{"name":1878,"slug":1879,"type":15},"Desktop","desktop",{"name":1703,"slug":1704,"type":15},"2026-07-13T06:40:38.798626",128]