New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Tinyworld Shader Fx

by jasonkneen in jasonkneen/tiny-world-builder

A skill your agent uses when adding or changing GLSL effects in Tiny World Builder — landscape water, waterfalls, foam, smoke, explosions, damage/wear overlays, or the reusable TinyShaderFX library.

AGPL-3.0Auto-check passedGame Development

Install Tinyworld Shader Fx

skills CLI
$ npx skills add jasonkneen/tiny-world-builder --skill tinyworld-shader-fx -a claude-code

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

GitHub CLI
$ gh skill install jasonkneen/tiny-world-builder tinyworld-shader-fx --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/jasonkneen/tiny-world-builder.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.codex/skills/tinyworld-shader-fx .claude/skills/tinyworld-shader-fx && 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
tinyworld-shader-fx
GitHub stars
1.6k
Token cost
~1.9k tokens
SKILL.md length
806 words
Files
1
Skills in repo
29
Repo updated
First seen
Licence
AGPL-3.0

At a glance

A skill your agent uses when adding or changing GLSL effects in Tiny World Builder — landscape water, waterfalls, foam, smoke, explosions, damage/wear overlays, or the reusable TinyShaderFX library.

  • Changing GLSL effects in Tiny World Builder — landscape water
  • SKILL.md covers Authoritative shader files, Ocean water shader…, Enhanced water surfaces… and TinyShaderFX library…, plus 1 more section
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Damage/wear overlays

What it does

Tinyworld Shader Fx is an agent skill from jasonkneen/tiny-world-builder. Use when adding or changing GLSL effects in Tiny World Builder — landscape water, waterfalls, foam, smoke, explosions, damage/wear overlays, or the reusable TinyShaderFX library. Covers where shaders live, the override relationship between LandscapeEngine.js and engine/landscape/.js, and the procedural-noise toolkit.

Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Game Development, covering Shaders. The licence is AGPL-3.0.

When your agent uses it

  • Changing GLSL effects in Tiny World Builder — landscape water
  • Damage/wear overlays
  • The reusable TinyShaderFX library

Example prompts

  • “/tinyworld-shader-fx”

What it can do on your machine

Read from SKILL.md and the folder at commit 49e8abd. 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

Tinyworld Shader Fx loads about 1.9k tokens when it runs. Until then it costs about 85 tokens; SKILL.md has 806 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~85
When it runs · the whole SKILL.md, loaded when a task matches
~1.9k

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 jasonkneen/tiny-world-builder at commit 49e8abd, republished under its AGPL-3.0 licence (© jasonkneen). 806 words, ~1,893 tokens.

Download SKILL.mdSave it as .claude/skills/tinyworld-shader-fx/SKILL.md (or your agent's skills folder).
name
tinyworld-shader-fx
description
Use when adding or changing GLSL effects in Tiny World Builder — landscape water, waterfalls, foam, smoke, explosions, damage/wear overlays, or the reusable TinyShaderFX library. Covers where shaders live, the override relationship between LandscapeEngine.js and engine/landscape/*.js, and the procedural-noise toolkit.

Tiny World Shader FX

Where the shaders live and how to extend them without breaking the guarded build.

Authoritative shader files

  • Terrain: engine/landscape/shaders.js — SAND_VS, SAND_FS, LOWPOLY_FS
    • the sandMat / sandMatLowPoly ShaderMaterials.
  • Water: engine/landscape/water.js — the animated reflective ocean plane.
  • These two files Object.assign(LandscapeEngine.prototype, {...}) after LandscapeEngine.js defines the class, so they override the inline _initSharedShaders / _initWater copies still present in LandscapeEngine.js (lines ~302 / ~893). The split files are the live ones — edit those. The inline copies are dead but left in place; don't rely on them.
  • The ocean time + cameraPos uniforms are advanced in LandscapeEngine.update().
  • Voxel-world waterfalls/flow are separate: engine/world/05-tile-factory.js (getWaterfallCurtainMaterial, getWaterfallSurfaceMaterial, foam puffs) driven by updateWaterfallEffects(t) / tickWaterTextureFlow(dt) in the animation loop. check.js guards these names — keep them.

Ocean water shader (engine/landscape/water.js)

Stylized, cheap (~9 value-noise taps). Uniforms worth knowing:

  • flowDir (vec2) — scroll direction; two layers flow along it and its perpendicular.
  • foamColor / foamAmount — wave-crest + shoreline foam.
  • specPower — Blinn-Phong sun-glint tightness.
  • posterize — cel banding levels (12 reproduces the original look; 0 disables).
  • planetDistance* — distance tint, kept in parity with the terrain materials.

Enhanced ocean water samples the shared planar reflection target from 01-render-core.js (tw-water-planar-reflection) via reflectionMatrix, then layers a localized refractive bend: refract(-viewDir, norm, 0.7502). Keep the runwayR discard, the clip-box block, fog, and posterize tail intact.

Enhanced water surfaces ("Enhanced water" toggle)

The default-visible water is voxel tiles (M.water/M.waterDk, Lambert), not the landscape ocean. A Settings toggle upgrades water everywhere:

  • Setting: render-enhanced-water checkbox (HTML, Environment panel) ↔ renderEnhancedWater global (01-render-core.js, default on) ↔ tinyworld:render:enhancedWater. Wired in 21-object-transform-voxel-build.js (el ref, listener loop, applyFromControls, persistSettings, syncControls) exactly like the planesEnabled toggle. New key, no RENDER_SETTINGS_VERSION bump.
  • Voxel water: injected in applyFlowingWaterUVs (04-textures.js) — the single onBeforeCompile chokepoint for every water material (base + flow clones). Stays Lambert; projects each water vertex into the shared planar reflection texture, then adds refractive bend, ripple-normal sheen, Blinn-Phong glint, and crest foam, masked by vTwWaterNrm.y so sides stay calm. The refractive sampler must use the derived world-flow UV (vTwWaterSurfaceUv / the same coordinates assigned to vMapUv), not raw mesh vUv. Shared waterShaderTimeUniform advanced in tickWaterTextureFlow. customProgramCacheKey is mandatory here — without it three.js would reuse the wrong program when the toggle flips (onBeforeCompile output isn't in the default cache key). Include the shader-variant string in both the program key and flow-material cache key when the injected shader source changes.
  • Planar reflection capture: twWaterReflectionCapture() in 01-render-core.js renders the scene from a mirrored camera into tw-water-planar-reflection, hides reflective water meshes during the pass, and clips below-water geometry so underside slabs do not pollute the reflection. Water materials opt in with material.userData.twWaterReflective.
  • Landscape ocean: uEnhance uniform in water.js scales foam/sheen/subsurface and the material samples the same planar reflection uniforms.
  • On toggle: refreshWaterShaderMaterials() (clears waterFlowMaterialCache, resets the base materials) then rebuildTerrainRender(); the handler also sets the live landscape uEnhance. Waterfalls are untouched (separate shaders).
  • The water albedo texture named ripples is intentionally neutral/no-stripe. Do not re-add baked horizontal/wavy line decals there; visible motion should come from the reflective/refractive shader and shoreline/waterfall edge foam.
Show full SKILL.md (321 more words)Show less

TinyShaderFX library (engine/world/45-shader-fx.js)

IIFE exposing window.TinyShaderFX. 4-space body indent on purpose — the duplicate-declaration guard in tools/check.js only scans 2-space top-level decls, so anything deeper is ignored. Keep new locals inside the IIFE.

Factories (all procedural, no textures/render targets):

  • makeWaterFlowMaterial(opts) — flowing river/pond surface for flat planes.
  • makeWaterfallMaterial(opts) — vertical falling-water curtain (UV.y = top→bottom).
  • makeFoamMaterial(opts) — shoreline/splash/wake foam ribbon (foam near UV.y=0).
  • makeSmokeMaterial(opts) — dissolving smoke billboard; drive uAge 0→1.
  • makeExplosionMaterial(opts) — fireball; drive uProgress 0→1 and scale the mesh.
  • applyWear(material, opts) — patches any stock Lambert/Standard/Phong/Basic material with procedural grime/cracks/scuffs via onBeforeCompile (anchors on <project_vertex> and <dithering_fragment>, present in every stock template). Returns the material with a setWear(amount) helper.
Frame ticking

Animated materials expose uTime and self-register via track(). The loop calls window.__tinyworldShaderFXTick(t, dt) (wired in 25-animation-loop-schema.js, tick.effects bucket). Materials you build elsewhere advance for free if their uniform is named uTime and you pass them through TinyShaderFX.track().

Shared GLSL

TinyShaderFX.GLSL_NOISE is a prependable chunk of fxHash/fxNoise/fxFbm/ fxFresnel/fxPosterize (the fx-prefix avoids collisions with stock chunks). Reuse it for new ShaderMaterials instead of re-deriving noise.

Demo

?shaderfx=demo (or =1) drops a gallery near the origin; TinyShaderFX.demo(scene) does the same on demand. It's opt-in so default scenes are untouched.

Guard / gotchas

  • New engine/** files are auto-collected by check.js (per-file new Function syntax check + cross-file duplicate-decl scan) and copied to dist/ by publish.sh — no extra wiring beyond the <script src> tag in the HTML.
  • ShaderMaterial fragments need #include <colorspace_fragment> at the end to match the app's r185 output color space (the waterfall + FX materials all do this).
  • When patching stock materials that sample material.map, write map UVs to r185's vMapUv (guarded by #ifdef USE_MAP), not the old generic vUv. vUv only exists when USE_UV is defined; map sampling uses <map_fragment> → vMapUv.
  • Keep fragment shaders compatible with the app's WebGLRenderer path: use gl_FragColor, constant-bound for loops, and cameraPosition (auto-injected) in ShaderMaterial.
  • Don't convert the existing chimney-smoke MeshBasicMaterial pipeline to a ShaderMaterial — it's cached/cloned by getCachedParticleMaterial. Use makeSmokeMaterial for new emitters instead.

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

Files

Just SKILL.md in .codex/skills/tinyworld-shader-fx of jasonkneen/tiny-world-builder.

Open the folder on GitHubat commit 49e8abd

Compare with similar skills

Tinyworld Shader Fx 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.

Tinyworld Shader Fx compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Tinyworld Shader Fx this skilljasonkneen/tiny-world-builder1.6k—~1.9kAutomated safety check: PassAGPL-3.0
PixijsRSamaium/CanvasEngine4012 repos~1.6kAutomated safety check: PassMIT
New ExperimentTresjs/tres3.8k—~782Automated safety check: PassMIT
Assets Shader List AllIvanMurzak/Unity-MCP4.4k—~435Automated safety check: PassApache-2.0
Handle Sdr Tonemap Lutclshortfuse/renodx4.5k—~7.3kAutomated safety check: PassMIT
Unreal Material and VFX Workflowflopperam/unreal-engine-mcp1.1k—~927Automated safety check: PassNone

Similar skills

  • Pixijs

    RSamaium/CanvasEngine

    Use this skill first for ANY PixiJS v8 task; it routes to the right specialized skill for the job.

    401 GitHub starsUsed in 2 repos~1.6k tokens
    Game DevelopmentAuto-check passed

  • New Experiment

    Tresjs/tres

    Create a new experiment in TresJS Lab with all necessary files

    3.8k GitHub stars~782 tokensUpdated yesterday
    Game DevelopmentAuto-check passed

  • Assets Shader List All

    IvanMurzak/Unity-MCP

    List all shaders available in the project assets and packages, sorted by name.

    4.4k GitHub stars~435 tokensUpdated today
    Game DevelopmentAuto-check passed

  • Handle Sdr Tonemap Lut

    clshortfuse/renodx

    RenoDX HLSL/Slang shader workflow for proven shader-side SDR tonemap, hard clip, LUT, color grade, and HDR bridge changes.

    4.5k GitHub stars~7.3k tokensUpdated yesterday
    Game DevelopmentAuto-check passed

  • Unreal Material and VFX Workflow

    flopperam/unreal-engine-mcp

    Walks an Unreal Engine MCP agent through building materials, Niagara particle systems, Chaos destruction, and curve assets with inspect-then-edit steps.

    1.1k GitHub stars~927 tokensUpdated 3 mo ago
    Game DevelopmentAuto-check passed

  • Rdc CLI

    BANANASJIM/rdc-cli

    A skill your agent uses when working with RenderDoc capture files (.rdc), analyzing GPU frames, tracing shaders, inspecting draw calls, or running CI assertions against GPU captures.

    182 GitHub stars~2.9k tokensUpdated 2 days ago
    Game DevelopmentAuto-check passed

More from jasonkneen/tiny-world-builder

All 29 skills in this repo

  • Lightweight 3D Effects

    jasonkneen/tiny-world-builder

    Lightweight 3D effects for decorative elements and micro-interactions using Zdog, Vanta.js, and Vanilla-Tilt.js.

    1.6k GitHub starsUsed in 1 repo~5.7k tokens
    Auto-check passed

  • Threejs Primitive Reconstructor

    jasonkneen/tiny-world-builder

    create robust, browser-runnable three.js primitive reconstructions from static low-poly, voxel, isometric, or stylized game-art reference images.

    1.6k GitHub stars~1.1k tokensUpdated today
    Auto-check passed

  • Poly Pizza API

    jasonkneen/tiny-world-builder

    A skill your agent uses whenever an LLM agent needs to search, browse, or download 3D models from Poly Pizza (poly.pizza) using their REST API.

    1.6k GitHub stars~1.9k tokensUpdated today
    Auto-check passed

  • Tinyworld Block Button Style

    jasonkneen/tiny-world-builder

    A skill your agent uses when styling any tool/block button, palette tile, icon chip, or new clickable square in Tiny World Builder.

    1.6k GitHub stars~2k tokensUpdated today
    Auto-check passed

  • Tinyworld Ghost World Gen

    jasonkneen/tiny-world-builder

    A skill your agent uses when changing ghost board generation, path / road / river continuity, deterministic regen, edge connections, or anything that runs inside makeGhostWorld in…

    1.6k GitHub stars~1.6k tokensUpdated today
    Auto-check passed

  • Tinyworld Island And Planes

    jasonkneen/tiny-world-builder

    A skill your agent uses when changing the home island layout, edge dressing, undersides, autoincentive sponsor banner (now a top-left logo-adjacent DOM banner), plane/crop-duster flight paths…

    1.6k GitHub stars~4.7k tokensUpdated today
    Auto-check passed

Categories

Questions about Tinyworld Shader Fx

What does Tinyworld Shader Fx do?

A skill your agent uses when adding or changing GLSL effects in Tiny World Builder — landscape water, waterfalls, foam, smoke, explosions, damage/wear overlays, or the reusable TinyShaderFX library. Tinyworld Shader Fx is an agent skill from jasonkneen/tiny-world-builder. Use when adding or changing GLSL effects in Tiny World Builder — landscape water, waterfalls, foam, smoke, explosions, damage/wear overlays, or the reusable TinyShaderFX library.

When should I use Tinyworld Shader Fx?

Tinyworld Shader Fx fits situations like: changing GLSL effects in Tiny World Builder — landscape water; damage/wear overlays; the reusable TinyShaderFX library.

How do I install Tinyworld Shader Fx in Claude Code?

Run `npx skills add jasonkneen/tiny-world-builder --skill tinyworld-shader-fx -a claude-code`. Or copy the skill folder (.codex/skills/tinyworld-shader-fx in jasonkneen/tiny-world-builder) into .claude/skills/tinyworld-shader-fx in your project. Claude Code loads it when a task matches its description.

How do I install Tinyworld Shader Fx in Codex?

Run `npx skills add jasonkneen/tiny-world-builder --skill tinyworld-shader-fx -a codex`. Or copy the skill folder (.codex/skills/tinyworld-shader-fx in jasonkneen/tiny-world-builder) into .agents/skills/tinyworld-shader-fx in your project. Codex loads it when a task matches its description.

Can I use Tinyworld Shader Fx 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 jasonkneen/tiny-world-builder --skill tinyworld-shader-fx -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/tinyworld-shader-fx, .gemini/skills/tinyworld-shader-fx, .github/skills/tinyworld-shader-fx and .opencode/skills/tinyworld-shader-fx in your project.

What does Tinyworld Shader Fx need to run?

SKILL.md names no scripts, command-line tools or credentials: Tinyworld Shader Fx is instructions for the agent only.

Does Tinyworld Shader Fx 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 Tinyworld Shader Fx 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 Tinyworld Shader Fx use?

Tinyworld Shader Fx is published under the AGPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Tinyworld Shader Fx use?

About 1.9k tokens (SKILL.md is roughly 7.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Tinyworld Shader Fx?

Skills that share tags, products or a category with Tinyworld Shader Fx: Pixijs (RSamaium/CanvasEngine, 401 stars), New Experiment (Tresjs/tres, 3.8k stars), Assets Shader List All (IvanMurzak/Unity-MCP, 4.4k stars) and Handle Sdr Tonemap Lut (clshortfuse/renodx, 4.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Tinyworld Shader Fx?

jasonkneen (a GitHub user) maintains it in jasonkneen/tiny-world-builder, which has 1,592 GitHub stars. The repository holds 29 skills in this directory. The repository was last updated on October 10, 2026.

Source: jasonkneen/tiny-world-builder on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.