Installs into .claude/skills of the current project.
Are you the author of How To?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/iii-hq-how-to)
<!-- generated by iii-skill-render. DO NOT EDIT (changes here are overwritten on the next render). Edit docs/0-12-0/how-to/build-a-realtime-todo-app.mdx. -->
# Build a real-time todo app
A full-stack reactive todo app over a single browser-to-engine WebSocket. Function calls and live
stream change events flow over the same connection.
## Engine configuration
The `config.yaml` workers needed to support a browser-driven reactive app.
## Backend
The worker, auth, stream wrapper, and CRUD functions that power the app server-side.
### Worker setup
Connect a worker, register the functions the app needs, and bind triggers.
### Auth function (RBAC)
An auth function runs on each new browser WebSocket connection, issues a session ID, and namespaces
the session's registered functions to prevent collisions.
### Stream wrapper
A typed wrapper class over `stream::get` / `stream::set` / `stream::list` / `stream::delete` for one
named stream.
### Functions
The CRUD functions the browser calls (create, toggle, delete, list) wired to write through the
stream wrapper.
## Frontend
The browser-side WebSocket connection and reactive hook that render live updates.
### Connection
Connect the browser to the engine over a single WebSocket using `iii-browser-sdk`.
### Real-time hook
A hook that subscribes to the stream and re-renders the UI on each change event the engine pushes.
## Key concepts
The reactive primitives this app relies on: single-WebSocket transport, per-session RBAC
namespacing, and stream-driven UI updates.
