koota — community community, ide skills, Claude Code, Cursor, Windsurf

v1.0.0
GitHub

About this Skill

Perfect for Frontend Agents needing performant real-time state management for React and TypeScript applications 🌎 Performant real-time state management for React and TypeScript

pmndrs pmndrs
[0]
[0]
Updated: 3/5/2026

Agent Capability Analysis

The koota skill by pmndrs is an open-source community AI agent skill for Claude Code and other IDE workflows, helping agents execute tasks with better context, repeatability, and domain-specific guidance.

Ideal Agent Persona

Perfect for Frontend Agents needing performant real-time state management for React and TypeScript applications

Core Value

Empowers agents to manage state using entities with composable traits, providing a scalable and efficient way to build complex applications using React and TypeScript, with features like schema-based traits, callback-based traits, and directional relations

Capabilities Granted for koota

Managing global state in React applications
Building entity-component-system architectures
Optimizing performance in real-time data-driven applications

! Prerequisites & Limits

  • Requires React and TypeScript setup
  • Limited to client-side state management
Labs Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

koota

Install koota, an AI agent skill for AI agent workflows and automation. Works with Claude Code, Cursor, and Windsurf with one-command setup.

SKILL.md
Readonly

Koota ECS

Koota manages state using entities with composable traits.

Glossary

  • Entity - A unique identifier pointing to data defined by traits. Spawned from a world.
  • Trait - A reusable data definition. Can be schema-based (SoA), callback-based (AoS), or a tag.
  • Relation - A directional connection between entities to build graphs.
  • World - The context for all entities and their data (traits).
  • Archetype - A unique combination of traits that entities share.
  • Query - Fetches entities matching an archetype. The primary way to batch update state.
  • Action - A discrete, synchronous data mutation (create, update, destroy). Reusable from any call site.
  • System - A reactive orchestrator that observes state changes and coordinates work, including async workflows. Runs in the frame loop or event callbacks.

Design Principles

Data-oriented

Behavior is separated from data. Data is defined as traits, entities compose traits, and systems mutate data on traits via queries. See Basic usage for a complete example.

Composable systems

Design systems as small, single-purpose units rather than monolithic functions that do everything in sequence. Each system should handle one concern so that behaviors can be toggled on/off independently.

typescript
1// Good: Composable systems - each can be enabled/disabled independently 2function applyVelocity(world: World) {} 3function applyGravity(world: World) {} 4function applyFriction(world: World) {} 5function syncToDOM(world: World) {} 6 7// Bad: Monolithic system - can't disable gravity without disabling everything 8function updatePhysicsAndRender(world: World) { 9 // velocity, gravity, friction, DOM sync all in one function 10}

This enables feature flags, debugging (disable one system to isolate issues), and flexible runtime configurations.

Decouple view from logic

Separate core state and logic (the "core") from the view ("app"):

  • Run logic independent of rendering
  • Swap views while keeping state (2D ↔ 3D)
  • Run logic in a worker or on a server

Prefer traits + actions over classes

Prefer not to use classes to encapsulate data and behavior. Use traits for data and actions for behavior. Only use classes when required by external libraries (e.g., THREE.js objects) or the user prefers it.

Directory structure

If the user has a preferred structure, follow it. Otherwise, use this guidance: the directory structure should mirror how the app's data model is organized. Separate core state/logic from the view layer:

  • Core - Pure TypeScript. Traits, systems, actions, world. No view imports.
  • View - Reads from world, mutates via actions. Organized by domain/feature.
src/
├── core/              # Pure TypeScript, no view imports
│   ├── traits/
│   ├── systems/
│   ├── actions/
│   └── world.ts
└── features/          # View layer, organized by domain

Files are organized by role, not by feature slice. Traits and systems are composable and don't map cleanly to features.

For detailed patterns and monorepo structures, see references/architecture.md.

Trait types

TypeSyntaxUse whenExamples
SoA (Schema)trait({ x: 0 })Simple primitive dataPosition, Velocity, Health
AoS (Callback)trait(() => new Thing())Complex objects/instancesRef (DOM), Keyboard (Set)
Tagtrait()No data, just a flagIsPlayer, IsEnemy, IsDead

Trait naming conventions

TypePatternExamples
TagsStart with IsIsPlayer, IsEnemy, IsDead
RelationsPrepositionalChildOf, HeldBy, Contains
TraitNounPosition, Velocity, Health

Relations

Relations build graphs between entities such as hierarchies, inventories, targeting.

typescript
1import { relation } from 'koota' 2 3const ChildOf = relation({ autoDestroy: 'orphan' }) // Hierarchy 4const Contains = relation({ store: { amount: 0 } }) // With data 5const Targeting = relation({ exclusive: true }) // One target only 6 7// Build graph 8const parent = world.spawn() 9const child = world.spawn(ChildOf(parent)) 10 11// Query children of parent 12const children = world.query(ChildOf(parent)) 13 14// Query all entities with any ChildOf relation 15const allChildren = world.query(ChildOf('*')) 16 17// Get targets from entity 18const items = entity.targetsFor(Contains) // Entity[] 19const target = entity.targetFor(Targeting) // Entity | undefined

For detailed patterns, traversal, ordered relations, and anti-patterns, see references/relations.md.

Basic usage

typescript
1import { trait, createWorld } from 'koota' 2 3// 1. Define traits 4const Position = trait({ x: 0, y: 0 }) 5const Velocity = trait({ x: 0, y: 0 }) 6const IsPlayer = trait() 7 8// 2. Create world and spawn entities 9const world = createWorld() 10const player = world.spawn(Position({ x: 100, y: 50 }), Velocity, IsPlayer) 11 12// 3. Query and update 13world.query(Position, Velocity).updateEach(([pos, vel]) => { 14 pos.x += vel.x 15 pos.y += vel.y 16})

Entities

Entities are unique identifiers that compose traits. Spawned from a world.

typescript
1// Spawn 2const entity = world.spawn(Position, Velocity) 3 4// Read/write traits 5entity.get(Position) // Read trait data 6entity.set(Position, { x: 10 }) // Write (triggers change events) 7entity.add(IsPlayer) // Add trait 8entity.remove(Velocity) // Remove trait 9entity.has(Position) // Check if has trait 10 11// Destroy 12entity.destroy()

Entity IDs

An entity is internally a number packed with entity ID, generation ID (for recycling), and world ID. Safe to store directly for persistence or networking.

typescript
1entity.id() // Just the entity ID (reused after destroy) 2entity // Full packed number (unique forever)

Typing

Use TraitRecord to get the type that entity.get() returns

typescript
1type PositionRecord = TraitRecord<typeof Position>

Queries

Queries fetch entities matching an archetype and are the primary way to batch update state.

typescript
1// Query and update 2world.query(Position, Velocity).updateEach(([pos, vel]) => { 3 pos.x += vel.x 4 pos.y += vel.y 5}) 6 7// Read-only iteration (no write-back) 8const data: Array<{ x: number; y: number }> = [] 9world.query(Position, Velocity).readEach(([pos, vel]) => { 10 data.push({ x: pos.x, y: pos.y }) 11}) 12 13// Get first match 14const player = world.queryFirst(IsPlayer, Position) 15 16// Filter with modifiers 17world.query(Position, Not(Velocity)) // Has Position but not Velocity 18world.query(Or(IsPlayer, IsEnemy)) // Has either trait

Note: updateEach/readEach only return data-bearing traits (SoA/AoS). Tags, Not(), and relation filters are excluded:

typescript
1world.query(IsPlayer, Position, Velocity).updateEach(([pos, vel]) => { 2 // Array has 2 elements - IsPlayer (tag) excluded 3})

For tracking changes, caching queries, and advanced patterns, see references/queries.md.

React integration

Imports: Core types (World, Entity) from 'koota'. React hooks from 'koota/react'.

Change detection: entity.set() and world.set() trigger change events that cause hooks like useTrait to rerender. For AoS traits where you mutate objects directly, manually signal with entity.changed(Trait).

For React hooks and actions, see references/react-hooks.md.

For component patterns (App, Startup, Renderer, view sync, input), see references/react-patterns.md.

Runtime

Systems query the world and update entities. Run them via frameloop (continuous) or event handlers (discrete).

For systems, frameloop, event-driven patterns, and time management, see references/runtime.md.

FAQ & Installation Steps

These questions and steps mirror the structured data on this page for better search understanding.

? Frequently Asked Questions

What is koota?

Perfect for Frontend Agents needing performant real-time state management for React and TypeScript applications 🌎 Performant real-time state management for React and TypeScript

How do I install koota?

Run the command: npx killer-skills add pmndrs/koota/koota. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for koota?

Key use cases include: Managing global state in React applications, Building entity-component-system architectures, Optimizing performance in real-time data-driven applications.

Which IDEs are compatible with koota?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for koota?

Requires React and TypeScript setup. Limited to client-side state management.

How To Install

  1. 1. Open your terminal

    Open the terminal or command line in your project directory.

  2. 2. Run the install command

    Run: npx killer-skills add pmndrs/koota/koota. The CLI will automatically detect your IDE or AI agent and configure the skill.

  3. 3. Start using the skill

    The skill is now active. Your AI agent can use koota immediately in the current project.

Related Skills

Looking for an alternative to koota or another community skill for your workflow? Explore these related open-source skills.

View All

widget-generator

Logo of f
f

f.k.a. Awesome ChatGPT Prompts. Share, discover, and collect prompts from the community. Free and open source — self-host for your organization with complete privacy.

149.6k
0
AI

flags

Logo of vercel
vercel

flags is a Next.js feature management skill that enables developers to efficiently add or modify framework feature flags, streamlining React application development.

138.4k
0
Browser

zustand

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

72.8k
0
AI

data-fetching

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

72.8k
0
AI