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.
A skill your agent uses when displaying animated GIFs in PixiJS v8.
$ npx skills add netaart/cohub --skill pixijs-scene-gif -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install netaart/cohub pixijs-scene-gif --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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-srcUse ~/.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/
Install the "pixijs-scene-gif" agent skill from https://github.com/netaart/cohub/tree/main/.agents/skills/pixijs-scene-gif into .claude/skills/pixijs-scene-gif/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pixijs-scene-gif", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/netaart/cohub/tree/main/.agents/skills/pixijs-scene-gifType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add netaart/cohub --skill pixijs-scene-gif -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install netaart/cohub pixijs-scene-gif --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/netaart/cohub.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/pixijs-scene-gif .agents/skills/pixijs-scene-gif && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "pixijs-scene-gif" agent skill from https://github.com/netaart/cohub/tree/main/.agents/skills/pixijs-scene-gif into .agents/skills/pixijs-scene-gif/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pixijs-scene-gif", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add netaart/cohub --skill pixijs-scene-gif -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install netaart/cohub pixijs-scene-gif --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/netaart/cohub.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/pixijs-scene-gif .cursor/skills/pixijs-scene-gif && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "pixijs-scene-gif" agent skill from https://github.com/netaart/cohub/tree/main/.agents/skills/pixijs-scene-gif into .cursor/skills/pixijs-scene-gif/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pixijs-scene-gif", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/netaart/cohub.git --path .agents/skills/pixijs-scene-gif--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add netaart/cohub --skill pixijs-scene-gif -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install netaart/cohub pixijs-scene-gif --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/netaart/cohub.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/pixijs-scene-gif .gemini/skills/pixijs-scene-gif && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "pixijs-scene-gif" agent skill from https://github.com/netaart/cohub/tree/main/.agents/skills/pixijs-scene-gif into .gemini/skills/pixijs-scene-gif/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pixijs-scene-gif", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install netaart/cohub pixijs-scene-gifInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add netaart/cohub --skill pixijs-scene-gif -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/netaart/cohub.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/pixijs-scene-gif .github/skills/pixijs-scene-gif && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "pixijs-scene-gif" agent skill from https://github.com/netaart/cohub/tree/main/.agents/skills/pixijs-scene-gif into .github/skills/pixijs-scene-gif/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pixijs-scene-gif", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add netaart/cohub --skill pixijs-scene-gif -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install netaart/cohub pixijs-scene-gif --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/netaart/cohub.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/pixijs-scene-gif .opencode/skills/pixijs-scene-gif && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "pixijs-scene-gif" agent skill from https://github.com/netaart/cohub/tree/main/.agents/skills/pixijs-scene-gif into .opencode/skills/pixijs-scene-gif/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pixijs-scene-gif", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
pixijs-scene-gifA 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. 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.
Read from SKILL.md and the folder at commit 40b557f. It shows what the files ask for, not the result of running them.
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.
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.
Links to these hosts (documentation or services it may open):
pixijs.downloadFrom URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
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.
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.
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.
The full file from netaart/cohub at commit 40b557f, republished under its MIT licence (© netaart). 738 words, ~2,507 tokens.
.claude/skills/pixijs-scene-gif/SKILL.md (or your agent's skills folder).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.
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).
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:
| Option | Type | Default | Description |
|---|---|---|---|
source | GifSource | — | Required. The parsed GIF data returned by Assets.load('file.gif'). Can be shared across multiple GifSprite instances. |
autoPlay | boolean | true | Start playback immediately on construction. If false, you must call gif.play() to begin. |
loop | boolean | true | Repeat the animation on reaching the last frame. When false, the sprite stops at the final frame and fires onComplete. |
animationSpeed | number | 1 | Multiplier on the GIF's native frame timing. 2 runs at double speed; 0.5 runs at half. |
autoUpdate | boolean | true | Connect playback to Ticker.shared. Set to false to drive updates yourself via gif.update(ticker). |
fps | number | 30 | Fallback frame rate for GIFs that do not specify per-frame delays. |
onComplete | () => void | null | null | Called when a non-looping animation reaches the last frame. |
onLoop | () => void | null | null | Called each time a looping animation wraps around. |
onFrameChange | (frame: number) => void | null | null | Called every time the displayed frame index changes. |
scaleMode | SCALE_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.
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.
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 msautoPlay: true (default) starts playback immediately; loop: true (default) repeats. animationSpeed is a multiplier on the GIF's native frame timing. currentFrame is zero-based.
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.
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.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).
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.
Wrong:
import { Assets } from "pixi.js";
const gif = await Assets.load("animation.gif");Correct:
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.
Wrong:
const texture = await Assets.load("animation.gif");
const sprite = new Sprite(texture);Correct:
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].
Wrong:
gif.destroy();
// GifSource and frame textures remain in memoryCorrect:
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.
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:
const group = new Container();
group.addChild(gif, label);© netaart, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Just SKILL.md in .agents/skills/pixijs-scene-gif of netaart/cohub.
Open the folder on GitHubat commit 40b557f
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.
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Pixijs Scene Gif this skillnetaart/cohub | 572 | 1 repos | ~2.5k | Automated safety check: Pass | MIT | |
| Brand and Design Toolkitnextlevelbuilder/ui-ux-pro-max-skill | 135k | 1 repos | ~3.5k | Automated safety check: Pass | MIT | |
| Slack GIF Creatoranthropics/skills | 180k | 29 repos | ~2k | Automated safety check: Pass | Apache-2.0 | |
| Guizang Social Cardsop7418/guizang-social-card-skill | 7.4k | 1 repos | ~7.8k | Automated safety check: Pass | AGPL-3.0 | |
| Video Cover Imageitwanger/toBeBetterJavaer | 18k | — | ~3.3k | Automated safety check: Pass | None | |
| Ccfddl X Postsccfddl/ccf-deadlines | 9.4k | — | ~5.6k | Automated safety check: Pass | MIT |
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.
anthropics/skills
Provides Slack size and frame limits, Python animation helpers and validators for building animated GIFs sized for emoji and messages.
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.
itwanger/toBeBetterJavaer
Generate matched 3:4, 16:9, and 4:3 short-video cover images from toBeBetterJavaer video scripts or AI/Java technical topics.
ccfddl/ccf-deadlines
Prepare and, with a verified authenticated publishing route and authorization, publish daily conference-deadline countdown posts for @ccfddl on X/Twitter.
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.
netaart/cohub
A skill your agent uses when loading and managing resources in PixiJS v8.
netaart/cohub
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.
netaart/cohub
A skill your agent uses when rendering custom geometry in PixiJS v8.
netaart/cohub
A skill your agent uses when drawing images in PixiJS v8. An agent skill from netaart/cohub.
netaart/cohub
A skill your agent uses when rendering text in PixiJS v8. An agent skill from netaart/cohub.
netaart/cohub
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.
Categories
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.
Pixijs Scene Gif fits situations like: displaying animated GIFs in PixiJS v8; constructor options; gifSpriteOptions.
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.
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.
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.
SKILL.md names no scripts, command-line tools or credentials: Pixijs Scene Gif is instructions for the agent only.
SKILL.md names 1 domain. As links in the text: pixijs.download. This is read from the text; nothing was executed.
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.
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.
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.
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.
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.