菜单
Create a new screen/page for a Rezi TUI application. Use when adding views, pages, or screens to an app.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/RtlZeroMemory/Rezi --skill rezi-create-screen命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Profile and optimize Rezi app performance. Use when app feels slow, frames drop, or render phases take too long.
Add routing with guards and nested outlets to a Rezi app. Use when building multi-page/screen TUI applications.
Set up form input handling with validation and submission. Use when building forms with inputs, selects, checkboxes, etc.
基于 SOC 职业分类
正在显示 SKILL.md
| 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"} |
Use this skill when:
packages/core/src/widgets/ui.ts — all ui.* factory functionspackages/core/src/widgets/composition.ts — defineWidget() and animation hookspackages/core/src/router/ — router and route definitionspackages/core/src/keybindings/ — keybinding systempackages/create-rezi/templates/starship/ — large-screen routing and animation patternsdocs/guide/widget-authoring.md — design system integration patternsCreate 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.,
}),
]),
]),
});
}
Prefer intent-based button styling (intent: "primary", "secondary", "danger", "success", "warning", "link"):
ui.button({
id: "action",
label: "Go",
intent: "primary",
onPress: handleAction,
})
Use ui.page() or ui.appShell() as the screen root
If the screen needs motion, prefer declarative hooks inside defineWidget:
import { defineWidget, ui, useAnimatedValue, useTransition } from "@rezi-ui/core";
const AnimatedScreen = defineWidget<{ target: number }>((props, ctx) => {
const drift = useTransition(ctx, props.target, {
duration: 180,
easing: "easeOutCubic",
});
const energy = useAnimatedValue(ctx, props.target, {
mode: "spring",
spring: {
stiffness: 190,
damping: 22,
},
});
return ui.box(
{
width: Math.round(20 + drift),
opacity: Math.max(0.35, Math.min(1, energy.value / 100)),
transition: { duration: 180, easing: "easeInOutCubic", properties: ["size", "opacity"] },
exitTransition: { duration: 200, easing: "easeInCubic", properties: ["opacity"] },
},
[ui.text("Animated screen")],
);
});
If using router, add a route definition (see rezi-routing skill)
Add keybindings for screen-specific actions in src/helpers/keybindings.ts or your route command resolver
Wire into src/main.ts via a view builder or route factory:
app.view((state) =>
renderMyScreen(state, {
onPrimaryAction: () => dispatch({ type: "open-my-screen" }),
}),
);
For routed apps, add the screen to src/screens/index.ts:
{
id: "my-screen",
title: "My Screen",
screen: (_params, context) =>
renderMyScreen(context.state, {
onPrimaryAction: () => dispatch({ type: "open-my-screen" }),
}),
}