SpacetimeDB Best Practices Skill

SpacetimeDB Best Practices

Comprehensive development guide for SpacetimeDB applications, covering both TypeScript server modules and client SDK integration with React. Contains rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.

Package: spacetimedb (v1.4.0+)

When to Apply

Reference these guidelines when:

Writing SpacetimeDB server modules in TypeScript
Designing table schemas and indexes
Implementing reducers for state mutations
Setting up client subscriptions and queries
Integrating SpacetimeDB with React applications
Optimizing real-time sync performance

Rule Categories by Priority

| Priority | Category | Impact | Prefix | |----------|----------|--------|--------| | 1 | Module Design | CRITICAL | module- | | 2 | Table Schema & Indexing | CRITICAL | table- | | 3 | Reducer Patterns | HIGH | reducer- | | 4 | Subscription Optimization | HIGH | subscription- | | 5 | Client State Management | MEDIUM-HIGH | client- | | 6 | React Integration | MEDIUM | react- | | 7 | TypeScript Patterns | MEDIUM | ts- | | 8 | Real-time Sync | LOW-MEDIUM | sync- |

Quick Reference

Server Module API (TypeScript)

import { spacetimedb, table, t, ReducerContext } from 'spacetimedb';

// Define tables with the table builder
const Player = table(
  { name: 'player', public: true },
  {
    identity: t.identity().primaryKey(),
    name: t.string(),
    score: t.u64().index(),
    isOnline: t.bool().index(),
  }
);

// Define reducers
spacetimedb.reducer('create_player', { name: t.string() }, (ctx: ReducerContext, { name }) => {
  ctx.db.player.insert({
    identity: ctx.sender,
    name,
    score: 0n,
    isOnline: true,
  });
});

// Lifecycle hooks
spacetimedb.init((ctx: ReducerContext) => { /* module init */ });
spacetimedb.clientConnected((ctx: ReducerContext) => { /* client connected */ });
spacetimedb.clientDisconnected((ctx: ReducerContext) => { /* client disconnected */ });

Client SDK API (TypeScript)

import { DbConnection } from './generated';

// Build connection
const conn = DbConnection.builder()
  .withUri('ws://localhost:3000')
  .withModuleName('my-module')
  .onConnect((ctx, identity, token) => {
    // Setup subscriptions
    conn.subscription(['SELECT * FROM player WHERE isOnline = true']);
  })
  .onDisconnect((ctx, error) => { /* handle disconnect */ })
  .build();

// Call reducers
await conn.reducers.createPlayer('Alice');

// Access tables
const player = conn.db.player.identity.find(identity);

React Integration

import { useTable, where, eq } from 'spacetimedb/react';
import { DbConnection, Player } from './generated';

function OnlinePlayers() {
  const { rows: players } = useTable<DbConnection, Player>(
    'player',
    where(eq('isOnline', true))
  );

  return players.map(p => <div key={p.identity.toHexString()}>{p.name}</div>);
}

Rule Categories

1. Module Design (CRITICAL)

module-single-responsibility - One module per domain concept
module-lifecycle - Use lifecycle hooks appropriately (init, clientConnected, clientDisconnected)
module-error-handling - Handle errors gracefully in module code
module-type-exports - Export types for client consumption

2. Table Schema & Indexing (CRITICAL)

table-primary-keys - Choose appropriate primary key strategies
table-indexing - Add .index() for frequently queried columns
table-relationships - Model relationships between tables correctly
table-column-types - Use appropriate SpacetimeDB types

3. Reducer Patterns (HIGH)

reducer-atomicity - Keep reducers atomic and focused
reducer-validation - Validate inputs at reducer entry
reducer-authorization - Check caller identity for sensitive operations
reducer-batch-operations - Batch related mutations in single reducer

4. Subscription Optimization (HIGH)

subscription-selective - Subscribe only to needed data
subscription-filters - Use subscription filters to reduce data transfer
subscription-cleanup - Clean up subscriptions when no longer needed
subscription-batching - Batch subscription setup on client connect

5. Client State Management (MEDIUM-HIGH)

client-connection-lifecycle - Handle connection/reconnection properly
client-optimistic-updates - Use optimistic updates for responsive UI
client-error-recovery - Handle reducer errors gracefully
client-identity - Manage identity tokens securely

6. React Integration (MEDIUM)

react-use-subscription - Use subscription hooks correctly
react-table-hooks - Use useTable<DbConnection, Type>() for reactive data
react-reducer-hooks - Call conn.reducers.* with proper error handling
react-connection-status - Display connection status to users

7. TypeScript Patterns (MEDIUM)

ts-generated-types - Use generated types from SpacetimeDB CLI
ts-strict-mode - Enable strict TypeScript for better type safety
ts-discriminated-unions - Use discriminated unions for state
ts-type-guards - Implement type guards for runtime validation

8. Real-time Sync (LOW-MEDIUM)

sync-conflict-resolution - Handle concurrent modifications
sync-offline-support - Design for offline-first when needed
sync-debounce-updates - Debounce rapid UI updates
sync-presence - Implement user presence efficiently

How to Use

Read individual rule files for detailed explanations and code examples:

rules/module-single-responsibility.md
rules/table-primary-keys.md
rules/_sections.md

Each rule file contains:

Brief explanation of why it matters
Incorrect code example with explanation
Correct code example with explanation
Additional context and references

Full Compiled Document

For the complete guide with all rules expanded: AGENTS.md

Agent Skills: SpacetimeDB Best Practices

Install this agent skill to your local

Skill Files