Guide · Agent skill
How to use the Implement Fog of War agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Implement Fog of War skill (skill name: implement-fog-of-war) is a set of written instructions that an AI coding agent loads so it can add fog of war to a Three.js action game. It covers a shared line-of-sight system that decides what the player and enemies can see, plus a soft overlay that hides unseen areas and walls. This guide explains what the skill changes in the agent's behaviour, how to install it, how to ask for work with natural requests, and what to check before trusting the result.
Implement Fog of WarMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Download the implement-fog-of-war skill as a ZIP from the page where you found this guide.
- 2Unzip into a skills folder. Unzip the archive so the implement-fog-of-war folder with SKILL.md is in ~/.claude/skills/ for all projects, or in your project's .claude/skills/ for one project.
- 3Or upload it in the Claude apps. Open Settings, go to Capabilities, then Skills, and upload the skill there instead.
- 4Describe your Three.js task. Ask for the fog, line-of-sight, or fog-artifact work in plain terms, naming your project and the problem.
- 5Review the changes. Read the diff the agent produces and run your own tests, lint, and build, since the skill edits code and needs engineering review.
What the skill makes the agent do
Agent skills are folders of instructions that an AI coding agent reads when a task matches the skill's description. This one is aimed at Three.js action games that use top-down, orthographic, or isometric cameras and need walls and obstacles to block sight.
Once the skill is active, the agent is asked to keep two responsibilities separate. Gameplay visibility is decided by a deterministic line-of-sight calculation on the CPU. The fog is only a presentation layer that visualises that result. Gameplay code uses the same perception results for enemy detection, targeting, and attacks, so the fog never decides who can see or hit whom.
- Line of sight that is blocked by obstacles with a set footprint and vertical span
- A lookup of the player's visible distances in every direction, used by one full-screen fog shader
- Rules for hiding unseen enemies, telegraphs, and target locks
- Lifecycle rules, such as turning fog off in menus, inventory, and paused states
- Tuning order and validation tests, including pure math tests and desktop and mobile browser checks
Install the skill from the ZIP download
Download the skill as a ZIP from the page where you found this guide. Unzip it so that the implement-fog-of-war folder, which contains SKILL.md, sits inside one of the skills folders below. You can install it for yourself across all projects, or only for a single project.
You can also upload the skill through the Claude apps. Open Settings, go to Capabilities, then Skills, and upload the skill there.
- For all your projects: place the folder in ~/.claude/skills/
- For one project only: place the folder in that project's .claude/skills/ directory
- In the Claude apps: Settings → Capabilities → Skills, then upload the skill
~/.claude/skills/implement-fog-of-war/
.claude/skills/implement-fog-of-war/Check what the skill needs before you start
The skill assumes a specific kind of project. Confirm these before you ask the agent to change code, so you do not get a plan that cannot run in your setup.
The guidance assumes Three.js scene, camera, and render-layer APIs. It also needs access to your project's source code and test setup, because the validation steps run tests and a build. The visual checks happen in a browser, on desktop and on mobile.
- A Three.js game project, since the guidance assumes Three.js scene, camera, and render layers
- Access to the source code and the test setup for the validation steps
- A browser environment for the suggested desktop and mobile visual checks
- Engineering review of the changes, because the skill edits a codebase
Trigger the skill with natural requests
You do not need a special command. The skill is chosen from its description, which lists the kinds of work it covers. Describe your task in plain terms that use those ideas: visibility masks, obstacle-aware line of sight, enemy vision ranges, fog artifacts, or fog tests.
Be specific about the project and the problem. Say whether you want the fog built from scratch, tuned, debugged, or validated, since the skill covers all four.
- Add wall-aware fog of war to my isometric Three.js action game so enemies cannot see through walls
- Enemies flicker in and out behind pillars. Debug the line-of-sight code in my Three.js project
- The fog overlay shows radial spokes at the edges of walls. Fix the shader artifacts
- Turn off the fog when the pause menu and inventory are open, and make sure it does not leak into the next screen
- Write deterministic tests for player and enemy vision ranges and for hidden-enemy targeting
Follow the order the skill enforces
The skill asks the agent to work in a fixed order rather than improvising. It starts by inspecting the project: finding the player position, camera, obstacles, frame loop, targeting, and render layers. It then implements perception truth before the visual overlay, so the overlay is built on tested gameplay logic.
When tuning, the skill says to validate obstacle geometry and eye height first, then ranges, then the visual values such as inner clear radius, falloff, and wall softness. It also says to adjust ray budgets only after visual correctness and measured performance. Validation runs from the cheapest checks, such as pure math tests, up to browser and performance checks.
- Inspect the project before editing
- Define perception truth, then build the visibility lookup
- Render one soft overlay and integrate gameplay
- Integrate state and lifecycle, then tune in order
- Validate from pure tests through lint, build, and browser checks
Safety notes: scripts and network
The skill does not run scripts and does not use the network, according to its listing. It is a set of instructions that the agent follows while it edits your code. Your project's own tests, lint, and build commands are what the validation steps rely on, so those run in your environment under your control.
Because the skill changes code, review every diff it produces. The skill itself says to preserve unrelated changes in the working tree, so check git status before and after the agent works.
- Runs scripts: no
- Uses network: no
- Review the code changes yourself before merging
- Check the working tree early so unrelated changes are not overwritten
Tips for better results
The skill is most useful when your project already has a clear obstacle model. It assumes obstacles have a stable footprint and vertical span and can be switched inactive at runtime. If your obstacle data is poor, the skill says not to hide the problem with extra blur. Fix the geometry first.
Judge the result in motion. The skill asks the agent to check camera movement, wall edges, gates, seams, and menu transitions, not just a still frame. Also note that the skill assumes a locally flat ground plane; if your terrain varies in elevation across the visible area, tell the agent so it uses surface or terrain reconstruction instead.
- Give the agent your obstacle data format and eye height so it can validate them first
- Mention any elevation changes in the level, since the ground-plane method assumes a flat plane locally
- Ask for motion and mobile checks, not only a screenshot
- Keep the maximum fog darkness restrained, as the skill recommends
What people use it for
- Adding wall-aware fog of war to a top-down or isometric Three.js action game
- Making enemies hide behind obstacles while keeping target lock and attacks fair to the player
- Removing radial spokes or seams from a fog overlay at wall edges
- Turning fog off correctly for menus, inventory, pause, and stage transitions
- Writing deterministic tests for player and enemy vision ranges
Frequently asked questions
How do I install the implement-fog-of-war agent skill?
Download the skill as a ZIP from the page, then unzip it so the implement-fog-of-war folder with SKILL.md sits in ~/.claude/skills/ for all projects or in a project's .claude/skills/ folder for one project. You can also upload it in the Claude apps under Settings, then Capabilities, then Skills.
What do I need to use this skill?
You need a Three.js game project, since the guidance assumes Three.js scene, camera, and render-layer APIs. You also need access to the project's source code and test setup, and a browser for the suggested desktop and mobile visual checks.
Is the Implement Fog of War skill free to use?
The skill is published under the MIT licence, as listed on its page. Check the licence file in the source repository for the exact terms before you rely on it in a commercial project.
Does the skill run scripts or use the internet?
According to its listing, the skill runs no scripts and uses no network. It gives the agent written instructions for editing your code, and your own tests, lint, and build do the checking.
Will this skill work for a non-Three.js project or a 3D first-person game?
The skill is written for Three.js and comparable WebGL renderers, and it is aimed at top-down, orthographic, or isometric action games. It is not a good fit for projects that do not use Three.js, and the guidance does not describe first-person setups.
Why does the agent ask about ground height or obstacle data?
The skill's corner-unprojection method assumes a locally flat ground plane, and its line-of-sight rules need each obstacle to have a footprint and vertical span. If your terrain varies in elevation or your obstacle data is weak, the agent should fix that first rather than hiding it with blur.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
This skill suits developers building top-down, orthographic, or isometric Three.js action games who want enemies to be blocked by walls and targeting to stay fair. It is not a ready-made fog effect for non-developers, and it is not useful for projects that do not use Three.js or a similar WebGL renderer. Every change it makes needs engineering review.
Download the skill