Design terminal UI components for pi extensions using pi-tui and pi-coding-agent.
npx skills add https://github.com/mrclrchtr/SuPi --skill pi-tui-design
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
Provides a structured approach to design handcrafted terminal UI components for pi extensions, enabling consistent, visually cohesive, and accessible interfaces across apps and tools.
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.
Install and leverage the pi-tui design patterns by prototyping a new terminal UI component against the provided references and examples.
High-intent search queries and answers about installing and using this skill.
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.
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.
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.
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.
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.
tassiovaleConfigure a minimal terminal coding harness with providers, tools, and SDKs.
wpgauravGenerate accessible React UIs with shadcn/ui, Radix UI, and Tailwind CSS.
qol-toolsStandardize qol-tray UI systems for keyboard navigation and focus management.
kollaboraiCreate terminal UI styling with ANSI escape codes and the Kollab Agnoster design system.
