New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Pixijs Environments

by netaart in netaart/cohub

A skill your agent uses when running PixiJS v8 outside a standard browser: Web Workers, OffscreenCanvas, Node/SSR, or CSP-restricted contexts.

MITAuto-check passed

Install Pixijs Environments

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

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

GitHub CLI
$ gh skill install netaart/cohub pixijs-environments --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-environments .claude/skills/pixijs-environments && 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-environments
GitHub stars
570
Used in
1 other repo
Token cost
~2.1k tokens
SKILL.md length
547 words
Files
1
Skills in repo
29
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when running PixiJS v8 outside a standard browser: Web Workers, OffscreenCanvas, Node/SSR, or CSP-restricted contexts.

  • Running PixiJS v8 outside a standard browser: Web Workers
  • SKILL.md covers Quick Start, Core Patterns, Common Mistakes and API Reference
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • OffscreenCanvas

What it does

Pixijs Environments is an agent skill from netaart/cohub. Use this skill when running PixiJS v8 outside a standard browser: Web Workers, OffscreenCanvas, Node/SSR, or CSP-restricted contexts. Covers DOMAdapter.set, BrowserAdapter, WebWorkerAdapter, custom Adapter interface, pixi.js/unsafe-eval for strict CSP. Triggers on: DOMAdapter, BrowserAdapter, WebWorkerAdapter, Web Worker, OffscreenCanvas, Node, headless, SSR, CSP, unsafe-eval, Adapter.

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

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

  • Running PixiJS v8 outside a standard browser: Web Workers
  • OffscreenCanvas
  • CSP-restricted contexts
  • WebWorkerAdapter

Example prompts

  • “/pixijs-environments”

Requirements

  • Node.js

What it can do on your machine

Read from SKILL.md and the folder at commit 1a4b7c1. 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 Environments loads about 2.1k tokens when it runs. Until then it costs about 102 tokens; SKILL.md has 547 words of instructions outside code blocks.

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

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 1a4b7c1, republished under its MIT licence (© netaart). 547 words, ~2,130 tokens.

Download SKILL.mdSave it as .claude/skills/pixijs-environments/SKILL.md (or your agent's skills folder).
name
pixijs-environments
description
Use this skill when running PixiJS v8 outside a standard browser: Web Workers, OffscreenCanvas, Node/SSR, or CSP-restricted contexts. Covers DOMAdapter.set, BrowserAdapter, WebWorkerAdapter, custom Adapter interface, pixi.js/unsafe-eval for strict CSP. Triggers on: DOMAdapter, BrowserAdapter, WebWorkerAdapter, Web Worker, OffscreenCanvas, Node, headless, SSR, CSP, unsafe-eval, Adapter.
license
MIT
disable-model-invocation
true

DOMAdapter abstracts every piece of DOM access PixiJS does (canvas creation, Image loading, fetch, XML parsing) so the library can run in non-browser contexts. Call DOMAdapter.set(...) before app.init() to swap in a different adapter.

Quick Start

ts
// worker.ts — OffscreenCanvas posted from main thread
DOMAdapter.set(WebWorkerAdapter);

self.onmessage = async (event) => {
  const app = new Application();
  await app.init({
    canvas: event.data.canvas,
    width: 800,
    height: 600,
  });
};

For CSP contexts that block unsafe-eval, import the polyfill before any renderer init:

ts
import "pixi.js/unsafe-eval";

Related skills: pixijs-application (standard browser init), pixijs-migration-v8 (settings removal, adapter changes).

Core Patterns

Web Worker with OffscreenCanvas

Transfer an OffscreenCanvas from the main thread, then initialize PixiJS in the worker:

ts
// main.ts
const canvas = document.createElement("canvas");
canvas.width = 800;
canvas.height = 600;
document.body.appendChild(canvas);

const offscreen = canvas.transferControlToOffscreen();
const worker = new Worker("worker.ts", { type: "module" });
worker.postMessage({ canvas: offscreen }, [offscreen]);
ts
// worker.ts
import { Application, DOMAdapter, WebWorkerAdapter } from "pixi.js";

DOMAdapter.set(WebWorkerAdapter);

self.onmessage = async (event) => {
  const app = new Application();
  await app.init({
    canvas: event.data.canvas,
    width: 800,
    height: 600,
  });
};

DOMAdapter.set(WebWorkerAdapter) must happen before new Application(). The WebWorkerAdapter uses OffscreenCanvas instead of document.createElement('canvas') and @xmldom/xmldom for XML parsing.

Features that do not work inside a Web Worker (no DOM access):

  • DOMContainer — there is no real DOM node to overlay.
  • AccessibilitySystem — depends on live DOM focus and screen reader hooks.
  • FontFace loading via the Font Loading API — use pre-converted bitmap fonts (BitmapFont.install or .fnt assets) instead.
Environment-specific subpath imports

Instead of importing pixi.js, you can pull in a curated bundle for each environment:

ts
import "pixi.js/browser"; // accessibility, dom, events, spritesheet, rendering, filters
import "pixi.js/webworker"; // spritesheet, rendering, filters (no DOM-only modules)

pixi.js/webworker deliberately omits accessibility, dom, and events because they require the DOM. Use these subpath entries when you want static, synchronous module registration instead of relying on loadEnvironmentExtensions to dynamic-import the right set at renderer init.

loadEnvironmentExtensions
ts
import { loadEnvironmentExtensions } from "pixi.js";

await loadEnvironmentExtensions(false); // false = load defaults; true = skip

loadEnvironmentExtensions(skip) replaces the deprecated autoDetectEnvironment helper (since 8.1.6). Pass true to opt out of auto-loading the default browser extensions when you are bootstrapping a custom environment. autoDetectEnvironment(add) still exists as a shim that forwards to loadEnvironmentExtensions(!add).

CSP-compliant setup

PixiJS uses new Function() internally for shader compilation and uniform syncing. In Content Security Policy environments that block unsafe-eval, import the polyfill:

ts
import "pixi.js/unsafe-eval";
import { Application } from "pixi.js";

const app = new Application();
await app.init({ width: 800, height: 600 });

The pixi.js/unsafe-eval import replaces eval-based code generation with static polyfills for shader sync, UBO sync, uniform sync, and particle buffer updates. The import must come before any PixiJS renderer initialization.

Tension note: The name pixi.js/unsafe-eval is counterintuitive. It does not enable unsafe eval; it removes the need for it. The name refers to the CSP directive it works around.

Show full SKILL.md (230 more words)Show less
Custom adapter

For non-standard environments (Node.js, headless testing, SSR), implement the full Adapter interface:

ts
import { DOMAdapter } from "pixi.js";
import type { Adapter } from "pixi.js";
import { createCanvas, Image } from "canvas";
import { DOMParser } from "@xmldom/xmldom";

const HeadlessAdapter: Adapter = {
  createCanvas: (width, height) => createCanvas(width ?? 0, height ?? 0),
  createImage: () => new Image(),
  getCanvasRenderingContext2D: () => CanvasRenderingContext2D,
  getWebGLRenderingContext: () => WebGLRenderingContext,
  getNavigator: () => ({ userAgent: "HeadlessAdapter", gpu: null }),
  getBaseUrl: () => "file://",
  getFontFaceSet: () => null,
  fetch: (url, options) => fetch(url, options),
  parseXML: (xml) => new DOMParser().parseFromString(xml, "text/xml"),
};

DOMAdapter.set(HeadlessAdapter);

The Adapter interface requires these methods: createCanvas, createImage, getCanvasRenderingContext2D, getWebGLRenderingContext, getNavigator, getBaseUrl, getFontFaceSet, fetch, parseXML.

Checking the current adapter
ts
import { DOMAdapter } from "pixi.js";

const adapter = DOMAdapter.get();
const canvas = adapter.createCanvas(256, 256);
const img = adapter.createImage();

DOMAdapter.get() returns whatever adapter is currently set. Use this for any DOM access within PixiJS-adjacent code instead of calling document or Image directly.

Common Mistakes

[CRITICAL] Not setting adapter before app.init()

Wrong:

ts
const app = new Application();
await app.init({ width: 800, height: 600 });
DOMAdapter.set(WebWorkerAdapter); // too late; adapter already read during init

Correct:

ts
DOMAdapter.set(WebWorkerAdapter);
const app = new Application();
await app.init({ width: 800, height: 600 });

DOMAdapter.set() must be called before app.init() in non-browser environments. PixiJS reads the adapter during app.init() when the renderer is created. new Application() itself only creates the stage Container and does not read the adapter.

[HIGH] Using document or Image directly

Wrong:

ts
const img = new Image();
img.src = "texture.png";

Correct:

ts
import { DOMAdapter } from "pixi.js";

const img = DOMAdapter.get().createImage();
img.src = "texture.png";

All DOM access in PixiJS goes through DOMAdapter. Direct use of document, Image, or other browser globals breaks Web Worker and SSR compatibility.

[HIGH] CSP unsafe-eval import name confusion

Wrong:

ts
// CSP environment, omitting the import
import { Application } from "pixi.js";
// Throws: "Current environment does not allow unsafe-eval,
// please use pixi.js/unsafe-eval module to enable support."

Correct:

ts
import "pixi.js/unsafe-eval";
import { Application } from "pixi.js";

The pixi.js/unsafe-eval import removes the need for eval() / new Function() in shader compilation. Despite the name suggesting it enables unsafe eval, it does the opposite: it installs static polyfills so PixiJS works under strict CSP.

PixiJS detects CSP blocking at renderer init and throws the error above. The browser may also log its own CSP violation before PixiJS reports; both point to the same fix.

[HIGH] Using old settings.ADAPTER pattern

Wrong:

ts
import { settings, WebWorkerAdapter } from "pixi.js";
settings.ADAPTER = WebWorkerAdapter;

Correct:

ts
import { DOMAdapter, WebWorkerAdapter } from "pixi.js";
DOMAdapter.set(WebWorkerAdapter);

The settings object was removed in v8. All adapter configuration uses DOMAdapter.set().

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-environments of netaart/cohub.

Open the folder on GitHubat commit 1a4b7c1

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 Environments 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 Environments compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Pixijs Environments this skillnetaart/cohub5701 repos~2.1kAutomated safety check: PassMIT
Flox Environmentsaffaan-m/ECC275k2 repos~3.5kAutomated safety check: NotesMIT
Remote Environmentsasgeirtj/system_prompts_leaks69k—~1.4kAutomated safety check: PassCC0-1.0
Telemetry Standardssupabase/supabase111k—~2kAutomated safety check: PassApache-2.0
Cpp Coding Standardsaffaan-m/ECC275k4 repos~5.6kAutomated safety check: PassMIT
Java Coding Standardsaffaan-m/ECC275k1 repos~2.9kAutomated safety check: PassMIT

Similar skills

  • Flox Environments

    affaan-m/ECC

    Create reproducible, cross-platform (macOS/Linux) development environments with Flox, a declarative Nix-based environment manager.

    275k GitHub starsUsed in 2 repos~3.5k tokens
    DatabasesAuto-check: notes

  • Remote Environments

    asgeirtj/system_prompts_leaks

    Discover available task environments and create or continue tasks when the user names an environment or computer, or refers to files or apps specifically on their computer.

    69k GitHub stars~1.4k tokensUpdated yesterday
    Auto-check passed

  • Telemetry Standards

    supabase/supabase

    Official

    PostHog event tracking standards for Supabase Studio. An agent skill from supabase/supabase.

    111k GitHub stars~2k tokensUpdated yesterday
    Data & AnalyticsAuto-check passed

  • Cpp Coding Standards

    affaan-m/ECC

    C++ coding standards based on the C++ Core Guidelines (isocpp.github.io).

    275k GitHub starsUsed in 4 repos~5.6k tokens
    DevelopmentAuto-check passed

  • Java Coding Standards

    affaan-m/ECC

    Java coding standards for Spring Boot and Quarkus services: naming, immutability, Optional usage, streams, exceptions, generics, CDI, reactive patterns, and project layout.

    275k GitHub starsUsed in 1 repo~2.9k tokens
    DevelopmentAuto-check passed

  • Coding Standards

    affaan-m/ECC

    适用于TypeScript、JavaScript、React和Node.js开发的通用编码标准、最佳实践和模式. An agent skill from affaan-m/ECC.

    275k GitHub starsUsed in 3 repos~2.6k tokens
    DevelopmentAuto-check passed

More from netaart/cohub

All 29 skills in this repo

  • Pixijs Assets

    netaart/cohub

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

    570 GitHub starsUsed in 1 repo~5k tokens
    Auto-check passed

  • Pixijs Scene Core Concepts

    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.

    570 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.

    570 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.

    570 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.

    570 GitHub starsUsed in 1 repo~2.1k tokens
    Auto-check passed

  • Pixijs Core Concepts

    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.

    570 GitHub stars~1.7k tokensUpdated yesterday
    Auto-check passed

Questions about Pixijs Environments

What does Pixijs Environments do?

A skill your agent uses when running PixiJS v8 outside a standard browser: Web Workers, OffscreenCanvas, Node/SSR, or CSP-restricted contexts. Pixijs Environments is an agent skill from netaart/cohub. Use this skill when running PixiJS v8 outside a standard browser: Web Workers, OffscreenCanvas, Node/SSR, or CSP-restricted contexts.

When should I use Pixijs Environments?

Pixijs Environments fits situations like: running PixiJS v8 outside a standard browser: Web Workers; offscreenCanvas; CSP-restricted contexts; webWorkerAdapter.

How do I install Pixijs Environments in Claude Code?

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

How do I install Pixijs Environments in Codex?

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

Can I use Pixijs Environments 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-environments -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-environments, .gemini/skills/pixijs-environments, .github/skills/pixijs-environments and .opencode/skills/pixijs-environments in your project.

What does Pixijs Environments need to run?

SKILL.md names no scripts, command-line tools or credentials: Pixijs Environments is instructions for the agent only. Our summary lists: Node.js.

Does Pixijs Environments 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 Environments 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 Environments use?

Pixijs Environments 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 Environments use?

About 2.1k tokens (SKILL.md is roughly 8.5k 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 Environments?

Skills that share tags, products or a category with Pixijs Environments: Flox Environments (affaan-m/ECC, 275k stars), Remote Environments (asgeirtj/system_prompts_leaks, 69k stars), Telemetry Standards (supabase/supabase, 111k stars) and Cpp Coding Standards (affaan-m/ECC, 275k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Pixijs Environments?

netaart (a GitHub organization) maintains it in netaart/cohub, which has 570 GitHub stars. The repository holds 29 skills in this directory. The repository was last updated on October 8, 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.