How does this skill handle emoji width issues in the terminal?

It includes specific icon width override patterns to fix misalignments caused by how different terminals and libraries (like string-width) calculate the space emojis take up.

Is testing covered in this skill?

Yes, it includes patterns for using ink-testing-library to write unit and integration tests for your terminal components.

What is the primary benefit of using this Ink.js skill?

It provides a standardized approach to building CLI apps with React, solving common terminal-specific problems like input conflicts and layout issues that are often difficult to debug manually.

Does it support complex navigation within a CLI?

Yes, it provides patterns for 'Screen' components and stack-based navigation to manage multiple views within a single terminal session.

Can I use this for performance-heavy CLI applications?

Absolutely. It includes guidance on using React.memo and custom comparators to minimize terminal re-renders, which is critical for smooth CLI performance.

Ink.js CLI UI Designer

Name: Ink.js CLI UI Designer
Author: akiojin

byakiojin

デザインツール

Build sophisticated, responsive terminal user interfaces using React-based Ink.js patterns and best practices.

概要

The Ink.js CLI UI Designer skill provides a comprehensive framework for developing professional command-line interfaces with React. It offers standardized patterns for component architecture (Screens, Parts, and Common inputs), reliable fixes for common CLI pitfalls like emoji width misalignment and input conflicts, and advanced techniques for multi-screen navigation and terminal-responsive layouts. This skill ensures your terminal-based tools are performant, accessible, and maintainable by leveraging proven implementation patterns and testing strategies.

主な機能

Standardized component architecture for Screens, Parts, and Common UI elements
Performance optimization techniques using React.memo and custom hooks
Solutions for terminal-specific rendering issues like emoji width and layout breaking
Advanced multi-screen navigation and state management patterns
Comprehensive testing patterns utilizing ink-testing-library
0 GitHub stars

ユースケース

Implementing responsive CLI dashboards that adapt to terminal window resizing
Creating interactive developer tools with complex, multi-view terminal layouts
Developing reusable UI component libraries for consistent internal CLI applications

概要

主な機能

Standardized component architecture for Screens, Parts, and Common UI elements
Performance optimization techniques using React.memo and custom hooks
Solutions for terminal-specific rendering issues like emoji width and layout breaking
Advanced multi-screen navigation and state management patterns
Comprehensive testing patterns utilizing ink-testing-library
0 GitHub stars

ユースケース

Implementing responsive CLI dashboards that adapt to terminal window resizing
Creating interactive developer tools with complex, multi-view terminal layouts
Developing reusable UI component libraries for consistent internal CLI applications