メニュー
Build and ship Three.js apps on Capacitor iOS with Vite and Swift Package Manager: GLTF loading, assets_index animation UI, OrbitControls mouse/touch mappings, and iOS sync/run troubleshooting.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use the `vg generate` CLI to search, inspect, run, and manage 1200+ generative model endpoints. Trigger when the user asks to "generate an image", "make a video", "search models", "run a model", "fetch schema", "check pricing", "upload an asset", "queue async job", "track request", or any direct interaction with the model endpoint catalog. This is the foundational skill. Every other media skill in this repo executes its work through `vg generate` commands. Use `--json` whenever the output will be parsed by an agent.
Build 3D browser apps AND games with Three.js (r150+, ES modules): scene setup, geometries, materials, lighting, animation, GLTF models, physics (Rapier/cannon-es/arcade), character controllers, follow/third-person cameras, fixed-timestep loops, post-processing, and performance/debugging. Use for 'create a three.js scene/app/showcase', any 3D web content, and turning a scene into a game — 'add physics to my three.js game', 'third-person/character controller', 'follow camera', 'jump and gravity', 'collide with / pick up objects', 'structure my 3d game'. Trigger: threejs, three.js, 3D scene, WebGL scene, GLTF/GLB, OrbitControls, Rapier, cannon-es, 3D game, third-person controller. For 2D games use `phaser`; for engine-agnostic feel/balance/level craft use the game-craft skills.
Turn a character anchor into an engine-loadable animated spritesheet by generating ONE labeled pose-board image (a grid of the same character in the frames of an action) and slicing it. Works for any action — idle, run, jump, attack, hurt, crouch, death, roll. Generates a per-frame-labeled pose board on a flat chroma matte, recovers/slices the frames, keys + despills, snaps to crisp native pixels, normalizes with headroom, and packs spritesheet.png + a manifest. Triggers: 'sprite animation', 'animated spritesheet', 'attack animation', 'walk/run cycle', 'animate this character', 'game sprite animation', 'sprite pose sheet'.
Interview the user relentlessly about the game they want to make until the idea is build-ready, resolving each branch of the design tree one question at a time. Use when the user has a fuzzy or one-line game idea and wants to flesh it out before building: 'grill me about my game', 'help me figure out what game to make', 'stress-test my game idea', 'interview me about the game', 'I want to make a game but I'm not sure what'. Not for when the user already knows what they want built — go straight to game-playbook.
Build 2D browser games with Phaser 4: scene lifecycle, sprites, Arcade/Matter physics, tilemaps, WebGL rendering, filters, lighting, shaders, DynamicTexture/RenderTexture, SpriteGPULayer, TilemapGPULayer, and Phaser 3 to 4 migration. Trigger: phaser, phaser 4, phaser v4, create phaser game, add phaser scene, phaser sprite, phaser physics, phaser tilemap, phaser arcade, phaser webgl renderer, phaser filters, phaser SpriteGPULayer, phaser TilemapGPULayer, migrate phaser 3 to 4.
Choose the right model endpoint for a given task, and the default endpoint IDs the production skills (character-design, cinematography, storytelling, pixel-art, regenerate-3d, media-workflow) use when the user has not named a model. Modality-organized catalog of production endpoint defaults, text-to-image, image-to-image, text-to-video, image-to-video, and more. Use when the user has not named a specific model, or asks "which model for X", "best endpoint for Y", "what should I use for Z".
| name | capacitor-ios |
| description | Build and ship Three.js apps on Capacitor iOS with Vite and Swift Package Manager: GLTF loading, assets_index animation UI, OrbitControls mouse/touch mappings, and iOS sync/run troubleshooting. |
Ship a Three.js + Vite app in an iOS native shell via Capacitor. Two runtimes — web renderer (Three.js + Vite) and native wrapper (Capacitor iOS) — must agree on an explicit, testable contract: web output dir, animation names, build output, iOS package manager. Most breakage is an implicit contract.
Before implementing, confirm:
dist or www) matches Capacitor webDir.assets_index.json), not hardcoded strings.npm run build).public/ and load via absolute URLs (/assets/...).webDir: "dist".npx cap add ios --packagemanager SPM.npm run build → npx cap sync ios → npx cap run ios (or npx cap open ios).Command details: references/capacitor-ios-spm-workflow.md.
index.html + src/* for app codepublic/assets/... for GLBs and JSON contractscapacitor.config.ts with webDir: "dist"Runtime fetches must work in both browser and WKWebView: use fetch('/assets/assets_index.json'), not filesystem or environment-specific base URLs.
assets_index.jsonOne source of truth: skeleton URL, animation source URL, and animations[] entries with a stable app id (idle, walk, run), sourceClipName (exact AnimationClip.name), and loop mode/defaults.
Runtime: load index JSON → load skeleton GLB + animation GLB → resolve each UI button to a clip by sourceClipName → build AnimationAction map keyed by app id → play default action. See references/threejs-animation-index-pattern.md.
Use OrbitControls with explicit mouseButtons and touches:
For vertical-only pan, constrain target/camera translation after controls.update() each frame — don't change rotate/zoom semantics.
Math.min(devicePixelRatio, 2).SPM by default on Capacitor 8+; migrate existing CocoaPods projects intentionally. Re-run npx cap sync ios after native-side or plugin changes.
assets_index.json once at startup.cap sync/cap run.mouseButtons and touches explicitly.Don't converge on a generic "orbit + three buttons" viewer. Vary by product intent: character showcase (richer lighting, slow damping, idle emphasis), gameplay prototype (fast transitions, state-driven switching, minimal UI), asset QA tool (diagnostics overlay, clip length/track info, missing-clip warnings). Tune at least visual style, input feel (damping/zoom/pan speeds), and animation UX (buttons, shortcuts, auto-play).
references/capacitor-ios-spm-workflow.md — iOS setup, migration, run commandsreferences/threejs-animation-index-pattern.md — index contract + runtime loadingreferences/gotchas.md — high-frequency failures and fixes