How do I install the Build App skill?

Run npx skillmds@latest add playcanvas/build-app in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Build App safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Build App?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Build App free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Build App?

playcanvas (@playcanvas) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Build App by playcanvas — Agent Skill

Name: Build App
Author: playcanvas

Build App

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, and Engine interop patterns.

playcanvas 841394c 4 files · 6.3 KB Updated Sep 17, 2026

File contents

Build an Engine application

Read package.json and the application entry point before changing its structure. Choose the authoring surface from the code being edited:

read references/react.md for @playcanvas/react imports and JSX;
read references/web-components.md for pc-* elements or @playcanvas/web-components imports;
read references/direct-engine.md for direct playcanvas bootstrap code without a wrapper-owned lifecycle.

Installed dependencies alone are insufficient when a project contains more than one surface. Preserve the surface that owns the current entry point and lifecycle.

Render at an intentional density

PlayCanvas defaults graphicsDevice.maxPixelRatio to 1 for predictable fill-rate cost. Set it deliberately after the application exists and before its initial automatic resize, and call app.resizeCanvas() after changing it. Fragment work scales with the square of the ratio, so choose the value from a measured frame time on the target display, not from the display alone: Math.min(window.devicePixelRatio, 2) suits a quality-first viewer on hardware that holds its frame budget there, and 1 is the right value wherever it does not. Never cap above window.devicePixelRatio; a larger value renders identically.

Verify the real backbuffer in a browser: for automatic resolution, canvas.width / canvas.clientWidth and the height ratio should match the chosen pixel ratio. CSS dimensions and a screenshot filepath do not prove rendering density.

For every surface:

verify version-sensitive APIs against installed declarations or source;
keep one owner for application creation, assets, entities, update callbacks, and teardown;
prefer the surface's declarative or lifecycle primitives before reaching into the Engine;
put per-entity and per-frame behavior in an Engine Script when page or view state is not its natural owner;
clamp the per-frame delta before advancing gameplay, timers, physics, or a state clock, so a backgrounded tab or a slow frame cannot inject one large integration step;
clean up external events and resources in the lifecycle that created them.

---name: build-appdescription: 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, and Engine interop patterns.---# Build an Engine applicationRead `package.json` and the application entry point before changing its structure. Choose theauthoring surface from the code being edited:- read [references/react.md](references/react.md) for `@playcanvas/react` imports and JSX;- read [references/web-components.md](references/web-components.md) for `pc-*` elements or `@playcanvas/web-components` imports;- read [references/direct-engine.md](references/direct-engine.md) for direct `playcanvas` bootstrap code without a wrapper-owned lifecycle.Installed dependencies alone are insufficient when a project contains more than one surface.Preserve the surface that owns the current entry point and lifecycle.## Render at an intentional densityPlayCanvas defaults `graphicsDevice.maxPixelRatio` to 1 for predictable fill-rate cost. Set itdeliberately after the application exists and before its initial automatic resize, and call`app.resizeCanvas()` after changing it. Fragment work scales with the square of the ratio, sochoose the value from a measured frame time on the target display, not from the display alone:`Math.min(window.devicePixelRatio, 2)` suits a quality-first viewer on hardware that holds itsframe budget there, and 1 is the right value wherever it does not. Never cap above`window.devicePixelRatio`; a larger value renders identically.Verify the real backbuffer in a browser: for automatic resolution, `canvas.width / canvas.clientWidth`and the height ratio should match the chosen pixel ratio. CSS dimensions and a screenshot filepathdo not prove rendering density.For every surface:- verify version-sensitive APIs against installed declarations or source;- keep one owner for application creation, assets, entities, update callbacks, and teardown;- prefer the surface's declarative or lifecycle primitives before reaching into the Engine;- put per-entity and per-frame behavior in an Engine `Script` when page or view state is not its natural owner;- clamp the per-frame delta before advancing gameplay, timers, physics, or a state clock, so a backgrounded tab or a slow frame cannot inject one large integration step;- clean up external events and resources in the lifecycle that created them.

Frequently asked questions