Skill pixijs-scene-dom-container
Ce skill fait partie de la collection officielle de skills PixiJS publiée dans le repository pixijs/pixijs-skills, conçue pour enseigner aux agents IA l'utilisation correcte de PixiJS v8. Il couvre spécifiquement DOMContainer, la fonctionnalité expérimentale qui permet de superposer des éléments HTML natifs (inputs, iframes, vidéos, divs) directement au-dessus du canvas PixiJS en synchronisant leur position via des CSS transforms dérivées du scene graph.
Ce que documente ce skill
Le SKILL.md est entièrement rédigé et opérationnel — ce n'est pas un squelette. Il documente en détail : le Quick Start avec l'import pixi.js/dom, les options du constructeur (element, anchor), les patterns principaux (transforms, alpha, styling CSS, visibilité, cleanup), le fonctionnement du root container partagé (app.domContainerRoot), ainsi qu'une section Common Mistakes couvrant les erreurs fréquentes (import manquant dans les builds custom, usage incorrect de filters/masks sur un élément DOM, ajout d'enfants PixiJS dans un DOMContainer).
Utilisation par un agent
Ce skill se déclenche lorsque l'agent détecte des mentions de DOMContainer, pixi.js/dom, DOMPipe, overlay HTML sur canvas, ou gestion de pointer-events sur des éléments superposés. Il fournit des exemples de code TypeScript prêts à l'emploi et renvoie vers les skills connexes (pixijs-scene-core-concepts, pixijs-scene-container, pixijs-events, pixijs-accessibility).
Installation
Ce skill s'installe avec l'ensemble de la collection via npx skills add https://github.com/pixijs/pixijs-skills, ou individuellement en copiant le dossier skills/pixijs-scene-dom-container/ dans le répertoire de skills de votre agent (Claude Code, Cursor, Codex, Windsurf, etc.).