Skip to main content
skill CX Codex

build-vesperfall-review-assets — Claude Code skill

Builds review pairs for the Vesperfall catalog by pairing transparent PNGs with live Three.js or FBX models. Useful when adding characters or equipment and setting up isolated moveset routes.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add MengTo/Skills --skill build-vesperfall-review-assets -a claude-code
Open on GitHub

What build-vesperfall-review-assets does

This skill establishes a strict process for Vesperfall catalog additions. First, the agent inspects existing files. You cannot treat an asset as present just because code references a planned URL. Catalog references are standardized as 512×512 RGBA transparent images under public/asset-catalog/<category>/ without baked shadows. In the grid view, cards show no canvas.

The selected inspector displays a single canvas running a Three.js module. Metadata covering asset paths and equipment sockets is stored in userData. Grounding is aligned to foot contact geometry rather than dangling weapon edges. When animations shift contact points, tests must verify grounding deterministically.

Before committing, the skill runs scripts/validate_pair.py <png> <model-source>. Visual validation is restricted to the Codex in-app browser. It checks both mobile and desktop views, confirming that cards have no canvas and no console errors occur.

What it helps with

  • pair transparent catalog PNGs with live Three.js or FBX models
  • expose an isolated review route for character animation clips
  • attach equipment items to named model sockets
  • validate asset pairs deterministically with scripts/validate_pair.py

Example prompts for the agent

  • Build a transparent PNG card and FBX model pair for the new enemy in Vesperfall.
  • Set up an isolated route to review character animations and check foot grounding.
  • Run scripts/validate_pair.py to verify the asset pair before committing.

How to install build-vesperfall-review-assets

1Skills CLI (Vercel)

npx skills add MengTo/Skills --skill build-vesperfall-review-assets -a claude-code

2Manually: put the files in place

~/.claude/skills/build-vesperfall-review-assets/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/build-vesperfall-review-assets/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about build-vesperfall-review-assets

How do I install build-vesperfall-review-assets in Claude Code?

Run npx skills add MengTo/Skills --skill build-vesperfall-review-assets -a claude-code in your terminal.

What does build-vesperfall-review-assets do?

It creates truthful catalog entries for Vesperfall by pairing transparent 512×512 PNG cards with interactive Three.js or FBX models. It also builds isolated review routes for testing animations and equipment sockets.

Which browser should be used to review assets?

The workflow requires using the Codex in-app browser only. It tests desktop and mobile layouts, ensuring grid cards contain no canvas and the console shows no warnings.

Source text

SKILL.md · MIT
---
name: build-vesperfall-review-assets
description: Build truthful Vesperfall asset-library review pairs from transparent PNG references and live Three.js, FBX, or img2threejs models. Use when adding a character, enemy, prop, or equipment asset to the Vesperfall catalog; creating a card-PNG plus inspector-model treatment; exposing an isolated model or moveset route; or standardizing provenance, grounding, tests, and Codex-browser validation for game art review.
---

# Build Vesperfall Review Assets

Create one reviewable asset pair without confusing catalog media, imported files, procedural factories, and future contracts.

## Workflow

1. Inspect repository truth before choosing a model path.
   - Locate shipped PNG, FBX, GLB, textures, runtime factories, and declared-but-missing paths.
   - Prefer a shipped FBX/GLB when it is the actual runtime source.
   - Use `$img2threejs` only when reconstructing from an image in code. Never relabel imported geometry as img2threejs.
   - Do not claim a GLB or texture exists because code declares a future URL.
2. Produce the transparent catalog reference.
   - Reuse or derive from the production portrait when it already matches the asset identity.
   - Normalize catalog copies to 512×512 RGBA unless the project contract says otherwise.
   - Keep transparent corners and avoid baked floor, halo, or shadow.
   - Store project-bound output under `public/asset-catalog/<category>/`.
3. Build the live model preview.
   - Put loading/model construction in a small asset-specific module.
   - Preserve runtime provenance in `userData`: source paths or factory, action count, sockets, and review-only status.
   - Attach equipment to named sockets. Keep materials, renderer, mixers, events, and animation frames disposable.
   - Frame from measured bounds. Ground from foot/contact geometry, not the lowest weapon tip.
4. Pair the catalog surfaces.
   - Card/grid: transparent PNG only, with no canvas.
   - Selected inspector: one live model canvas plus truthful format label.
   - Add a button to an isolated preview or moveset route.
   - Keep fallback media visible until WebGL/model loading is ready.
5. Build the isolated review route.
   - Expose the real action library when clips exist.
   - Provide restart, pause/play, action selection, drag rotation, source paths, and provenance.
   - For procedural motions, mark runtime, contract, and candidate actions separately.
6. Validate before committing.
   - Run `scripts/validate_pair.py <png> <model-source>`.
   - Add inventory tests for exact paths, RGBA dimensions, preview kind, and route.
   - Test every motion/contact point deterministically when grounding changes with animation.
   - Run build, lint, full tests, and `git diff --check`.
   - Use the Codex in-app browser only. Verify desktop and mobile, card PNG/no canvas, inspector model/one canvas, preview navigation, grounding, scroll, overflow, broken media, and console warnings/errors.
7. Commit the narrow task and hand off its exact SHA before deployment reconciliation.

Read [references/catalog-contract.md](references/catalog-contract.md) when changing catalog types, provenance language, or review-route behavior.

## Required reporting

Report:

- PNG path, dimensions, and alpha status
- model source or procedural factory
- whether the model is imported, runtime procedural, or review-only reconstruction
- preview route and available actions
- test/build/browser proof
- exact commit SHA

© MengTo · MIT · MengTo/Skills

Similar skills

Everything for Game dev and 3D: Unity, Unreal, Godot, Blender →

From the same set148

threejs-landscape This skill builds a live Three.js landscape: terrain, grass, stones, sky and a time-of-day cycle. It suits hero backdrops where a subject has to sit somewhere, not float on a gradient. CX Codex +1 1,200installs falling-leaves Builds realistic falling foliage and petal animations for 2-D canvas and 3-D scenes where standard particle sprites look like flat confetti. CX Codex +1 1,200installs pointer-trail-emitter A skill that teaches the agent to build a cursor trail whose mote spacing holds steady no matter how fast the hand moves. CX Codex +1 1,200installs implement-fog-of-war A skill that walks an AI agent through building and debugging fog of war in a Three.js game: wall-aware visibility, player and enemy vision ranges. CX Codex +1 1,200installs build-game-changelog A skill for designing and maintaining an in-game changelog: versioning, deployment provenance, menu navigation. CX Codex +1 1,200installs build-game-monster-system A skill that builds rigged monsters for Three.js and web action games: asset contract, sockets, hurtboxes, combat states. CX Codex +1 1,200installs build-game-map-editor Guides the creation of production-linked browser map editors for Three.js and isometric games. It keeps drafts isolated from live gameplay saves. CX Codex +1 1,200installs build-daily-inspiration-sites Creates separate Codex tasks for original landing pages from a completed UI inspiration pack. Use it when each reference needs its own Sites project. CX Codex +1 1,200installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor