Agent skill

Pixijs Create

by pixijs in pixijs/pixijs-skills

A skill your agent uses when scaffolding a new PixiJS v8 project with the create-pixi CLI or adding PixiJS to an existing project.

MITAuto-check passedDevelopment

Install Pixijs Create

skills CLI
$ npx skills add pixijs/pixijs-skills --skill pixijs-create -a claude-code

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

GitHub CLI
$ gh skill install pixijs/pixijs-skills pixijs-create --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/pixijs/pixijs-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/pixijs-create .claude/skills/pixijs-create && 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-create
GitHub stars
348
Token cost
~3.1k tokens
SKILL.md length
1,201 words
Files
1
Skills in repo
4
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when scaffolding a new PixiJS v8 project with the create-pixi CLI or adding PixiJS to an existing project.

  • Works in 4 steps: Project name (defaults to pixi-project). → Framework / template category. → Variant (TypeScript vs JavaScript where… → …
  • Scaffolding a new PixiJS v8 project with the create-pixi CLI
  • SKILL.md covers Quick Start, Core Patterns, Next steps and Common Mistakes, plus 1 more section
  • Calls npm, yarn and pnpm

What it does

Pixijs Create is an agent skill from pixijs/pixijs-skills. Use this skill when scaffolding a new PixiJS v8 project with the create-pixi CLI or adding PixiJS to an existing project. Covers npm/yarn/pnpm/bun create commands, interactive vs non-interactive flows, bundler vs creation template categories, available template presets (bundler-vite, bundler-webpack, bundler-esbuild, bundler-import-map, creation-web, framework-react, extension-default), Node version requirements, npm install pixi.js for existing projects, TypeScript 5/6/7 tsconfig setup (moduleResolution…

Its SKILL.md is about 3.1k 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 Development, covering Project scaffolding. It works with TypeScript, npm, Vite and React. The repository describes itself as: Official AI skills for PixiJS. These skills teach AI coding agents how to correctly use PixiJS. The licence is MIT.

When your agent uses it

  • Scaffolding a new PixiJS v8 project with the create-pixi CLI
  • Adding PixiJS to an existing project
  • : create pixi.js
  • Npm install pixi.js

Example prompts

  • “/pixijs-create”

Requirements

  • Node.js

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Project name (defaults to pixi-project).
  2. Framework / template category.
  3. Variant (TypeScript vs JavaScript where applicable).
  4. Whether to install dependencies immediately (some runners).

What it can do on your machine

Read from SKILL.md and the folder at commit 83760c6. 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

    Shell commands in SKILL.md call:

    • npm
    • yarn
    • pnpm
    • bun

    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
    • github.com
    • pixijs.io

    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 Create loads about 3.1k tokens when it runs. Until then it costs about 235 tokens; SKILL.md has 1,201 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~235
When it runs · the whole SKILL.md, loaded when a task matches
~3.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 pixijs/pixijs-skills at commit 83760c6, republished under its MIT licence (© pixijs). 1,201 words, ~3,077 tokens.

Download SKILL.mdSave it as .claude/skills/pixijs-create/SKILL.md (or your agent's skills folder).
name
pixijs-create
description
Use this skill when scaffolding a new PixiJS v8 project with the create-pixi CLI or adding PixiJS to an existing project. Covers npm/yarn/pnpm/bun create commands, interactive vs non-interactive flows, bundler vs creation template categories, available template presets (bundler-vite, bundler-webpack, bundler-esbuild, bundler-import-map, creation-web, framework-react, extension-default), Node version requirements, `npm install pixi.js` for existing projects, TypeScript 5/6/7 tsconfig setup (moduleResolution, @webgpu/types, @types/web), post-scaffold dev flow, and the Vite top-level-await production-build gotcha. Triggers on: create pixi.js, npm create, npm install pixi.js, scaffold, template, bundler-vite, bundler-webpack, creation-web, framework-react, new project, existing project, getting started, quick start, TypeScript, tsconfig, moduleResolution, @webgpu/types, @types/web, Cannot find name GPUTextureUsage.
license
MIT

create pixi.js is the official CLI for scaffolding a new PixiJS v8 project. Run it with any package manager (npm, yarn, pnpm, bun) and pick a template from the interactive menu, or pass --template to skip prompts. It writes a self-contained project folder; you then cd in, install dependencies, and run the dev script.

Quick Start

Scaffold a new project with interactive prompts:

bash
npm create pixi.js@latest

Or skip prompts by passing a project name and template:

bash
npm create pixi.js@latest my-game -- --template bundler-vite

Then:

bash
cd my-game
npm install
npm run dev

Requires Node.js 18+ or 20+. Some templates (notably creation-web and framework-react) may require a newer Node version; the package manager will warn if so.

Adding PixiJS to an existing project

If you already have a bundler, framework, or project set up, skip the CLI and install the package directly:

bash
npm install pixi.js

Then import from pixi.js and construct an Application as shown in pixijs-application. The CLI templates are a convenience for new projects; they don't add anything to the library that npm install pixi.js can't give you.

Related skills: pixijs-application (how the scaffolded new Application() + app.init() entry point works), pixijs-core-concepts (renderers and the render loop), pixijs-scene-core-concepts (scene graph fundamentals for the first things you'll add to the stage), pixijs-assets (loading textures, fonts, and bundles the template expects you to drop into public/ or src/assets/).

Core Patterns

Choose a package manager

The command is the same shape for every package manager:

bash
npm create pixi.js@latest
yarn create pixi.js
pnpm create pixi.js
bun create pixi.js

Under npm 7+ you must pass a -- before CLI flags so npm doesn't consume them:

bash
npm create pixi.js@latest my-game -- --template bundler-vite

Yarn, pnpm, and bun don't need the extra separator:

bash
yarn create pixi.js my-game --template bundler-vite
pnpm create pixi.js my-game --template bundler-vite
bun create pixi.js my-game --template bundler-vite

Use . as the project name to scaffold into the current directory.

Interactive flow

Running with no arguments walks through prompts:

  1. Project name (defaults to pixi-project).
  2. Framework / template category.
  3. Variant (TypeScript vs JavaScript where applicable).
  4. Whether to install dependencies immediately (some runners).

At the end, the CLI prints the cd + install + dev commands for the manager you invoked it with.

Non-interactive flow

Pass a project name and --template to skip all prompts. This is the form you want for scripts, CI, and quickstart docs:

bash
npm create pixi.js@latest my-game -- --template bundler-vite
Available template presets

Templates fall into two categories:

  • Bundler templates (bundler-*): generic PixiJS setup wired up with your bundler of choice. Use one of these when you want to pick your own structure.
  • Creation templates (creation-*): platform-tailored starters with extras already wired in (AssetPack, sound, UI, scene routing). Use one of these when you want batteries included.
  • Framework templates (framework-*): PixiJS embedded inside a host framework like React.
  • Extension templates (extension-*): scaffolding for building a reusable PixiJS package.

For most new projects, bundler-vite is the recommended starting point.

TemplateWhat you get
bundler-viteVite + TypeScript PixiJS project. The default first-stop template.
bundler-vite-jsVite + plain JavaScript.
bundler-webpackWebpack + TypeScript.
bundler-webpack-jsWebpack + plain JavaScript.
bundler-esbuildesbuild + TypeScript.
bundler-esbuild-jsesbuild + plain JavaScript.
bundler-import-mapNo-bundler setup using a browser import map (good for learning / demos).
creation-webPixiJS Creation Engine web template with scene-based game scaffolding, AssetPack, sound, and UI integration.
framework-reactReact + TypeScript + PixiJS via the @pixi/react package.
framework-react-jsReact + plain JavaScript + PixiJS.
extension-defaultStarter for building a reusable PixiJS extension/package.

The live list is maintained in the create-pixi repo; run npm create pixi.js@latest without arguments to see the current menu if you need to confirm.

Post-scaffold flow

Every template ships with the same three-step onboarding:

bash
cd my-game
npm install
npm run dev

npm run dev starts the local dev server on the default port (Vite 5173, webpack 8080, etc.; the template's README has the exact number). Changes to src/ hot-reload without reloading the whole page.

Other scripts every template exposes (names may vary slightly by preset):

  • npm run build: produce a production build in dist/.
  • npm run preview / npm run serve: serve the production build locally.
  • npm run lint: run the template's configured linter if it ships one.
Scaffolding into an existing directory

Use . as the project name to write into the current working directory. The CLI refuses to run if non-empty and conflicting files exist unless you confirm the prompt.

bash
mkdir my-game
cd my-game
npm create pixi.js@latest . -- --template bundler-vite
TypeScript setup

PixiJS supports WebGPU, so its type declarations depend on the WebGPU types. Where those come from depends on your TypeScript version.

  • TypeScript 5: no WebGPU types are built in, so PixiJS adds @webgpu/types for you. No additional setup required.
  • TypeScript 6 and 7: the WebGPU types are built into the "dom" library, but some releases leave parts out, such as GPUTextureUsage. Use @types/web, which has the full set, in place of "dom". Remove @webgpu/types from types if it's there, since it conflicts with the built-in types.
bash
npm install --save-dev @types/web
json
{
  "compilerOptions": {
    "lib": ["esnext"],
    "types": ["@types/web"]
  }
}
Show full SKILL.md (470 more words)Show less

Next steps

After npm run dev starts, the template opens on a blank or bunny-sprite scene. The usual progression is:

  1. Read pixijs-application to understand how the template's entry point constructs new Application() and calls await app.init(...), how app.stage / app.renderer / app.canvas hang together, and how the ResizePlugin and TickerPlugin behave by default.
  2. Read pixijs-core-concepts for the renderer and render-loop mental model.
  3. Read pixijs-scene-core-concepts before adding your first non-trivial scene so you know the container-vs-leaf rule upfront.
  4. Drop in textures via pixijs-assets once you're ready to load real art.

Common Mistakes

[HIGH] Missing -- separator on npm 7+

Wrong:

bash
npm create pixi.js@latest my-game --template bundler-vite

Correct:

bash
npm create pixi.js@latest my-game -- --template bundler-vite

npm 7+ consumes flags after the package spec unless you pass -- to forward them. Without the separator, the CLI ignores --template and drops back to the interactive prompt. Yarn, pnpm, and bun don't need the separator.

[MEDIUM] Running with an old Node version

PixiJS requires Node 18+ or 20+. Some templates (framework-react, creation-web) expect a newer Node for their tooling. Upgrade Node before re-running the CLI if you see an "engines" warning from your package manager.

[MEDIUM] Top-level await app.init() broken in Vite production builds

On Vite versions <=6.0.6, top-level await works in dev but breaks in production builds, so a bundler-vite project that does this at module scope will fail after npm run build:

ts
const app = new Application();
await app.init({ resizeTo: window }); // broken at module top level in prod

Wrap the init in an async IIFE instead:

ts
(async () => {
  const app = new Application();
  await app.init({ resizeTo: window });
  document.body.appendChild(app.canvas);
})();

Upgrading Vite past 6.0.6 also resolves it, but the IIFE pattern is safe on every version and matches the PixiJS quick-start guide.

[HIGH] Keeping @webgpu/types in types on TypeScript 6 or 7

Wrong:

json
{
  "compilerOptions": {
    "types": ["@webgpu/types"]
  }
}

Correct: remove the "@webgpu/types" entry and keep any others.

TypeScript 6 and 7 declare the WebGPU types in their built-in "dom" library, so @webgpu/types declares them a second time. With skipLibCheck: false that produces dozens of conflicting-declaration errors inside lib.dom.d.ts and @webgpu/types. Keep it on TypeScript 5 only, where PixiJS loads it for you anyway.

[MEDIUM] Cannot find name 'GPUTextureUsage' on TypeScript 6 or 7

Up to TypeScript 6.0.3 and 7.0.2, the built-in "dom" library has no WebGPU flag constants (GPUBufferUsage, GPUColorWrite, GPUMapMode, GPUShaderStage, GPUTextureUsage), so raw WebGPU code that uses them fails with TS2552. Adding @webgpu/types back only compiles with skipLibCheck: true, because it conflicts with the built-in types. Install @types/web 0.0.352 or later, drop "dom" from lib, and add "@types/web" to types alongside any existing entries, as shown in TypeScript setup.

[MEDIUM] moduleResolution: "node" breaks subpath imports

Wrong:

json
{
  "compilerOptions": {
    "moduleResolution": "node"
  }
}

Correct:

json
{
  "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "bundler"
  }
}

"node" (also called "node10") ignores the exports field in the PixiJS package.json, so import 'pixi.js/advanced-blend-modes' and other subpath imports don't resolve. TypeScript 6 reports TS2882 for them and deprecates the setting (TS5107); TypeScript 7 removes it (TS5108). Use "bundler" if you use a bundler, or "nodenext" otherwise.

API Reference

© pixijs, 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 skills/pixijs-create of pixijs/pixijs-skills.

Open the folder on GitHubat commit 83760c6

Compare with similar skills

Pixijs Create 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 Create compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Pixijs Create this skillpixijs/pixijs-skills348—~3.1kAutomated safety check: PassMIT
Pixijs Createnetaart/cohub571—~2.4kAutomated safety check: PassMIT
Upgrade Starter Kitworkadventure/map-starter-kit156—~1.3kAutomated safety check: NotesCustom licence
Dev Serverlablup/backend.ai-webui133—~7.5kAutomated safety check: NotesLGPL-3.0
Fe Tools Template RecommenderMichealWayne/fe-tools207—~1kAutomated safety check: PassNone
Update Depsviclafouch/meme-studio110—~2.6kAutomated safety check: PassNone

Similar skills

  • Pixijs Create

    netaart/cohub

    A skill your agent uses when scaffolding a new PixiJS v8 project with the create-pixi CLI or adding PixiJS to an existing project.

    571 GitHub stars~2.4k tokensUpdated today
    DevelopmentAuto-check passed
  • Upgrade Starter Kit

    workadventure/map-starter-kit

    Upgrade a WorkAdventure map repository to the latest version of the map-starter-kit (github.com/workadventure/map-starter-kit) - refreshes package.json dependencies, vite/tsconfig/build config, CI…

    156 GitHub stars~1.3k tokensUpdated 7 days ago
    DevelopmentAuto-check: notes
  • Dev Server

    lablup/backend.ai-webui

    Start the project's development server (pnpm dev for backend.ai-webui; discovered from README/package.json elsewhere), deriving the header color, app name, default backend endpoint and login…

    133 GitHub stars~7.5k tokensUpdated today
    DevelopmentAuto-check: notes
  • Fe Tools Template Recommender

    MichealWayne/fe-tools

    Recommend the most suitable project template or initialization path from fe-tools project-templates based on product, framework, runtime, and delivery constraints.

    207 GitHub stars~1k tokensUpdated 1 mo ago
    DevelopmentAuto-check passed
  • Update Deps

    viclafouch/meme-studio

    Audit all outdated dependencies with detailed research on changelogs, breaking changes, bug fixes, and deprecations.

    110 GitHub stars~2.6k tokensUpdated 6 mo ago
    DevelopmentAuto-check passed
  • Lovable Cleanup

    sickn33/agentic-awesome-skills

    Audits and strips Lovable scaffolding from Vite + React projects — removes lovable-tagger, swaps placeholder assets, prunes unused Radix deps, cleans generated docs, and neutralizes stale…

    47k GitHub starsUsed in 1 repo~3.7k tokens
    DevelopmentAuto-check: notes

More from pixijs/pixijs-skills

  • Pixijs Application

    pixijs/pixijs-skills

    A skill your agent uses when creating and configuring a PixiJS v8 Application.

    348 GitHub starsUsed in 1 repo~2.9k tokens
    Auto-check passed
  • Pixijs Core Concepts

    pixijs/pixijs-skills

    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.

    348 GitHub stars~1.9k tokensUpdated 7 days ago
    Auto-check passed
  • Pixijs Performance

    pixijs/pixijs-skills

    A skill your agent uses when profiling or optimizing a PixiJS v8 app for FPS, draw calls, or GPU memory.

    348 GitHub stars~4.6k tokensUpdated 7 days ago
    Auto-check passed

Categories

Questions about Pixijs Create

What does Pixijs Create do?

A skill your agent uses when scaffolding a new PixiJS v8 project with the create-pixi CLI or adding PixiJS to an existing project. Pixijs Create is an agent skill from pixijs/pixijs-skills. Use this skill when scaffolding a new PixiJS v8 project with the create-pixi CLI or adding PixiJS to an existing project.

When should I use Pixijs Create?

Pixijs Create fits situations like: scaffolding a new PixiJS v8 project with the create-pixi CLI; adding PixiJS to an existing project; : create pixi.js; npm install pixi.js.

How do I install Pixijs Create in Claude Code?

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

How do I install Pixijs Create in Codex?

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

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

What does Pixijs Create need to run?

Going by SKILL.md and its folder, Pixijs Create needs the command-line tools its instructions call (npm, yarn, pnpm and bun). Our summary lists: Node.js.

Does Pixijs Create access the network?

SKILL.md names 3 domains. As links in the text: pixijs.download, github.com and pixijs.io. This is read from the text; nothing was executed.

Is Pixijs Create 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 Create use?

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

About 3.1k tokens (SKILL.md is roughly 12k 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 Create?

Skills that share tags, products or a category with Pixijs Create: Pixijs Create (netaart/cohub, 571 stars), Upgrade Starter Kit (workadventure/map-starter-kit, 156 stars), Dev Server (lablup/backend.ai-webui, 133 stars) and Fe Tools Template Recommender (MichealWayne/fe-tools, 207 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Pixijs Create?

pixijs (a GitHub organization) maintains it in pixijs/pixijs-skills, which has 348 GitHub stars. The repository holds 4 skills in this directory. The repository was last updated on October 1, 2026.

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