Menu
Use Koota for data-oriented Entity Component System architecture with React bindings.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Poll for changes to any value and trigger React re-renders when it changes.
Day-to-day coding style and patterns for R3F game development with Miniplex ECS.
Verekia's preferred project setup with Next.js Pages Router, Tailwind 4, oxfmt, oxlint, and TypeScript.
Use Zustand as a simple state store for entity management (not a true ECS).
Attach meshes to bones of a skinned mesh, such as attaching a sword to a character's hand.
Shake the camera when the player takes damage or on impacts for visual feedback.
| name | koota |
| description | Use Koota for data-oriented Entity Component System architecture with React bindings. |
Use Koota for data-oriented Entity Component System architecture with React bindings.
When setting up or undertaking important changes with Koota, fetch the documentations:
https://raw.githubusercontent.com/pmndrs/koota/refs/heads/main/README.md
Define traits (components) with trait(), create a world, spawn entities with traits, and query entities in systems. Use useQuery to reactively render entities and useTraitEffect to respond to trait changes.
trait() defines component schemas with default valuesworld.spawn() creates entities with traitsworld.query() finds entities matching traitsuseQuery() hook for reactive entity lists in ReactuseTraitEffect() for responding to trait changes without re-renderinguseFrame to update entities (they return null, not views)const Position = trait({ x: 0, y: 0 })
const IsCharacter = trait()
const world = createWorld()
// Spawn
world.spawn(Position({ x: 1, y: 2 }), IsCharacter)
// Query in system
world.query(Position).updateEach(([position]) => {
position.x += 0.01
})
// React component
const characters = useQuery(Position, IsCharacter)
This skill is part of verekia's r3f-gamedev.