---
name: ibgib-create-client-shell
description: Scaffolds the foundational UI Shell for an ibgib client app. Generates the shell service, constants, and types required for UI management and component registration.
---

# Skill: ibgib-create-client-shell

## What This Skill Does

This skill scaffolds the UI Shell architecture for an `ibgib` client application. The Shell Service acts as a singleton on `globalThis` that manages DOM interactions, handles shell-specific events (e.g. burger menus, window resizing), and coordinates UI activation once the Metaspace and App Witness are initialized.

For full architectural context, refer to [`docs/IBGIB_CLIENT_APPS_GUIDE.md`](../../../docs/IBGIB_CLIENT_APPS_GUIDE.md).

---

## Parameters (Tokens)
- `{{APP_NAME}}`: kebab-case (e.g. `test-app`)
- `{{APP_DIR_NAME}}`: folder name (e.g. `test-app`)
- `{{APP_CLASSNAME_PREFIX}}`: PascalCase (e.g. `TestApp`)
- `{{APP_CLASSNAME}}`: e.g. `TestAppApp_V1`
- `{{APP_HUMAN_NAME}}`: e.g. `Test App`
- `{{APP_VAR_NAME}}`: camelCase (e.g. `testApp`)

---

## Output Files
The skill generates:
1. `src/ui/shell/{{APP_DIR_NAME}}-shell-service.mts` (or `src/client/ui/shell/...`)
2. `src/ui/shell/{{APP_DIR_NAME}}-shell-constants.mts`
3. `src/ui/shell/{{APP_DIR_NAME}}-shell-types.mts`

---

## Usage Instructions
1. Ensure the `src/ui/shell` (or `src/client/ui/shell`) directory exists.
2. Generate the shell service, constants, and types from templates in `templates/ui/shell/`.
3. Update `script.mts` to import and call the shell factory:
   ```typescript
   import { get{{APP_CLASSNAME_PREFIX}}ShellSvc } from "./ui/shell/{{APP_DIR_NAME}}-shell-service.mjs";
   get{{APP_CLASSNAME_PREFIX}}ShellSvc();
   ```
4. Update `bootstrap.mts` to invoke `get{{APP_CLASSNAME_PREFIX}}ShellSvc().onEngineReady()` inside the `onReady` lifecycle hook.