Agent skill

Implement Fog Of War

by nirholas in nirholas/three.ws

Implement, tune, debug, or validate soft wall-aware fog of war and gameplay perception in Three.js action games.

Apache-2.0Auto-check passedGame Development

Install Implement Fog Of War

skills CLI
$ npx skills add nirholas/three.ws --skill implement-fog-of-war -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install nirholas/three.ws implement-fog-of-war --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/nirholas/three.ws.git skills-src && mkdir -p .claude/skills && cp -r skills-src/third_party/designcode-agent-skills/agent-skills/codex/implement-fog-of-war .claude/skills/implement-fog-of-war && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
implement-fog-of-war
GitHub stars
229
Used in
1 other repo
Token cost
~1.7k tokens
SKILL.md length
867 words
Files
4 (incl. references)
Skills in repo
92
Repo updated
First seen
Licence
Apache-2.0

At a glance

Implement, tune, debug, or validate soft wall-aware fog of war and gameplay perception in Three.js action games.

  • Works in 5 steps: Define perception truth → Build the visibility lookup → Render one soft overlay → …
  • Isometric visibility masks
  • SKILL.md covers Preserve the architecture, Inspect before editing, Implement in dependency order and Tune in the right order, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Implement Fog Of War is an agent skill from nirholas/three.ws. Implement, tune, debug, or validate soft wall-aware fog of war and gameplay perception in Three.js action games. Use for orthographic or isometric visibility masks, obstacle-aware line of sight, player and enemy vision ranges, hidden-enemy targeting rules, fog shader artifacts such as spokes or seams, mobile ray budgets, lifecycle and menu-state integration, and deterministic fog-of-war tests.

Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files, including reference files (for example `agents/openai.yaml`, `references/mechanics.md` and `references/validation.md`).

It sits in Game Development, covering 3D graphics and WebGL. It works with Three.js. The repository describes itself as: Open-source platform for 3D AI agents. Turn text or a photo into a rigged, animated GLB avatar, give it an LLM brain, memory and a wallet, and embed it anywhere with one web… The licence is Apache-2.0.

When your agent uses it

  • Isometric visibility masks
  • Obstacle-aware line of sight
  • Player and enemy vision ranges
  • Hidden-enemy targeting rules

Example prompts

  • “/implement-fog-of-war”

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. Define perception truth
  2. Build the visibility lookup
  3. Render one soft overlay
  4. Integrate gameplay
  5. Integrate state and lifecycle

What it can do on your machine

Read from SKILL.md and the folder at commit 66624fb. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Implement Fog Of War loads about 1.7k tokens when it runs, and up to ~7.3k if it reads all its reference files. Until then it costs about 104 tokens; SKILL.md has 867 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~104
When it runs · the whole SKILL.md, loaded when a task matches
~1.7k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~7.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from nirholas/three.ws at commit 66624fb, republished under its Apache-2.0 licence (© nirholas). 867 words, ~1,667 tokens.

Download SKILL.mdSave it as .claude/skills/implement-fog-of-war/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.
name
implement-fog-of-war
description
Implement, tune, debug, or validate soft wall-aware fog of war and gameplay perception in Three.js action games. Use for orthographic or isometric visibility masks, obstacle-aware line of sight, player and enemy vision ranges, hidden-enemy targeting rules, fog shader artifacts such as spokes or seams, mobile ray budgets, lifecycle and menu-state integration, and deterministic fog-of-war tests.

Implement Fog of War

Build fog of war as a shared perception system with a restrained presentation layer.

Preserve the architecture

Keep these responsibilities separate:

  1. Let deterministic CPU perception own ranges, obstacle intersections, and gameplay visibility.
  2. Encode the player's angular visible distances into one fixed-size lookup texture.
  3. Let one full-screen shader turn that lookup into soft radial and wall-aware fog.
  4. Let gameplay consume perception results directly; never infer combat truth from fog pixels.

Read mechanics.md before implementing or changing the algorithm. It records the proven obstacle model, shader composition, calibrated values, state rules, enemy behavior, lighting constraints, and telemetry.

Inspect before editing

  • Locate the authoritative player position, camera, obstacles, scene lifecycle, frame loop, targeting, enemy perception, and render layers.
  • Confirm the gameplay ground model. The proven corner-unprojection method assumes a locally horizontal plane; use authoritative surface or terrain reconstruction when elevation varies across the visible area.
  • Find existing scene fog, post-processing, renderer creation, review modes, menus, captures, transitions, and disposal paths.
  • Read the current tests and recent fog/perception commits before changing constants or ownership.
  • Confirm whether obstacle state changes at runtime. Reuse the same active obstacle collection used by navigation or collision when its geometry is suitable for sight.
  • Check the working tree early and preserve unrelated changes.

Implement in dependency order

1. Define perception truth
  • Represent each sight blocker with a stable footprint, vertical span, and active state.
  • Intersect a 3D sight segment or ray with both the horizontal footprint and vertical span.
  • Ignore inactive blockers and cover below the eye-to-target sight line.
  • Expose:
    • point-to-point perception for enemies, targeting, and attacks;
    • a deterministic angular distance fill for the fog lookup.
  • Use explicit player and enemy ranges. Allow them to differ when the encounter design needs enemies to acquire beyond the player's reveal edge.
2. Build the visibility lookup
  • Allocate the distance array, byte pixels, and data texture once.
  • Cast a fixed number of evenly spaced horizontal rays around the player's eye point.
  • Normalize hit distances by the player vision radius and quantize them into a one-row red-channel texture.
  • Use linear filtering, horizontal repeat wrapping, no mipmaps, and a bounded mobile/desktop ray budget.
  • Refresh after meaningful player motion or a short maximum interval. Do not allocate in the frame loop.
3. Render one soft overlay
  • Use one clip-space plane and one transparent shader material.
  • Reconstruct each fragment's ground-plane position from the four camera-corner intersections.
  • Combine:
    • a clear inner radius and soft outer radial falloff;
    • a feathered wall boundary sampled from the angular lookup.
  • Smooth obstacle visibility across neighboring angles. Weight wall fog below the outer radial fog so blockers read as atmosphere, not opaque wedges.
  • Combine radial and obstacle fog with max, then cap final opacity.
  • Disable depth test, depth write, and tone mapping; render after the world.
  • Do not introduce a second renderer, render target, composer, or per-ray meshes.
Show full SKILL.md (393 more words)Show less
4. Integrate gameplay
  • Keep simulation presence separate from presentation visibility.
  • Hide unrevealed enemy renderables through layers or a presentation-only mechanism; do not toggle the actor root if root visibility also controls lifecycle or simulation.
  • Exclude unrevealed enemies from target lock, aim selection, nearest-target search, HUD counts, and player hit eligibility.
  • Hide telegraphs that would leak an unseen enemy.
  • Let enemy acquisition and attacks use their own range plus the same line-of-sight truth.
  • Clear an active target lock as soon as perception invalidates it.
  • Cache perception within a simulation phase and refresh after movement when downstream systems need current positions.
5. Integrate state and lifecycle
  • Enable fog only during active gameplay.
  • Disable it for menus, inventory, review/capture modes, paused or non-playing states, and stage transitions unless the product explicitly requires otherwise.
  • Disable it before any early-render branch so a previous frame cannot leak into another state.
  • Keep atmospheric scene fog separate from fog of war.
  • Dispose the overlay geometry, material, and lookup texture on teardown.
  • Publish compact telemetry for ray budget, enabled state, ranges, visible enemies, target visibility, line of sight, and measured distance.

Tune in the right order

  1. Validate obstacle geometry and eye height.
  2. Validate player and enemy ranges.
  3. Set the fully clear inner radius.
  4. Set the outer radial falloff and maximum opacity.
  5. Set wall-edge softness.
  6. Add angular smoothing until spokes disappear.
  7. Reduce obstacle darkness until walls feel like occlusion rather than black rays.
  8. Adjust ray budgets only after visual correctness and measured performance.

Do not hide bad obstacle data with extra blur. Do not make the entire scene darker to compensate for weak visibility boundaries.

Validate

Read validation.md before claiming completion. Run:

  • pure perception and opacity tests;
  • structural render-budget contracts;
  • integration tests for targeting, layers, lighting, and state;
  • project lint and build;
  • real desktop and mobile browser checks in the Codex browser.

Use normal gameplay for visual verification when review modes intentionally disable fog. Judge motion, camera movement, wall edges, gates, seams, and menu transitions—not only a still frame.

Protect the proven qualities

  • Keep the inner play area readable.
  • Keep the maximum darkness restrained.
  • Keep walls soft and free of visible radial spokes.
  • Keep the angle seam invisible.
  • Keep dynamic gates synchronized with sight.
  • Keep enemy behavior fair even when enemy vision exceeds player reveal.
  • Keep one authoritative visibility model and one bounded overlay.

© nirholas, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 3 other files (references) in third_party/designcode-agent-skills/agent-skills/codex/implement-fog-of-war of nirholas/three.ws.

  • SKILL.md
  • agents/openai.yaml
  • references/mechanics.md
  • references/validation.md

Open the folder on GitHubat commit 66624fb

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in nirholas/three.ws, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Implement Fog Of War next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Implement Fog Of War compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Implement Fog Of War this skillnirholas/three.ws2291 repos~1.7kAutomated safety check: PassApache-2.0
Image to Three.js Modelimg2threejs/img2threejs18k1 repos~8.2kAutomated safety check: PassApache-2.0
Web CloneJane-xiaoer/claude-skill-web-clone1k1 repos~2.7kAutomated safety check: PassMIT
Threejs Game Directormajidmanzarpour/threejs-game-skills2.5k—~2.2kAutomated safety check: PassMIT
Threejs Gameplay Systemsvalkor-ai/loom1.2k1 repos~1.4kAutomated safety check: PassApache-2.0
Threejs World Generationcalesthio/OpenMontage66k—~2kAutomated safety check: PassAGPL-3.0

Similar skills

  • Image to Three.js Model

    img2threejs/img2threejs

    Rebuilds the object in a reference image as a procedural, animation-ready Three.js model written entirely in code, using staged sculpting with quality checks.

    18k GitHub starsUsed in 1 repo~8.2k tokens
    Game DevelopmentAuto-check passed
  • Web Clone

    Jane-xiaoer/claude-skill-web-clone

    网站复刻 / 克隆方法论。USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、 照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、 复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树,覆盖静态站 /…

    1k GitHub starsUsed in 1 repo~2.7k tokens
    Game DevelopmentAuto-check passed
  • Threejs Game Director

    majidmanzarpour/threejs-game-skills

    Entrypoint for building, upgrading, and finishing Three.js browser games.

    2.5k GitHub stars~2.2k tokensUpdated 13 days ago
    Game DevelopmentAuto-check passed
  • Build and iterate playable Three.js game systems: starter scaffold, architecture, design briefs, core loops, level and encounter design, entities, input, camera, collision and physics, scoring…

    1.2k GitHub starsUsed in 1 repo~1.4k tokens
    Game DevelopmentAuto-check passed
  • Threejs World Generation

    calesthio/OpenMontage

    Build deterministic, editable, free-viewpoint Three.js worlds from text or structured briefs.

    66k GitHub stars~2k tokensUpdated 7 days ago
    Game DevelopmentAuto-check passed
  • 3Dviz Pro Max Scene Builder

    viettranx/3dviz-pro-max

    Guides building an expressive 3D scene in Three.js or Blender by reasoning through intent, object construction and scientific grounding before using a catalog of recipes and kits.

    709 GitHub stars~2.8k tokensUpdated 1 mo ago
    Game DevelopmentAuto-check passed

More from nirholas/three.ws

All 92 skills in this repo
  • Add Shader Cursor Trail

    nirholas/three.ws

    Add the Shaders WebGPU mouse effect used for the Tidal Commons hero: a white twinkling halftone cursor trail driven by ChromaFlow, masked through a DotGrid, finished with chromatic ripples and film…

    230 GitHub starsUsed in 1 repo~760 tokens
    Auto-check passed
  • Publish Project To GitHub

    nirholas/three.ws

    Package a finished local project into an intentional GitHub repository, create a strong README and visual preview, push it safely, configure a public GitHub Pages URL when the project is compatible…

    230 GitHub starsUsed in 1 repo~2.2k tokens
    Auto-check: notes
  • Audit a website or digital experience against its supplied source references for originality and plagiarism risk.

    230 GitHub starsUsed in 1 repo~1.8k tokens
    Auto-check passed
  • Turn a completed daily UI inspiration capture into exactly five original landing-page builds, one per separate Codex task, using Sites.

    230 GitHub starsUsed in 1 repo~1.9k tokens
    Auto-check passed
  • Write Like Meng On X

    nirholas/three.ws

    Write, rewrite, review, or continuously refine X/Twitter posts in Meng To's current voice using his deduplicated authored-post corpus, personal and product context, shared resources, and Content…

    230 GitHub starsUsed in 1 repo~2k tokens
    Auto-check passed
  • Browser Video Recording

    nirholas/three.ws

    Create polished 60 fps 4:3 4K browser screen-recording style videos from Codex in-app browser captures, with browser-only crop, natural macOS cursor styling, deliberate click choreography…

    230 GitHub starsUsed in 1 repo~1.5k tokens
    Auto-check passed

Works with

Questions about Implement Fog Of War

What does Implement Fog Of War do?

Implement, tune, debug, or validate soft wall-aware fog of war and gameplay perception in Three.js action games. ws.js action games.

When should I use Implement Fog Of War?

Implement Fog Of War fits situations like: isometric visibility masks; obstacle-aware line of sight; player and enemy vision ranges; hidden-enemy targeting rules.

How do I install Implement Fog Of War in Claude Code?

Run `npx skills add nirholas/three.ws --skill implement-fog-of-war -a claude-code`. Or copy the skill folder (third_party/designcode-agent-skills/agent-skills/codex/implement-fog-of-war in nirholas/three.ws) into .claude/skills/implement-fog-of-war in your project. Claude Code loads it when a task matches its description.

How do I install Implement Fog Of War in Codex?

Run `npx skills add nirholas/three.ws --skill implement-fog-of-war -a codex`. Or copy the skill folder (third_party/designcode-agent-skills/agent-skills/codex/implement-fog-of-war in nirholas/three.ws) into .agents/skills/implement-fog-of-war in your project. Codex loads it when a task matches its description.

Can I use Implement Fog Of War in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add nirholas/three.ws --skill implement-fog-of-war -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/implement-fog-of-war, .gemini/skills/implement-fog-of-war, .github/skills/implement-fog-of-war and .opencode/skills/implement-fog-of-war in your project.

What does Implement Fog Of War need to run?

SKILL.md names no scripts, command-line tools or credentials: Implement Fog Of War is instructions for the agent only.

Does Implement Fog Of War access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Implement Fog Of War safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Implement Fog Of War use?

Implement Fog Of War is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Implement Fog Of War use?

About 1.7k tokens (SKILL.md is roughly 6.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 5.6k tokens, read only when the agent opens those files.

What are the alternatives to Implement Fog Of War?

Skills that share tags, products or a category with Implement Fog Of War: Image to Three.js Model (img2threejs/img2threejs, 18k stars), Web Clone (Jane-xiaoer/claude-skill-web-clone, 1k stars), Threejs Game Director (majidmanzarpour/threejs-game-skills, 2.5k stars) and Threejs Gameplay Systems (valkor-ai/loom, 1.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Implement Fog Of War?

nirholas (a GitHub user) maintains it in nirholas/three.ws, which has 229 GitHub stars. The repository holds 92 skills in this directory. The repository was last updated on October 10, 2026.

Source: nirholas/three.ws on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.