MCPInstall

tui-fundamentals

This skill should be used when the user asks to design, create, choose, modernize, or review a terminal UI, text user interface, curses app, dashboard, wizard, REPL shell, prompt flow, or CLI with interactive screens. PROACTIVELY activate for: TUI architecture, terminal-ui design, framework selection, curses vs modern framework, full-screen vs inline UI, app state modeling, widget composition, command palette, keyboard-first workflow, terminal dashboard, interactive CLI UX, and cross-platform terminal product planning. Provides: architecture patterns, framework decision rules, UX guardrails, scope boundaries, and production readiness checklists.

Installs
279
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/josiahsiegel/claude-plugin-marketplace --skill tui-fundamentals
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads tui-fundamentals automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

TUI Fundamentals, Architecture, and Framework Selection

Use this skill when the task is about the shape of the terminal product: what kind of TUI to build, which abstraction to use, how to organize state, or whether a full-screen terminal UI is the right answer.

First decision: is a TUI appropriate?

Prefer a rich TUI when users need continuous visual feedback, multi-step navigation, keyboard-driven exploration, selection among many items, or a dashboard-like control surface. Prefer a line-oriented CLI, prompts, or plain output when the flow is short, scriptable, primarily automation-focused, or likely to be used by screen readers and CI systems.

A production terminal product often ships both:

  • A scriptable CLI surface for automation, accessibility, logs, and non-TTY use.
  • An optional TUI for exploration, monitoring, bulk selection, or guided workflows.

Architecture rules

  1. Separate model, update, and view. Business state should not print directly to the terminal. Rendering consumes state; input produces events; update logic transforms state.
  2. Treat terminal size as input. Layout must be recomputed from width and height on every resize. Never bake in one terminal size.
  3. Own terminal lifecycle in one place. Raw mode, alternate screen, mouse, focus, keyboard protocols, and cleanup should be centralized.
  4. Make every action keyboard-operable. Mouse support is an enhancement, not the primary navigation model.
  5. Design for degradation. TERM=dumb, non-TTY output, missing color, Windows console differences, tmux/screen, SSH, and CI should have clear behavior.
  6. Avoid hidden global terminal writes. Logs, progress, and background task output must not corrupt the screen.

Framework selection quick matrix

NeedStrong default
Rust full-screen app with precise renderingRatatui + Crossterm
Python product-grade app with widgets, CSS, async workersTextual
Python rich output, progress, tables, markdown, logsRich
Python REPL, shell, completions, complex prompt inputprompt_toolkit
Classic dependency-light Unix TUIcurses/ncurses
Go Elm-style app with composable commandsBubble Tea + Bubbles + Lip Gloss
Go batteries-included forms/tables/tree viewstview over tcell
Go portable low-level cell enginetcell
React-style terminal components in NodeInk
Node DOM-like full-screen widgetsBlessed
.NET full-screen viewsTerminal.Gui
.NET rich CLI output and promptsSpectre.Console

Read references/framework-selection.md before committing to a framework in a new project.

Product design checklist

  • Define the primary user journey in one sentence.
  • Decide whether the app is full-screen, inline, prompt-based, or hybrid.
  • List required environments: Windows Terminal, classic conhost, macOS Terminal, iTerm2, GNOME Terminal, Alacritty, SSH, tmux/screen, CI, and logs.
  • Define minimum terminal dimensions and the small-screen fallback.
  • Define exit keys, destructive confirmation rules, and recovery instructions.
  • Define non-interactive equivalents for every essential action.
  • Decide how help is exposed: footer hints, ?, command palette, --help, docs.

Failure modes

  • Building a full-screen UI for a workflow that should be scriptable.
  • Choosing a low-level escape-sequence approach when a framework already solves layout, input, cleanup, and testing.
  • Mixing business logic with terminal writes, making tests brittle and rendering inconsistent.
  • Ignoring screen-reader users, CI, pipes, and TERM=dumb until late.
  • Assuming color, Unicode icons, Nerd Fonts, or mouse support are always available.

Reference files

  • references/framework-selection.md - Detailed ecosystem comparison and decision tree.
  • references/tui-architecture.md - State, event, lifecycle, logging, and distribution patterns.

FAQ

What does the tui-fundamentals skill do?

This skill should be used when the user asks to design, create, choose, modernize, or review a terminal UI, text user interface, curses app, dashboard, wizard, REPL shell, prompt flow, or CLI with interactive screens. PROACTIVELY activate for: TUI architecture, terminal-ui design, framework selection, curses vs modern framework, full-screen vs inline UI, app state modeling, widget composition, command palette, keyboard-first workflow, terminal dashboard, interactive CLI UX, and cross-platform terminal product planning. Provides: architecture patterns, framework decision rules, UX guardrails, scope boundaries, and production readiness checklists.

How do I install tui-fundamentals?

Run npx skills add https://github.com/josiahsiegel/claude-plugin-marketplace --skill tui-fundamentals in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/tui-fundamentals/ (personal) or .claude/skills/tui-fundamentals/ (project).

Which AI agents can use tui-fundamentals?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is tui-fundamentals safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains tui-fundamentals?

It is published by josiahsiegel in josiahsiegel/claude-plugin-marketplace. It has 279 recorded installs.

More from josiahsiegel/claude-plugin-marketplace

View all →

tailwindcss-advanced-layouts

josiahsiegel/claude-plugin-marketplace

Tailwind CSS advanced layout techniques including CSS Grid and Flexbox patterns. PROACTIVELY activate for: (1) building complex layouts with CSS Grid, (2) grid-template-areas via Tailwind v4 arbitrary values, (3) responsive grid (grid-cols-, auto-fit, minmax), (4) Flexbox patterns (flex-1, flex-grow, gap), (5) sticky headers and footers, (6) holy grail layout, (7) masonry-style layouts, (8) container queries (@container) with Tailwind, (9) subgrid usage, (10) aspect-ratio utilities, (11) magazine-style multi-column layouts. Provides: Grid template recipes, container-query patterns, holy-grail templates, masonry alternatives, and aspect-ratio examples.

Frontend & Design8.1K installs

tailwindcss-animations

josiahsiegel/claude-plugin-marketplace

Tailwind CSS animations and transitions including built-in utilities and custom keyframes. PROACTIVELY activate for: (1) animate- utilities (spin, ping, pulse, bounce), (2) custom @keyframes via @theme animate, (3) transition utilities (transition, duration, ease), (4) transforms (scale, rotate, translate) with transition, (5) prefers-reduced-motion: reduce, (6) Framer Motion / Motion One integration with Tailwind, (7) CSS scroll-driven animations (animation-timeline), (8) view transitions API with Tailwind, (9) hover, focus, group-hover transitions, (10) staggered list animations. Provides: animation utility reference, custom keyframe examples, reduced-motion pattern, Framer Motion integration, and scroll-driven animation recipes.

Frontend & Design2.4K installs

tailwindcss-mobile-first

josiahsiegel/claude-plugin-marketplace

Mobile-first responsive design patterns with Tailwind CSS v4 (2025-2026). PROACTIVELY activate for: (1) mobile-first design with Tailwind breakpoints (sm:, md:, lg:, xl:, 2xl:), (2) responsive utility ordering (default = mobile, then breakpoints), (3) responsive typography (text-base sm:text-lg lg:text-xl), (4) responsive grids and flexbox, (5) hide/show across breakpoints (hidden md:block), (6) max- breakpoints for desktop-down overrides, (7) container queries (@container) for component-level responsiveness, (8) safe-area insets and notch handling, (9) landscape vs portrait orientation, (10) touch vs hover (hover: with @media). Provides: breakpoint reference, mobile-first patterns, container-query examples, safe-area recipes, and touch/hover handling.

Mobile2.1K installs

powershell-master

josiahsiegel/claude-plugin-marketplace

Complete PowerShell expertise system across ALL platforms (Windows/Linux/macOS). PROACTIVELY activate for: (1) ANY PowerShell task (scripts/modules/cmdlets), (2) CI/CD automation (GitHub Actions/Azure DevOps/Bitbucket), (3) Cross-platform scripting, (4) Module discovery and management (PSGallery), (5) Azure/AWS/Microsoft 365 automation, (6) Script debugging and optimization, (7) Best practices and security. Provides: PowerShell 7+ features, popular module expertise (Az, Microsoft.Graph, PnP, AWS Tools), PSGallery integration, platform-specific guidance, CI/CD pipeline patterns, cmdlet syntax mastery, and production-ready scripting patterns. Ensures professional-grade, cross-platform PowerShell automation following industry standards.

DevOps & Cloud1.1K installs

docker-best-practices

josiahsiegel/claude-plugin-marketplace

Comprehensive Docker best practices for images, containers, and production deployments. PROACTIVELY activate for: (1) writing production-ready Dockerfiles, (2) multi-stage builds for lean images, (3) base image selection (distroless, alpine, scratch, slim), (4) layer caching and ordering, (5) .dockerignore hygiene, (6) HEALTHCHECK and graceful shutdown, (7) non-root user and least-privilege patterns, (8) ENV vs ARG and secret handling, (9) tag/digest pinning and reproducibility, (10) Compose for local development. Provides: Dockerfile templates by language, image-size optimization checklist, .dockerignore template, HEALTHCHECK patterns, and Compose dev-stack examples.

DevOps & Cloud938 installs

git-master

josiahsiegel/claude-plugin-marketplace

Complete Git expertise system for ALL git operations. PROACTIVELY activate for: (1) ANY Git task (basic/advanced/dangerous), (2) Repository management, (3) Branch strategies and workflows, (4) Conflict resolution, (5) History rewriting/recovery, (6) Platform-specific operations (GitHub/Azure DevOps/Bitbucket), (7) Advanced commands (rebase/cherry-pick/filter-repo). Provides: complete Git command reference, safety guardrails for destructive operations, platform best practices, workflow strategies, reflog recovery techniques, and expert guidance for even the most risky operations. Always asks user preference for automatic commits vs manual control.

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs