skills.rest
Smarty-Pants-Inc
Smarty-Pants-IncOFFICIAL
Explore all skills by this author →
GitHub

tuimorphic

Reproduce the tuimorphic TUI design language across terminal-based interfaces including panels, tables, and headers.

1|Updated Dec 15, 2025
Search Tags:#design-patterns#data-table#color-palettes#terminal-ui#Textual#tuimorphic#embedded-ui
One-click install
npx skills add https://github.com/Smarty-Pants-Inc/tui-skill --skill tuimorphic
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tuimorphic
Source: https://github.com/Smarty-Pants-Inc/tui-skill/tree/main/skills/tuimorphic
Command: npx skills add https://github.com/Smarty-Pants-Inc/tui-skill --skill tuimorphic

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires textual, pillow, cairosvg, rich, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps designers create consistent, modern TUIs using the tuimorphic style across embedded and fullscreen contexts, enabling predictable visuals and interactions.

Core Features & Use Cases

  • Style-first design language with soft-rounded containers, layered depth, low-contrast surfaces, and warm↔cool accents.
  • Applies to full app shells, single panels, tables, and embedded panels; supports header bars, tab strips, and footer composers.
  • Use case: restyle or design a new TUI screen to look like Bagels/Calcure/Claude Code/Droid.

Quick Start

Design a simple embedded tuimorphic panel with a rounded card, a 3-column table, and a persistent footer to illustrate the style.

Frequently Asked Questions about tuimorphic

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design a terminal UI with soft-rounded containers and layered depth?▼

To design a terminal UI with soft-rounded containers and layered depth, apply the tuimorphic design language to build consistent visuals using low-contrast surfaces and warm↔cool accents across embedded and fullscreen contexts.

Can I use Textual to build embedded panels and data tables with a consistent style?▼

Yes, you can use Textual to build embedded panels and data tables. The tuimorphic style applies to single panels, 3-column tables, and embedded contexts, ensuring predictable visuals and interactions within Textual applications.

What is the tuimorphic design language for terminal applications?▼

The tuimorphic design language for terminal applications is a style-first approach featuring soft-rounded containers, layered depth, low-contrast surfaces, and warm↔cool accents to create modern TUIs resembling apps like Bagels or Claude Code.

How do I restyle an existing TUI screen to match the Calcure or Claude Code aesthetic?▼

To restyle an existing TUI screen to match the Calcure or Claude Code aesthetic, apply the tuimorphic style to implement full app shells, header bars, tab strips, and footer composers for a modern, consistent terminal appearance.

Do I need Pillow and CairoSVG to implement color palettes and design patterns in a TUI?▼

Yes, Pillow and CairoSVG are required dependencies. Along with Textual and Rich, they support the underlying processing logic needed to reproduce the tuimorphic design patterns, color palettes, and visual evaluation harness.

Are there limitations when applying low-contrast surfaces to fullscreen terminal app shells?▼

When applying low-contrast surfaces to fullscreen terminal app shells, predictability relies on strict adherence to the tuimorphic design language. An automated rubric-based evaluation harness is included to verify visual and interaction consistency.

Related Skills

Explore More Design & Creative Skills→
compozycompozy
2.5k

tui-design

Standardize terminal UI design across Ratatui, Ink, Textual, and Bubble Tea.

Official
Advanced
addisualemuaddisualemu

expo-ui-agent

Generate and modify Expo screens and UI components with NativeWind styling.

Community
Intermediate
oornneryoornnery

rich

Format terminal output with Rich tables, panels, and live rendering.

Community
Advanced
vladm3105vladm3105
16

charts_flow

Generate Mermaid architecture diagrams and embed SVG previews in technical documents.

Community
Advanced