Integrate external assets (PixelLab, ElevenLabs) into projects with proper error handling, fallback mechanisms, and testing patterns. Use when generating assets, downloading files, or integrating assets into game code. Standardizes workflow and reduces integration time by 25-35%.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
Integrate external assets (PixelLab, ElevenLabs) into projects with proper error handling, fallback mechanisms, and testing patterns. Use when generating assets, downloading files, or integrating assets into game code. Standardizes workflow and reduces integration time by 25-35%.
Asset Integration Workflow
Integrate external assets (PixelLab, ElevenLabs) into projects with proper error handling, fallback mechanisms, and testing patterns. Standardizes workflow and reduces integration time by 25-35%.
Check these common locations for asset references:
Preload/Initialization Methods
preload() methods in Phaser scenes
useEffect hooks in React
componentDidMount in class components
Asset Loading Code
this.load.image() calls
this.load.audio() calls
import statements for local assets
Asset Usage Code
this.add.sprite() calls
this.add.image() calls
<img src="..."> tags in React
Runtime Verification Workflow
CRITICAL: Always verify assets work correctly in runtime, not just that they're referenced in code.
Step 1: Verify Asset File Exists
Check asset file exists in correct location:
# Verify asset file existsls -la public/assets/sprites/character.png
ls -la assets/sprites/character.png
ls -la src/assets/sprites/character.png
# Check file size (should be > 0)stat -f%z public/assets/sprites/character.png
# Verify file is readable
file public/assets/sprites/character.png
Step 2: Verify Asset Referenced in Code
Use code search patterns above to verify asset is referenced:
# Search for asset references
grep -r "character.png" src/
grep -r "load\.image.*character" src/scenes/
# Verify asset key is used
grep -r "add\.sprite.*character" src/scenes/
Step 3: Load Application in Browser
Start dev server and open browser:
# Start dev server (if not running)
npm run dev
# Wait for server to be readysleep 5
# Open browser
agent-browser open "http://localhost:5173?test=1&seed=42"
Step 4: Navigate to Relevant Screen
Navigate to screen where asset should appear:
# For Phaser games: Navigate to scene
agent-browser eval"window.__TEST__.commands.goToScene('GameScene')"
agent-browser wait 500
# For web apps: Navigate to route
agent-browser eval"window.location.href = '/game'"
agent-browser wait 2000
Step 5: Verify Asset Displays Correctly
Check asset is visible and functional:
# Check if texture exists (Phaser)
agent-browser eval"
const scene = window.__TEST__?.getCurrentScene();
scene?.textures?.exists('character-south') || false
"# Check if sprite is rendered (Phaser)
agent-browser eval"
const scene = window.__TEST__?.getCurrentScene();
const sprite = scene?.children?.getByName('character');
sprite ? { x: sprite.x, y: sprite.y, visible: sprite.visible } : null
"# Check DOM element exists (Web apps)
agent-browser eval"
document.querySelector('img[src*=\"character\"]') ? true : false
"
Step 6: Verify Asset Functionality
Test asset functionality works as expected:
# Test character movement (if applicable)
agent-browser eval"window.__TEST__.commands.movePlayerTo(100, 200)"
agent-browser eval"window.__TEST__.gameState().player"# Test asset interaction (if applicable)
agent-browser eval"window.__TEST__.commands.interactWithAsset('character')"# Verify game state updated correctly
agent-browser eval"window.__TEST__.gameState()"
create() {
if (this.textures.exists('asset-key')) {
// Use assetthis.sprite = this.add.sprite(x, y, 'asset-key');
} else {
// Use fallbackthis.sprite = this.add.rectangle(x, y, 32, 32, 0xff0000);
console.warn('Asset not found, using placeholder');
}
}
