pixi-vn-ui 标准

Use when building game UI (menus, HUD, dialogue box, settings/save screens) on top of Pixi'VN with an external JS framework (React, Vue) or with plain PixiJS components — mounting HTML or PixiJS UI layers over the canvas, navigating between UI screens/routes, theming a shadcn/ui-based template, and connecting UI components to game storage/settings. Covers `canvas.htmlLayers.add`/`get`/`remove` and the PixiJS-only layer helpers `canvas.layers.add`/`get`/`remove`.

媒体通用 LGPL-2.1 151

在 GitHub 打开

安装方式

cp -r skills/ui ~/.claude/skills/ui

把该 skill 目录放进客户端 skills 目录。不同客户端的目录可能不同，Claude Code 默认是 ~/.claude/skills/

整仓一次性获取：git clone --depth 1 https://github.com/DRincs-Productions/pixi-vn.git

依赖与权限

无需 API Key
需要联网访问外部服务
依赖外部命令：npm npx go
以上为按正文与 frontmatter 自动推断的信号，仅供参考；安装前建议先阅读原文。

触发场景

building game UI (menusHUDdialogue box

摘要与原文

本站未内联该 skill 的正文（许可不在允许再分发的白名单内，或作者未声明许可）。下面是本站撰写的摘要，完整内容请查看原文。

Use when building game UI (menus, HUD, dialogue box, settings/save screens) on top of Pixi'VN with an external JS framework (React, Vue) or with plain PixiJS components — mounting HTML or PixiJS UI layers over the canvas, navigating between UI screens/routes, theming a shadcn/ui-based template, and connecting UI components to game storage/settings. Covers `canvas.htmlLayers.add`/`get`/`remove` and the PixiJS-only layer helpers `canvas.layers.add`/`get`/`remove`.

查看原文（GitHub）

质量与来源

所属仓库: DRincs-Productions/pixi-vn
仓库星标: 151
最近更新: 12 天前
采集时间: 今天
commit: 01c19cb44b4f
内容指纹: sha256:86a3882b83d9530
文件路径: skills/ui/SKILL.md

同仓库其它 Skill

查看全部 13 个

Use when adding, organizing, registering, or loading non-code files (images, audio, video) in a Pixi'VN project — local assets processed by PixiJS AssetPack vs. online/remote-hosted assets, the AssetsManifest/bundle/alias system, where to edit the manifest for each case, and when to load bundles (at startup, in the background, per-label, per-route). Load this before writing any code that references an image/sound/video path directly, or before adding entries to a manifest.

DRincs-Productions/pixi-vn 151 原文

Use when adding, moving, or removing images, sprites, text, or video on the Pixi'VN game canvas, or when applying or creating transitions (dissolve, fade, move, zoom, push, wipe, iris, split, flash, blur, pixelate, or a custom one built on `canvas.animate`/`filters.animate`), shake/animation effects, or ticker-based animations built on PixiJS. Covers the `canvas` singleton exported from `@drincs/pixi-vn`. For UI layers (HTML or PixiJS) mounted on top of the canvas, see `pixi-vn-ui` instead.

DRincs-Productions/pixi-vn 151 原文

pixi-vn-characters

Use when defining visual novel characters for a @drincs/pixi-vn game — creating a character with a name, color, icon and other props, registering it so it can be looked up by id, and referencing it from dialogue/narration. Load this before writing any `CharacterBaseModel` or `RegisteredCharacters` code.

DRincs-Productions/pixi-vn 151 原文

pixi-vn-getting-started

Use when setting up a new or existing project on @drincs/pixi-vn, wiring the main.ts entry point, or calling the top-level Game API (Game.init, Game.start, Game.onEnd, Game.addOnError, Game.onNavigate, Game.clear) — this is the entry point every Pixi'VN project needs before touching canvas, narration, sound, storage, or history.

DRincs-Productions/pixi-vn 151 原文

pixi-vn-history

Use when implementing "go back" / "rewind" / step-navigation features in a Pixi'VN game, or when you need to read the player-facing dialogue/choice history (e.g. for a backlog or "history log" UI) — covers the History module's `stepHistory` API and the "step" vs "paragraph" goBackMode.

DRincs-Productions/pixi-vn 151 原文

pixi-vn-migration

Use when upgrading an existing @drincs/pixi-vn project to a newer version, or when a runtime/type error matches a known breaking change. Covers every breaking change between versions with before/after code.

DRincs-Productions/pixi-vn 151 原文

相似 Skill

更多「媒体」

Universal release workflow. Auto-detects version files and changelogs. Supports Node.js, Python, Rust, Claude Plugin, GitHub Releases, annotated tags, historical release backfill, and generic projects. Use when user says "release", "发布", "new version", "bump version", "push", "推送", "release notes", "GitHub Release", or "回填 Release".

精选 JimLiu/baoyu-skills 2.7 万原文

Claude CodeCodex CLI

baoyu-article-illustrator

Analyzes article structure, identifies positions requiring visual aids, generates illustrations with Type × Style × Palette three-dimension approach. Use when user asks to "illustrate article", "add images", "generate images for article", or "为文章配图".

精选 JimLiu/baoyu-skills 2.7 万原文

Claude CodeCodex CLI

Knowledge comic creator supporting multiple art styles and tones. Creates original educational comics with detailed panel layouts and batch-capable image generation. Use when user asks to create "知识漫画", "教育漫画", "biography comic", "tutorial comic", or "Logicomix-style comic".

精选 JimLiu/baoyu-skills 2.7 万原文

Claude CodeCodex CLI

baoyu-compress-image

Compresses images to WebP (default) or PNG with automatic tool selection. Use when user asks to "compress image", "optimize image", "convert to webp", or reduce image file size.

精选 JimLiu/baoyu-skills 2.7 万原文

Claude CodeCodex CLI

baoyu-cover-image

Generates article cover images with 5 dimensions (type, palette, rendering, text, mood) combining 11 color palettes and 7 rendering styles. Supports cinematic (2.35:1), widescreen (16:9), and square (1:1) aspects. Use when user asks to "generate cover image", "create article cover", or "make cover".

精选 JimLiu/baoyu-skills 2.7 万原文

Claude CodeCodex CLI

baoyu-danger-gemini-web

Generates images and text via reverse-engineered Gemini Web API. Supports text generation, image generation from prompts, reference images for vision input, and multi-turn conversations. Use when other skills need image generation backend, or when user requests "generate image with Gemini", "Gemini text generation", or needs vision-capable AI generation.

精选 JimLiu/baoyu-skills 2.7 万原文

Claude CodeCodex CLI