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.
The English summary is being prepared. Showing the original description.
Run score Not tested
See how to installReview the instructions the agent will receive before you install.
PixiJS 8.21 (v8 API only). Never guess an API: load the skill pixijs (it routes to the
right pixijs-* skill), then check the types in apps/game/node_modules/pixi.js/lib/**/*.d.ts.
v7 habits that do not exist anymore: new Application({...}) options (→ await app.init({...})),
app.view (→ app.canvas), Loader (→ Assets), beginFill/endFill (→ .rect().fill()),
new Text("hi", style) (→ new Text({ text, style })). Skill pixijs-migration-v8.
| File | Role |
|---|---|
src/main.ts | the only file that touches Pixi: app.init, Assets.load, sprites, app.ticker.add |
src/entity.ts | game state as readonly data + pure functions (moveEntity); Pixi math only (Rectangle) |
src/input.ts | keyboard → held keys → direction (KeyboardEvent.code: physical keys, WASD = ZQSD) |
src/assets/ | images, sounds: import url from "./assets/x.png" (hashed, works under any base path) |
tests/*.test.ts | Vitest on the pure functions (import … from "vite-plus/test") |
Collisions: walls are drawn with Graphics (rect().fill()) in main.ts; their hit boxes
are wall.getBounds().rectangle, passed to moveEntity, which tests hitBox(entity).intersects(wall)
one axis at a time (stops flush, slides along). Moving walls: read getBounds() again each frame.
The loop in main.ts, every frame: state = update(state, input, ticker.deltaMS), then copy
the state onto the sprites. New gameplay = a new pure function + its test, then one line in the
ticker. Speeds are in pixels per second, scaled by ticker.deltaMS (frame-rate independent).
tsconfig.base.json: strict, noUncheckedIndexedAccess (array[i] is T | undefined),
exactOptionalPropertyTypes, verbatimModuleSyntax (import type for types only).vite.config.ts): pedantic + type-aware. Parameters must be readonly types:
readonly T[], { readonly x: number }. Pixi's Application, Rectangle, Sprite, Text, Ticker
are allowed as parameters; another Pixi class as a parameter → add it to that allow list
with the reason, never disable the rule..ts (./entity.ts).await is fine in main.ts (Vite 8 targets browsers that support it).The Claude hook runs vp check --fix <file> and the game's unit tests after each edit.
Before "done": vp run ready. A visible change: also look at it (vp -C apps/game dev, or a
Playwright screenshot, skill e2e).
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
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.
The English summary is being prepared. Showing the original description.
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.
The English summary is being prepared. Showing the original description.
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.
The English summary is being prepared. Showing the original description.
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.
The English summary is being prepared. Showing the original description.
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.
The English summary is being prepared. Showing the original description.
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.
The English summary is being prepared. Showing the original description.