AgentSkillsCN

ink

使用 React 构建命令行应用程序。当您需要创建终端界面、处理键盘输入,或利用 React 组件构建交互式命令行工具时,可使用此功能。支持 Flexbox 布局、文本样式设置、焦点管理以及无障碍访问功能。

SKILL.md
--- frontmatter
name: ink
description: Build CLI applications using React. Use when creating terminal UIs, handling keyboard input, or building interactive command-line tools with React components. Supports flexbox layouts, text styling, focus management, and accessibility.

Ink - React for CLIs

React for CLIs. Build and test your CLI output using components.

Ink provides the same component-based UI building experience that React offers in the browser, but for command-line apps. It uses Yoga for Flexbox layouts in the terminal.

Important: All text must be wrapped in a <Text> component.

Quick Example

jsx
import {render, Text, Box} from 'ink';

render(
	<Box borderStyle="round" padding={1}>
		<Text color="green">Hello World</Text>
	</Box>
);

Components

  • <Text> - Display text with styling (color, bold, italic, underline, etc.)
  • <Box> - Flexbox container for layouts
  • <Newline> - Insert newline characters
  • <Spacer> - Flexible space that expands to fill available space
  • <Static> - Permanently render output above everything else (for logs, completed tasks)
  • <Transform> - Transform string representation before output

Hooks

Interaction

Lifecycle & Streams

Accessibility

API

Guides

Third-Party Components

See references/third-party.md for a comprehensive list of community components including:

  • Text inputs, spinners, select menus
  • Progress bars, tables, charts
  • Markdown rendering, syntax highlighting
  • And many more