building-happy-oyster-frontends

Extends a HappyOyster example app with new worlds, controls, and UI on the typed Reactor SDK.

Updated Aug 16, 2026
One-click install
npx skills add https://github.com/yashhh-max/world-that-hunts-you --skill building-happy-oyster-frontends-yashhh-max
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: building-happy-oyster-frontends
Source: https://github.com/yashhh-max/world-that-hunts-you/tree/main/skill
Command: npx skills add https://github.com/yashhh-max/world-that-hunts-you --skill building-happy-oyster-frontends-yashhh-max

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @reactor-models/happy-oyster, @reactor-team/js-sdk, @reactor-team/ui.

What problem does it solve? Developers who clone the HappyOyster example app risk breaking its established patterns when adding worlds, controls, or UI, because the app relies on subtle rules like per-session mode locking, phase-driven lifecycle orchestration, and held-state input handling. ## Core Features & Use Cases - Architecture Map: Documents the single client surface (useHappyOysterClient()), the connect → createWorld/attachWorld → startTravel lifecycle, and why orchestration must be phase-driven and idempotent. - Input & Transport Rules: Explains the Adventure held-input model (hold/release with key stacks and blur clearing) and the Directing transport (instruct, pause, resume, rewind with 4s snapping). - Auth & World Management: Covers the server-side API key to JWT exchange route, world creation vs instant attach via saved encryptedWorldId, and adding featured worlds via JSON entries. - Use Case: You cloned the repo and want to add a new control panel for a Directing world; the skill tells you to consume useHappyOysterClient(), gate on streaming, render instructions from travelState, and avoid rebuilding the world. ## Quick Start Ask the AI to add a new featured world or a new control component to the cloned HappyOyster app while following the patterns in this guide.

Frequently Asked Questions about building-happy-oyster-frontends

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a new world to the HappyOyster example app?

Add one entry to lib/featured-worlds.json with a key, title, mode, paragraph-length prompt, and gradient. To make it attach instantly instead of building, add its encryptedWorldId to lib/world-pins.json; no component changes are needed.

How do HappyOyster Adventure controls work in React?

Adventure controls are held state, not one-shot events: wire keydown to hold() and keyup to release(), and the SDK re-sends the command every generation chunk. Track keys in per-axis stacks for chords and clear all axes on window blur.

Can I switch between Adventure and Directing modes mid-session?

No, the mode is fixed per session because each experience is its own Reactor model chosen before connecting. To switch, remount the provider with a different mode key, which creates a fresh session.

Why does attaching a world fail with MODE_MISMATCH?

MODE_MISMATCH occurs when a world created under one experience is attached through the other mode's model. Each encryptedWorldId belongs to one mode, so attach it through the same experience that created it.

How does JWT authentication work with the Reactor API key?

The rk_ API key stays server-side in a GET route that exchanges it for a short-lived JWT, which is the only credential sent to the browser. The route derives its cache window from the server-granted expires_at, and tokens live at most 6 hours.

Why should screens use useHappyOysterClient instead of useHappyOyster?

All screens consume the single useHappyOysterClient() surface so that ho-client.tsx remains the only file touching the SDK hook directly. This indirection keeps screens decoupled from the SDK and prevents drift from the authoritative world_state snapshot.