New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Tui Builder

by TheDecipherist in TheDecipherist/claude-code-mastery-project-starter-kit

A skill your agent uses when building or modifying an interactive terminal UI (TUI), especially with Ink + React on Node, or when hitting terminal-resize rendering bugs — ghost/repeated content, a…

MITAuto-check passed

Install Tui Builder

skills CLI
$ npx skills add TheDecipherist/claude-code-mastery-project-starter-kit --skill tui-builder -a claude-code

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

GitHub CLI
$ gh skill install TheDecipherist/claude-code-mastery-project-starter-kit tui-builder --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/TheDecipherist/claude-code-mastery-project-starter-kit.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/tui-builder .claude/skills/tui-builder && 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
tui-builder
GitHub stars
338
Token cost
~1.6k tokens
SKILL.md length
723 words
Files
1
Skills in repo
24
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when building or modifying an interactive terminal UI (TUI), especially with Ink + React on Node, or when hitting terminal-resize rendering bugs — ghost/repeated content, a…

  • Works in 3 steps: clearOnResize (entry point, registered… → Ink's internal handler (second) —… → setTermWidth (root component, third) —…
  • Modifying an interactive terminal UI (TUI)
  • SKILL.md covers Rule 1 — Render into the…, Rule 2 — Register the clear…, Rule 3 — Track terminal width… and Correct resize event order, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Tui Builder is an agent skill from TheDecipherist/claude-code-mastery-project-starter-kit. Use when building or modifying an interactive terminal UI (TUI), especially with Ink + React on Node, or when hitting terminal-resize rendering bugs — ghost/repeated content, a blank screen after resize, or a divider/layout that won't update width. Carries battle-tested resize rules Claude otherwise gets wrong. Not for plain non-interactive CLIs (flag parsing, scripts) with no full-screen rendering.

Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It works with React. The repository describes itself as: The definitive starting point for Claude Code projects. Based on Claude Code Mastery Guides V1-V5. The licence is MIT.

When your agent uses it

  • Modifying an interactive terminal UI (TUI)
  • Especially with Ink + React on Node
  • Hitting terminal-resize rendering bugs — ghost/repeated content
  • A blank screen after resize

Example prompts

  • “/tui-builder”

Workflow steps

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

  1. clearOnResize (entry point, registered first) — clears the screen, cursor to (0,0).
  2. Ink's internal handler (second) — recalculates layout with new dimensions, draws the full TUI onto the clean screen.
  3. setTermWidth (root component, third) — the state update triggers a second render; Ink diffs and updates only the width-dependent lines.

What it can do on your machine

Read from SKILL.md and the folder at commit 61fbb99. 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

    No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).

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

  • Network

    No URLs in SKILL.md.

    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.

Context cost

Tui Builder loads about 1.6k tokens when it runs. Until then it costs about 104 tokens; SKILL.md has 723 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~104
When it runs · the whole SKILL.md, loaded when a task matches
~1.6k

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 TheDecipherist/claude-code-mastery-project-starter-kit at commit 61fbb99, republished under its MIT licence (© TheDecipherist). 723 words, ~1,648 tokens.

Download SKILL.mdSave it as .claude/skills/tui-builder/SKILL.md (or your agent's skills folder).
name
tui-builder
description
Use when building or modifying an interactive terminal UI (TUI), especially with Ink + React on Node, or when hitting terminal-resize rendering bugs — ghost/repeated content, a blank screen after resize, or a divider/layout that won't update width. Carries battle-tested resize rules Claude otherwise gets wrong. Not for plain non-interactive CLIs (flag parsing, scripts) with no full-screen rendering.
when_to_use
- Building or modifying an interactive terminal UI (TUI), especially Ink + React on Node - Adding or fixing terminal-resize handling in a TUI - Debugging…

Building Terminal UIs (TUIs)

Battle-tested rules from shipping Ink + React TUIs. The deep stack documented here is Ink/React on Node; the underlying principles — render into the alternate screen, control resize-handler ordering, treat size as state — transfer to other TUI frameworks even when the exact escape codes differ.

The thing to get right, because it's gotten wrong every time, is terminal resize. Ink renders by diffing its previous output and repositioning the cursor, not by clearing and redrawing. On resize that model breaks three ways at once:

  • content Ink no longer "owns" stays visible
  • the cursor lands at an unknown position, so Ink's positioning math is off
  • a taller terminal re-reveals old lines that were previously offscreen

Every resize bug below is a variation of this one root cause.

Rule 1 — Render into the alternate screen buffer

Prevents: ghost content — old frames stacking up, the logo repeating, a scrollbar appearing on resize.

Why: Ink writes to the normal terminal buffer, which has scrollback. Shrink the window and the terminal shows scrollback; grow it and old output is still in the buffer at the now-visible positions. Ink overwrites from the cursor but can't erase content it no longer knows about. The alternate screen has no scrollback at all, so there's nothing to bleed in from.

Enter with \x1B[?1049h before render(), exit with \x1B[?1049l. Hide the cursor (\x1B[?25l) while you're in it — cleaner, and it avoids cursor flicker on re-renders.

typescript
// Before render():
process.stdout.write('\x1B[?1049h\x1B[?25l'); // enter alt screen, hide cursor
const restoreTerminal = () => process.stdout.write('\x1B[?25h\x1B[?1049l');
process.once('exit', restoreTerminal);

Always register the process.once('exit', restoreTerminal) handler so the terminal is restored even on crash. Skip it and you strand the user in alt-screen mode after the program exits.

Rule 2 — Register the clear handler in the entry point, BEFORE render()

Prevents: the blank screen after resize — everything disappears except the active-tab highlight until the user presses a key.

Why: Node fires resize listeners in registration order. If you put the clear in a useEffect, it registers after render() (effects run post-mount, and render() is where Ink registers its own handler). So on resize, Ink's handler fires first and draws the full TUI, then your clear fires second and wipes everything Ink just drew. Ink thinks the frame is already drawn, so it doesn't redraw until the next state change.

Register the clear in the entry point before render(), so it ends up first in the queue and Ink draws onto an already-clean screen.

typescript
// index.ts — register BEFORE render()
const clearOnResize = () => process.stdout.write('\x1B[2J\x1B[H');
process.stdout.on('resize', clearOnResize);

// Now call render() — Ink registers its handler here, AFTER ours
const { waitUntilExit } = render(...);

// Clean up on exit
process.stdout.off('resize', clearOnResize);
Show full SKILL.md (333 more words)Show less

Rule 3 — Track terminal width as React state

Prevents: the stale divider — width-dependent content (dividers, layout math) keeps its old width after resize until the user presses a key.

Why: Values computed from process.stdout.columns are read once at render time. After resize the columns value updates, but nothing triggers a React re-render. Make width state so the change propagates.

The resize handler in the root component does exactly one thing: update state. No escape codes, no clearing in here (the clear lives in the entry point, Rule 2).

typescript
// App.tsx
const [termWidth, setTermWidth] = useState(process.stdout.columns ?? 80);

useEffect(() => {
  const onResize = () => setTermWidth(process.stdout.columns ?? 80);
  process.stdout.on('resize', onResize);
  return () => { process.stdout.off('resize', onResize); };
}, []);

// Use termWidth for anything that depends on terminal width
const divider = '─'.repeat(termWidth);

This handler registers after Ink's (correct), fires third, and triggers a second render. Ink diffs and updates only the changed line.

Correct resize event order

Order is the whole game. When it's right:

  1. clearOnResize (entry point, registered first) — clears the screen, cursor to (0,0).
  2. Ink's internal handler (second) — recalculates layout with new dimensions, draws the full TUI onto the clean screen.
  3. setTermWidth (root component, third) — the state update triggers a second render; Ink diffs and updates only the width-dependent lines.

Never

  • Never use \x1Bc (RIS, reset to initial state). It resets the entire terminal — colors, font, cursor settings — and behaves differently across emulators. Use \x1B[2J\x1B[H (clear + cursor home).
  • Never put the clear in a useEffect. Effects run after mount, after Ink registers its handlers, so your clear will always fire after Ink draws.
  • Never write escape codes inside a component's render path (outside effects). They fire during React's render phase and fight Ink's output buffer.
  • Never split resize logic across multiple conflicting handlers. The clear lives in the entry point; state updates live in the root component. One job each, or the ordering becomes fragile.

New-TUI checklist

  • Alternate screen buffer (\x1B[?1049h / \x1B[?1049l) entered from the entry point
  • Clear handler (\x1B[2J\x1B[H) registered in the entry point BEFORE render()
  • Terminal width tracked as state in the root component
  • Resize handler updates state only — no escape codes
  • process.once('exit', ...) restores the terminal on exit and on crash
  • Resize handlers cleaned up (process.stdout.off(...)) when the TUI exits

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

Files

Just SKILL.md in .claude/skills/tui-builder of TheDecipherist/claude-code-mastery-project-starter-kit.

Open the folder on GitHubat commit 61fbb99

Compare with similar skills

Tui Builder 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.

Tui Builder compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Tui Builder this skillTheDecipherist/claude-code-mastery-project-starter-kit338—~1.6kAutomated safety check: PassMIT
Web Artifacts Builderanthropics/skills180k41 repos~769Automated safety check: PassApache-2.0
Vercel Composition Patternssupabase/supabase111k59 repos~726Automated safety check: PassMIT
React Doctormakeplane/plane61k12 repos~657Automated safety check: PassAGPL-3.0
React Router Developmentremix-run/react-router57k1 repos~1.5kAutomated safety check: PassMIT
React UI State PatternsChrisWiles/claude-code-showcase6.1k8 repos~1.6kAutomated safety check: PassNone

Similar skills

  • Web Artifacts Builder

    anthropics/skills

    Official

    Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.

    180k GitHub starsUsed in 41 repos~769 tokens
    Frontend & DesignAuto-check passed

  • Vercel Composition Patterns

    supabase/supabase

    Official

    React composition patterns that scale. An agent skill from supabase/supabase.

    111k GitHub starsUsed in 59 repos~726 tokens
    DevelopmentAuto-check passed

  • React Doctor

    makeplane/plane

    Scans React code for lint, accessibility, bundle size and architecture issues, reports a health score and checks that changes do not lower it.

    61k GitHub starsUsed in 12 repos~657 tokens
    Frontend & DesignAuto-check passed

  • React Router Development

    remix-run/react-router

    Guides work on React Router apps by first identifying whether the app uses Framework, Data or Declarative mode, then loading the matching reference and the installed package docs.

    57k GitHub starsUsed in 1 repo~1.5k tokens
    Frontend & DesignAuto-check passed

  • React UI State Patterns

    ChrisWiles/claude-code-showcase

    Sets patterns for React interfaces: when to show loading spinners or skeletons, how to surface errors, how to disable buttons during async work and how to handle empty lists.

    6.1k GitHub starsUsed in 8 repos~1.6k tokens
    Frontend & DesignAuto-check passed

  • Stitch to Remotion Walkthrough Videos

    google-labs-code/stitch-skills

    Official

    Builds walkthrough videos from Stitch design projects using Remotion, with transitions, zoom effects and text overlays on each screen.

    8.4k GitHub starsUsed in 6 repos~3.2k tokens
    Media & CreativeAuto-check: notes

More from TheDecipherist/claude-code-mastery-project-starter-kit

All 24 skills in this repo

  • Create Service

    TheDecipherist/claude-code-mastery-project-starter-kit

    Scaffold a new microservice that follows the project's server/handlers/adapters architecture.

    338 GitHub stars~1.8k tokensUpdated 3 mo ago
    Auto-check: notes

  • CSS Structure

    TheDecipherist/claude-code-mastery-project-starter-kit

    Where CSS should live. An agent skill from TheDecipherist/claude-code-mastery-project-starter-kit.

    338 GitHub stars~1k tokensUpdated 3 mo ago
    Auto-check passed

  • Docker

    TheDecipherist/claude-code-mastery-project-starter-kit

    Production Docker best practices for writing Dockerfiles, Compose files, and Swarm stacks.

    338 GitHub stars~1.6k tokensUpdated 3 mo ago
    Auto-check: notes

  • Docker Swarm

    TheDecipherist/claude-code-mastery-project-starter-kit

    Production Docker Swarm deployment rules: what changes when a compose file goes from a single node to a multi-node Swarm.

    338 GitHub stars~1.8k tokensUpdated 3 mo ago
    Auto-check passed

  • Mongodb Backups

    TheDecipherist/claude-code-mastery-project-starter-kit

    Production MongoDB backup and restore practices that the documentation gets wrong.

    338 GitHub stars~1.3k tokensUpdated 3 mo ago
    Auto-check passed

  • Mongodb Replica Sets

    TheDecipherist/claude-code-mastery-project-starter-kit

    Production MongoDB replica-set operation: topology, durability, host tuning, and the container-specific gotchas Claude gets wrong.

    338 GitHub stars~1.6k tokensUpdated 3 mo ago
    Auto-check passed

Works with

Questions about Tui Builder

What does Tui Builder do?

A skill your agent uses when building or modifying an interactive terminal UI (TUI), especially with Ink + React on Node, or when hitting terminal-resize rendering bugs — ghost/repeated content, a…. Tui Builder is an agent skill from TheDecipherist/claude-code-mastery-project-starter-kit. Use when building or modifying an interactive terminal UI (TUI), especially with Ink + React on Node, or when hitting terminal-resize rendering bugs — ghost/repeated content, a blank screen after resize, or a divider/layout that won't update width.

When should I use Tui Builder?

Tui Builder fits situations like: modifying an interactive terminal UI (TUI); especially with Ink + React on Node; hitting terminal-resize rendering bugs — ghost/repeated content; A blank screen after resize.

How do I install Tui Builder in Claude Code?

Run `npx skills add TheDecipherist/claude-code-mastery-project-starter-kit --skill tui-builder -a claude-code`. Or copy the skill folder (.claude/skills/tui-builder in TheDecipherist/claude-code-mastery-project-starter-kit) into .claude/skills/tui-builder in your project. Claude Code loads it when a task matches its description.

How do I install Tui Builder in Codex?

Run `npx skills add TheDecipherist/claude-code-mastery-project-starter-kit --skill tui-builder -a codex`. Or copy the skill folder (.claude/skills/tui-builder in TheDecipherist/claude-code-mastery-project-starter-kit) into .agents/skills/tui-builder in your project. Codex loads it when a task matches its description.

Can I use Tui Builder 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 TheDecipherist/claude-code-mastery-project-starter-kit --skill tui-builder -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/tui-builder, .gemini/skills/tui-builder, .github/skills/tui-builder and .opencode/skills/tui-builder in your project.

What does Tui Builder need to run?

SKILL.md names no scripts, command-line tools or credentials: Tui Builder is instructions for the agent only.

Does Tui Builder 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 Tui Builder 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 Tui Builder use?

Tui Builder is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Tui Builder use?

About 1.6k tokens (SKILL.md is roughly 6.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Tui Builder?

Skills that share tags, products or a category with Tui Builder: Web Artifacts Builder (anthropics/skills, 180k stars), Vercel Composition Patterns (supabase/supabase, 111k stars), React Doctor (makeplane/plane, 61k stars) and React Router Development (remix-run/react-router, 57k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Tui Builder?

TheDecipherist (a GitHub user) maintains it in TheDecipherist/claude-code-mastery-project-starter-kit, which has 338 GitHub stars. The repository holds 24 skills in this directory. The repository was last updated on June 29, 2026.

Source: TheDecipherist/claude-code-mastery-project-starter-kit on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.