跳到正文
cccskills
免费在 GitHub 公开

pixijs

Use this skill first for ANY PixiJS v8 task; it routes to the right specialized skill for the job. Covers the full PixiJS surface: Application setup, the scene graph (Container, Sprite, Graphics, Text, Mesh, ParticleContainer, DOMContainer, GifSprite), rendering (WebGL/WebGPU/Canvas, render loop, custom shaders, filters, blend modes), assets, events, color, math, ticker, accessibility, performance, environments, migration from v7, and project scaffolding. Triggers on: pixi, pixi.js, pixijs, PixiJS, v8, Application, app.init, Sprite, Container, Graphics, Text, Mesh, ParticleContainer, DOMContainer, GifSprite, Assets, Ticker, renderer, WebGL, WebGPU, scene graph, filter, shader, blend mode, texture, BitmapText, create-pixi, how do I draw, how do I render, how do I animate in pixi.

中文简介正在准备中。当前显示原文说明。

ltruchot/seed-pixi-typescript星标 35(GitHub 35 + cccskills 0)

实测评分 未实测

查看安装方法

包含的文件(2)

  • SKILL.md7.1 KB
  • references/index.md13.2 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Entry point for the PixiJS v8 skill collection. PixiJS is the fastest library available for the web, working across all devices and allowing you to create rich, interactive graphics and cross-platform applications using WebGL, WebGPU, and Canvas as a fallback.

How to use this skill

  1. Find the specialized skill in the router below that best matches the task.
  2. Load that skill's SKILL.md and follow its guidance.
  3. If no sub-skill fits (the task references a specific class, function, option, or API surface not listed below), WebFetch https://pixijs.download/release/docs/llms.txt. That file is the auto-generated, always-current index of the full PixiJS API and guides. Each entry links to a .html.md page you can WebFetch for the detailed content.

For the long-form description and trigger keywords of every skill, see references/index.md.

Skill router

Foundations

SkillLoad when...
pixijs-applicationCreating or configuring a PixiJS Application, calling app.init(), accessing app.stage/renderer/canvas/screen, resize/ticker plugins, app.destroy().
pixijs-core-conceptsUnderstanding the renderer pipeline, choosing WebGL/WebGPU/Canvas, render loop internals, systems and pipes, renderer loader extensions, rendering into a RenderTexture/RenderTarget (flipY, mipLevel, bind/push/pop, depth), WebGL context loss and WebGPU device loss.
pixijs-createScaffolding a new project with the create-pixi CLI (bundler-vite, creation-web, framework-react templates), adding PixiJS to an existing project, or setting up tsconfig.json for TypeScript 5, 6, or 7 (moduleResolution, @webgpu/types, @types/web).
pixijs-environmentsRunning PixiJS in Web Workers, Node/SSR, or strict-CSP contexts (DOMAdapter, WebWorkerAdapter, pixi.js/unsafe-eval).
pixijs-migration-v8Upgrading from v7 to v8 or fixing v7 patterns (beginFill/endFill, @pixi/* packages, BaseTexture, DisplayObject).
pixijs-scene-core-conceptsUnderstanding the scene graph as a whole: containers vs leaves, transforms, render order, masking, RenderLayer.

Scene Objects

SkillLoad when...
pixijs-scene-containerWorking with Container: addChild/removeChild, transforms, zIndex, bounds, toGlobal/toLocal, destroy.
pixijs-scene-spriteDrawing images: Sprite, AnimatedSprite, NineSliceSprite, TilingSprite.
pixijs-scene-graphicsDrawing vector shapes or paths: Graphics, GraphicsContext, fill/stroke, FillGradient, FillPattern, textureSpace, texture and pattern fills, SVG import (svg(), gradients).
pixijs-scene-textRendering text: Text, BitmapText, HTMLText, SplitText, TextStyle.
pixijs-scene-meshCustom geometry: Mesh, MeshSimple, MeshPlane, MeshRope, PerspectiveMesh.
pixijs-scene-particle-containerRendering thousands of lightweight sprites: ParticleContainer, Particle, dynamicProperties.
pixijs-scene-dom-containerOverlaying HTML elements on the canvas: DOMContainer, pixi.js/dom.
pixijs-scene-gifDisplaying animated GIFs: GifSprite, GifSource, pixi.js/gif.
pixijs-html-sourceRendering live HTML/DOM elements or snapshots as textures (experimental, needs a browser that supports the HTML-in-Canvas spec): HTMLSource, ElementImageSource, pixi.js/html-source, requestPaint.

Utilities

SkillLoad when...
pixijs-assetsLoading resources: Assets.init, Assets.load, bundles, manifests, spritesheets, caching.
pixijs-colorCreating or converting colors: Color class, hex/rgb/hsl, tint, premultiply.
pixijs-eventsHandling pointer/mouse/touch/wheel input: eventMode, FederatedEvent, hitArea, cursor, drag.
pixijs-mathPoints, vectors, matrices, shapes, hit testing: Point, Matrix, Rectangle, Polygon, Triangle, strokeContains, containsRect, Matrix.decompose (mirrored matrices), toGlobal/toLocal.
pixijs-tickerPer-frame logic or controlling the render loop: Ticker, deltaTime, UPDATE_PRIORITY, maxFPS.

Advanced

SkillLoad when...
pixijs-accessibilityScreen reader or keyboard navigation: AccessibilitySystem, accessibleTitle, tabIndex.
pixijs-blend-modesCompositing with blend modes: add, multiply, screen, overlay, pixi.js/advanced-blend-modes.
pixijs-custom-renderingWriting custom shaders, uniforms, or batchers: Shader.from, GlProgram/GpuProgram, UniformGroup, custom Filter, WGSL override constants, gpuLayout, TextureView, Buffer.update, TexturePool, render bundles, custom pipes.
pixijs-filtersApplying visual effects: BlurFilter, ColorMatrixFilter, DisplacementFilter, Filter.from, pixi-filters.
pixijs-performanceProfiling or optimizing FPS, draw calls, GPU memory: culling, GCSystem, cacheAsTexture, object pooling, transient MSAA render textures, render bundles, filter texture sizing.

Fallback: canonical PixiJS docs

If the task references a class, function, option, or API surface not covered by any sub-skill above, WebFetch https://pixijs.download/release/docs/llms.txt. It's the auto-generated index of the full PixiJS API and guides, regenerated on every release. Each entry links to a .html.md page you can WebFetch for the detailed content. Use this fallback whenever the router table doesn't point at an obvious match.

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

add-game

免费

Add a second game to the monorepo (apps/<game>) from the seed game, wired to the gate. Load when asked to create a new game / app / prototype in this repo.

中文简介正在准备中。当前显示原文说明。

ltruchot/seed-pixi-typescript352026年9月24日 更新

e2e

免费

End-to-end tests of a game with Playwright (apps/*/e2e/*.e2e.ts) on a WebGL canvas, and taking screenshots of the running game. Load before writing or debugging an e2e test, or to look at the game in a browser.

中文简介正在准备中。当前显示原文说明。

ltruchot/seed-pixi-typescript352026年9月24日 更新

game

免费

How a game of this seed is organized (apps/<game>/src) and how to add gameplay with PixiJS v8 without breaking the strict gate. Load before editing apps/*/src or apps/*/tests.

中文简介正在准备中。当前显示原文说明。

ltruchot/seed-pixi-typescript352026年9月24日 更新

Use this skill when adding screen reader and keyboard navigation to PixiJS v8 apps. Covers AccessibilitySystem options (enabledByDefault, debug, activateOnTab, deactivateOnMouseMove), per-container accessibility properties, shadow DOM overlay, mobile touch-hook activation. Triggers on: accessibility, a11y, screen reader, ARIA, keyboard navigation, tab order, AccessibilitySystem, accessibleTitle, accessibleHint, tabIndex, accessibleChildren.

中文简介正在准备中。当前显示原文说明。

ltruchot/seed-pixi-typescript352026年9月24日 更新

Use this skill when creating and configuring a PixiJS v8 Application. Covers new Application() + async app.init() options (width, height, background, antialias, resolution, autoDensity, preference, resizeTo, autoStart, sharedTicker, canvas, useBackBuffer, powerPreference, eventFeatures, accessibilityOptions, gcActive, bezierSmoothness, webgl/webgpu/canvasOptions per-renderer overrides), app.stage/renderer/canvas/screen/domContainerRoot access, ResizePlugin, TickerPlugin, CullerPlugin (cullable, cullArea), custom ApplicationPlugin via ExtensionType.Application, start/stop lifecycle, and app.destroy() with releaseGlobalResources. Triggers on: Application, app.init, app.stage, app.renderer, app.canvas, app.screen, app.domContainerRoot, ApplicationOptions, ApplicationPlugin, ExtensionType.Application, resizeTo, sharedTicker, skipExtensionImports, preferWebGLVersion, preserveDrawingBuffer, cullable, CullerPlugin, app.start, app.stop, app.destroy, releaseGlobalResources.

中文简介正在准备中。当前显示原文说明。

ltruchot/seed-pixi-typescript352026年9月24日 更新

Use this skill when loading and managing resources in PixiJS v8. Covers Assets.init, Assets.load/add/unload, bundles, manifests, background loading, onProgress, caching, spritesheets, video textures, web fonts, bitmap fonts, animated GIFs, compressed textures, SVG as texture or Graphics, resolution detection, per-asset data options, and forcing a specific loader with the parser field (for extension-less URLs). Triggers on: Assets, Assets.load, Assets.init, loadBundle, manifest, backgroundLoad, Spritesheet, Cache, LoadOptions, unload, parser, loadParser, loadWebFont, loadBitmapFont, loadVideoTextures, GifSource, VideoSourceOptions.

中文简介正在准备中。当前显示原文说明。

ltruchot/seed-pixi-typescript352026年9月24日 更新

查看 ltruchot 的全部技能

报告此技能的问题