LLMs

three-flatland provides machine-readable documentation so AI coding assistants can help you write correct code from the start. This page explains what's available and includes ready-to-use prompts.

Machine-Readable Documentation

three-flatland publishes two files that AI assistants can consume directly:

| File | What it contains | When to use it | |------|------------------|----------------| | llms.txt | Links to all docs pages, guides, and examples | AI tools that can browse and follow links | | llms-full.txt | Self-contained API reference with imports, classes, effects, and examples | AI tools that need everything in one file |

These follow the llms.txt standard  — a convention for providing LLM-friendly documentation alongside your website.

How this helps

Without context, AI assistants often generate three-flatland code with wrong imports, missing await renderer.init(), or using WebGLRenderer instead of WebGPURenderer. These files prevent those common mistakes by giving the AI the right patterns upfront.

Prompts

Copy a prompt below, paste it into your AI assistant, and replace the placeholder at the end with your task.

Getting Started

The general-purpose prompt. Works with any AI assistant that can fetch URLs.

I'm working with three-flatland, a 2D sprite and effects library for Three.js
using WebGPU and TSL (Three Shader Language). It's currently in alpha.

Read this reference for the API:
https://thejustinwalsh.com/three-flatland/llms-full.txt

Key things to know:
- Three.js users import from "three-flatland"
- React Three Fiber users import from "three-flatland/react"
- TSL effect nodes come from "@three-flatland/nodes"
- Install: npm install three-flatland three koota
- Requires three.js >= 0.183.1, koota, and WebGPURenderer from "three/webgpu"

Help me with the following:
[Describe your task here]

Build from an Example

Start from a working example and adapt it. The AI reads the actual source code from GitHub, so it builds on patterns that are known to work.

Three.js

I'm building a project with three-flatland (2D sprites for Three.js/WebGPU).

Read the API reference: https://thejustinwalsh.com/three-flatland/llms-full.txt

Then fetch this example source from GitHub:
https://raw.githubusercontent.com/thejustinwalsh/three-flatland/main/examples/three/EXAMPLE_NAME/main.ts

Adapt it for my needs:
[Describe what you want to build]

React

I'm building a React Three Fiber project with three-flatland (2D sprites for Three.js/WebGPU).

Read the API reference: https://thejustinwalsh.com/three-flatland/llms-full.txt

Then fetch this example source from GitHub:
https://raw.githubusercontent.com/thejustinwalsh/three-flatland/main/examples/react/EXAMPLE_NAME/App.tsx

Adapt it for my needs:
[Describe what you want to build]

Replace EXAMPLE_NAME with one of these:

| Example | What it demonstrates | |---------|---------------------| | basic-sprite | Texture loading, sprite creation, interaction | | animation | Spritesheet animation with AnimatedSprite2D | | batch-demo | Thousands of sprites in few draw calls | | tsl-nodes | Per-sprite effects with MaterialEffect and TSL nodes | | pass-effects | Full-screen post-processing with PassEffect | | tilemap | Tiled/LDtk tilemap loading and rendering | | lighting | 2D lighting, draggable point lights, preset comparison | | skia | Skia WASM vector graphics — shapes, text, paths, gradients | | slug-text | GPU-rendered vector text with the Slug font pipeline | | knightmark | Sprite benchmark with batching stress test |

Deep Context (File Access Required)

For AI assistants that can read local files — Claude Code, Cursor, Copilot workspace. The AI reads the project's own documentation files and explores the source code based on your task.

I'm working in the three-flatland repository.

Start by reading these files:
1. CLAUDE.md — Project instructions, architecture, build commands
2. README.md — API overview and quick start examples

Then explore based on what I need:
- API details: read packages/three-flatland/src/index.ts and follow exports
- Effect nodes: read packages/nodes/src/ category directories
- Examples: read examples/three/ or examples/react/
- React integration: read packages/three-flatland/src/react.ts

Help me with the following:
[Describe your task here]

Common Pitfalls

These are the mistakes AI assistants make most often with three-flatland. If you see any of these in generated code, correct the AI:

| Mistake | Fix | |---------|-----| | new THREE.WebGLRenderer() | Use new WebGPURenderer() from 'three/webgpu' | | import { ... } from '@three-flatland/core' | Import from 'three-flatland' (or 'three-flatland/react') | | Missing await renderer.init() | WebGPU requires async initialization before rendering | | Using THREE.Sprite | Use Sprite2D from three-flatland — different API entirely | | renderer.render(scene, camera) with Flatland | Use flatland.render(renderer) — Flatland manages its own scene and camera |