rezi-create-screen

name	rezi-create-screen
description	Create a new screen/page for a Rezi TUI application. Use when adding views, pages, or screens to an app.
user-invocable	true
allowed-tools	Read, Glob, Grep, Edit, Write
argument-hint	[screen-name]
metadata	{"short-description":"Create app screen"}

When to use

Use this skill when:

• Adding a new screen or page to a Rezi application
• Setting up a view function for an app route
• Scaffolding a new section of a TUI

Source of truth

• packages/core/src/widgets/ui.ts — all ui.* factory functions
• packages/core/src/widgets/composition.ts — defineWidget() and animation hooks
• packages/core/src/router/ — router and route definitions
• packages/core/src/keybindings/ — keybinding system
• packages/create-rezi/templates/starship/ — large-screen routing and animation patterns
• docs/guide/widget-authoring.md — design system integration patterns

Steps

1. Create screen file at src/screens/{screen-name}.ts:

   import type { VNode } from "@rezi-ui/core";
   import { ui } from "@rezi-ui/core";
   import type { AppState } from "../types.js";
   
   type ScreenHandlers = Readonly<{
     onPrimaryAction: () => void;
   }>;
   
   export function renderMyScreen(_state: AppState, handlers: ScreenHandlers): VNode {
     return ui.page({
       p: 1,
       gap: 1,
       header: ui.header({ title: "Screen Title" }),
       body: ui.column({ gap: 1 }, [
         ui.text("Screen content"),
         ui.actions([
           ui.button({
             id: "my-screen-action",
             label: "Go",
             : ,
             : handlers.,
           }),
         ]),
       ]),
     });
   }
   

Verification

• Screen renders without errors
• Navigation keybindings work
• State types include any new fields
• For animated screens: transitions retarget smoothly and no timer leaks occur on unmount