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日 更新
無料GitHub で公開
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-typescriptスター 35(GitHub 35 + cccskills 0)
実行スコア 未検証
インストール方法を見る含まれるファイル（1）
- SKILL.md3.0 KB
SKILL.md（原文）
インストールする前に、エージェントに与えられる指示の中身を確認できます。
A game here
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.
Layout: logic apart from rendering
| 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).
Strictness you will meet
tsconfig.base.json:strict,noUncheckedIndexedAccess(array[i]isT | undefined),exactOptionalPropertyTypes,verbatimModuleSyntax(import typefor types only).- Lint (root
vite.config.ts): pedantic + type-aware. Parameters must be readonly types:readonly T[],{ readonly x: number }. Pixi'sApplication,Rectangle,Sprite,Text,Tickerare allowed as parameters; another Pixi class as a parameter → add it to thatallowlist with the reason, never disable the rule. - Imports end in
.ts(./entity.ts). - Top-level
awaitis fine inmain.ts(Vite 8 targets browsers that support it).
Checks
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).
レビュー
まだレビューはありません。使ってみた感想をお寄せください。
コメント
ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。
まだコメントはありません。最初のコメントを書いてみませんか。
同じリポジトリのスキル
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日 更新
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-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日 更新