Agent skill

Pixijs Scene Gif

by netaart in netaart/cohub

A skill your agent uses when displaying animated GIFs in PixiJS v8.

MITAuto-check passedMedia & Creative

Install Pixijs Scene Gif

skills CLI
$ npx skills add netaart/cohub --skill pixijs-scene-gif -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install netaart/cohub pixijs-scene-gif --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/netaart/cohub.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/pixijs-scene-gif .claude/skills/pixijs-scene-gif && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
pixijs-scene-gif
GitHub stars
572
Used in
1 other repo
Token cost
~2.5k tokens
SKILL.md length
738 words
Files
1
Skills in repo
30
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when displaying animated GIFs in PixiJS v8.

  • Displaying animated GIFs in PixiJS v8
  • SKILL.md covers Quick Start, Constructor options, Core Patterns and Common Mistakes, plus 1 more section
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Constructor options

What it does

Pixijs Scene Gif is an agent skill from netaart/cohub. Use this skill when displaying animated GIFs in PixiJS v8. Covers the pixi.js/gif side-effect import, Assets.load returning a GifSource, GifSprite playback (play/stop/currentFrame/animationSpeed), autoPlay/loop options, onComplete/onLoop/onFrameChange callbacks, GifSource sharing, clone, destroy. Triggers on: GifSprite, GifSource, pixi.js/gif, animationSpeed, currentFrame, autoPlay, onComplete, onFrameChange, constructor options, GifSpriteOptions.

Its SKILL.md is about 2.5k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Media & Creative, covering Social media graphics. The repository describes itself as: A living space where people and agents create, play, and build together. The licence is MIT.

When your agent uses it

  • Displaying animated GIFs in PixiJS v8
  • Constructor options
  • GifSpriteOptions

Example prompts

  • “/pixijs-scene-gif”

What it can do on your machine

Read from SKILL.md and the folder at commit 40b557f. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • pixijs.download

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Pixijs Scene Gif loads about 2.5k tokens when it runs. Until then it costs about 117 tokens; SKILL.md has 738 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~117
When it runs · the whole SKILL.md, loaded when a task matches
~2.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from netaart/cohub at commit 40b557f, republished under its MIT licence (© netaart). 738 words, ~2,507 tokens.

Download SKILL.mdSave it as .claude/skills/pixijs-scene-gif/SKILL.md (or your agent's skills folder).
name
pixijs-scene-gif
description
Use this skill when displaying animated GIFs in PixiJS v8. Covers the pixi.js/gif side-effect import, Assets.load returning a GifSource, GifSprite playback (play/stop/currentFrame/animationSpeed), autoPlay/loop options, onComplete/onLoop/onFrameChange callbacks, GifSource sharing, clone, destroy. Triggers on: GifSprite, GifSource, pixi.js/gif, animationSpeed, currentFrame, autoPlay, onComplete, onFrameChange, constructor options, GifSpriteOptions.
license
MIT
disable-model-invocation
true

GifSprite plays an animated GIF as a display object. Assets.load('animation.gif') returns a GifSource (not a Texture), and you wrap that in a GifSprite. Requires a side-effect import 'pixi.js/gif' to register the loader extension.

Assumes familiarity with pixijs-scene-core-concepts. GifSprite extends Sprite, so it is a leaf: do not nest children inside it. Wrap multiple GifSprite instances in a Container to group them.

Quick Start

ts
import "pixi.js/gif";
import { GifSprite } from "pixi.js/gif";

const source = await Assets.load("animation.gif");

const gif = new GifSprite({
  source,
  autoPlay: true,
  loop: true,
  animationSpeed: 1,
});

gif.anchor.set(0.5);
gif.x = app.screen.width / 2;
gif.y = app.screen.height / 2;

app.stage.addChild(gif);

[!NOTE] GIFs decode every frame into a separate canvas texture. For performance-critical animations with many frames, prefer a spritesheet with AnimatedSprite — it uses a single atlas texture and batches better on the GPU.

Related skills: pixijs-scene-core-concepts (scene graph basics), pixijs-scene-sprite (AnimatedSprite for spritesheet-based animation), pixijs-assets (Assets.load, caching, unloading), pixijs-ticker (frame timing), pixijs-performance (texture memory).

Constructor options

GifSpriteOptions extends Omit<SpriteOptions, 'texture'>; texture is managed internally (set from source.textures[0] and swapped per frame). All other Sprite options (anchor, scale, tint, roundPixels, etc.) are valid, and all Container options (position, scale, tint, label, filters, zIndex, etc.) are also valid here — see skills/pixijs-scene-core-concepts/references/constructor-options.md.

Leaf-specific options added by GifSpriteOptions:

OptionTypeDefaultDescription
sourceGifSource—Required. The parsed GIF data returned by Assets.load('file.gif'). Can be shared across multiple GifSprite instances.
autoPlaybooleantrueStart playback immediately on construction. If false, you must call gif.play() to begin.
loopbooleantrueRepeat the animation on reaching the last frame. When false, the sprite stops at the final frame and fires onComplete.
animationSpeednumber1Multiplier on the GIF's native frame timing. 2 runs at double speed; 0.5 runs at half.
autoUpdatebooleantrueConnect playback to Ticker.shared. Set to false to drive updates yourself via gif.update(ticker).
fpsnumber30Fallback frame rate for GIFs that do not specify per-frame delays.
onComplete() => void | nullnullCalled when a non-looping animation reaches the last frame.
onLoop() => void | nullnullCalled each time a looping animation wraps around.
onFrameChange(frame: number) => void | nullnullCalled every time the displayed frame index changes.
scaleModeSCALE_MODE'linear'Deprecated since 8.13.0 — pass scaleMode via Assets.load(..., { data: { scaleMode } }) instead.

The constructor also accepts a bare GifSource as its sole argument (new GifSprite(source)), which is shorthand for new GifSprite({ source }) using the defaults above.

Core Patterns

Setup and the side-effect import
ts
import "pixi.js/gif";
import { Assets } from "pixi.js";
import { GifSprite } from "pixi.js/gif";

const source = await Assets.load("animation.gif");
const gif = new GifSprite({ source });

pixi.js/gif calls extensions.add(GifAsset), registering .gif with the asset loader. Without it, Assets.load does not recognize GIF files. GifSprite and GifSource are exported from pixi.js/gif, not pixi.js.

Importing a named export from pixi.js/gif also triggers the side effect, so a bare import 'pixi.js/gif' is only needed when you don't import anything from that path.

Playback control
ts
const gif = new GifSprite({ source });

gif.play();
gif.stop();

gif.currentFrame = 5;
gif.animationSpeed = 2;
gif.animationSpeed = 0.5;

gif.playing; // read-only
gif.progress; // 0-1 playback position
gif.totalFrames; // number of frames
gif.duration; // total duration in ms

autoPlay: true (default) starts playback immediately; loop: true (default) repeats. animationSpeed is a multiplier on the GIF's native frame timing. currentFrame is zero-based.

Show full SKILL.md (301 more words)Show less
Loading options
ts
const source = await Assets.load({
  src: "animation.gif",
  data: {
    fps: 12,
    scaleMode: "nearest",
    resolution: 2,
  },
});

const fromDataUri = await Assets.load("data:image/gif;base64,R0lGODlh...");

Options in data are passed to GifSource.from. fps sets the fallback frame delay for GIFs that don't specify timing. scaleMode and resolution control the canvas textures created for each frame. The loader matches both .gif file extensions and data:image/gif URIs.

Callbacks
ts
const gif = new GifSprite({
  source,
  loop: false,
  onComplete: () => console.log("animation finished"),
  onLoop: () => console.log("loop completed"),
  onFrameChange: (frame) => console.log("now on frame", frame),
});
  • onComplete fires when a non-looping animation reaches the last frame.
  • onLoop fires each time a looping animation wraps around.
  • onFrameChange fires every time the displayed frame changes.
Manual update mode
ts
const gif = new GifSprite({ source, autoUpdate: false });

app.ticker.add((ticker) => {
  gif.update(ticker);
});

autoUpdate: false disconnects from Ticker.shared. You call gif.update(ticker) yourself, passing any Ticker instance. Useful when animation should be driven by a private ticker (e.g., a pause-aware game ticker).

Sharing source data and cloning
ts
const source = await Assets.load("animation.gif");

const gif1 = new GifSprite({ source, autoPlay: true });
const gif2 = new GifSprite({ source, autoPlay: false });

const gif3 = gif1.clone();
gif3.animationSpeed = 0.5;

GifSource can be shared across multiple GifSprite instances; each sprite has independent playback state. clone() copies all playback settings but creates an independent instance.

Common Mistakes

[HIGH] Not importing pixi.js/gif

Wrong:

ts
import { Assets } from "pixi.js";
const gif = await Assets.load("animation.gif");

Correct:

ts
import "pixi.js/gif";
import { Assets } from "pixi.js";
const source = await Assets.load("animation.gif");

The GIF loader extension must be registered before loading. Without the side-effect import, the loader does not recognize .gif files and the load either fails or returns raw data.

[MEDIUM] Expecting Assets.load to return a Texture

Wrong:

ts
const texture = await Assets.load("animation.gif");
const sprite = new Sprite(texture);

Correct:

ts
const source = await Assets.load("animation.gif");
const gif = new GifSprite({ source });

Assets.load on a GIF returns a GifSource containing frame textures and timing data. Pass the source to GifSprite; for a single still frame, read source.textures[0].

[MEDIUM] GIF memory not released on destroy

Wrong:

ts
gif.destroy();
// GifSource and frame textures remain in memory

Correct:

ts
gif.destroy(true);
// or
await Assets.unload("animation.gif");

GIF frames hold decoded pixel data as individual canvas textures. gif.destroy() (or destroy(false)) destroys the sprite but keeps the GifSource intact. Pass true to also destroy the source. For shared sources, only destroy when the last consumer is done, or call Assets.unload to let the asset cache handle it.

[LOW] Do not nest children inside a GifSprite

GifSprite extends Sprite, which sets allowChildren = false. It is a leaf. To group a GIF with other display objects, wrap them all in a plain Container:

ts
const group = new Container();
group.addChild(gif, label);

API Reference

© netaart, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/pixijs-scene-gif of netaart/cohub.

Open the folder on GitHubat commit 40b557f

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in netaart/cohub, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Pixijs Scene Gif next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Pixijs Scene Gif compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Pixijs Scene Gif this skillnetaart/cohub5721 repos~2.5kAutomated safety check: PassMIT
Brand and Design Toolkitnextlevelbuilder/ui-ux-pro-max-skill135k1 repos~3.5kAutomated safety check: PassMIT
Slack GIF Creatoranthropics/skills180k29 repos~2kAutomated safety check: PassApache-2.0
Guizang Social Cardsop7418/guizang-social-card-skill7.4k1 repos~7.8kAutomated safety check: PassAGPL-3.0
Video Cover Imageitwanger/toBeBetterJavaer18k—~3.3kAutomated safety check: PassNone
Ccfddl X Postsccfddl/ccf-deadlines9.4k—~5.6kAutomated safety check: PassMIT

Similar skills

  • Brand and Design Toolkit

    nextlevelbuilder/ui-ux-pro-max-skill

    Bundles design tasks behind one skill: brand identity, tokens, UI styling, logos, corporate identity mockups, slides, banners, icons and social images.

    135k GitHub starsUsed in 1 repo~3.5k tokens
    Media & CreativeAuto-check passed
  • Slack GIF Creator

    anthropics/skills

    Official

    Provides Slack size and frame limits, Python animation helpers and validators for building animated GIFs sized for emoji and messages.

    180k GitHub starsUsed in 29 repos~2k tokens
    Media & CreativeAuto-check passed
  • Guizang Social Cards

    op7418/guizang-social-card-skill

    Produces social card sets for Xiaohongshu and WeChat: carousels, Live Photo motion cards and puzzle layouts, and WeChat cover pairs, rendered from single-file HTML.

    7.4k GitHub starsUsed in 1 repo~7.8k tokens
    Media & CreativeAuto-check passed
  • Video Cover Image

    itwanger/toBeBetterJavaer

    Generate matched 3:4, 16:9, and 4:3 short-video cover images from toBeBetterJavaer video scripts or AI/Java technical topics.

    18k GitHub stars~3.3k tokensUpdated yesterday
    Media & CreativeAuto-check passed
  • Ccfddl X Posts

    ccfddl/ccf-deadlines

    Prepare and, with a verified authenticated publishing route and authorization, publish daily conference-deadline countdown posts for @ccfddl on X/Twitter.

    9.4k GitHub stars~5.6k tokensUpdated today
    Media & CreativeAuto-check passed
  • Web Asset Generator

    alonw0/web-asset-generator

    Generate web assets including favicons, app icons (PWA), and social media meta images (Open Graph) for Facebook, Twitter, WhatsApp, and LinkedIn.

    514 GitHub starsUsed in 1 repo~6.6k tokens
    Media & CreativeAuto-check passed

More from netaart/cohub

All 30 skills in this repo
  • Pixijs Assets

    netaart/cohub

    A skill your agent uses when loading and managing resources in PixiJS v8.

    572 GitHub starsUsed in 1 repo~5k tokens
    Auto-check passed
  • A skill your agent uses when reasoning about the PixiJS v8 scene graph as a whole: how containers, leaves, transforms, and render order fit together.

    572 GitHub starsUsed in 1 repo~3.9k tokens
    Auto-check passed
  • Pixijs Scene Mesh

    netaart/cohub

    A skill your agent uses when rendering custom geometry in PixiJS v8.

    572 GitHub starsUsed in 1 repo~1.8k tokens
    Auto-check passed
  • Pixijs Scene Sprite

    netaart/cohub

    A skill your agent uses when drawing images in PixiJS v8. An agent skill from netaart/cohub.

    572 GitHub starsUsed in 1 repo~1.6k tokens
    Auto-check passed
  • Pixijs Scene Text

    netaart/cohub

    A skill your agent uses when rendering text in PixiJS v8. An agent skill from netaart/cohub.

    572 GitHub starsUsed in 1 repo~2.1k tokens
    Auto-check passed
  • A skill your agent uses when understanding how PixiJS v8 renders frames: the systems-and-pipes renderer, the render loop, and how the library adapts to different environments.

    572 GitHub stars~1.7k tokensUpdated today
    Auto-check passed

Questions about Pixijs Scene Gif

What does Pixijs Scene Gif do?

A skill your agent uses when displaying animated GIFs in PixiJS v8. Pixijs Scene Gif is an agent skill from netaart/cohub. Use this skill when displaying animated GIFs in PixiJS v8.

When should I use Pixijs Scene Gif?

Pixijs Scene Gif fits situations like: displaying animated GIFs in PixiJS v8; constructor options; gifSpriteOptions.

How do I install Pixijs Scene Gif in Claude Code?

Run `npx skills add netaart/cohub --skill pixijs-scene-gif -a claude-code`. Or copy the skill folder (.agents/skills/pixijs-scene-gif in netaart/cohub) into .claude/skills/pixijs-scene-gif in your project. Claude Code loads it when a task matches its description.

How do I install Pixijs Scene Gif in Codex?

Run `npx skills add netaart/cohub --skill pixijs-scene-gif -a codex`. Or copy the skill folder (.agents/skills/pixijs-scene-gif in netaart/cohub) into .agents/skills/pixijs-scene-gif in your project. Codex loads it when a task matches its description.

Can I use Pixijs Scene Gif in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add netaart/cohub --skill pixijs-scene-gif -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/pixijs-scene-gif, .gemini/skills/pixijs-scene-gif, .github/skills/pixijs-scene-gif and .opencode/skills/pixijs-scene-gif in your project.

What does Pixijs Scene Gif need to run?

SKILL.md names no scripts, command-line tools or credentials: Pixijs Scene Gif is instructions for the agent only.

Does Pixijs Scene Gif access the network?

SKILL.md names 1 domain. As links in the text: pixijs.download. This is read from the text; nothing was executed.

Is Pixijs Scene Gif safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Pixijs Scene Gif use?

Pixijs Scene Gif is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Pixijs Scene Gif use?

About 2.5k tokens (SKILL.md is roughly 10k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Pixijs Scene Gif?

Skills that share tags, products or a category with Pixijs Scene Gif: Brand and Design Toolkit (nextlevelbuilder/ui-ux-pro-max-skill, 135k stars), Slack GIF Creator (anthropics/skills, 180k stars), Guizang Social Cards (op7418/guizang-social-card-skill, 7.4k stars) and Video Cover Image (itwanger/toBeBetterJavaer, 18k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Pixijs Scene Gif?

netaart (a GitHub organization) maintains it in netaart/cohub, which has 572 GitHub stars. The repository holds 30 skills in this directory. The repository was last updated on October 11, 2026.

Source: netaart/cohub on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.