技能介绍

它解决什么问题

在 PIXI.js 这类引擎上开发可视化组件时，最大的坑不是 API 不会用，而是"以为自己用了引擎，其实没有"。最常见的翻车点是：先用原生 Canvas2D 把整个画面画到离屏 canvas 上，再通过 PIXI.Texture.from() 贴到一个 Sprite 上——运行时看起来没问题，但根本没走 PIXI 的渲染管线，性能与自适应行为都不可控。

另一个问题是规范散落在文档里：manifest 字段、控件类型必填项、11 个标准 API、事件挂接方式，靠人记忆很容易遗漏，等到交付才发现少声明了 dependencies 或漏写某个 Setter。

它如何工作

这个 Skill 把规范知识、骨架模板和自检脚本打包，让 AI 按固定流程产出组件：

加载内置规范：references/spec.md 定义包结构与字段规则，references/advanced.md 提供列表、表格、可视化编辑器、组件绑定等高级特性的真实可抄示例。
复制骨架并填充：把 template/ 下的 manifest.json 与 component.js 复制到组件目录，按需求填写 properties[]（label、type、defaultValue、functionName 等）与事件声明。
静态自检：运行 check_component.py 审核完整性，拦截 Canvas2D 离屏画布贴图这类"伪 PIXI"写法、未初始化的框架属性、缺失的标准 API 等 ERROR 级问题。
真实浏览器验证：脚本生成自包含的 test.html（自动复制引擎库与依赖脚本），再用真实 Chrome 打开页面，通过 CDP 捕获运行时错误，确认组件能在 PIXI v8 下实例化、调用全部 Setter 并完成渲染。

适用边界

锁定 PIXI.js v8，内置 pixi.min.js（v8.18.1）。它只负责产出 manifest.json + component.js，美术资源与第三方库需按 advanced.md 的约定自行登记。
静态检查基于正则匹配，能拦住典型的"伪 PIXI"写法，更复杂的运行时表现仍需以引擎内实际效果为准。
test.html 是自动化冒烟测试，不代表组件在所有墨香游戏场景下的最终表现。