Menu
Editing root.tsx, entry points, dev/prod workflow, environment variables, and the Huuma UI build pipeline.
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
Adding server-side mutations and form handling to a Huuma UI app with type-safe .remote.ts functions.
Diagnosing and fixing Huuma UI lint violations and runtime errors after they occur.
Building or navigating a Huuma UI app — file conventions, server/client boundary rules, dev workflow, and where to look for authoritative answers.
Adding translations and multilingual routing to a Huuma UI app with setupI18n, useI18n middleware, and the T component.
Adding client interactivity to a Huuma UI app with `.client.tsx` islands, on-* events, refs, and hydration boundaries.
Adding Huuma UI pages, layouts, routes, dynamic params, data loading with resolvers, metadata, and middleware.
| name | huuma-ui-app-and-build |
| description | Editing root.tsx, entry points, dev/prod workflow, environment variables, and the Huuma UI build pipeline. |
Use this skill when the agent is editing root.tsx, configuring entry points, setting up the dev or build workflow, or handling env vars and live reload in a Huuma UI app.
createUIApp(root, options) from @huuma/ui/server.root is the root page component, typically in root.tsx.@huuma/route and uses the same routing/middleware patterns.createUIApp example.root.tsxroot.tsx must render the Huuma shell components (all imported from @huuma/ui/server):
<Meta /> — renders page metadata.<Scripts head /> — head scripts.<Scripts /> — body scripts.<Launch /> — launches the client runtime so islands hydrate.If <Launch> is missing, islands never hydrate.
prepare(app, options) from @huuma/ui/server/pack/list (auto-discovers routes, does not bundle).list(app, { isProd: true, routesPath }) then pack(app, list) from @huuma/ui/server/pack. Triggered via --bundle flag..huuma/ directory contains the manifest (list.ts) and bundled scripts. Never hand-edit it.Typical deno.json tasks (scaffolded by huuma project):
deno task dev — run prepare() in dev mode.deno task bundle — run with --bundle flag and pack().deno task start — start the production server.deno.json for the exact permission flags and commands.PUBLIC_ are shimmed into client bundles..remote.ts or server components..huuma/shims/ during pack() (the build step in @huuma/ui/server/pack).enableLiveReload(app) bundles a live-reload client and registers a /_websocket route.deno.json ("lint": { "plugins": ["jsr:@huuma/ui/lint"] }) so the boundary rules are enforced:
.remote.ts exports must be export async function.$-hooks cannot run in async components..client.tsx default export cannot be async.root.tsx contains <Meta>, <Scripts>, and <Launch>.prepare(); prod uses --bundle + pack().PUBLIC_ env vars only on the client..huuma/ is generated and ignored by version control.