How does it handle keyboard input conflicts?

The skill provides patterns for managing multiple useInput hooks, ensuring that input handlers are correctly enabled or disabled based on the active UI state.

Can it help with responsive CLI layouts?

Yes, it provides guides for using terminal size hooks to calculate dynamic heights and widths for responsive content display based on the user's window size.

How does this skill handle emoji rendering issues?

It includes specific width override patterns to fix common layout shifts caused by string-width variations in different terminal environments.

What is the primary focus of the cli-design skill?

It focuses on providing best practices and implementation patterns for creating terminal UIs using Ink.js within the Claude Code environment, covering architecture and common pitfalls.

Does it support testing for terminal components?

Yes, it includes documentation and patterns for designing tests for CLI UIs using the ink-testing-library.

Ink CLI UI Design

Name: Ink CLI UI Design
Author: akiojin

byakiojin

0•

Design Tools

Guides the design and implementation of sophisticated terminal user interfaces using Ink.js and React.

This skill provides specialized guidance for building robust terminal-based command line interfaces (CLIs) using Ink.js. It offers standardized patterns for component architecture, solves common terminal-specific pitfalls like emoji rendering and keyboard input conflicts, and ensures high performance through React optimization techniques. Ideal for developers creating interactive command-line tools that require complex layouts, responsive terminal sizing, and cross-platform input handling.

Key Features

01Performance optimization using React.memo and custom comparison functions for CLI environments

020 GitHub stars

03Solutions for terminal rendering issues like emoji width and Japanese character alignment

04Responsive terminal layout design with dynamic height and width calculations

05Standardized component architecture for CLI Screens, Parts, and Common elements

06Advanced keyboard input management and conflict resolution for useInput hooks

Use Cases

01Building unit and integration tests for CLI components using ink-testing-library

02Developing interactive setup wizards or dashboards for command-line tools

03Fixing layout and cursor issues in existing Ink.js based terminal applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add akiojin/skills cli-design

For use in Claude.ai and ChatGPT

Download Skill