pi-tui-design

Design terminal UI components for pi extensions using pi-tui and pi-coding-agent.

54|3|Updated Apr 13, 2026

Search Tags:#design #patterns #widgets #tui #terminal-ui #pi

Ready to run

npx skills add https://github.com/mrclrchtr/SuPi --skill pi-tui-design

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: pi-tui-design
Source: https://github.com/mrclrchtr/SuPi/tree/main/.agents/skills/pi-tui-design
Command: npx skills add https://github.com/mrclrchtr/SuPi --skill pi-tui-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provides a structured approach to design handcrafted terminal UI components for pi extensions, enabling consistent, visually cohesive, and accessible interfaces across apps and tools.

Core Features & Use Cases

Guides using the pi-tui and pi-coding-agent toolkits to build dialogs, dashboards, overlays, widgets, and other TUI surfaces. Includes patterns and practical examples such as Selection Dialog, Status + Widget, Loader with Cancel, Settings Toggles, Custom Tool Rendering, Custom Footer, and Vim Modal Editor. Emphasizes theming with tokens, color discipline, keyboard conventions, spatial layout, and component contracts to ensure maintainable design across extensions.

Quick Start

Install and leverage the pi-tui design patterns by prototyping a new terminal UI component against the provided references and examples.

Frequently Asked Questions about pi-tui-design

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

FAQPage Schema

What are the best patterns for building terminal UI components for pi extensions?▼

Building terminal UI components for pi involves using pi-tui and pi-coding-agent toolkits to construct dialogs, dashboards, overlays, and widgets with consistent theme tokens, spacing, and keyboard navigation.

How do I design accessible keyboard navigation in terminal UIs?▼

Accessible keyboard navigation in terminal UIs is achieved by following enforced keyboard conventions and component contracts provided by pi-tui design patterns, ensuring maintainable and consistent interaction across extensions.

Does pi-tui support responsive layouts across different terminal sizes?▼

Yes, pi-tui supports responsive layouts across terminal sizes by enforcing spatial layout rules and design tokens that ensure interfaces remain visually cohesive and accessible across varying terminal dimensions.

Can I use existing widgets like SelectList and SettingsList when crafting TUI interfaces?▼

Yes, you can use existing widgets like SelectList, SettingsList, BorderedLoader, and CustomEditor when crafting TUI interfaces, as the design workflow enforces leveraging available components to ensure visual cohesion and accessibility.

How do I apply theme tokens and color discipline when building terminal dashboards?▼

Applying theme tokens and color discipline when building terminal dashboards involves using the structured delivery surface workflow and component contracts from pi-tui to maintain visual consistency across apps and tools.