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

デザインツール

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.

主な機能

Performance optimization using React.memo and custom comparison functions for CLI environments
0 GitHub stars
Solutions for terminal rendering issues like emoji width and Japanese character alignment
Responsive terminal layout design with dynamic height and width calculations
Standardized component architecture for CLI Screens, Parts, and Common elements
Advanced keyboard input management and conflict resolution for useInput hooks

ユースケース

Building unit and integration tests for CLI components using ink-testing-library
Developing interactive setup wizards or dashboards for command-line tools
Fixing layout and cursor issues in existing Ink.js based terminal applications

概要

主な機能

Performance optimization using React.memo and custom comparison functions for CLI environments
0 GitHub stars
Solutions for terminal rendering issues like emoji width and Japanese character alignment
Responsive terminal layout design with dynamic height and width calculations
Standardized component architecture for CLI Screens, Parts, and Common elements
Advanced keyboard input management and conflict resolution for useInput hooks

ユースケース

Building unit and integration tests for CLI components using ink-testing-library
Developing interactive setup wizards or dashboards for command-line tools
Fixing layout and cursor issues in existing Ink.js based terminal applications