Claude MarketplacesSubmit
pixijs avatar

Pixijs Scene Dom Container

pixijs/pixijs-skills

Overlays HTML elements on a PixiJS v8 canvas and syncs their position, rotation, scale, and opacity with the scene graph via CSS transforms. You'll reach for this when you need native inputs, iframes, or rich HTML that follows display objects around the canvas. It's marked experimental, so the API may shift between minor versions. The main gotcha is that it's a leaf container, so you can't nest PixiJS children inside it, only DOM content. Filters and blend modes don't work either since the elements live outside the WebGL pipeline. Use CSS for those effects. Custom builds need the pixi.js/dom side effect import to register the DOMPipe, though the default browser bundle handles it automatically.

skills.sh installs
6.7K
GitHub stars
365
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add pixijs/pixijs-skills --skill pixijs-scene-dom-container --agent claude-code

Installs into .claude/skills of the current project.

Files

Overlays HTML elements on a PixiJS v8 canvas and syncs their position, rotation, scale, and opacity with the scene graph via CSS transforms. You'll reach for this when you need native inputs, iframes, or rich HTML that follows display objects around the canvas. It's marked experimental, so the API may shift between minor versions. The main gotcha is that it's a leaf container, so you can't nest PixiJS children inside it, only DOM content. Filters and blend modes don't work either since the elements live outside the WebGL pipeline. Use CSS for those effects. Custom builds need the pixi.js/dom side effect import to register the DOMPipe, though the default browser bundle handles it automatically.

Browse the repository on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/pixijs/pixijs-skills
Categories
Frontend Development, Game Development
First seen
May 16, 2026

More from pixijs/pixijs-skills

All 26

Recommended

More Frontend Development
1jeffallan avatarnextjs-developerjeffallan/claude-skillsUse when building Next.js 14+ applications with App Router, server components, or server actions. Invoke to configure route handlers, implement middleware, set 6Kskills.sh installs
2affaan-m avatarreact-patternsaffaan-m/eccReact 18/19 patterns including hooks discipline, server/client component boundaries, Suspense + error boundaries, form actions, data fetching, state management 5.9Kskills.sh installs
3affaan-m avatarreact-testingaffaan-m/eccReact component testing with React Testing Library, Vitest/Jest, MSW for network mocking, accessibility assertions with axe, and the decision boundary between c5.8Kskills.sh installs
4affaan-m avatarfrontend-a11yaffaan-m/eccAccessibility patterns for React and Next.js — semantic HTML, ARIA attributes, form labeling, keyboard navigation, focus management, and screen reader support. 5.8Kskills.sh installs
5jeffallan avatarreact-expertjeffallan/claude-skillsUse when building React 18+ applications in .jsx or .tsx files, Next.js App Router projects, or create-react-app setups. Creates components, implements custom h5.8Kskills.sh installs
6lobehub avatarreactlobehub/lobehubLobeHub React component conventions. Use when editing TSX UI, choosing base-ui vs @lobehub/ui vs antd, styling with antd-style, component boundaries, local stat5.7Kskills.sh installs