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

0•

디자인 도구

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.

주요 기능

01Standardized component architecture for Screens, Parts, and Common UI elements

02Performance optimization techniques using React.memo and custom hooks

03Solutions for terminal-specific rendering issues like emoji width and layout breaking

04Advanced multi-screen navigation and state management patterns

05Comprehensive testing patterns utilizing ink-testing-library

060 GitHub stars

사용 사례

01Implementing responsive CLI dashboards that adapt to terminal window resizing

02Creating interactive developer tools with complex, multi-view terminal layouts

03Developing reusable UI component libraries for consistent internal CLI applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add akiojin/skills inkjs-design

For use in Claude.ai and ChatGPT

Download Skill