Agent skill

Ink Tui Wizard

by novuhq in novuhq/novu

Build terminal user interfaces (TUIs) using Ink (React for CLIs) and @inkjs/ui with a reactive, session-driven wizard pattern.

MITAuto-check passedFrontend & Design

Install Ink Tui Wizard

skills CLI
$ npx skills add novuhq/novu --skill ink-tui-wizard -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install novuhq/novu ink-tui-wizard --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/novuhq/novu.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.cursor/skills/ink-tui .claude/skills/ink-tui-wizard && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
ink-tui-wizard
GitHub stars
40k
Token cost
~1.9k tokens
SKILL.md length
606 words
Files
7 (incl. references)
Skills in repo
28
Repo updated
First seen
Licence
MIT

At a glance

Build terminal user interfaces (TUIs) using Ink (React for CLIs) and @inkjs/ui with a reactive, session-driven wizard pattern.

  • Works in 4 steps: Create the component in… → Add to Screen enum in router.ts → Add a FlowEntry to the flow array with… → …
  • Creating interactive CLI installation wizards
  • SKILL.md covers When to use this skill, Core architecture, Ink rendering model and Terminal compatibility, plus 1 more section
  • Calls pnpm

What it does

Ink Tui Wizard is an agent skill from novuhq/novu. Build terminal user interfaces (TUIs) using Ink (React for CLIs) and @inkjs/ui with a reactive, session-driven wizard pattern. Use when creating interactive CLI installation wizards, setup flows, or multi-step terminal applications in Node.js/TypeScript. Covers reactive screen resolution, declarative flow pipelines, overlay interrupts, session state management, Ink components, Flexbox terminal layout, and graceful degradation across terminal environments.

Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. The skill folder holds 7 other files, including reference files (for example `references/ARCHITECTURE.md`, `references/INK-API.md` and `references/INKJS-UI.md`). Compatibility notes: Requires Node.js 18+. Designed for Claude Code or similar coding agents.

It sits in Frontend & Design, covering Session handoff, Error handling and CSS and styling. It works with React, Node.js and TypeScript. The repository describes itself as: The open-source communication infrastructure for agents and products. The licence is MIT.

When your agent uses it

  • Creating interactive CLI installation wizards
  • Multi-step terminal applications in Node.js/TypeScript

Example prompts

  • “/ink-tui-wizard”

Requirements

  • Node.js
  • Compatibility (from SKILL.md): Requires Node.js 18+. Designed for Claude Code or similar coding agents.

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Create the component in src/ui/tui/screens/
  2. Add to Screen enum in router.ts
  3. Add a FlowEntry to the flow array with an isComplete predicate
  4. Register in screen-registry.tsx

What it can do on your machine

Read from SKILL.md and the folder at commit c4d3eda. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • pnpm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use pnpm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    Requires Node.js 18+. Designed for Claude Code or similar coding agents.

    From compatibility in the SKILL.md frontmatter.

Context cost

Ink Tui Wizard loads about 1.9k tokens when it runs, and up to ~11k if it reads all its reference files. Until then it costs about 119 tokens; SKILL.md has 606 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~119
When it runs · the whole SKILL.md, loaded when a task matches
~1.9k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~11k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from novuhq/novu at commit c4d3eda, republished under its MIT licence (© novuhq). 606 words, ~1,926 tokens.

Download SKILL.mdSave it as .claude/skills/ink-tui-wizard/SKILL.md (or your agent's skills folder). This skill also uses 6 other files; get the full folder from GitHub.
name
ink-tui-wizard
description
Build terminal user interfaces (TUIs) using Ink (React for CLIs) and @inkjs/ui with a reactive, session-driven wizard pattern. Use when creating interactive CLI installation wizards, setup flows, or multi-step terminal applications in Node.js/TypeScript. Covers reactive screen resolution, declarative flow pipelines, overlay interrupts, session state management, Ink components, Flexbox terminal layout, and graceful degradation across terminal environments.
compatibility
Requires Node.js 18+. Designed for Claude Code or similar coding agents.
license
MIT
metadata.author
posthog
metadata.version
0.3
metadata.domain
cli-tui

Ink TUI Wizard Skill

Build beautiful, interactive terminal wizard interfaces using Ink (React for CLIs).

Ink is the dominant Node.js TUI framework — used by Claude Code (Anthropic), Gemini CLI (Google), GitHub Copilot CLI, Cloudflare Wrangler, Shopify CLI, Prisma, and many others.

When to use this skill

  • Creating multi-step CLI installation or setup wizards
  • Building reactive, session-driven terminal interfaces
  • Adding real-time progress, spinners, or status displays to CLI tools
  • Any Node.js/TypeScript CLI that needs more than sequential prompts

Core architecture

This skill follows a reactive session-driven pattern: the rendered screen is a pure function of session state. Business logic sets state through store setters. The router derives which screen should be active. Nobody imperatively pushes screens around.

See references/ARCHITECTURE.md for the full reactive architecture: session, router, store, screen resolution, overlays, and data flow.

Key concepts
  • WizardSession (src/lib/wizard-session.ts) — single source of truth for all wizard decisions
  • WizardRouter (src/ui/tui/router.ts) — declarative flow pipelines with isComplete predicates per screen
  • WizardStore (src/ui/tui/store.ts) — nanostores-backed reactive store with explicit setters that trigger React re-renders via useSyncExternalStore
  • WizardUI (src/ui/wizard-ui.ts) — interface bridging business logic to store; implemented by InkUI (TUI) and LoggingUI (CI)
  • Screen registry (src/ui/tui/screen-registry.tsx) — factory function mapping screen names to components (App.tsx never changes)
  • Services (src/ui/tui/services/) — injected into screens via props (no dynamic imports in React components)
  • Overlays — interrupt stack for outage/error modals, orthogonal to flows
Adding a screen
  1. Create the component in src/ui/tui/screens/
  2. Add to Screen enum in router.ts
  3. Add a FlowEntry to the flow array with an isComplete predicate
  4. Register in screen-registry.tsx

No other files change.

Adding store state

Two patterns depending on the data:

  • Session state (affects screen resolution): add field to WizardSession, add setter to WizardStore that calls emitChange(), add method to WizardUI interface + both implementations
  • Observation state (display-only, e.g., agent progress): add private atom to WizardStore, add getter + setter, add method to WizardUI interface + both implementations

Read store.ts for examples of both patterns.

Layout primitives

The project has reusable layout primitives in src/ui/tui/primitives/. Always use these instead of building from scratch.

All primitives are barrel-exported from src/ui/tui/primitives/index.ts. See references/PRIMITIVES.md for the catalog. Read each primitive's source file for its current props interface.

Shared style constants (Colors, Icons, HAlign, VAlign) live in src/ui/tui/styles.ts.

Playground: Run pnpm try --playground to see all primitives in action.

Show full SKILL.md (232 more words)Show less
Enums everywhere

All state comparisons use TypeScript enums — no string literals. See the source files for current values:

  • Screen, Overlay, Flow — in router.ts
  • RunPhase, OutroKind — in wizard-session.ts
  • TaskStatus — in wizard-ui.ts
Key dependencies
ink                   # Core: React renderer for terminals (uses Yoga for Flexbox)
react                 # Peer dependency
@inkjs/ui             # Official component library: Select, TextInput, Spinner,
                      # ProgressBar, ConfirmInput, MultiSelect, Badge,
                      # StatusMessage, Alert, OrderedList, UnorderedList
figures               # Unicode/ASCII symbol fallbacks (cross-platform)

Do NOT use the older standalone packages (ink-text-input, ink-select-input, ink-spinner). The @inkjs/ui package supersedes them.

Project structure
src/ui/tui/
├── App.tsx                    # Thin shell — calls screen registry factory
├── store.ts                   # WizardStore: nanostores + session setters
├── router.ts                  # WizardRouter: flow pipelines + overlay stack
├── ink-ui.ts                  # InkUI: bridges getUI() calls to store setters
├── start-tui.ts               # TUI startup: dark mode, store, renderer
├── screen-registry.tsx         # Maps screen names to components + services
├── styles.ts                  # Colors, Icons, alignment enums
├── screens/                   # One file per screen — read for current set
├── primitives/                # Reusable layout components — read index.ts for exports
├── services/                  # Injectable service interfaces
└── components/
    └── TitleBar.tsx           # Top bar with version + feedback email

Ink rendering model

Ink is react-dom but for terminals. It uses Yoga (Facebook's Flexbox engine) for layout. Every <Box> is a flex container. All visible text MUST be inside <Text>.

BrowserInk
<div><Box>
<span><Text>
CSS / classNameProps directly on <Box> and <Text>
onClickuseInput() hook
window.innerWidthuseStdout().stdout.columns
scroll<Box overflow="hidden"> + manual offset
display: block<Box flexDirection="column">
display: flexDefault — every <Box> is already flex

Terminal compatibility

  • Small terminals: Check useStdout().stdout.columns and .rows
  • Piped input: Detect !process.stdin.isTTY and fall back to LoggingUI
  • CI environments: --ci flag uses LoggingUI (no TUI, no prompts)
  • Dark mode: start-tui.ts forces black background via ANSI escape codes
  • True black text: Use color="#000000" not color="black" (terminals render ANSI black as grey)
  • Ctrl+C: Ink handles via useApp().exit()

Reference files

© novuhq, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 6 other files (references) in .cursor/skills/ink-tui of novuhq/novu.

  • SKILL.md
  • references/ARCHITECTURE.md
  • references/INK-API.md
  • references/INKJS-UI.md
  • references/PATTERNS.md
  • references/PRIMITIVES.md
  • references/TERMINAL-COMPAT.md

Open the folder on GitHubat commit c4d3eda

Compare with similar skills

Ink Tui Wizard next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Ink Tui Wizard compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Ink Tui Wizard this skillnovuhq/novu40k—~1.9kAutomated safety check: PassMIT
Frontend Code ReviewProgrammerAnthony/Anything-Extract139—~957Automated safety check: PassMIT
Frontend Code ReviewProgrammerAnthony/Expert-Coding-Harness235—~614Automated safety check: PassMIT
Dokan Frontend Devgetdokan/dokan288—~1.9kAutomated safety check: PassNone
React Screenshot Recreatorbuildfastwithai/gen-ai-experiments785—~2.9kAutomated safety check: PassMIT
Oma Frontendfirst-fluke/oh-my-agent1.3k—~2.5kAutomated safety check: PassMIT

Similar skills

  • Frontend Code Review

    ProgrammerAnthony/Anything-Extract

    指导在项目中对前端代码(Next.js/React/TypeScript/Tailwind 等)进行结构、可维护性、性能与一致性审查,基于既定规则清单。适用于用户请求审查 .tsx/.ts/.js/.jsx 等前端文件或前端目录下的页面与组件。不用于后端代码(如 .py)。

    139 GitHub stars~957 tokensUpdated 5 mo ago
    Frontend & DesignAuto-check passed
  • Frontend Code Review

    ProgrammerAnthony/Expert-Coding-Harness

    A skill your agent uses when 用户需要审查前端代码(React/Vue/Next.js/TypeScript/Tailwind等)、检查代码质量、性能问题、可维护性、安全漏洞、最佳实践落地时。触发场景:前端代码评审、前端代码优化、React/Vue代码检查、TypeScript代码审查、前端性能优化、前端安全审计、前端代码规范检查。

    235 GitHub stars~614 tokensUpdated 5 mo ago
    Frontend & DesignAuto-check passed
  • Dokan Frontend Dev

    getdokan/dokan

    Add or modify Dokan frontend code (React, TypeScript, Vue, Tailwind).

    288 GitHub stars~1.9k tokensUpdated yesterday
    Frontend & DesignAuto-check passed
  • React Screenshot Recreator

    buildfastwithai/gen-ai-experiments

    Recreate a UI screenshot, mockup, or design image as production-quality React + TypeScript + Tailwind code with near-pixel-perfect visual fidelity.

    785 GitHub stars~2.9k tokensUpdated 18 days ago
    Frontend & DesignAuto-check passed
  • Oma Frontend

    first-fluke/oh-my-agent

    Frontend specialist for React, Next.js, TypeScript with FSD-lite architecture, shadcn/ui, and design system alignment.

    1.3k GitHub stars~2.5k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Redesign My Landingpage

    instructa/agent-skills

    Build, critique, and iterate high-converting marketing or product landing pages using React + Vite + TypeScript + Tailwind and shadcn/ui components, with all icons sourced from Iconify.

    139 GitHub stars~1.8k tokensUpdated 12 days ago
    Frontend & DesignAuto-check passed

More from novuhq/novu

All 28 skills in this repo
  • Design notification workflows the Novu way — choose channels, set severity, decide when a workflow is critical, configure digests, and route based on subscriber state.

    40k GitHub stars~2.6k tokensUpdated today
    Auto-check passed
  • Integrate Novu's in-app notification inbox into web applications.

    40k GitHub stars~5.2k tokensUpdated today
    Auto-check passed
  • Configure notification preferences in Novu at the workflow and subscriber level.

    40k GitHub stars~1.8k tokensUpdated today
    Auto-check passed
  • Create, update, search, and delete subscribers in Novu. An agent skill from novuhq/novu.

    40k GitHub stars~1.3k tokensUpdated today
    Auto-check passed
  • Trigger Novu notification workflows to send messages across email, SMS, push, chat, and in-app channels.

    40k GitHub stars~1.2k tokensUpdated today
    Auto-check passed
  • Testerarmy CLI

    novuhq/novu

    Use TesterArmy CLI to create, organize, and run dashboard-managed QA tests.

    40k GitHub stars~1.6k tokensUpdated today
    Auto-check passed

Questions about Ink Tui Wizard

What does Ink Tui Wizard do?

Build terminal user interfaces (TUIs) using Ink (React for CLIs) and @inkjs/ui with a reactive, session-driven wizard pattern. Ink Tui Wizard is an agent skill from novuhq/novu. Build terminal user interfaces (TUIs) using Ink (React for CLIs) and @inkjs/ui with a reactive, session-driven wizard pattern.

When should I use Ink Tui Wizard?

Ink Tui Wizard fits situations like: creating interactive CLI installation wizards; multi-step terminal applications in Node.js/TypeScript.

How do I install Ink Tui Wizard in Claude Code?

Run `npx skills add novuhq/novu --skill ink-tui-wizard -a claude-code`. Or copy the skill folder (.cursor/skills/ink-tui in novuhq/novu) into .claude/skills/ink-tui-wizard in your project. Claude Code loads it when a task matches its description.

How do I install Ink Tui Wizard in Codex?

Run `npx skills add novuhq/novu --skill ink-tui-wizard -a codex`. Or copy the skill folder (.cursor/skills/ink-tui in novuhq/novu) into .agents/skills/ink-tui-wizard in your project. Codex loads it when a task matches its description.

Can I use Ink Tui Wizard in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add novuhq/novu --skill ink-tui-wizard -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ink-tui-wizard, .gemini/skills/ink-tui-wizard, .github/skills/ink-tui-wizard and .opencode/skills/ink-tui-wizard in your project.

What does Ink Tui Wizard need to run?

Going by SKILL.md and its folder, Ink Tui Wizard needs the command-line tools its instructions call (pnpm). Our summary lists: Node.js. Compatibility (from SKILL.md): Requires Node.js 18+. Designed for Claude Code or similar coding agents..

Does Ink Tui Wizard access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Ink Tui Wizard safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Ink Tui Wizard use?

Ink Tui Wizard is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Ink Tui Wizard use?

About 1.9k tokens (SKILL.md is roughly 7.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 9.3k tokens, read only when the agent opens those files.

What are the alternatives to Ink Tui Wizard?

Skills that share tags, products or a category with Ink Tui Wizard: Frontend Code Review (ProgrammerAnthony/Anything-Extract, 139 stars), Frontend Code Review (ProgrammerAnthony/Expert-Coding-Harness, 235 stars), Dokan Frontend Dev (getdokan/dokan, 288 stars) and React Screenshot Recreator (buildfastwithai/gen-ai-experiments, 785 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Ink Tui Wizard?

novuhq (a GitHub organization) maintains it in novuhq/novu, which has 40,132 GitHub stars. The repository holds 28 skills in this directory. The repository was last updated on October 10, 2026.

Source: novuhq/novu on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.