メニュー
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コマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
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" }),
}),
}
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 職業分類に基づく
