mozaiks: Skill for Claude Code

Before starting: git fetch origin && gh pr list --state open && git log origin/main --oneline -3 — if another agent has an open PR touching the same files you need, wait for it to merge, then branch from fresh origin/main.

Help the user add a page to an existing Mozaiks application.

Pages in Mozaiks are declared as YAML schemas (AppPageSchema) — not raw React. The platform shell renders them automatically using pre-built primitives.

---

What a Page Is

app/ui/pages/
└── <name>.yaml       ← the page schema

# Or folder form:
app/ui/pages/<name>/
└── page.yaml

The SchemaPage route component fetches /api/pages/<name>, and PageRenderer assembles the layout from the schema using the primitive registry.

---

Steps to Add a Page

1. Create the page schema

touch app/ui/pages/<name>.yaml

2. Write the schema

name: <name>
title: <Page Title>
layout: grid               # grid | sidebar | full-width | split
shell_mode: standard       # standard | workspace | conversation | focused | immersive | public

sections:
  - id: <section_id>
    title: <Section Title>
    primitive: DataTable   # see primitives below
    config:
      columns:
        - { key: id,    label: ID }
        - { key: name,  label: Name }
    api_endpoint: /api/modules/<module>/<action>   # optional live data

3. Restart the backend

mozaiks serve .

Pages are loaded at startup. The route /<name> is served automatically.

4. Add shell access when needed

If the page should be globally reachable, prefer route-level navigation metadata on the page itself:

navigation:
  scope: global
  icon: dashboard
  order: 20

Use scope: local for workspace/module subsections that should render through local navigation instead of crowding the global shell.

Choose shell_mode for route chrome:

• standard: normal app page.
• workspace: dense dashboard, admin/profile/module workspace, or local nav surface.
• conversation: chat, DM, inbox thread, or support conversation where the composer owns the bottom edge.
• focused: onboarding, setup, review, approval, or checkout-style route.
• immersive: map, canvas, media, game, or full-viewport route.
• public: legal, marketing, or unauthenticated information route.