playcanvas

via GitHub · Posted Aug 22, 2026 · 1 min read

Skills

playcanvas/skills

Claude Skill

Reusable skills for AI coding agents working with PlayCanvas products

8Stars

0Open issues

JavaScript MIT Updated 1 day ago

#agent-skills #ai-agents #claude #claude-code

View on GitHub developer.playcanvas.com/

At a glance

Covers Coding 8 Design 3 Code Review & Testing 1

0 comments

README

PlayCanvas Skills

Portable skills that help AI coding agents build and verify polished applications with playcanvas, @playcanvas/react, and @playcanvas/web-components.

Install

Add the skills to your project with the Agent Skills installer:

npx skills add playcanvas/skills

Use --all to install every skill into all detected agents or -g for a user-level installation. Start a new conversation after installing or updating so the agent discovers the new skill metadata.

Choose one installation route for each agent. Installing both Agent Skills and a native plugin for the same agent exposes duplicate skills.

Native plugins

claude plugin marketplace add playcanvas/skills
claude plugin install engine@playcanvas

In the desktop app's Code tab, installed plugins are available under + → Plugins.

codex plugin marketplace add playcanvas/skills
codex plugin add engine@playcanvas

The Codex app uses the same marketplace and plugin installation.

For a single CLI session, load the plugin directly from a checkout:

cursor-agent --plugin-dir .

For a persistent installation, add this repository as a plugin marketplace in Cursor or link the repository root into ~/.cursor/plugins/local/engine. Teams and Enterprise organizations can publish the same marketplace to their organization.

Why PlayCanvas Skills

Resolve the active PlayCanvas authoring surface from the project instead of guessing from installed dependencies.
Check installed package declarations, exports, examples, and production scripts before using an API.
Inspect GLB geometry, transforms, clips, joints, morphs, and hierarchy before choosing placement or animation values.
Keep scene ownership, model calibration, physics, effects, UI, and game state predictable.
Reuse Engine features such as CameraControls, Water, ProceduralSky, and CameraFrame with their required integrations intact.
Finish with runtime and screenshot evidence instead of treating a successful build as visual proof.

Usage

Ask your coding agent for the outcome you want. The matching skills supply the PlayCanvas-specific workflow and verification steps. For example:

Build a Direct Engine product viewer for these GLBs. Inspect and calibrate every model, reuse the
shipped camera controls, and verify grounding and framing in the browser.

Polish this @playcanvas/react prototype with deterministic game states, a state-driven HUD, pooled
effects, coherent lighting, and screenshot checks.

Supported surfaces

The skills resolve the active surface from imports and markup, then read only its matching reference:

Surface	Packages	Coverage
Direct Engine	`playcanvas`	bootstrap, assets, scripts, rendering, animation, physics, lifecycle
React	`playcanvas`, `@playcanvas/react`	React ownership, hooks, components, assets, Engine interop
Web Components	`playcanvas`, `@playcanvas/web-components`	declarative elements, lifecycle, assets, Engine interop

Skills prefer the packages installed in the target project. CI compiles representative usage against pinned supported package versions, and Renovate proposes dependency updates.

Skills

Skill	Purpose
`build-app`	Select and structure Direct Engine, React, or Web Components applications.
`apply-conventions`	Apply stable coordinates, transforms, physics, materials, imports, and verification rules.
`find-examples`	Find and adapt official examples matching the installed package version.
`reuse-scripts`	Discover and integrate production scripts shipped with the Engine.
`inspect-glb`	Measure default-pose GLB bounds, transforms, clips, joints, morphs, and hierarchy offline.
`calibrate-model`	Record stable scale, grounding, pivot compensation, and yaw for repeated models.
`configure-animation`	Configure clip playback, blending, state graphs, and retargeting from inspected data.
`assemble-scene`	Compose semantic, visual, collider, physics, and effect hierarchies.
`light-scene`	Build coherent lighting, exposure, shadows, reflections, water, and grading.
`add-effects`	Add placed, pooled, and lifecycle-safe transient effects and trails.
`build-hud`	Build accessible, state-driven overlays, menus, gauges, timers, and indicators.
`manage-game-state`	Structure deterministic state, pointer lock, pause, reset, clocks, and cooldowns.

Every integration loads the same canonical files from skills/. Host manifests contain distribution metadata only.

PlayCanvas Skills targets Engine application workflows. It does not automate the PlayCanvas Editor, create or publish Editor projects, manage cloud services, or replace project-specific art direction and gameplay design.

Contributing

See CONTRIBUTING.md for pull-request expectations. For repeatable skill failures, use the skill feedback template and include the prompt, surface, package versions, output, and smallest incorrect behavior. Report vulnerabilities through GitHub Security Advisories.

License

PlayCanvas Skills is released under the MIT License.

12 skills in this repo

Plugin marketplace

Add Effects Coding

Use when adding transient visual effects or trails to a PlayCanvas app to select an Engine-native implementation, place and layer it correctly, manage its lifecycle, and verify the rendered result.

Install

/plugin marketplace add playcanvas/skills
/plugin install add-effects

Apply Conventions Code Review & Testing

Use when writing or reviewing PlayCanvas Engine code involving entity transforms, cameras, physics, materials, model orientation, bounds, or imports to apply the Engine's coordinate and API conventions.

Install

/plugin marketplace add playcanvas/skills
/plugin install apply-conventions

Assemble Scene Coding

Use when composing PlayCanvas Engine, React, or Web Components gameplay entities, model hierarchies, colliders, or physics objects to create one semantic root per object with calibrated visuals and predictable lifecycle ownership.

Install

/plugin marketplace add playcanvas/skills
/plugin install assemble-scene

Build App Coding

Use when creating or restructuring a PlayCanvas application with the direct Engine API, @playcanvas/react, or @playcanvas/web-components to choose the active authoring surface and apply its bootstrap, lifecycle, ownership, asset-loading, an...

Install

/plugin marketplace add playcanvas/skills
/plugin install build-app

Build Hud Coding

Use when building a PlayCanvas game's on-screen interface such as ready, pause, and victory overlays, menus, and live indicators like gauges, timers, or reload meters, so the interface is driven by game state, readable over the scene, and s...

Install

/plugin marketplace add playcanvas/skills
/plugin install build-hud

Calibrate Model Design

Use before repeatedly placing GLB models in PlayCanvas Engine, React, or Web Components to measure each asset once and record its uniform scale, grounding offset, and yaw correction in a stable nested transform.

Install

/plugin marketplace add playcanvas/skills
/plugin install calibrate-model

Configure Animation Coding

Use before playing, blending, or retargeting GLB animation clips in PlayCanvas Engine, React, or Web Components to inspect clip and joint names, attach animation to the rendered hierarchy, keep blend inputs valid, and diagnose T-pose, froze...

Install

/plugin marketplace add playcanvas/skills
/plugin install configure-animation

Find Examples Coding

Use when implementing an unfamiliar PlayCanvas feature such as animation, particles, shaders, physics, UI, splats, or XR to find the official Engine, React, or Web Components example matching the installed package version and adapt it to th...

Install

/plugin marketplace add playcanvas/skills
/plugin install find-examples

Inspect Glb Design

Use before loading, placing, scaling, or animating GLB assets in PlayCanvas to measure bounds, grounding offset, clips, joints, and hierarchy offline with the bundled zero-dependency inspector.

Install

/plugin marketplace add playcanvas/skills
/plugin install inspect-glb

Light Scene Design

Use when a PlayCanvas scene must read as a deliberate cinematic image rather than a flat asset preview, to set key and ambient lighting, sky and image-based lighting, shadows, tone mapping and exposure, and a restrained post-process grade o...

Install

/plugin marketplace add playcanvas/skills
/plugin install light-scene

Manage Game State Coding

Use when structuring a PlayCanvas game's control flow — a small state machine such as ready, playing, paused, and over, pointer-lock capture, pausing on focus or pointer-lock loss, a full reset, and a stable clock and timestep — so the loop...

Install

/plugin marketplace add playcanvas/skills
/plugin install manage-game-state

Reuse Scripts Coding

Use before implementing non-core PlayCanvas behavior to discover and reuse production scripts shipped with the installed Engine, reproduce their official example integration, and verify the result against the installed version.

Install

/plugin marketplace add playcanvas/skills
/plugin install reuse-scripts

Comments (0)

No comments yet

Be the first to share your take.